<script lang="ts">
    import { getLocale } from '$lib/paraglide/runtime'
    import { m } from '$lib/paraglide/messages.js'
    import LexicalRenderer from '$lib/components/ui/LexicalRenderer.svelte'

    let { data } = $props()
    const locale = getLocale()

    function formatDate(iso: string) {
        return new Date(iso).toLocaleDateString(locale || 'de-DE', {
            year: 'numeric',
            month: 'long',
            day: 'numeric',
        })
    }

    function formatAuthor(a: { firstName?: string; lastName: string }) {
        return a.firstName ? `${a.lastName}, ${a.firstName}` : a.lastName
    }

    function formatReference(ref: any): string {
        const authors = ref.authors?.map(formatAuthor).join('; ') ?? ''
        const year = ref.year ? ` (${ref.year})` : ''
        const title = ref.title ?? ''

        switch (ref.type) {
            case 'book':
                return `${authors}${year}: ${title}. ${ref.place ? ref.place + ': ' : ''}${ref.publisher ?? ''}.`
            case 'chapter':
                return `${authors}${year}: ${title}. In: ${ref.editors ? ref.editors + ' (Hrsg.): ' : ''}${ref.bookTitle ?? ''}. ${ref.place ? ref.place + ': ' : ''}${ref.publisher ?? ''}${ref.pages ? ', S. ' + ref.pages : ''}.`
            case 'journal':
                return `${authors}${year}: ${title}. In: ${ref.journal ?? ''}${ref.volume ? ', Bd. ' + ref.volume : ''}${ref.issue ? ', H. ' + ref.issue : ''}${ref.pages ? ', S. ' + ref.pages : ''}.${ref.doi ? ' DOI: ' + ref.doi : ''}`
            case 'thesis':
                return `${authors}${year}: ${title}. ${ref.thesisType === 'phd' ? 'Dissertation' : ref.thesisType === 'master' ? 'Masterarbeit' : ref.thesisType === 'habil' ? 'Habilitationsschrift' : 'Bachelorarbeit'}. ${ref.institution ?? ''}.`
            case 'archive':
                return `${ref.archiveCollection ?? ''}${ref.title ? ': ' + title : ''}.`
            case 'website':
                return `${authors}${year}: ${title}.${ref.url ? ' URL: ' + ref.url : ''}`
            default:
                return `${authors}${year}: ${title}.${ref.note ? ' ' + ref.note : ''}`
        }
    }
</script>

<div class="max-w-2xl mx-auto px-4 py-12">
    <a href="/{locale}/artikel" class="text-sm text-brand hover:text-[#0f4f70] transition mb-8 block">← {m.back()}</a>

    <h1 class="text-4xl font-bold mb-2">{data.artikel.title}</h1>
    <p class="text-gray-400 text-sm mb-8">{formatDate(data.artikel.publishedAt)}</p>

    {#if data.artikel.excerpt}
        <blockquote class="border-l-4 border-brand/40 pl-4 italic text-gray-600 mb-8">
            {data.artikel.excerpt}
        </blockquote>
    {/if}

    {#if data.artikel.featuredImage}
        <figure class="mb-8">
            <img
                    src={data.artikel.featuredImage.url}
                    alt={data.artikel.featuredImage.alt ?? data.artikel.title}
                    class="w-full"
            />
        </figure>
    {/if}

    <article class="prose-lg max-w-none">
        <LexicalRenderer nodes={data.artikel.content.root.children} />
    </article>

    {#if data.artikel.references?.length}
        <section class="mt-12 pt-8 border-t border-gray-200">
            <h2 class="text-xl font-semibold mb-4">{ m.article_references() }</h2>
            <ol class="flex flex-col gap-3 text-sm text-gray-700 list-decimal list-outside pl-5">
                {#each data.artikel.references as ref}
                    <li>
                        {formatReference(ref.source)}
                            {#if ref.pages}
                                <span class="text-gray-500">S. {ref.pages}</span>{/if}{#if ref.note} <span class="text-gray-400">— {ref.note}</span>
                            {/if}
                    </li>
                {/each}
            </ol>
        </section>
    {/if}
</div>