<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 { ClientProvider } from "$lib/api/dashboard/a76/clients-providers";

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

	function handleOpenChange(newOpen: boolean) {
		open = newOpen;
	}

	const isForeign = (cp: ClientProvider) =>
		(cp.type_nat_foreign || "N").toUpperCase() === "E";
</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 Cliente/Proveedor</Dialog.Title>
			<Dialog.Description>
				Información completa del cliente o proveedor
			</Dialog.Description>
		</Dialog.Header>

		{#if item}
			<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">ID</span>
							<span class="text-sm font-medium">{item.id}</span>
						</div>
						
						<div class="flex flex-col gap-1">
							<span class="text-xs font-medium text-muted-foreground">
								{isForeign(item) ? "TAX-ID" : "RFC"}
							</span>
							<code class="text-sm font-mono font-semibold">{item.rfc}</code>
						</div>
					</div>
					
					<div class="flex flex-col gap-1">
						<span class="text-xs font-medium text-muted-foreground">Nombre</span>
						<span class="text-sm">{item.name}</span>
					</div>
					
					{#if item.curp}
						<div class="flex flex-col gap-1">
							<span class="text-xs font-medium text-muted-foreground">CURP</span>
							<code class="text-sm font-mono">{item.curp}</code>
						</div>
					{/if}
					
					<Separator />
				</div>

				<!-- Tipo y Estado -->
				<div class="space-y-2">
					<h3 class="text-sm font-semibold">Clasificación</h3>
					
					<div class="grid grid-cols-3 gap-2">
						<div class="flex flex-col gap-1">
							<span class="text-xs font-medium text-muted-foreground">Tipo</span>
							{#if item.client_or_provider === 'client'}
								<span class="inline-flex w-fit items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800 dark:bg-blue-900 dark:text-blue-300">
									Cliente
								</span>
							{:else if item.client_or_provider === 'provider'}
								<span class="inline-flex w-fit items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-800 dark:bg-green-900 dark:text-green-300">
									Proveedor
								</span>
							{:else if item.client_or_provider === 'both'}
								<span class="inline-flex w-fit items-center rounded-full bg-purple-100 px-2.5 py-0.5 text-xs font-medium text-purple-800 dark:bg-purple-900 dark:text-purple-300">
									Ambos
								</span>
							{:else}
								<span class="text-sm text-muted-foreground">No especificado</span>
							{/if}
						</div>

						<div class="flex flex-col gap-1">
							<span class="text-xs font-medium text-muted-foreground">Procedencia</span>
							<span class="text-sm font-medium">
								{isForeign(item) ? "Extranjero" : "Nacional"}
							</span>
						</div>
						
						<div class="flex flex-col gap-1">
							<span class="text-xs font-medium text-muted-foreground">Estado</span>
							{#if item.is_active === true}
								<span class="inline-flex w-fit items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-800 dark:bg-green-900 dark:text-green-300">
									Activo
								</span>
							{:else}
								<span class="inline-flex w-fit items-center rounded-full bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-800 dark:bg-red-900 dark:text-red-300">
									Inactivo
								</span>
							{/if}
						</div>
					</div>
					
					<Separator />
				</div>

				<!-- Dirección (si existe) -->
				{#if item.address}
					<div class="space-y-2">
						<h3 class="text-sm font-semibold">Dirección</h3>
						
						<div class="space-y-1">
							{#if item.address.streets}
								<div class="flex flex-col gap-1">
									<span class="text-xs font-medium text-muted-foreground">Calles</span>
									<span class="text-sm">{item.address.streets}</span>
								</div>
							{/if}
							
							<div class="grid grid-cols-2 gap-2">
								{#if item.address.neighborhood}
									<div class="flex flex-col gap-1">
										<span class="text-xs font-medium text-muted-foreground">Colonia</span>
										<span class="text-sm">{item.address.neighborhood}</span>
									</div>
								{/if}
								
								{#if item.address.postal_code}
									<div class="flex flex-col gap-1">
										<span class="text-xs font-medium text-muted-foreground">Código Postal</span>
										<span class="text-sm">{item.address.postal_code}</span>
									</div>
								{/if}
							</div>
							
							<div class="grid grid-cols-2 gap-2">
								{#if item.address.municipality}
									<div class="flex flex-col gap-1">
										<span class="text-xs font-medium text-muted-foreground">Municipio</span>
										<span class="text-sm">{item.address.municipality}</span>
									</div>
								{/if}

								{#if item.address.city}
									<div class="flex flex-col gap-1">
										<span class="text-xs font-medium text-muted-foreground">Ciudad</span>
										<span class="text-sm">{item.address.city}</span>
									</div>
								{/if}
								
								{#if item.address.state}
									<div class="flex flex-col gap-1">
										<span class="text-xs font-medium text-muted-foreground">Estado</span>
										<span class="text-sm">{item.address.state}</span>
									</div>
								{/if}
							</div>
							
							{#if item.address.country}
								<div class="flex flex-col gap-1">
									<span class="text-xs font-medium text-muted-foreground">País</span>
									<span class="text-sm">{item.address.country}</span>
								</div>
							{/if}

							{#if item.address.email || item.address.phone || item.address.contact}
								<div class="grid grid-cols-2 gap-2 pt-2">
									{#if item.address.email}
										<div class="flex flex-col gap-1">
											<span class="text-xs font-medium text-muted-foreground">Email</span>
											<span class="text-sm">{item.address.email}</span>
										</div>
									{/if}
									{#if item.address.phone}
										<div class="flex flex-col gap-1">
											<span class="text-xs font-medium text-muted-foreground">Teléfono</span>
											<span class="text-sm">{item.address.phone}</span>
										</div>
									{/if}
									{#if item.address.contact}
										<div class="flex flex-col gap-1 col-span-2">
											<span class="text-xs font-medium text-muted-foreground">Contacto</span>
											<span class="text-sm">{item.address.contact}</span>
										</div>
									{/if}
								</div>
							{/if}
						</div>
						
						<Separator />
					</div>
				{/if}

				<!-- Programas (si existe) -->
				{#if item.programs}
					<div class="space-y-2">
						<h3 class="text-sm font-semibold">Programas</h3>
						
						{#if item.programs.program}
							<div class="flex flex-col gap-1">
								<span class="text-xs font-medium text-muted-foreground">Programa</span>
								<code class="text-sm font-mono">{item.programs.program}</code>
							</div>
						{/if}
						
						{#if item.programs.program_number || item.programs.manufacturer_id}
							<div class="grid grid-cols-2 gap-2">
								{#if item.programs.program_number}
									<div class="flex flex-col gap-1">
										<span class="text-xs font-medium text-muted-foreground">Número</span>
										<span class="text-sm">{item.programs.program_number}</span>
									</div>
								{/if}
								{#if item.programs.manufacturer_id}
									<div class="flex flex-col gap-1">
										<span class="text-xs font-medium text-muted-foreground">Manufacturer ID</span>
										<span class="text-sm font-mono">{item.programs.manufacturer_id}</span>
									</div>
								{/if}
							</div>
						{/if}
					</div>
				{/if}
			</div>
		{/if}

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