<script lang="ts">
	import { Button } from '$lib/components/ui/button';
	import * as Dialog from '$lib/components/ui/dialog';
	import { Separator } from '$lib/components/ui/separator';
	import { FileText, Truck, MapPin, Calendar, Scale, DollarSign, Tag, Info } from 'lucide-svelte';
	import type { Manifest } from '$lib/api/dashboard/a76/manifests';

	let { open = $bindable(false), manifest }: { open: boolean; manifest: Manifest | null } =
		$props();

	function formatDate(date: number | null | undefined) {
		if (!date) return '-';
		const dateStr = date.toString();
		if (dateStr.length === 8) {
			return `${dateStr.substring(6, 8)}/${dateStr.substring(4, 6)}/${dateStr.substring(0, 4)}`;
		}
		return date.toString();
	}
</script>

<Dialog.Root bind:open>
	<Dialog.Content class="max-h-[90vh] sm:max-w-[700px]">
		<Dialog.Header>
			<Dialog.Title class="flex items-center gap-2">
				<FileText class="h-5 w-5 text-primary" />
				Detalle del Manifiesto
			</Dialog.Title>
			<Dialog.Description>Información detallada del registro de exportación.</Dialog.Description>
		</Dialog.Header>

		<div class="max-h-[60vh] overflow-y-auto pr-4">
			{#if manifest}
				<div class="space-y-6 py-2">
					<!-- Header info -->
					<div class="grid grid-cols-2 gap-4 rounded-lg bg-muted/30 p-4">
						<div class="space-y-1">
							<span class="text-[10px] font-bold tracking-widest text-muted-foreground uppercase"
								>Número</span
							>
							<p class="font-mono text-lg font-bold">{manifest.manifest_number}</p>
						</div>
						<div class="space-y-1">
							<span class="text-[10px] font-bold tracking-widest text-muted-foreground uppercase"
								>Estatus</span
							>
							<div>
								<span
									class="inline-flex items-center rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-medium text-primary uppercase"
								>
									{manifest.status || 'PENDIENTE'}
								</span>
							</div>
						</div>
					</div>

					<!-- Basic Data -->
					<div class="space-y-4">
						<h4 class="flex items-center gap-2 text-sm font-bold">
							<Info class="h-4 w-4" /> Datos de Identificación
						</h4>
						<div class="grid grid-cols-2 gap-x-8 gap-y-4 text-sm">
							<div class="space-y-1">
								<span class="text-xs text-muted-foreground">Tipo Manifiesto</span>
								<p class="font-medium">{manifest.manifest_type || '-'}</p>
							</div>
							<div class="space-y-1">
								<span class="text-xs text-muted-foreground">Fecha Entrada</span>
								<p class="flex items-center gap-1 font-medium">
									<Calendar size={12} />
									{formatDate(manifest.entry_date)}
								</p>
							</div>
							<div class="space-y-1">
								<span class="text-xs text-muted-foreground">Aduana Brooker</span>
								<p class="font-medium">{manifest.broker_code || '-'}</p>
							</div>
							<div class="space-y-1">
								<span class="text-xs text-muted-foreground">Transportista</span>
								<p class="flex items-center gap-1 font-medium">
									<Truck size={12} />
									{manifest.carrier_code || '-'}
								</p>
							</div>
						</div>
					</div>

					<Separator />

					<!-- Logistics -->
					<div class="space-y-4">
						<h4 class="flex items-center gap-2 text-sm font-bold">
							<MapPin class="h-4 w-4" /> Ruta y Logística
						</h4>
						<div class="grid grid-cols-2 gap-x-8 gap-y-4 text-sm">
							<div class="space-y-1">
								<span class="text-xs text-muted-foreground">Puerto Entrada</span>
								<p class="font-medium">
									{manifest.entry_port || '-'}
									{manifest.entry_port_loc ? `(${manifest.entry_port_loc})` : ''}
								</p>
							</div>
							<div class="space-y-1">
								<span class="text-xs text-muted-foreground">Puerto Salida Extranjero</span>
								<p class="font-medium">
									{manifest.foreign_exit_port || '-'}
									{manifest.foreign_exit_port_loc ? `(${manifest.foreign_exit_port_loc})` : ''}
								</p>
							</div>
							<div class="space-y-1">
								<span class="text-xs text-muted-foreground">Puerto Destino</span>
								<p class="font-medium">
									{manifest.destination_port || '-'}
									{manifest.destination_port_loc ? `(${manifest.destination_port_loc})` : ''}
								</p>
							</div>
						</div>
					</div>

					<Separator />

					<!-- Values/Weights -->
					<div class="space-y-4">
						<h4 class="flex items-center gap-2 text-sm font-bold">
							<Scale class="h-4 w-4" /> Pesos y Valores
						</h4>
						<div class="grid grid-cols-3 gap-4 text-sm">
							<div class="space-y-1">
								<span class="text-xs text-muted-foreground">Peso Neto</span>
								<p class="font-medium">{manifest.net_weight || 0} Kg</p>
							</div>
							<div class="space-y-1">
								<span class="text-xs text-muted-foreground">Peso Bruto</span>
								<p class="font-medium">{manifest.gross_weight || 0} Kg</p>
							</div>
							<div class="space-y-1">
								<span class="text-xs text-muted-foreground">Valor Total</span>
								<p class="flex items-center gap-0.5 font-medium">
									<DollarSign size={12} />
									{manifest.total_value || 0}
								</p>
							</div>
						</div>
					</div>

					{#if manifest.description}
						<Separator />
						<div class="space-y-2 text-sm">
							<h4 class="flex items-center gap-2 font-bold">
								<Tag class="h-4 w-4" /> Descripción
							</h4>
							<p class="rounded bg-muted/20 p-3 text-muted-foreground italic">
								{manifest.description}
							</p>
						</div>
					{/if}
				</div>
			{/if}
		</div>

		<Dialog.Footer>
			<Button variant="outline" onclick={() => (open = false)}>Cerrar</Button>
		</Dialog.Footer>
	</Dialog.Content>
</Dialog.Root>
