<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 { CustomsBroker } from "$lib/api/dashboard/a76/customs-brokers";

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

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

<Dialog.Root bind:open onOpenChange={handleOpenChange}>
	<Dialog.Content class="sm:max-w-[700px] max-h-[80vh] overflow-y-auto">
		<Dialog.Header>
			<Dialog.Title>Detalles del Agente Aduanal</Dialog.Title>
			<Dialog.Description>
				Información completa del agente aduanal
			</Dialog.Description>
		</Dialog.Header>

		{#if broker}
			<div class="space-y-4 py-4">
				<!-- Información básica -->
				<div class="space-y-2">
					<h3 class="text-sm font-semibold">Información Básica</h3>
					
					<div class="grid grid-cols-2 gap-2">
						<div class="flex flex-col gap-1">
							<span class="text-xs font-medium text-muted-foreground">Clave</span>
							<code class="text-sm font-mono font-semibold">{broker.broker_key}</code>
						</div>
						
						{#if broker.license}
							<div class="flex flex-col gap-1">
								<span class="text-xs font-medium text-muted-foreground">Patente</span>
								<code class="text-sm font-mono font-semibold">{broker.license}</code>
							</div>
						{/if}
					</div>
					
					{#if broker.name}
						<div class="flex flex-col gap-1">
							<span class="text-xs font-medium text-muted-foreground">Nombre</span>
							<span class="text-sm">{broker.name}</span>
						</div>
					{/if}
					
					{#if broker.type}
						<div class="flex flex-col gap-1">
							<span class="text-xs font-medium text-muted-foreground">Tipo</span>
							<span class="text-sm">{broker.type}</span>
						</div>
					{/if}
					
					{#if broker.company}
						<div class="flex flex-col gap-1">
							<span class="text-xs font-medium text-muted-foreground">Empresa</span>
							<span class="text-sm">{broker.company}</span>
						</div>
					{/if}
					
					<Separator />
				</div>

				<!-- Información de contacto -->
				<div class="space-y-2">
					<h3 class="text-sm font-semibold">Información de Contacto</h3>
					
					{#if broker.contact}
						<div class="flex flex-col gap-1">
							<span class="text-xs font-medium text-muted-foreground">Contacto</span>
							<span class="text-sm">{broker.contact}</span>
						</div>
					{/if}
					
					<div class="grid grid-cols-2 gap-2">
						{#if broker.phone}
							<div class="flex flex-col gap-1">
								<span class="text-xs font-medium text-muted-foreground">Teléfono</span>
								<span class="text-sm">{broker.phone}</span>
							</div>
						{/if}
						
						{#if broker.fax}
							<div class="flex flex-col gap-1">
								<span class="text-xs font-medium text-muted-foreground">Fax</span>
								<span class="text-sm">{broker.fax}</span>
							</div>
						{/if}
					</div>
					
					{#if broker.email}
						<div class="flex flex-col gap-1">
							<span class="text-xs font-medium text-muted-foreground">Email</span>
							<a href="mailto:{broker.email}" class="text-sm text-blue-600 hover:underline">
								{broker.email}
							</a>
						</div>
					{/if}
					
					<Separator />
				</div>

				<!-- Dirección -->
				<div class="space-y-2">
					<h3 class="text-sm font-semibold">Dirección</h3>
					
					{#if broker.address}
						<div class="flex flex-col gap-1">
							<span class="text-xs font-medium text-muted-foreground">Dirección</span>
							<span class="text-sm">{broker.address}</span>
						</div>
					{/if}
					
					<div class="grid grid-cols-3 gap-2">
						{#if broker.postal_code}
							<div class="flex flex-col gap-1">
								<span class="text-xs font-medium text-muted-foreground">C.P.</span>
								<span class="text-sm">{broker.postal_code}</span>
							</div>
						{/if}
						
						{#if broker.city}
							<div class="flex flex-col gap-1">
								<span class="text-xs font-medium text-muted-foreground">Ciudad</span>
								<span class="text-sm">{broker.city}</span>
							</div>
						{/if}
						
						{#if broker.state}
							<div class="flex flex-col gap-1">
								<span class="text-xs font-medium text-muted-foreground">Estado</span>
								<span class="text-sm">{broker.state}</span>
							</div>
						{/if}
					</div>
					
					{#if broker.country}
						<div class="flex flex-col gap-1">
							<span class="text-xs font-medium text-muted-foreground">País</span>
							<span class="text-sm">{broker.country}</span>
						</div>
					{/if}
					
					<Separator />
				</div>

				<!-- Información fiscal -->
				<div class="space-y-2">
					<h3 class="text-sm font-semibold">Información Fiscal</h3>
					
					{#if broker.tax_id}
						<div class="flex flex-col gap-1">
							<span class="text-xs font-medium text-muted-foreground">RFC</span>
							<code class="text-sm font-mono">{broker.tax_id}</code>
						</div>
					{/if}
					
					{#if broker.personal_id}
						<div class="flex flex-col gap-1">
							<span class="text-xs font-medium text-muted-foreground">CURP</span>
							<code class="text-sm font-mono">{broker.personal_id}</code>
						</div>
					{/if}
					
					{#if broker.position}
						<div class="flex flex-col gap-1">
							<span class="text-xs font-medium text-muted-foreground">Posición</span>
							<span class="text-sm">{broker.position}</span>
						</div>
					{/if}
				</div>
			</div>
		{:else}
			<div class="py-8 text-center text-sm text-muted-foreground">
				No hay información disponible
			</div>
		{/if}

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