<script lang="ts">
    export let data;
    const { person, documents } = data;
</script>

<div class="max-w-4xl mx-auto py-10 px-4">

    <!-- Back Link -->
    <div class="mb-6">
        <a href="/persons" class="inline-flex items-center text-xs font-bold uppercase tracking-widest text-gray-500 hover:text-brand-navy transition-colors group">
            <svg class="w-4 h-4 mr-2 transform group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
            Zurück zur Übersicht
        </a>
    </div>

    <!-- Header / Metadata Card -->
    <div class="bg-white shadow-sm border border-brand-sand rounded-sm overflow-hidden mb-10">
        <!-- Blue Top Border accent -->
        <div class="h-2 bg-brand-navy w-full"></div>

        <div class="p-8 md:p-10">
            <div class="flex flex-col md:flex-row gap-8 items-start">

                <!-- Big Avatar / Icon -->
                <div class="flex-shrink-0">
                    <div class="w-24 h-24 rounded-full bg-brand-sand/30 flex items-center justify-center text-brand-navy border border-brand-sand">
                        <span class="font-serif text-3xl">{person.firstName[0]}{person.lastName[0]}</span>
                    </div>
                </div>

                <!-- Info Grid -->
                <div class="flex-1 w-full">
                    <h1 class="text-4xl font-serif text-brand-navy mb-8 border-b border-gray-100 pb-4">
                        {person.firstName} {person.lastName}
                    </h1>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                        <div>
                            <span class="block text-xs font-bold font-sans text-gray-400 uppercase tracking-widest mb-1">Voller Name</span>
                            <span class="block text-lg font-serif text-brand-navy">{person.firstName} {person.lastName}</span>
                        </div>

                        {#if person.alias}
                        <div>
                            <span class="block text-xs font-bold font-sans text-gray-400 uppercase tracking-widest mb-1">Rufname / Alias</span>
                            <span class="block text-lg font-serif text-brand-navy italic">"{person.alias}"</span>
                        </div>
                        {/if}

                        {#if person.birthDate}
                        <div>
                            <span class="block text-xs font-bold font-sans text-gray-400 uppercase tracking-widest mb-1">Geburtsdatum</span>
                            <span class="block text-lg font-serif text-brand-navy">{person.birthDate}</span>
                        </div>
                        {/if}

                        <!-- Empty slot or Placeholder for bio/notes -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Linked Documents Section -->
    <div>
        <div class="flex items-center justify-between mb-6 border-b border-brand-navy/10 pb-2">
            <h2 class="text-xl font-serif text-brand-navy">
                Gesendete Dokumente
            </h2>
            <span class="bg-brand-navy text-white text-xs font-bold px-2 py-1 rounded-full">
                {documents.length}
            </span>
        </div>

        {#if documents.length === 0}
            <div class="p-12 text-center bg-white border border-brand-sand border-dashed rounded-sm">
                <p class="text-gray-500 font-sans">Diese Person ist noch nicht als Absender verknüpft.</p>
            </div>
        {:else}
            <ul class="space-y-3">
                {#each documents as doc}
                    <li class="group">
                        <a href="/documents/{doc.id}" class="block bg-white border border-brand-sand p-4 hover:border-brand-navy hover:shadow-md transition-all duration-200">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center gap-4 overflow-hidden">
                                    <!-- Icon Box -->
                                    <div class="flex-shrink-0 h-10 w-10 bg-brand-sand/20 text-brand-navy rounded flex items-center justify-center group-hover:bg-brand-mint group-hover:text-brand-navy transition-colors">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
                                    </div>

                                    <!-- Text Info -->
                                    <div class="min-w-0">
                                        <div class="font-serif text-base font-medium text-brand-navy truncate group-hover:underline decoration-brand-mint decoration-2 underline-offset-2">
                                            {doc.title || doc.originalFilename}
                                        </div>
                                        <div class="flex items-center text-xs font-sans text-gray-500 mt-0.5 space-x-2">
                                            <span>{doc.documentDate || 'Kein Datum'}</span>
                                            {#if doc.location}
                                                <span class="text-brand-mint">•</span>
                                                <span>{doc.location}</span>
                                            {/if}
                                        </div>
                                    </div>
                                </div>

                                <!-- Status & Arrow -->
                                <div class="flex items-center flex-shrink-0 pl-4">
                                    <span class="hidden sm:inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wide border
                                        {doc.status === 'UPLOADED' 
                                            ? 'bg-brand-mint/20 text-brand-navy border-brand-mint/50' 
                                            : 'bg-yellow-50 text-yellow-800 border-yellow-200'}">
                                        {doc.status}
                                    </span>
                                    <svg class="h-5 w-5 text-gray-300 ml-4 group-hover:text-brand-navy transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                                    </svg>
                                </div>
                            </div>
                        </a>
                    </li>
                {/each}
            </ul>
        {/if}
    </div>

</div>
