<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 type { CodePedimentoRegimen } from "$lib/api/dashboard/reference_data/code_pedimento_regimens";

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

	function handleOpenChange(newOpen: boolean) {
		open = newOpen;
	}
</script>

<Dialog.Root bind:open onOpenChange={handleOpenChange}>
	<Dialog.Content class="sm:max-w-[500px]">
		<Dialog.Header>
			<Dialog.Title>Detalles del Registro</Dialog.Title>
			<Dialog.Description>
				Información completa de la relación código pedimento - régimen
			</Dialog.Description>
		</Dialog.Header>

		{#if item}
			<div class="space-y-4 py-4">
				<div class="space-y-2">
					<div class="flex items-center justify-between">
						<span class="text-sm font-medium text-muted-foreground">ID</span>
						<span class="text-sm font-mono font-semibold">{item.id}</span>
					</div>
					<Separator />
				</div>

				<div class="space-y-2">
					<div class="flex items-center justify-between">
						<span class="text-sm font-medium text-muted-foreground">Código Pedimento</span>
						<code class="relative rounded bg-muted px-2 py-1 font-mono text-sm">
							{item.pedimento_code}
						</code>
					</div>
					<Separator />
				</div>

				<div class="space-y-2">
					<div class="flex items-center justify-between">
						<span class="text-sm font-medium text-muted-foreground">Código Régimen</span>
						{#if item.regimen_code}
							<code class="relative rounded bg-muted px-2 py-1 font-mono text-sm">
								{item.regimen_code}
							</code>
						{:else}
							<span class="text-sm text-muted-foreground italic">No especificado</span>
						{/if}
					</div>
					<Separator />
				</div>

				<div class="space-y-2">
					<div class="flex items-center justify-between">
						<span class="text-sm font-medium text-muted-foreground">Tipo</span>
						{#if item.type_code}
							<span class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold">
								{item.type_code}
							</span>
						{:else}
							<span class="text-sm text-muted-foreground italic">No especificado</span>
						{/if}
					</div>
				</div>
			</div>
		{/if}

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