<script lang="ts">
	import { Card } 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 { Textarea } from '$lib/components/ui/textarea';
	import * as Table from '$lib/components/ui/table';
	import * as Dialog from '$lib/components/ui/dialog';

	interface Identificador {
		caso: string;
		complemento1: string;
		complemento2: string;
		complemento3: string;
		nodo: string;
		observaciones: string;
	}

	let {
		formData = $bindable({
			identificadores: []
		})
	}: {
		formData: {
			identificadores: Identificador[];
		};
	} = $props();

	let isIdentificadorDialogOpen = $state(false);
	let editingIdentificadorIndex = $state<number | null>(null);
	let currentIdentificador = $state<Identificador>({
		caso: '',
		complemento1: '',
		complemento2: '',
		complemento3: '',
		nodo: '',
		observaciones: ''
	});

	function handleNuevoIdentificador() {
		currentIdentificador = {
			caso: '',
			complemento1: '',
			complemento2: '',
			complemento3: '',
			nodo: '',
			observaciones: ''
		};
		editingIdentificadorIndex = null;
		isIdentificadorDialogOpen = true;
	}

	function handleEditarIdentificador(index: number) {
		currentIdentificador = { ...formData.identificadores[index] };
		editingIdentificadorIndex = index;
		isIdentificadorDialogOpen = true;
	}

	function handleBorrarIdentificador(index: number) {
		formData.identificadores = formData.identificadores.filter((_, i) => i !== index);
	}

	function saveIdentificador() {
		if (editingIdentificadorIndex !== null) {
			formData.identificadores[editingIdentificadorIndex] = { ...currentIdentificador };
		} else {
			formData.identificadores = [...formData.identificadores, { ...currentIdentificador }];
		}
		isIdentificadorDialogOpen = false;
	}
</script>

<Card class="p-6">
	<div class="space-y-4">
		<div class="flex items-center justify-between">
			<h3 class="text-lg font-semibold">Identificadores</h3>
			<Button size="sm" onclick={handleNuevoIdentificador}>
				Nuevo
			</Button>
		</div>

		{#if formData.identificadores.length === 0}
			<p class="text-sm text-muted-foreground text-center py-8">
				No hay identificadores registrados
			</p>
		{:else}
			<Table.Root>
				<Table.Header>
					<Table.Row>
						<Table.Head>Caso</Table.Head>
						<Table.Head>Complemento 1</Table.Head>
						<Table.Head>Complemento 2</Table.Head>
						<Table.Head>Complemento 3</Table.Head>
						<Table.Head>Nodo</Table.Head>
						<Table.Head>Observaciones</Table.Head>
						<Table.Head class="text-right">Acciones</Table.Head>
					</Table.Row>
				</Table.Header>
				<Table.Body>
					{#each formData.identificadores as identificador, index}
						<Table.Row>
							<Table.Cell>{identificador.caso}</Table.Cell>
							<Table.Cell>{identificador.complemento1}</Table.Cell>
							<Table.Cell>{identificador.complemento2}</Table.Cell>
							<Table.Cell>{identificador.complemento3}</Table.Cell>
							<Table.Cell>{identificador.nodo}</Table.Cell>
							<Table.Cell class="max-w-xs truncate">{identificador.observaciones}</Table.Cell>
							<Table.Cell class="text-right">
								<div class="flex justify-end gap-2">
									<Button size="sm" variant="outline" onclick={() => handleEditarIdentificador(index)}>
										Editar
									</Button>
									<Button size="sm" variant="destructive" onclick={() => handleBorrarIdentificador(index)}>
										Borrar
									</Button>
								</div>
							</Table.Cell>
						</Table.Row>
					{/each}
				</Table.Body>
			</Table.Root>
		{/if}
	</div>
</Card>

<!-- Dialog para agregar/editar identificador -->
<Dialog.Root bind:open={isIdentificadorDialogOpen}>
	<Dialog.Content class="max-w-2xl">
		<Dialog.Header>
			<Dialog.Title>
				{editingIdentificadorIndex !== null ? 'Editar' : 'Nuevo'} Identificador
			</Dialog.Title>
		</Dialog.Header>

		<div class="grid grid-cols-2 gap-4">
			<div class="space-y-2">
				<Label for="caso">Caso</Label>
				<Input id="caso" bind:value={currentIdentificador.caso} />
			</div>

			<div class="space-y-2">
				<Label for="complemento1">Complemento 1</Label>
				<Input id="complemento1" bind:value={currentIdentificador.complemento1} />
			</div>

			<div class="space-y-2">
				<Label for="complemento2">Complemento 2</Label>
				<Input id="complemento2" bind:value={currentIdentificador.complemento2} />
			</div>

			<div class="space-y-2">
				<Label for="complemento3">Complemento 3</Label>
				<Input id="complemento3" bind:value={currentIdentificador.complemento3} />
			</div>

			<div class="space-y-2">
				<Label for="nodo">Nodo</Label>
				<Input id="nodo" bind:value={currentIdentificador.nodo} />
			</div>

			<div class="space-y-2 col-span-2">
				<Label for="observaciones">Observaciones</Label>
				<Textarea id="observaciones" bind:value={currentIdentificador.observaciones} rows={3} />
			</div>
		</div>

		<Dialog.Footer>
			<Button variant="outline" onclick={() => (isIdentificadorDialogOpen = false)}>
				Cancelar
			</Button>
			<Button onclick={saveIdentificador}>Aceptar</Button>
		</Dialog.Footer>
	</Dialog.Content>
</Dialog.Root>
