<script lang="ts">
    export let data;
    $: doc = data.document;

    // Instead of a direct link, we use a reactive variable for the Blob URL
    let fileUrl = '';
    let isLoading = false;
    let error = '';

    // Reactive statement: Whenever the document ID changes, load the file
    $: if (doc?.id && doc?.filePath) {
        loadFile(doc.id);
    }

    async function loadFile(id) {
        isLoading = true;
        error = '';
        fileUrl = ''; // Reset previous URL

        try {
            // 1. Fetch with current authentication
            const response = await fetch(`/api/documents/${id}/file`);

            if (!response.ok) {
                if (response.status === 401) throw new Error('Nicht eingeloggt');
                throw new Error('Fehler beim Laden der Datei');
            }

            // 2. Create a Blob from the data
            const blob = await response.blob();

            // 3. Create a temporary URL for this Blob
            fileUrl = URL.createObjectURL(blob);

        } catch (e) {
            console.error(e);
            error = 'Vorschau konnte nicht geladen werden.';
        } finally {
            isLoading = false;
        }
    }
</script>

<div class="h-screen flex flex-col bg-brand-sand">
	<!-- Top Bar -->
	<div
		class="bg-white border-b border-brand-sand px-6 py-4 flex items-center justify-between z-10 shadow-sm"
	>
		<div class="flex items-center gap-6 overflow-hidden">
			<a
				href="/"
				class="group flex-shrink-0 flex items-center gap-2 text-sm font-sans font-medium text-gray-500 hover:text-brand-navy transition-colors"
			>
				<div
					class="w-8 h-8 rounded-full bg-brand-sand group-hover:bg-brand-mint flex items-center justify-center transition-colors"
				>
					<svg
						class="w-4 h-4 text-brand-navy"
						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>
				</div>
				<span>Zurück</span>
			</a>

			<div class="flex items-center gap-4 overflow-hidden border-l border-gray-200 pl-6">
				<h1 class="text-xl font-serif text-brand-navy truncate" title={doc.title}>
					{doc.title || doc.originalFilename}
				</h1>
				<span
					class="flex-shrink-0 px-3 py-1 rounded-full text-xs font-sans font-bold tracking-wide uppercase
                    {doc.status === 'UPLOADED'
						? 'bg-brand-mint/30 text-brand-navy border border-brand-mint'
						: 'bg-yellow-100 text-yellow-800 border border-yellow-200'}"
				>
					{doc.status}
				</span>
			</div>
		</div>

		<div class="flex items-center gap-3 flex-shrink-0 ml-4 font-sans">
			<a
				href="/documents/{doc.id}/edit"
				class="text-brand-navy bg-transparent border border-brand-navy hover:bg-brand-navy hover:text-white px-4 py-2 rounded text-sm font-medium transition flex items-center gap-2"
			>
				<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
					/>
				</svg>
				Bearbeiten
			</a>

			{#if doc.filePath}
				<a
					href={fileUrl}
					download={doc.originalFilename}
					class="text-brand-navy bg-brand-sand/50 hover:bg-brand-mint border border-transparent p-2 rounded transition"
					title="Download"
				>
					<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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
						/>
					</svg>
				</a>
			{/if}
		</div>
	</div>

	<!-- Content Area -->
	<div class="flex-1 flex overflow-hidden">
		<!-- LEFT SIDEBAR: METADATA -->
		<aside
			class="w-96 bg-white border-r border-brand-sand overflow-y-auto p-8 flex-shrink-0 custom-scrollbar"
		>
			<div class="space-y-10">
				<!-- 1. DETAILS GROUP -->
				<div>
					<h3
						class="text-xs font-sans font-bold text-brand-navy uppercase tracking-widest mb-4 border-b border-brand-sand pb-2"
					>
						Details
					</h3>
					<div class="space-y-5">
						<!-- Date -->
						<div class="flex items-start group">
							<span class="text-brand-mint w-8 mt-0.5">
								<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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
									/></svg
								>
							</span>
							<div>
								<span class="block font-serif text-lg text-brand-navy">
									{doc.documentDate ? doc.documentDate.split('-').reverse().join('.') : '—'}
								</span>
								<span class="text-xs font-sans text-gray-500">Dokumentendatum</span>
							</div>
						</div>

						<!-- Creation Location -->
						<div class="flex items-start group">
							<span class="text-brand-mint w-8 mt-0.5">
								<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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
									/><path
										stroke-linecap="round"
										stroke-linejoin="round"
										stroke-width="2"
										d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
									/></svg
								>
							</span>
							<div>
								<span class="block font-serif text-lg text-brand-navy">
									{doc.location ? doc.location : '—'}
								</span>
								<span class="text-xs font-sans text-gray-500">Erstellungsort</span>
							</div>
						</div>

						<!-- Physical Archive Location -->
						{#if doc.documentLocation}
							<div class="flex items-start group">
								<span class="text-brand-mint w-8 mt-0.5">
									<!-- Archive Box Icon -->
									<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="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"
										/>
									</svg>
								</span>
								<div>
									<span class="block font-serif text-lg text-brand-navy">
										{doc.documentLocation}
									</span>
									<span class="text-xs font-sans text-gray-500">Aufbewahrungsort (Original)</span>
								</div>
							</div>
						{/if}

						<!-- TAGS / SCHLAGWORTE -->
						{#if doc.tags && doc.tags.length > 0}
							<div class="flex items-start group">
								<span class="text-brand-mint w-8 mt-0.5">
									<!-- Tag Icon -->
									<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="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 8V3c0-1.105.895-2 2-2z"
										/>
									</svg>
								</span>
								<div class="flex-1">
									<div class="flex flex-wrap gap-2 mb-1">
										{#each doc.tags as tag}
											<a
												href="/?tag={encodeURIComponent(tag.name)}"
												class="inline-flex items-center px-2 py-0.5 rounded text-xs font-bold uppercase tracking-wide bg-brand-sand/50 text-brand-navy hover:bg-brand-navy hover:text-white transition-colors"
												title="Nach '{tag.name}' filtern"
											>
												{tag.name}
											</a>
										{/each}
									</div>
									<span class="text-xs font-sans text-gray-500">Schlagworte</span>
								</div>
							</div>
						{/if}
					</div>
				</div>

				<!-- 2. PERSONEN GROUP -->
				<div>
					<h3
						class="text-xs font-sans font-bold text-brand-navy uppercase tracking-widest mb-4 border-b border-brand-sand pb-2"
					>
						Personen
					</h3>

					<div class="mb-6">
						<span class="text-xs font-sans text-gray-400 block mb-2 uppercase">Absender</span>
						{#if doc.sender}
							<a
								href="/persons/{doc.sender.id}"
								class="block p-3 rounded border border-brand-sand bg-brand-sand/20 hover:border-brand-mint hover:bg-brand-mint/10 transition group"
							>
								<div class="flex items-center gap-3">
									<div
										class="w-8 h-8 rounded-full bg-brand-navy text-white flex items-center justify-center font-serif text-sm"
									>
										{doc.sender.firstName[0]}{doc.sender.lastName[0]}
									</div>
									<div>
										<p
											class="font-serif text-brand-navy group-hover:underline decoration-brand-mint underline-offset-2"
										>
											{doc.sender.firstName}
											{doc.sender.lastName}
										</p>
										{#if doc.sender.alias}
											<p class="text-xs font-sans text-gray-500">{doc.sender.alias}</p>
										{/if}
									</div>
								</div>
							</a>
						{:else}
							<span class="text-sm font-serif text-gray-400 italic">Nicht angegeben</span>
						{/if}
					</div>

					<div>
						<span class="text-xs font-sans text-gray-400 block mb-2 uppercase">Empfänger</span>
						{#if doc.receivers && doc.receivers.length > 0}
							<div class="space-y-2">
								{#each doc.receivers as receiver}
									<div
										class="flex items-center justify-between p-3 rounded border border-brand-sand bg-white hover:border-brand-navy transition group"
									>
										<a href="/persons/{receiver.id}" class="flex items-center gap-3 flex-1 min-w-0">
											<div
												class="w-6 h-6 rounded-full bg-gray-100 text-gray-500 flex items-center justify-center text-xs font-serif"
											>
												{receiver.firstName[0]}{receiver.lastName[0]}
											</div>
											<span
												class="font-serif text-sm text-brand-navy group-hover:text-brand-navy truncate"
											>
												{receiver.firstName}
												{receiver.lastName}
											</span>
										</a>

										{#if doc.sender}
											<a
												href="/conversations?senderId={doc.sender.id}&receiverId={receiver.id}"
												class="text-gray-300 hover:text-brand-mint transition"
												title="Konversation anzeigen"
											>
												<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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
													/>
												</svg>
											</a>
										{/if}
									</div>
								{/each}
							</div>
						{:else}
							<span class="text-sm font-serif text-gray-400 italic">Keine Empfänger</span>
						{/if}
					</div>
				</div>

				<!-- 3. INHALT GROUP (Merged Summary & Transcription) -->
				{#if doc.summary || doc.transcription}
					<div>
						<h3
							class="text-xs font-sans font-bold text-brand-navy uppercase tracking-widest mb-4 border-b border-brand-sand pb-2"
						>
							Inhalt
						</h3>

						<div class="space-y-6">
							<!-- Summary Sub-Section -->
							{#if doc.summary}
								<div>
									<span class="text-xs font-sans text-gray-400 block mb-2 uppercase"
										>Zusammenfassung</span
									>
									<div
										class="bg-brand-sand/30 p-5 rounded border border-brand-sand text-sm font-serif text-brand-navy leading-relaxed whitespace-pre-wrap"
									>
										{doc.summary}
									</div>
								</div>
							{/if}

							<!-- Transcription Sub-Section -->
							{#if doc.transcription}
								<div>
									<span class="text-xs font-sans text-gray-400 block mb-2 uppercase"
										>Transkription</span
									>
									<div
										class="bg-brand-sand/30 p-5 rounded border border-brand-sand text-sm font-serif text-brand-navy leading-relaxed whitespace-pre-wrap"
									>
										{doc.transcription}
									</div>
								</div>
							{/if}
						</div>
					</div>
				{/if}

				<!-- Footer -->
				<div class="pt-4 border-t border-brand-sand text-[10px] font-sans text-gray-400">
					<p class="truncate">ID: {doc.id}</p>
					<p class="truncate mt-1">{doc.originalFilename}</p>
				</div>
			</div>
		</aside>

		<!-- RIGHT: PREVIEW AREA -->
		<main class="flex-1 bg-[#2A2A2A] relative flex flex-col items-center justify-center">
			{#if isLoading}
				<!-- Loading Spinner -->
				<div class="text-brand-mint flex flex-col items-center">
					<svg
						class="animate-spin h-8 w-8 mb-4"
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
					>
						<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"
						></circle>
						<path
							class="opacity-75"
							fill="currentColor"
							d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
						></path>
					</svg>
					<span class="font-sans text-sm tracking-wide">Lade Dokument...</span>
				</div>
			{:else if error}
				<div class="text-gray-400 text-center px-4">
					<p class="font-serif mb-2">{error}</p>
					{#if doc.filePath}
						<!-- Direct link as fallback -->
						<a
							href={`/api/documents/${doc.id}/file`}
							target="_blank"
							class="underline hover:text-white text-sm"
						>
							Direkter Download versuchen
						</a>
					{/if}
				</div>
			{:else if !doc.filePath}
				<!-- No File State -->
				<div class="flex flex-col items-center text-gray-400">
					<div class="bg-white/5 p-8 rounded-full mb-6">
						<!-- Icon... -->
						<svg class="w-12 h-12 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24"
							><path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="1.5"
								d="M9 13h6m-3-3v6m5 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"
							/></svg
						>
					</div>
					<p class="font-sans text-sm tracking-wide uppercase">Kein Scan vorhanden</p>
				</div>
			{:else if fileUrl && doc.originalFilename.toLowerCase().endsWith('.pdf')}
				<!-- PDF Iframe with Blob URL -->
				<iframe
					src={fileUrl}
					title="Document Preview"
					class="w-full h-full border-none bg-white"
					type="application/pdf"
				></iframe>
			{:else if fileUrl}
				<!-- Image with Blob URL -->
				<div class="w-full h-full flex items-center justify-center overflow-auto p-8">
					<img
						src={fileUrl}
						alt="Original Scan"
						class="max-w-full max-h-full object-contain shadow-2xl"
					/>
				</div>
			{/if}
		</main>
	</div>
</div>
