<script lang="ts">
	import { onMount } from 'svelte';
	import { page } from '$app/stores';
	import { fetchVorlage, type VorlageDetail } from '$lib/api';
	import { typLabel, formatDate } from '$lib/status';

	let vorlage: VorlageDetail | null = $state(null);
	let error: string | null = $state(null);
	let showVolltext = $state(false);

	onMount(async () => {
		try {
			const id = parseInt($page.params.id);
			vorlage = await fetchVorlage(id);
		} catch (e) {
			error = e instanceof Error ? e.message : 'Fehler';
		}
	});
</script>

<svelte:head>
	<title>{vorlage?.aktenzeichen || 'Vorlage'} - Antragstracker Hagen</title>
</svelte:head>

{#if error}
	<div class="bg-red-50 text-red-700 p-4 rounded-lg">{error}</div>
{:else if !vorlage}
	<div class="flex justify-center py-20">
		<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-green-600"></div>
	</div>
{:else}
	<!-- Back link -->
	<a href="/vorlagen" class="text-sm text-gray-500 hover:text-gray-700 mb-4 inline-block">&larr; Zurück zur Liste</a>

	<!-- Header -->
	<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
		<div class="flex flex-wrap items-start justify-between gap-4">
			<div>
				<div class="flex items-center space-x-3 mb-2">
					{#if vorlage.aktenzeichen}
						<h1 class="text-2xl font-bold text-gray-900 font-mono">{vorlage.aktenzeichen}</h1>
					{/if}
					{#if vorlage.typ}
						<span class="text-sm px-2 py-0.5 rounded bg-gray-100 text-gray-600">{typLabel(vorlage.typ)}</span>
					{/if}
					{#if vorlage.ist_verwaltungsvorlage}
						<span class="text-xs px-2 py-0.5 rounded bg-blue-100 text-blue-700">Verwaltungsvorlage</span>
					{/if}
				</div>
				{#if vorlage.betreff}
					<p class="text-gray-700 text-lg">{vorlage.betreff}</p>
				{/if}
				{#if vorlage.thema_kurz}
					<p class="text-sm text-gray-500 mt-1">Thema: {vorlage.thema_kurz}</p>
				{/if}
			</div>
			<div class="text-right text-sm text-gray-500 space-y-1">
				{#if vorlage.datum_eingang}
					<div>Eingegangen: <strong>{formatDate(vorlage.datum_eingang)}</strong></div>
				{/if}
				{#if vorlage.kette_id}
					<a href="/ketten/{vorlage.kette_id}" class="text-green-600 hover:underline block">Zur Kette &rarr;</a>
				{/if}
			</div>
		</div>

		<!-- Antragsteller -->
		{#if vorlage.antragsteller.length > 0}
			<div class="mt-4 flex items-center space-x-2">
				<span class="text-sm text-gray-500">Antragsteller:</span>
				{#each vorlage.antragsteller as p}
					<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
						style="background-color: {p.farbe || '#e5e7eb'}20; color: {p.farbe || '#4b5563'}; border: 1px solid {p.farbe || '#d1d5db'}">
						{p.kuerzel}
					</span>
				{/each}
			</div>
		{/if}

		<!-- External links -->
		<div class="mt-4 flex space-x-4">
			{#if vorlage.web_url}
				<a href={vorlage.web_url} target="_blank" rel="noopener"
					class="text-sm text-green-600 hover:underline">ALLRIS &nearr;</a>
			{/if}
			{#if vorlage.pdf_url}
				<a href={vorlage.pdf_url} target="_blank" rel="noopener"
					class="text-sm text-green-600 hover:underline">PDF &nearr;</a>
			{/if}
		</div>
	</div>

	<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
		<!-- Main content -->
		<div class="lg:col-span-2 space-y-6">
			<!-- KI-Zusammenfassung -->
			{#if vorlage.ki_zusammenfassung}
				<div class="bg-gradient-to-r from-green-50 to-emerald-50 rounded-xl shadow-sm border border-green-200 p-6">
					<h2 class="text-lg font-semibold text-green-800 mb-3 flex items-center gap-2">
						<span>🤖</span> KI-Zusammenfassung
					</h2>
					<p class="text-gray-700 mb-4">{vorlage.ki_zusammenfassung.zusammenfassung}</p>
					
					{#if vorlage.ki_zusammenfassung.kernforderung}
						<div class="mb-3">
							<span class="text-xs font-medium text-green-700 uppercase">Kernforderung:</span>
							<p class="text-gray-800 font-medium">{vorlage.ki_zusammenfassung.kernforderung}</p>
						</div>
					{/if}
					
					{#if vorlage.ki_zusammenfassung.begruendung}
						<div class="mb-3">
							<span class="text-xs font-medium text-green-700 uppercase">Begründung:</span>
							<p class="text-gray-600 text-sm">{vorlage.ki_zusammenfassung.begruendung}</p>
						</div>
					{/if}
					
					<div class="flex flex-wrap gap-2 mt-4">
						{#if vorlage.ki_zusammenfassung.thema}
							<span class="text-xs px-2 py-1 rounded-full bg-green-100 text-green-800">
								📂 {vorlage.ki_zusammenfassung.thema}
							</span>
						{/if}
						{#if vorlage.ki_zusammenfassung.partei}
							<span class="text-xs px-2 py-1 rounded-full bg-purple-100 text-purple-800">
								🏛️ {vorlage.ki_zusammenfassung.partei}
							</span>
						{/if}
						{#each vorlage.ki_zusammenfassung.betroffene_orte || [] as ort}
							<span class="text-xs px-2 py-1 rounded-full bg-blue-100 text-blue-800">
								📍 {ort}
							</span>
						{/each}
					</div>
				</div>
			{/if}

			<!-- Volltext -->
			{#if vorlage.volltext_clean}
				<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
					<div class="flex items-center justify-between mb-4">
						<h2 class="text-lg font-semibold text-gray-900">Volltext</h2>
						<button onclick={() => showVolltext = !showVolltext}
							class="text-sm text-green-600 hover:underline">
							{showVolltext ? 'Einklappen' : 'Aufklappen'}
						</button>
					</div>
					{#if showVolltext}
						<div class="prose prose-sm max-w-none text-gray-700 whitespace-pre-wrap">{vorlage.volltext_clean}</div>
					{:else}
						<p class="text-sm text-gray-500 line-clamp-4">{vorlage.volltext_clean}</p>
					{/if}
				</div>
			{/if}

			<!-- Beratungen -->
			{#if vorlage.beratungen.length > 0}
				<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
					<h2 class="text-lg font-semibold text-gray-900 mb-4">Beratungsfolge</h2>
					<div class="space-y-3">
						{#each vorlage.beratungen as b}
							<div class="flex items-start justify-between p-3 rounded-lg border border-gray-100">
								<div>
									{#if b.gremium}
										<span class="text-sm font-medium text-gray-900">{b.gremium.name}</span>
									{/if}
									{#if b.rolle}
										<span class="text-xs ml-2 text-gray-500">({b.rolle})</span>
									{/if}
									{#if b.ergebnis}
										<div class="mt-1">
											<span class="text-xs px-2 py-0.5 rounded
												{b.ergebnis.includes('angenommen') || b.ergebnis.includes('empfohlen') ? 'bg-green-100 text-green-700' :
												 b.ergebnis.includes('abgelehnt') ? 'bg-red-100 text-red-700' :
												 b.ergebnis.includes('vertagt') ? 'bg-amber-100 text-amber-700' :
												 'bg-gray-100 text-gray-700'}">
												{b.ergebnis}
											</span>
										</div>
									{/if}
									{#if b.ergebnis_text}
										<p class="text-xs text-gray-500 mt-1">{b.ergebnis_text}</p>
									{/if}
								</div>
								<span class="text-xs text-gray-500 flex-shrink-0 ml-4">{formatDate(b.sitzung_datum)}</span>
							</div>
						{/each}
					</div>
				</div>
			{/if}
		</div>

		<!-- Sidebar -->
		<div class="space-y-6">
			<!-- Referenzen ausgehend -->
			{#if vorlage.referenzen_ausgehend.length > 0}
				<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
					<h2 class="text-base font-semibold text-gray-900 mb-3">Verweist auf</h2>
					<div class="space-y-2">
						{#each vorlage.referenzen_ausgehend as ref}
							<a href="/vorlagen/{ref.vorlage_id}" class="block p-2 rounded-lg border border-gray-100 hover:bg-gray-50 transition-colors">
								<div class="flex items-center space-x-2">
									<span class="font-mono text-xs font-medium text-green-700">{ref.aktenzeichen || `#${ref.vorlage_id}`}</span>
									<span class="text-xs px-1.5 py-0.5 rounded bg-gray-100 text-gray-500">{ref.ref_typ}</span>
								</div>
								{#if ref.betreff}
									<p class="text-xs text-gray-600 truncate mt-0.5">{ref.betreff}</p>
								{/if}
							</a>
						{/each}
					</div>
				</div>
			{/if}

			<!-- Referenzen eingehend -->
			{#if vorlage.referenzen_eingehend.length > 0}
				<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
					<h2 class="text-base font-semibold text-gray-900 mb-3">Referenziert von</h2>
					<div class="space-y-2">
						{#each vorlage.referenzen_eingehend as ref}
							<a href="/vorlagen/{ref.vorlage_id}" class="block p-2 rounded-lg border border-gray-100 hover:bg-gray-50 transition-colors">
								<div class="flex items-center space-x-2">
									<span class="font-mono text-xs font-medium text-green-700">{ref.aktenzeichen || `#${ref.vorlage_id}`}</span>
									<span class="text-xs px-1.5 py-0.5 rounded bg-gray-100 text-gray-500">{ref.ref_typ}</span>
								</div>
								{#if ref.betreff}
									<p class="text-xs text-gray-600 truncate mt-0.5">{ref.betreff}</p>
								{/if}
							</a>
						{/each}
					</div>
				</div>
			{/if}

			<!-- Metadaten -->
			<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
				<h2 class="text-base font-semibold text-gray-900 mb-3">Details</h2>
				<dl class="space-y-2 text-sm">
					{#if vorlage.aktenzeichen_basis}
						<div class="flex justify-between">
							<dt class="text-gray-500">Basis</dt>
							<dd class="font-mono text-gray-900">{vorlage.aktenzeichen_basis}</dd>
						</div>
					{/if}
					{#if vorlage.aktenzeichen_suffix}
						<div class="flex justify-between">
							<dt class="text-gray-500">Suffix</dt>
							<dd class="font-mono text-gray-900">{vorlage.aktenzeichen_suffix}</dd>
						</div>
					{/if}
					<div class="flex justify-between">
						<dt class="text-gray-500">ID</dt>
						<dd class="text-gray-900">{vorlage.id}</dd>
					</div>
				</dl>
			</div>
		</div>
	</div>
{/if}
