<script lang="ts">
	import * as Dialog from '$lib/components/ui/dialog';
	import { Button } from '$lib/components/ui/button';
	import { Input } from '$lib/components/ui/input';
	import { Loader2, Search } from 'lucide-svelte';
	import { statesApi, type State } from '$lib/api/dashboard/reference_data/states';
	import { m } from '$lib/i18n/messages';

	let {
		open = $bindable(),
		onSelect,
		onClear,
		countryCode = ''
	}: {
		open: boolean;
		onSelect: (state: State) => void;
		onClear?: () => void;
		countryCode?: string;
	} = $props();

	let items: State[] = $state([]);
	let filteredItems: State[] = $state([]);
	let loading = $state(false);
	let searchTerm = $state('');
	let error = $state('');

	async function loadStates() {
		loading = true;
		error = '';
		try {
			const response = await statesApi.list(1, 100);
			if (response.data?.items) {
				items = response.data.items;
				filteredItems = items;
			} else if (response.error) {
				error = response.error;
			}
		} catch (err) {
			error = m['invoice_item_fa.dialogs.states_load_error']();
			console.error('Error loading states:', err);
		} finally {
			loading = false;
		}
	}

	function filterStates() {
		let list = items;

		// Filter by country if provided
		if (countryCode) {
			list = list.filter((item) => item.m3_key === countryCode);
		}

		// Filter by search term
		if (searchTerm.trim()) {
			const term = searchTerm.toLowerCase();
			list = list.filter(
				(item) =>
					item.m3_key?.toLowerCase().includes(term) ||
					item.mex_key?.toLowerCase().includes(term) ||
					item.description?.toLowerCase().includes(term)
			);
		}

		filteredItems = list;
	}

	function handleSelect(item: State) {
		onSelect(item);
		open = false;
	}

	function handleRowKeydown(event: KeyboardEvent, item: State) {
		if (event.key === 'Enter' || event.key === ' ') {
			event.preventDefault();
			handleSelect(item);
		}
	}

	$effect(() => {
		if (open) {
			loadStates();
		}
	});

	$effect(() => {
		filterStates();
	});
</script>

<Dialog.Root bind:open>
	<Dialog.Content class="flex max-h-[90vh] w-[70vw] !max-w-[70vw] flex-col p-0">
		<Dialog.Header class="border-b px-6 py-4">
			<Dialog.Title class="text-lg font-semibold">CATALOGO DE ESTADOS</Dialog.Title>
		</Dialog.Header>

		<div class="border-b bg-zinc-50 px-6 py-3 dark:bg-zinc-900">
			<div class="flex items-center gap-2">
				<Search class="h-4 w-4 text-zinc-400" />
				<Input
					bind:value={searchTerm}
					placeholder="Buscando por clave o nombre..."
					class="h-9 flex-1"
				/>
			</div>
		</div>

		<div class="flex-1 overflow-auto px-6 py-4">
			{#if loading}
				<div class="flex items-center justify-center py-20">
					<Loader2 class="h-8 w-8 animate-spin text-zinc-900 dark:text-zinc-100" />
				</div>
			{:else if error}
				<div class="flex items-center justify-center py-20 text-red-600">
					<p>{error}</p>
				</div>
			{:else}
				<div class="overflow-hidden rounded-md border">
					<table class="w-full text-sm">
						<thead class="bg-zinc-900 text-white dark:bg-zinc-800">
							<tr>
								<th class="w-24 border-r border-zinc-700 px-3 py-2 text-left font-semibold"
									>Clave M3</th
								>
								<th class="w-24 border-r border-zinc-700 px-3 py-2 text-left font-semibold"
									>Clave Mex</th
								>
								<th class="w-24 border-r border-zinc-700 px-3 py-2 text-left font-semibold"
									>Clave Ame</th
								>
								<th class="px-3 py-2 text-left font-semibold">Descripción</th>
							</tr>
						</thead>
						<tbody>
							{#each filteredItems as item}
								<tr
									class="cursor-pointer border-b transition-colors hover:bg-zinc-100 dark:hover:bg-zinc-800"
									tabindex="0"
									onclick={() => handleSelect(item)}
									onkeydown={(event) => handleRowKeydown(event, item)}
								>
									<td class="border-r px-3 py-2 font-mono font-semibold">{item.m3_key || ''}</td>
									<td class="border-r px-3 py-2">{item.mex_key || ''}</td>
									<td class="border-r px-3 py-2">{item.ame_key || ''}</td>
									<td class="px-3 py-2">{item.description || ''}</td>
								</tr>
							{/each}
							{#if filteredItems.length === 0}
								<tr>
									<td colspan="4" class="px-3 py-8 text-center text-zinc-500">
										No se encontraron resultados
									</td>
								</tr>
							{/if}
						</tbody>
					</table>
				</div>
			{/if}
		</div>

		<div class="flex items-center justify-end gap-2 border-t bg-zinc-50 px-6 py-3 dark:bg-zinc-900">
			{#if onClear}
				<Button variant="ghost" size="sm" onclick={() => { onClear(); open = false; }}>Quitar selección</Button>
			{/if}
			<Button variant="outline" size="sm" onclick={() => (open = false)}>Cancelar</Button>
		</div>
	</Dialog.Content>
</Dialog.Root>
