<script lang="ts">
	import { Card, CardContent } 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 * as Select from '$lib/components/ui/select';
	import Checkbox from '$lib/components/ui/checkbox/checkbox.svelte';
	import { Textarea } from '$lib/components/ui/textarea';
	import {
		Plus,
		Pencil,
		Trash2,
		FileText,
		RotateCw,
		Info
	} from 'lucide-svelte';

	interface Partida {
		id?: number;
		linea: number;
		fraccion: string;
		sub: string;
		descripcion: string;
		tipo: string;
		sector: string;
		origen: string;
		cantidad_comercial: number;
		umc: string;
		dolares: number;
	}

	let {
		formData = $bindable({
			partidas: [] as Partida[],
			convertir_uma_umc: false
		})
	}: {
		formData: {
			partidas: Partida[];
			convertir_uma_umc: boolean;
		};
	} = $props();

	let isDialogOpen = $state(false);
	let editingIndex = $state<number | null>(null);
	let selectedPartidas = $state<Set<number>>(new Set());

	let currentPartida = $state<Partida>({
		linea: 0,
		fraccion: '',
		sub: '',
		descripcion: '',
		tipo: '',
		sector: '',
		origen: '',
		cantidad_comercial: 0,
		umc: '',
		dolares: 0
	});

	const unidadesMedida = ['KG', 'LT', 'PZ', 'MT', 'M2', 'M3', 'TON', 'CAJ', 'PAR'];
	const tipos = ['Importación', 'Exportación', 'Retorno'];
	const sectores = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
	const origenes = [
		'Estados Unidos',
		'México',
		'Canadá',
		'China',
		'Alemania',
		'Japón',
		'Reino Unido',
		'Francia',
		'Italia',
		'España'
	];

	const totalPartidas = $derived(formData?.partidas?.length ?? 0);
	const totalDolares = $derived(
		formData?.partidas?.reduce((sum, p) => sum + (p.dolares || 0), 0) ?? 0
	);
	const totalCantidadComercial = $derived(
		formData?.partidas?.reduce((sum, p) => sum + (p.cantidad_comercial || 0), 0) ?? 0
	);

	function openNewPartida() {
		editingIndex = null;
		const nextLinea = formData?.partidas?.length ? Math.max(...formData.partidas.map(p => p.linea)) + 1 : 1;
		currentPartida = {
			linea: nextLinea,
			fraccion: '',
			sub: '',
			descripcion: '',
			tipo: '',
			sector: '',
			origen: '',
			cantidad_comercial: 0,
			umc: '',
			dolares: 0
		};
		isDialogOpen = true;
	}

	function openEditPartida(index: number) {
		if (!formData?.partidas) return;
		editingIndex = index;
		currentPartida = { ...formData.partidas[index] };
		isDialogOpen = true;
	}

	function savePartida() {
		if (!formData?.partidas) return;
		if (editingIndex !== null) {
			formData.partidas[editingIndex] = { ...currentPartida };
		} else {
			formData.partidas = [...formData.partidas, { ...currentPartida }];
		}
		isDialogOpen = false;
	}

	function deletePartida(index: number) {
		if (!formData?.partidas) return;
		if (confirm('¿Está seguro de eliminar esta partida?')) {
			formData.partidas = formData.partidas.filter((_, i) => i !== index);
			// Reordenar líneas
			formData.partidas = formData.partidas.map((p, idx) => ({ ...p, linea: idx + 1 }));
		}
	}

	function clearForm() {
		currentPartida = {
			linea: 0,
			fraccion: '',
			sub: '',
			descripcion: '',
			tipo: '',
			sector: '',
			origen: '',
			cantidad_comercial: 0,
			umc: '',
			dolares: 0
		};
	}

	function toggleSelectPartida(index: number) {
		if (selectedPartidas.has(index)) {
			selectedPartidas.delete(index);
		} else {
			selectedPartidas.add(index);
		}
		selectedPartidas = new Set(selectedPartidas);
	}

	function deleteSelectedPartidas() {
		if (!formData?.partidas) return;
		if (selectedPartidas.size === 0) {
			alert('No hay partidas seleccionadas');
			return;
		}
		if (confirm(`¿Está seguro de eliminar ${selectedPartidas.size} partida(s)?`)) {
			formData.partidas = formData.partidas.filter((_, i) => !selectedPartidas.has(i));
			// Reordenar líneas
			formData.partidas = formData.partidas.map((p, idx) => ({ ...p, linea: idx + 1 }));
			selectedPartidas = new Set();
		}
	}

	function detallesConsolidacion() {
		alert('Detalles de Consolidación no implementado aún');
	}

	function datosSoriana() {
		alert('Datos Soriana no implementado aún');
	}

	function refreshPartidas() {
		alert('Actualizar partidas no implementado aún');
	}
</script>

<Card>
	<CardContent class="p-6 space-y-4">
		<!-- Barra de herramientas superior -->
		<div class="flex flex-wrap gap-2 border-b pb-4">
			<Button size="sm" variant="outline" onclick={clearForm}>
				<RotateCw class="mr-1.5" size={14} />
				Limpiar
			</Button>
			<Button size="sm" onclick={openNewPartida}>
				<Plus class="mr-1.5" size={14} />
				Nuevo
			</Button>
			<Button
				size="sm"
				variant="outline"
				disabled={selectedPartidas.size !== 1}
				onclick={() => {
					const index = Array.from(selectedPartidas)[0];
					if (index !== undefined) openEditPartida(index);
				}}
			>
				<Pencil class="mr-1.5" size={14} />
				Editar
			</Button>
			<Button
				size="sm"
				variant="destructive"
				disabled={selectedPartidas.size !== 1}
				onclick={() => {
					const index = Array.from(selectedPartidas)[0];
					if (index !== undefined) deletePartida(index);
				}}
			>
				<Trash2 class="mr-1.5" size={14} />
				Borrar
			</Button>
			<Button
				size="sm"
				variant="destructive"
				disabled={selectedPartidas.size === 0}
				onclick={deleteSelectedPartidas}
			>
				<Trash2 class="mr-1.5" size={14} />
				Borrar Partidas
			</Button>
			<Button size="sm" variant="outline" onclick={detallesConsolidacion}>
				<Info class="mr-1.5" size={14} />
				Detalles de Consolidación
			</Button>
			<Button size="sm" variant="outline" onclick={datosSoriana}>
				<FileText class="mr-1.5" size={14} />
				Datos Soriana
			</Button>
			<Button size="sm" variant="outline" onclick={refreshPartidas}>
				<RotateCw size={14} />
			</Button>
		</div>

		<!-- Tabla de partidas -->
		<div class="border rounded-lg overflow-hidden">
			<Table>
				<TableHeader>
					<TableRow>
						<TableHead class="w-[50px]">Sel.</TableHead>
						<TableHead class="w-[80px]">Línea</TableHead>
						<TableHead>Fracción</TableHead>
						<TableHead>Sub</TableHead>
						<TableHead>Descripción</TableHead>
						<TableHead>Tipo</TableHead>
						<TableHead>Sector</TableHead>
						<TableHead>Origen</TableHead>
						<TableHead class="text-right">Cant. Comercial</TableHead>
						<TableHead>UMC</TableHead>
						<TableHead class="text-right">Dólares</TableHead>
						<TableHead class="w-[100px]">Acciones</TableHead>
					</TableRow>
				</TableHeader>
				<TableBody>
					{#if !formData?.partidas || formData.partidas.length === 0}
						<TableRow>
							<TableCell colspan={12} class="text-center text-muted-foreground py-8">
								No hay partidas registradas. Haga clic en "Nuevo" para agregar una.
							</TableCell>
						</TableRow>
					{:else}
						{#each formData.partidas as partida, index}
							<TableRow>
								<TableCell>
									<Checkbox
										checked={selectedPartidas.has(index)}
										onCheckedChange={() => toggleSelectPartida(index)}
									/>
								</TableCell>
								<TableCell class="font-medium">{partida.linea}</TableCell>
								<TableCell>{partida.fraccion}</TableCell>
								<TableCell>{partida.sub}</TableCell>
								<TableCell class="max-w-[200px] truncate" title={partida.descripcion}>
									{partida.descripcion}
								</TableCell>
								<TableCell>{partida.tipo}</TableCell>
								<TableCell>{partida.sector}</TableCell>
								<TableCell>{partida.origen}</TableCell>
								<TableCell class="text-right"
									>{partida.cantidad_comercial.toLocaleString('es-MX', {
										minimumFractionDigits: 2,
										maximumFractionDigits: 2
									})}</TableCell
								>
								<TableCell>{partida.umc}</TableCell>
								<TableCell class="text-right"
									>{partida.dolares.toLocaleString('es-MX', {
										minimumFractionDigits: 2,
										maximumFractionDigits: 2
									})}</TableCell
								>
								<TableCell>
									<div class="flex gap-1">
										<Button size="sm" variant="ghost" onclick={() => openEditPartida(index)}>
											<Pencil size={14} />
										</Button>
										<Button size="sm" variant="ghost" onclick={() => deletePartida(index)}>
											<Trash2 size={14} />
										</Button>
									</div>
								</TableCell>
							</TableRow>
						{/each}
					{/if}
				</TableBody>
			</Table>
		</div>

		<!-- Totales y opciones -->
		<div class="grid grid-cols-2 gap-6 border-t pt-4">
			<div class="space-y-2 text-sm">
				<div class="flex justify-between">
					<span>Partidas:</span>
					<span class="font-medium text-primary">{totalPartidas}</span>
				</div>
				<div class="flex justify-between">
					<span>Dólares:</span>
					<span class="font-medium text-primary"
						>{totalDolares.toLocaleString('es-MX', {
							minimumFractionDigits: 2,
							maximumFractionDigits: 2
						})} USD</span
					>
				</div>
				<div class="flex justify-between">
					<span>Pesos:</span>
					<span class="font-medium text-primary">0.00 MXN</span>
				</div>
				<div class="flex justify-between">
					<span>Valor Comercial:</span>
					<span class="font-medium text-primary">0.00</span>
				</div>
			</div>

			<div class="space-y-2 text-sm">
				<div class="flex justify-between">
					<span>Cant. UMC:</span>
					<span class="font-medium text-primary"
						>{totalCantidadComercial.toLocaleString('es-MX', {
							minimumFractionDigits: 2,
							maximumFractionDigits: 2
						})}</span
					>
				</div>
				<div class="flex justify-between">
					<span>Cant. UMT:</span>
					<span class="font-medium text-primary">0.00</span>
				</div>
				<div class="flex justify-between">
					<span>Val Agreg. Pesos:</span>
					<span class="font-medium text-primary">0.00 MXN</span>
				</div>
				<div class="flex justify-between">
					<span>Val Agreg. Dólares:</span>
					<span class="font-medium text-primary">0.00 USD</span>
				</div>
			</div>
		</div>

		<!-- Opciones adicionales -->
		<div class="flex items-center space-x-2 border-t pt-4">
			<Checkbox
				id="convertir_uma_umc"
				checked={formData?.convertir_uma_umc ?? false}
				onCheckedChange={(checked: boolean | 'indeterminate') =>
					formData && (formData.convertir_uma_umc = checked === true)}
			/>
			<Label for="convertir_uma_umc" class="font-normal cursor-pointer text-sm"
				>Captura Partidas: Convertir de UMA a UMC</Label
			>
		</div>
	</CardContent>
</Card>

<!-- Dialog para agregar/editar partida -->
<Dialog bind:open={isDialogOpen}>
	<DialogContent class="max-w-3xl max-h-[90vh] overflow-y-auto">
		<DialogHeader>
			<DialogTitle>{editingIndex !== null ? 'Editar Partida' : 'Nueva Partida'}</DialogTitle>
		</DialogHeader>

		<div class="grid gap-4 py-4">
			<div class="grid grid-cols-3 gap-4">
				<div class="space-y-2">
					<Label for="linea">Línea *</Label>
					<Input
						id="linea"
						type="number"
						bind:value={currentPartida.linea}
						placeholder="1"
						readonly
					/>
				</div>
				<div class="space-y-2">
					<Label for="fraccion">Fracción *</Label>
					<Input id="fraccion" bind:value={currentPartida.fraccion} placeholder="0000.00.00" />
				</div>
				<div class="space-y-2">
					<Label for="sub">Sub</Label>
					<Input id="sub" bind:value={currentPartida.sub} placeholder="00" />
				</div>
			</div>

			<div class="space-y-2">
				<Label for="descripcion">Descripción *</Label>
				<Textarea
					id="descripcion"
					bind:value={currentPartida.descripcion}
					placeholder="Descripción detallada de la partida"
					rows={3}
				/>
			</div>

			<div class="grid grid-cols-2 gap-4">
				<div class="space-y-2">
					<Label for="tipo">Tipo *</Label>
					<Select.Root
						type="single"
						value={currentPartida.tipo}
						onValueChange={(v: string | undefined) => v && (currentPartida.tipo = v)}
					>
						<Select.Trigger id="tipo">
							{currentPartida.tipo || 'Seleccionar tipo'}
						</Select.Trigger>
						<Select.Content>
							{#each tipos as tipo}
								<Select.Item value={tipo}>{tipo}</Select.Item>
							{/each}
						</Select.Content>
					</Select.Root>
				</div>
				<div class="space-y-2">
					<Label for="sector">Sector *</Label>
					<Select.Root
						type="single"
						value={currentPartida.sector}
						onValueChange={(v: string | undefined) => v && (currentPartida.sector = v)}
					>
						<Select.Trigger id="sector">
							{currentPartida.sector || 'Seleccionar sector'}
						</Select.Trigger>
						<Select.Content>
							{#each sectores as sector}
								<Select.Item value={sector}>{sector}</Select.Item>
							{/each}
						</Select.Content>
					</Select.Root>
				</div>
			</div>

			<div class="space-y-2">
				<Label for="origen">Origen *</Label>
				<Select.Root
					type="single"
					value={currentPartida.origen}
					onValueChange={(v: string | undefined) => v && (currentPartida.origen = v)}
				>
					<Select.Trigger id="origen">
						{currentPartida.origen || 'Seleccionar origen'}
					</Select.Trigger>
					<Select.Content>
						{#each origenes as origen}
							<Select.Item value={origen}>{origen}</Select.Item>
						{/each}
					</Select.Content>
				</Select.Root>
			</div>

			<div class="grid grid-cols-3 gap-4">
				<div class="space-y-2">
					<Label for="cantidad_comercial">Cant. Comercial *</Label>
					<Input
						id="cantidad_comercial"
						type="number"
						step="0.01"
						bind:value={currentPartida.cantidad_comercial}
						placeholder="0.00"
					/>
				</div>
				<div class="space-y-2">
					<Label for="umc">UMC *</Label>
					<Select.Root
						type="single"
						value={currentPartida.umc}
						onValueChange={(v: string | undefined) => v && (currentPartida.umc = v)}
					>
						<Select.Trigger id="umc">
							{currentPartida.umc || 'Seleccionar UMC'}
						</Select.Trigger>
						<Select.Content>
							{#each unidadesMedida as unidad}
								<Select.Item value={unidad}>{unidad}</Select.Item>
							{/each}
						</Select.Content>
					</Select.Root>
				</div>
				<div class="space-y-2">
					<Label for="dolares">Dólares *</Label>
					<Input
						id="dolares"
						type="number"
						step="0.01"
						bind:value={currentPartida.dolares}
						placeholder="0.00"
					/>
				</div>
			</div>
		</div>

		<DialogFooter>
			<Button variant="outline" onclick={() => (isDialogOpen = false)}>Cancelar</Button>
			<Button
				onclick={savePartida}
				disabled={!currentPartida.fraccion ||
					!currentPartida.descripcion ||
					!currentPartida.tipo ||
					!currentPartida.sector ||
					!currentPartida.origen ||
					!currentPartida.umc}
			>
				{editingIndex !== null ? 'Actualizar' : 'Guardar'}
			</Button>
		</DialogFooter>
	</DialogContent>
</Dialog>
