<script lang="ts">
	import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card';
	import { Button } from '$lib/components/ui/button';
	import { Input } from '$lib/components/ui/input';
	import { Label } from '$lib/components/ui/label';
	import {
		Table,
		TableBody,
		TableCell,
		TableHead,
		TableHeader,
		TableRow
	} from '$lib/components/ui/table';
	import {
		Dialog,
		DialogContent,
		DialogHeader,
		DialogTitle,
		DialogFooter
	} from '$lib/components/ui/dialog';
	import {
		Plus,
		Pencil,
		Trash2,
		Upload,
		Trash
	} from 'lucide-svelte';

	interface Descargo {
		id?: number;
		patente: string;
		pedimento: string;
		aduana: string;
		clave: string;
		fecha_pago: string;
		fraccion: string;
		umt: string;
		cantidad_tarifa: number;
	}

	interface Destinatario {
		id?: number;
		clave: string;
		identificacion_fiscal: string;
		nombre: string;
	}

	let {
		formData = $bindable({
			descargos: [] as Descargo[],
			destinatarios: [] as Destinatario[]
		})
	}: {
		formData: {
			descargos: Descargo[];
			destinatarios: Destinatario[];
		};
	} = $props();

	// Estados para diálogos
	let isDescargoDialogOpen = $state(false);
	let isDestinatarioDialogOpen = $state(false);

	// Estados para edición
	let editingDescargoIndex = $state<number | null>(null);
	let editingDestinatarioIndex = $state<number | null>(null);

	// Estados actuales
	let currentDescargo = $state<Descargo>({
		patente: '',
		pedimento: '',
		aduana: '',
		clave: '',
		fecha_pago: '',
		fraccion: '',
		umt: '',
		cantidad_tarifa: 0
	});

	let currentDestinatario = $state<Destinatario>({
		clave: '',
		identificacion_fiscal: '',
		nombre: ''
	});

	const unidadesMedida = ['KG', 'LT', 'PZ', 'MT', 'M2', 'M3', 'TON', 'CAJ', 'PAR'];

	// Funciones para Descargos
	function openNewDescargo() {
		editingDescargoIndex = null;
		currentDescargo = {
			patente: '',
			pedimento: '',
			aduana: '',
			clave: '',
			fecha_pago: '',
			fraccion: '',
			umt: '',
			cantidad_tarifa: 0
		};
		isDescargoDialogOpen = true;
	}

	function openEditDescargo(index: number) {
		if (!formData?.descargos) return;
		editingDescargoIndex = index;
		currentDescargo = { ...formData.descargos[index] };
		isDescargoDialogOpen = true;
	}

	function saveDescargo() {
		if (!formData?.descargos) return;
		if (editingDescargoIndex !== null) {
			formData.descargos[editingDescargoIndex] = { ...currentDescargo };
		} else {
			formData.descargos = [...formData.descargos, { ...currentDescargo }];
		}
		isDescargoDialogOpen = false;
	}

	function deleteDescargo(index: number) {
		if (!formData?.descargos) return;
		if (confirm('¿Está seguro de eliminar este descargo?')) {
			formData.descargos = formData.descargos.filter((_, i) => i !== index);
		}
	}

	function deleteAllDescargos() {
		if (!formData?.descargos) return;
		if (formData.descargos.length === 0) {
			alert('No hay descargos para eliminar');
			return;
		}
		if (confirm(`¿Está seguro de eliminar todos los descargos (${formData.descargos.length})?`)) {
			formData.descargos = [];
		}
	}

	function importarDescargos() {
		alert('Importar Descargos (Formato CSV) no implementado aún');
	}

	// Funciones para Destinatarios
	function openNewDestinatario() {
		editingDestinatarioIndex = null;
		currentDestinatario = {
			clave: '',
			identificacion_fiscal: '',
			nombre: ''
		};
		isDestinatarioDialogOpen = true;
	}

	function openEditDestinatario(index: number) {
		if (!formData?.destinatarios) return;
		editingDestinatarioIndex = index;
		currentDestinatario = { ...formData.destinatarios[index] };
		isDestinatarioDialogOpen = true;
	}

	function saveDestinatario() {
		if (!formData?.destinatarios) return;
		if (editingDestinatarioIndex !== null) {
			formData.destinatarios[editingDestinatarioIndex] = { ...currentDestinatario };
		} else {
			formData.destinatarios = [...formData.destinatarios, { ...currentDestinatario }];
		}
		isDestinatarioDialogOpen = false;
	}

	function deleteDestinatario(index: number) {
		if (!formData?.destinatarios) return;
		if (confirm('¿Está seguro de eliminar este destinatario?')) {
			formData.destinatarios = formData.destinatarios.filter((_, i) => i !== index);
		}
	}
</script>

<div class="space-y-4">
	<!-- Sección de Descargos -->
	<Card>
		<CardHeader class="pb-3">
			<CardTitle class="text-base">Descargos</CardTitle>
		</CardHeader>
		<CardContent class="space-y-4">
			<div class="border rounded-lg overflow-hidden">
				<Table>
					<TableHeader>
						<TableRow>
							<TableHead>Patente</TableHead>
							<TableHead>Pedimento</TableHead>
							<TableHead>Aduana</TableHead>
							<TableHead>Clave</TableHead>
							<TableHead>Fecha Pago</TableHead>
							<TableHead>Fracción</TableHead>
							<TableHead>UMT</TableHead>
							<TableHead class="text-right">Cantidad Tarifa</TableHead>
							<TableHead class="w-[100px]">Acciones</TableHead>
						</TableRow>
					</TableHeader>
					<TableBody>
						{#if !formData?.descargos || formData.descargos.length === 0}
							<TableRow>
								<TableCell colspan={9} class="text-center text-muted-foreground py-8">
									No hay descargos registrados
								</TableCell>
							</TableRow>
						{:else}
							{#each formData.descargos as descargo, index}
								<TableRow>
									<TableCell>{descargo.patente}</TableCell>
									<TableCell>{descargo.pedimento}</TableCell>
									<TableCell>{descargo.aduana}</TableCell>
									<TableCell>{descargo.clave}</TableCell>
									<TableCell>{descargo.fecha_pago}</TableCell>
									<TableCell>{descargo.fraccion}</TableCell>
									<TableCell>{descargo.umt}</TableCell>
									<TableCell class="text-right"
										>{descargo.cantidad_tarifa.toLocaleString('es-MX', {
											minimumFractionDigits: 2,
											maximumFractionDigits: 2
										})}</TableCell
									>
									<TableCell>
										<div class="flex gap-1">
											<Button size="sm" variant="ghost" onclick={() => openEditDescargo(index)}>
												<Pencil size={14} />
											</Button>
											<Button size="sm" variant="ghost" onclick={() => deleteDescargo(index)}>
												<Trash2 size={14} />
											</Button>
										</div>
									</TableCell>
								</TableRow>
							{/each}
						{/if}
					</TableBody>
				</Table>
			</div>

			<div class="flex gap-2">
				<Button size="sm" variant="outline" onclick={importarDescargos}>
					<Upload class="mr-1.5" size={14} />
					Importar Descargos (Formato CSV)
				</Button>
				<Button size="sm" onclick={openNewDescargo}>
					<Plus class="mr-1.5" size={14} />
					Nuevo
				</Button>
				<Button
					size="sm"
					variant="outline"
					disabled={formData?.descargos?.length === 0}
					onclick={() => {
						const index = 0;
						if (formData?.descargos?.[index]) openEditDescargo(index);
					}}
				>
					<Pencil class="mr-1.5" size={14} />
					Editar
				</Button>
				<Button
					size="sm"
					variant="destructive"
					disabled={formData?.descargos?.length === 0}
					onclick={() => {
						const index = 0;
						if (formData?.descargos?.[index]) deleteDescargo(index);
					}}
				>
					<Trash2 class="mr-1.5" size={14} />
					Borrar
				</Button>
				<Button
					size="sm"
					variant="destructive"
					disabled={formData?.descargos?.length === 0}
					onclick={deleteAllDescargos}
				>
					<Trash class="mr-1.5" size={14} />
					Borrar Todo
				</Button>
			</div>
		</CardContent>
	</Card>

	<!-- Sección de Destinatarios -->
	<Card>
		<CardHeader class="pb-3">
			<CardTitle class="text-base">Destinatarios</CardTitle>
		</CardHeader>
		<CardContent class="space-y-4">
			<div class="border rounded-lg overflow-hidden">
				<Table>
					<TableHeader>
						<TableRow>
							<TableHead>Clave</TableHead>
							<TableHead>Identificación Fiscal</TableHead>
							<TableHead>Nombre</TableHead>
							<TableHead class="w-[100px]">Acciones</TableHead>
						</TableRow>
					</TableHeader>
					<TableBody>
						{#if !formData?.destinatarios || formData.destinatarios.length === 0}
							<TableRow>
								<TableCell colspan={4} class="text-center text-muted-foreground py-8">
									No hay destinatarios registrados
								</TableCell>
							</TableRow>
						{:else}
							{#each formData.destinatarios as destinatario, index}
								<TableRow>
									<TableCell>{destinatario.clave}</TableCell>
									<TableCell>{destinatario.identificacion_fiscal}</TableCell>
									<TableCell>{destinatario.nombre}</TableCell>
									<TableCell>
										<div class="flex gap-1">
											<Button size="sm" variant="ghost" onclick={() => openEditDestinatario(index)}>
												<Pencil size={14} />
											</Button>
											<Button size="sm" variant="ghost" onclick={() => deleteDestinatario(index)}>
												<Trash2 size={14} />
											</Button>
										</div>
									</TableCell>
								</TableRow>
							{/each}
						{/if}
					</TableBody>
				</Table>
			</div>

			<div class="flex gap-2">
				<Button size="sm" onclick={openNewDestinatario}>
					<Plus class="mr-1.5" size={14} />
					Nuevo
				</Button>
				<Button
					size="sm"
					variant="outline"
					disabled={formData?.destinatarios?.length === 0}
					onclick={() => {
						const index = 0;
						if (formData?.destinatarios?.[index]) openEditDestinatario(index);
					}}
				>
					<Pencil class="mr-1.5" size={14} />
					Editar
				</Button>
				<Button
					size="sm"
					variant="destructive"
					disabled={formData?.destinatarios?.length === 0}
					onclick={() => {
						const index = 0;
						if (formData?.destinatarios?.[index]) deleteDestinatario(index);
					}}
				>
					<Trash2 class="mr-1.5" size={14} />
					Borrar
				</Button>
			</div>
		</CardContent>
	</Card>
</div>

<!-- Dialog para Descargos -->
<Dialog bind:open={isDescargoDialogOpen}>
	<DialogContent class="max-w-3xl">
		<DialogHeader>
			<DialogTitle>
				{editingDescargoIndex !== null ? 'Editar Descargo' : 'Nuevo Descargo'}
			</DialogTitle>
		</DialogHeader>

		<div class="grid gap-4 py-4">
			<div class="grid grid-cols-3 gap-4">
				<div class="space-y-2">
					<Label for="d_patente">Patente *</Label>
					<Input id="d_patente" bind:value={currentDescargo.patente} placeholder="0000" />
				</div>
				<div class="space-y-2">
					<Label for="d_pedimento">Pedimento *</Label>
					<Input
						id="d_pedimento"
						bind:value={currentDescargo.pedimento}
						placeholder="00  00  0000  0000000"
					/>
				</div>
				<div class="space-y-2">
					<Label for="d_aduana">Aduana *</Label>
					<Input id="d_aduana" bind:value={currentDescargo.aduana} placeholder="00" />
				</div>
			</div>

			<div class="grid grid-cols-2 gap-4">
				<div class="space-y-2">
					<Label for="d_clave">Clave *</Label>
					<Input id="d_clave" bind:value={currentDescargo.clave} placeholder="Clave" />
				</div>
				<div class="space-y-2">
					<Label for="d_fecha_pago">Fecha Pago *</Label>
					<Input id="d_fecha_pago" type="date" bind:value={currentDescargo.fecha_pago} />
				</div>
			</div>

			<div class="grid grid-cols-3 gap-4">
				<div class="space-y-2">
					<Label for="d_fraccion">Fracción *</Label>
					<Input id="d_fraccion" bind:value={currentDescargo.fraccion} placeholder="0000.00.00" />
				</div>
				<div class="space-y-2">
					<Label for="d_umt">UMT *</Label>
					<Input id="d_umt" bind:value={currentDescargo.umt} placeholder="Ej: KG" />
				</div>
				<div class="space-y-2">
					<Label for="d_cantidad_tarifa">Cantidad Tarifa *</Label>
					<Input
						id="d_cantidad_tarifa"
						type="number"
						step="0.01"
						bind:value={currentDescargo.cantidad_tarifa}
						placeholder="0.00"
					/>
				</div>
			</div>
		</div>

		<DialogFooter>
			<Button variant="outline" onclick={() => (isDescargoDialogOpen = false)}>Cancelar</Button>
			<Button
				onclick={saveDescargo}
				disabled={!currentDescargo.patente ||
					!currentDescargo.pedimento ||
					!currentDescargo.aduana ||
					!currentDescargo.clave ||
					!currentDescargo.fecha_pago ||
					!currentDescargo.fraccion ||
					!currentDescargo.umt}
			>
				{editingDescargoIndex !== null ? 'Actualizar' : 'Guardar'}
			</Button>
		</DialogFooter>
	</DialogContent>
</Dialog>

<!-- Dialog para Destinatarios -->
<Dialog bind:open={isDestinatarioDialogOpen}>
	<DialogContent class="max-w-2xl">
		<DialogHeader>
			<DialogTitle>
				{editingDestinatarioIndex !== null ? 'Editar Destinatario' : 'Nuevo Destinatario'}
			</DialogTitle>
		</DialogHeader>

		<div class="grid gap-4 py-4">
			<div class="space-y-2">
				<Label for="dest_clave">Clave *</Label>
				<Input id="dest_clave" bind:value={currentDestinatario.clave} placeholder="Clave" />
			</div>

			<div class="space-y-2">
				<Label for="dest_identificacion">Identificación Fiscal *</Label>
				<Input
					id="dest_identificacion"
					bind:value={currentDestinatario.identificacion_fiscal}
					placeholder="RFC o identificación fiscal"
				/>
			</div>

			<div class="space-y-2">
				<Label for="dest_nombre">Nombre *</Label>
				<Input
					id="dest_nombre"
					bind:value={currentDestinatario.nombre}
					placeholder="Nombre del destinatario"
				/>
			</div>
		</div>

		<DialogFooter>
			<Button variant="outline" onclick={() => (isDestinatarioDialogOpen = false)}
				>Cancelar</Button
			>
			<Button
				onclick={saveDestinatario}
				disabled={!currentDestinatario.clave ||
					!currentDestinatario.identificacion_fiscal ||
					!currentDestinatario.nombre}
			>
				{editingDestinatarioIndex !== null ? 'Actualizar' : 'Guardar'}
			</Button>
		</DialogFooter>
	</DialogContent>
</Dialog>
