<script lang="ts">
	import { Database, Plus, Trash2, Pencil, Check, X, Lock } from '@lucide/svelte';
	import * as Card from '$lib/components/ui/card';
	import * as Table from '$lib/components/ui/table';
	import { Button } from '$lib/components/ui/button';
	import { companyStore } from '$lib/stores/company.svelte';
	import { referenceCatalogsAPI, type CatalogItem, type CatalogMeta } from '$lib/api/crm/catalogs';
	import { crmCatalogs } from '$lib/stores/crm-catalogs.svelte';
	import { toast } from 'svelte-sonner';

	const companyId = $derived(companyStore.activeCompany?.id ?? null);

	let metas = $state<CatalogMeta[]>([]);
	let selected = $state<CatalogMeta | null>(null);
	let items = $state<CatalogItem[]>([]);
	let loading = $state(false);

	let newCode = $state('');
	let newLabel = $state('');
	let adding = $state(false);
	let editId = $state<number | null>(null);
	let editLabel = $state('');
	let editActive = $state(true);

	const inputCls =
		'rounded-md border bg-transparent px-2 py-1 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring';

	$effect(() => {
		const cid = companyId;
		if (cid) void loadMetas(cid);
	});

	async function loadMetas(cid: number) {
		try {
			metas = await referenceCatalogsAPI.meta(cid);
			if (!selected && metas.length) void selectCatalog(metas[0]);
		} catch (e) {
			toast.error(e instanceof Error ? e.message : 'No se pudieron cargar los catálogos');
		}
	}

	async function selectCatalog(m: CatalogMeta) {
		selected = m;
		editId = null;
		newCode = '';
		newLabel = '';
		if (!companyId) return;
		loading = true;
		try {
			items = await referenceCatalogsAPI.listAll(m.catalog, companyId);
		} catch (e) {
			toast.error(e instanceof Error ? e.message : 'No se pudieron cargar las opciones');
		} finally {
			loading = false;
		}
	}

	async function addItem() {
		if (!companyId || !selected) return;
		const code = newCode.trim();
		const label = newLabel.trim();
		if (!code || !label) {
			toast.error('Clave y descripción son obligatorias');
			return;
		}
		adding = true;
		try {
			const res = await referenceCatalogsAPI.create(
				selected.catalog,
				companyId,
				{ code, label },
				selected.scope
			);
			if (res.error) {
				toast.error(res.error);
				return;
			}
			toast.success('Opción agregada');
			newCode = '';
			newLabel = '';
			crmCatalogs.invalidate(selected.catalog);
			await selectCatalog(selected);
		} finally {
			adding = false;
		}
	}

	function startEdit(it: CatalogItem) {
		editId = it.id;
		editLabel = it.label;
		editActive = it.is_active;
	}

	async function saveEdit(it: CatalogItem) {
		if (!companyId || !selected) return;
		const res = await referenceCatalogsAPI.update(selected.catalog, it.id, companyId, {
			label: editLabel.trim() || it.label,
			is_active: editActive
		});
		if (res.error) {
			toast.error(res.error);
			return;
		}
		toast.success('Opción actualizada');
		editId = null;
		crmCatalogs.invalidate(selected.catalog);
		await selectCatalog(selected);
	}

	async function del(it: CatalogItem) {
		if (!companyId || !selected) return;
		if (!confirm(`¿Eliminar la opción "${it.label}"?`)) return;
		const res = await referenceCatalogsAPI.remove(selected.catalog, it.id, companyId);
		if (res.error) {
			toast.error(res.error);
			return;
		}
		toast.success('Opción eliminada');
		crmCatalogs.invalidate(selected.catalog);
		await selectCatalog(selected);
	}
</script>

<div class="space-y-6">
	<div>
		<h1 class="flex items-center gap-2 text-2xl font-bold tracking-tight"><Database class="h-6 w-6" /> Catálogos</h1>
		<p class="mt-1 text-sm text-muted-foreground">
			Administra las opciones de los catálogos del CRM. Los catálogos base del sistema (SAT/ISO) solo se pueden activar/desactivar; los de tu empresa se pueden insertar, editar y borrar.
		</p>
	</div>

	{#if !companyId}
		<Card.Root><Card.Content class="pt-6 text-sm text-muted-foreground">Selecciona una compañía activa.</Card.Content></Card.Root>
	{:else}
		<div class="grid gap-6 lg:grid-cols-[260px_1fr]">
			<Card.Root>
				<Card.Header><Card.Title class="text-base">Catálogos</Card.Title></Card.Header>
				<Card.Content class="space-y-1">
					{#each metas as m (m.catalog)}
						<button
							type="button"
							class="flex w-full items-center justify-between gap-2 rounded-md px-2 py-1.5 text-left text-sm {selected?.catalog === m.catalog ? 'bg-primary/10 text-primary' : 'hover:bg-muted'}"
							onclick={() => selectCatalog(m)}
						>
							<span class="flex items-center gap-1">{#if m.is_system}<Lock class="h-3 w-3 opacity-60" />{/if}{m.label}</span>
							<span class="text-xs text-muted-foreground">{m.count}</span>
						</button>
					{/each}
				</Card.Content>
			</Card.Root>

			<Card.Root>
				<Card.Header>
					<Card.Title class="text-base">{selected?.label ?? 'Opciones'}</Card.Title>
					<Card.Description>
						{#if selected}
							{selected.scope === 'global' ? 'Catálogo global (Aduanasoft)' : 'Catálogo de tu empresa'} · {selected.count} opciones
							{#if selected.is_system} · base del sistema (no se borra){/if}
						{/if}
					</Card.Description>
				</Card.Header>
				<Card.Content>
					<div class="mb-4 flex flex-wrap items-end gap-2">
						<label class="flex flex-col gap-1 text-sm"><span class="font-medium">Clave</span><input class="font-mono {inputCls}" bind:value={newCode} placeholder="clave" /></label>
						<label class="flex flex-1 flex-col gap-1 text-sm"><span class="font-medium">Descripción</span><input class={inputCls} bind:value={newLabel} placeholder="Descripción visible" /></label>
						<Button size="sm" onclick={addItem} disabled={adding}><Plus class="mr-1 h-4 w-4" /> Agregar</Button>
					</div>

					{#if loading}
						<p class="py-6 text-center text-sm text-muted-foreground">Cargando…</p>
					{:else if items.length === 0}
						<p class="py-6 text-center text-sm text-muted-foreground">Sin opciones. Agrega la primera arriba.</p>
					{:else}
						<div class="overflow-x-auto">
							<Table.Root>
								<Table.Header><Table.Row><Table.Head>Clave</Table.Head><Table.Head>Descripción</Table.Head><Table.Head>Origen</Table.Head><Table.Head>Activo</Table.Head><Table.Head class="text-right">Acciones</Table.Head></Table.Row></Table.Header>
								<Table.Body>
									{#each items as it (it.id)}
										<Table.Row>
											<Table.Cell class="font-mono text-xs">{it.code}</Table.Cell>
											<Table.Cell>
												{#if editId === it.id}
													<input class="{inputCls} w-full" bind:value={editLabel} />
												{:else}
													{it.label}
												{/if}
											</Table.Cell>
											<Table.Cell class="text-xs text-muted-foreground">{it.tenant_id === null ? 'Global' : 'Empresa'}{#if it.is_system} · base{/if}</Table.Cell>
											<Table.Cell>
												{#if editId === it.id}
													<input type="checkbox" class="h-4 w-4 rounded border" bind:checked={editActive} />
												{:else}
													<span class="inline-flex rounded-full px-2 py-0.5 text-xs {it.is_active ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-400' : 'bg-muted text-muted-foreground'}">{it.is_active ? 'Sí' : 'No'}</span>
												{/if}
											</Table.Cell>
											<Table.Cell class="text-right">
												{#if editId === it.id}
													<Button variant="ghost" size="sm" onclick={() => saveEdit(it)} aria-label="Guardar"><Check class="h-4 w-4 text-emerald-600" /></Button>
													<Button variant="ghost" size="sm" onclick={() => (editId = null)} aria-label="Cancelar"><X class="h-4 w-4" /></Button>
												{:else}
													<Button variant="ghost" size="sm" onclick={() => startEdit(it)} aria-label="Editar"><Pencil class="h-4 w-4" /></Button>
													{#if !it.is_system}
														<Button variant="ghost" size="sm" onclick={() => del(it)} aria-label="Eliminar"><Trash2 class="h-4 w-4 text-destructive" /></Button>
													{/if}
												{/if}
											</Table.Cell>
										</Table.Row>
									{/each}
								</Table.Body>
							</Table.Root>
						</div>
					{/if}
				</Card.Content>
			</Card.Root>
		</div>
	{/if}
</div>
