<script lang="ts">
	import * as AlertDialog from '$lib/components/ui/alert-dialog';
	import { CircleAlert } from 'lucide-svelte';

	let {
		open = $bindable(false),
		agentsCount = 0,
		clientsCount = 0,
		onAccept,
		onCancel
	}: {
		open?: boolean;
		agentsCount?: number;
		clientsCount?: number;
		onAccept?: () => void;
		onCancel?: () => void;
	} = $props();

	const showModal = $derived(agentsCount === 0 || clientsCount === 0);

	const message = $derived(
		agentsCount === 0 && clientsCount === 0
			? 'No hay Agentes aduanales ni Clientes registrados. Debes darlos de alta para poder trabajar en este módulo.'
			: agentsCount === 0
				? 'No hay Agentes aduanales registrados. Debes darlos de alta para poder trabajar en este módulo.'
				: 'No hay Clientes registrados. Debes darlos de alta para poder trabajar en este módulo.'
	);

	function handleOpenChange(newOpen: boolean) {
		open = newOpen;
	}

	function handleCancel() {
		onCancel?.();
	}

	function handleAccept() {
		onAccept?.();
	}
</script>

<AlertDialog.Root bind:open onOpenChange={handleOpenChange}>
	<AlertDialog.Content>
		<AlertDialog.Header>
			<div class="flex items-center gap-3">
				<CircleAlert class="h-6 w-6 shrink-0 text-amber-500" />
				<AlertDialog.Title>Aviso</AlertDialog.Title>
			</div>
			<AlertDialog.Description class="space-y-3 pt-1">
				<p>{message}</p>
				<p class="text-sm text-muted-foreground">
					Puedes registrarlos en
					<a
						href="/dashboard/customs_brokers"
						class="font-medium text-primary underline underline-offset-4 hover:no-underline"
					>
						Agentes Aduanales
					</a>
					 y
					<a
						href="/dashboard/clients_and_providers"
						class="font-medium text-primary underline underline-offset-4 hover:no-underline"
					>
						Clientes y Proveedores
					</a>.
				</p>
			</AlertDialog.Description>
		</AlertDialog.Header>
		<AlertDialog.Footer>
			<AlertDialog.Cancel onclick={handleCancel}>Cancelar</AlertDialog.Cancel>
			<AlertDialog.Action onclick={handleAccept}>Aceptar</AlertDialog.Action>
		</AlertDialog.Footer>
	</AlertDialog.Content>
</AlertDialog.Root>
