<script lang="ts">
	import { Button } from '$lib/components/ui/button';
	import { Input } from '$lib/components/ui/input';
	import * as Dialog from '$lib/components/ui/dialog';
	import { Search, Loader2, Truck } from 'lucide-svelte';
	import { toast } from 'svelte-sonner';
	import { transportersApi, type Transporter } from '$lib/api/dashboard/a76/transporters';
	import { companyStore } from '$lib/stores/company.svelte';

	let {
		open = $bindable(false),
		onSelect,
		onClear
	}: {
		open: boolean;
		onSelect: (item: Transporter) => void;
		onClear?: () => void;
	} = $props();

	let items = $state<Transporter[]>([]);
	let loading = $state(false);
	let searchTerm = $state('');
	let loaded = $state(false);

	let filteredItems = $derived(
		items.filter((i) => {
			const search = searchTerm.toLowerCase();
			return (
				(i.name?.toLowerCase() || '').includes(search) ||
				(i.transporter_key?.toLowerCase() || '').includes(search) ||
				(i.rfc?.toLowerCase() || '').includes(search)
			);
		})
	);

	$effect(() => {
		if (open && !loaded && companyStore.activeCompany?.id) {
			loadItems();
		}
	});

	async function loadItems() {
		if (!companyStore.activeCompany?.id) return;
		loading = true;
		try {
			// Explicitly set pagination to avoid defaults
			const res = await transportersApi.list(companyStore.activeCompany.id, {
				page: 1,
				page_size: 100
			});
			const data = (res as any).data || res;
			if (data) {
				if (Array.isArray(data)) {
					items = data;
				} else if (data.items) {
					// Handle case where items might be an array or inside an object
					items = Array.isArray(data.items) ? data.items : [];
				}
				loaded = true;
			} else if ((res as any).error) {
				console.error('API Error loading transporters:', (res as any).error);
				toast.error('Error al cargar transportistas: ' + (res as any).error);
				loaded = true;
			}
		} catch (e) {
			console.error('Error loading transporters:', e);
			toast.error('Error de conexión al cargar transportistas');
			loaded = true;
		} finally {
			loading = false;
		}
	}

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

	function handleRowKeydown(event: KeyboardEvent, item: Transporter) {
		if (event.key === 'Enter' || event.key === ' ') {
			event.preventDefault();
			handleSelect(item);
		}
	}
</script>

<Dialog.Root bind:open>
	<Dialog.Content class="flex max-h-[80vh] flex-col sm:max-w-[700px]">
		<Dialog.Header>
			<Dialog.Title>Seleccionar Transportista</Dialog.Title>
			<Dialog.Description>Busca y selecciona un transportista del catálogo.</Dialog.Description>
		</Dialog.Header>

		<div class="relative my-2 w-full">
			<Search class="absolute top-2.5 left-2.5 h-4 w-4 text-muted-foreground" />
			<Input
				type="search"
				placeholder="Buscar por nombre, clave o RFC..."
				class="pl-9"
				bind:value={searchTerm}
			/>
		</div>

		<div class="min-h-[300px] flex-1 overflow-y-auto rounded-md border">
			{#if loading}
				<div class="flex h-48 flex-col items-center justify-center gap-2 text-muted-foreground">
					<Loader2 class="h-8 w-8 animate-spin text-primary" />
					<p>Cargando catálogo...</p>
				</div>
			{:else if filteredItems.length === 0}
				<div class="flex h-48 flex-col items-center justify-center text-muted-foreground">
					<p>No se encontraron registros.</p>
				</div>
			{:else}
				<table class="w-full text-sm">
					<thead class="bg-muted/50">
						<tr class="border-b text-left">
							<th class="w-[100px] p-3 font-medium text-muted-foreground">Clave</th>
							<th class="w-[150px] p-3 font-medium text-muted-foreground">RFC</th>
							<th class="p-3 font-medium text-muted-foreground">Nombre / Razón Social</th>
						</tr>
					</thead>
					<tbody>
						{#each filteredItems as item}
							<tr
								class="cursor-pointer border-b transition-colors hover:bg-accent/50"
								tabindex="0"
								onclick={() => handleSelect(item)}
								onkeydown={(event) => handleRowKeydown(event, item)}
							>
								<td class="p-3 font-mono text-xs">{item.transporter_key}</td>
								<td class="p-3 font-mono text-xs">{item.rfc || '-'}</td>
								<td class="p-3">
									<div class="flex items-center gap-2">
										<Truck class="h-3 w-3 text-muted-foreground" />
										{item.name}
									</div>
								</td>
							</tr>
						{/each}
					</tbody>
				</table>
			{/if}
		</div>

		<Dialog.Footer>
			<div class="mr-auto self-center text-xs text-muted-foreground">
				Mostrando {filteredItems.length} registros
			</div>
			{#if onClear}
				<Button variant="ghost" onclick={() => { onClear(); open = false; }}>Quitar selección</Button>
			{/if}
			<Button variant="outline" onclick={() => (open = false)}>Cancelar</Button>
		</Dialog.Footer>
	</Dialog.Content>
</Dialog.Root>
