<script lang="ts">
	import { onMount } from 'svelte';
	import { browser } from '$app/environment';
	import { getAccessTokenFromDocument } from '$lib/access-token-cookie-browser';
	import { page } from '$app/stores';
	import * as Card from '$lib/components/ui/card';
	import { Button } from '$lib/components/ui/button';
	import { Input } from '$lib/components/ui/input';
	import { RefreshCw } from 'lucide-svelte';
	import { companyStore } from '$lib/stores/company.svelte';
	import {
		documentTypesDigitizationApi,
		type DocumentTypeDigitization
	} from '$lib/api/dashboard/reference_data/document_types_digitization';
	import DataTable from '$lib/components/dashboard/reference_data/invoice_types/data-table.svelte';
	import { createColumns } from '$lib/components/dashboard/reference_data/document_types_digitization/columns';
	import { useShortcuts } from '$lib/hooks/use-shortcuts';
	import type { PageData } from './$types';
	import { currentUser } from '$lib/auth';
	import { userHasInvoiceTypesRefAction } from '$lib/permissions/reference-data/invoice-types-ref-permissions';
	import ErrorState from '$lib/components/dashboard/common/error-state.svelte';

	let { data }: { data: PageData } = $props();

	onMount(() => {
		if (browser) {
			const getCookie = (name: string): string | null => {
				const value = `; ${document.cookie}`;
				const parts = value.split(`; ${name}=`);
				if (parts.length === 2) return parts.pop()?.split(';').shift() || null;
				return null;
			};
			const cookieToken = getAccessTokenFromDocument();
			const localToken = localStorage.getItem('access_token');
			if (cookieToken && cookieToken !== localToken) localStorage.setItem('access_token', cookieToken);
		}
	});

	let allItems = $state<DocumentTypeDigitization[]>(data.items || []);
	let currentPage = $state(data.page || 1);
	let pageSize = $state(data.page_size || 50);
	let totalItems = $state(data.total || 0);
	let loading = $state(false);
	let error = $state<string | null>(data.error || null);
	let status = $state<number>(data.status || 200);
	let searchQuery = $state($page.url.searchParams.get('search') || '');
	let timeout: ReturnType<typeof setTimeout>;
	let hasMore = $derived(allItems.length < totalItems);
	const canView = $derived(userHasInvoiceTypesRefAction($currentUser, 'view'));
	const isError = $derived(!canView || status >= 400 || error);

	function getActiveCompanyId(): number | null {
		const fromStore = companyStore.activeCompany?.id;
		if (fromStore) return fromStore;
		if (!browser) return null;
		const cookie = document.cookie
			.split('; ')
			.find((row) => row.startsWith('active_company_id='))
			?.split('=')[1];
		if (!cookie) return null;
		const parsed = Number(cookie);
		return Number.isFinite(parsed) ? parsed : null;
	}

	function handleSearch() {
		if (!browser) return;
		clearTimeout(timeout);
		timeout = setTimeout(async () => {
			loading = true;
			error = null;
			try {
				const companyId = getActiveCompanyId();
				if (!companyId) {
					error = 'No hay empresa activa seleccionada';
					return;
				}
				const response = await documentTypesDigitizationApi.list(1, pageSize, companyId, searchQuery);
				if (!response.error && response.data) {
					allItems = response.data.items;
					currentPage = 1;
					totalItems = response.data.total;
				}
			} catch (err) {
				error = 'Error aplicando filtros';
				console.error('Error applying filters:', err);
			} finally {
				loading = false;
			}

			const url = new URL($page.url);
			if (searchQuery) url.searchParams.set('search', searchQuery);
			else url.searchParams.delete('search');
			history.replaceState(history.state, '', url);
		}, 500);
	}

	async function loadMore() {
		if (loading || !hasMore) return;
		loading = true;
		error = null;
		try {
			const companyId = getActiveCompanyId();
			if (!companyId) {
				error = 'No hay empresa activa seleccionada';
				return;
			}
			const response = await documentTypesDigitizationApi.list(
				currentPage + 1,
				pageSize,
				companyId,
				searchQuery
			);
			if (response.error) {
				if (response.status === 401 || response.status === 403) {
					error = 'Sesión expirada. Recargando página...';
					setTimeout(() => window.location.reload(), 2000);
				} else {
					error = response.error;
				}
				return;
			}
			if (response.data?.items) {
				allItems = [...allItems, ...response.data.items];
				currentPage += 1;
				totalItems = response.data.total;
			}
		} catch (err) {
			error = 'Error cargando más datos';
			console.error('Error loading more document types:', err);
		} finally {
			loading = false;
		}
	}

	function reloadData() {
		window.location.reload();
	}

	useShortcuts('Tipos de documento para digitalización', [
		{ key: 'Alt+Shift+R', description: 'Actualizar Lista', action: reloadData }
	]);

	const columns = createColumns();
</script>

{#if isError}
	<div
		class="flex h-[calc(100svh-4rem)] flex-col p-6 group-has-data-[collapsible=icon]/sidebar-wrapper:h-[calc(100svh-3rem)]"
	>
		<ErrorState
			status={!canView ? 403 : status}
			error={!canView ? 'Permission denied: ref_invoice_types.view' : error || ''}
			onRetry={reloadData}
		/>
	</div>
{:else}
	<div class="flex h-[calc(100svh-4rem)] flex-col gap-6 overflow-hidden p-6 group-has-data-[collapsible=icon]/sidebar-wrapper:h-[calc(100svh-3rem)]">
		<div class="flex-none flex items-center justify-between">
			<div class="space-y-1">
				<h1 class="text-2xl font-bold tracking-tight">Tipos de documento para digitalización</h1>
				<p class="text-muted-foreground">
					Consulta el catálogo fijo de solo lectura utilizado por digitalización y pedimentos.
				</p>
			</div>
		</div>

		{#if error}
			<div class="flex-none rounded-md border border-destructive px-4 py-3 text-sm text-destructive">
				{error}
			</div>
		{/if}

		<Card.Root class="border bg-background flex min-h-0 flex-1 flex-col">
			<Card.Header>
				<div class="flex flex-wrap items-center justify-between gap-3">
					<Card.Title>Listado de tipos de documento</Card.Title>
					<div class="flex flex-wrap items-center gap-2">
						<Input
							placeholder="Buscar por código o descripción"
							bind:value={searchQuery}
							oninput={handleSearch}
							class="h-9 w-56 bg-card lg:w-72"
						/>
					</div>
				</div>
			</Card.Header>
			<Card.Content class="min-h-0 p-0">
				<div class="rounded-md border bg-background overflow-hidden flex min-h-0 flex-1 flex-col">
					<DataTable data={allItems} {columns} {loading} {hasMore} {loadMore} />
				</div>
			</Card.Content>
		</Card.Root>

		<div class="flex-none text-sm text-muted-foreground">Mostrando {allItems.length} de {totalItems} registros</div>
	</div>
{/if}