<script lang="ts">
	import { onMount } from 'svelte';
	import type { AccountInput } from '$lib/api/crm';
	import { satCatalogsAPI, type SatCatalogItem, type SatTaxRegime } from '$lib/api/fin';
	import { ACCOUNT_TYPES } from '$lib/components/crm/format';
	import { crmCatalogs } from '$lib/stores/crm-catalogs.svelte';
	import { toast } from 'svelte-sonner';

	// `form` es un objeto reactivo del padre; se mutan sus propiedades vía bind:value.
	// `companyId` solo se usa para consultar los catálogos del SAT del receptor.
	let { form = $bindable(), tab, companyId = null }: { form: AccountInput; tab: string; companyId?: number | null } = $props();

	let taxRegimes = $state<SatTaxRegime[]>([]);
	let cfdiUses = $state<SatCatalogItem[]>([]);

	// El régimen se acota al tipo de persona de la cuenta: una persona física no puede
	// declararse en el 601 y viceversa. Sin tipo de persona se ofrecen todos.
	const regimesForPersonType = $derived(
		form.person_type === 'fisica'
			? taxRegimes.filter((r) => r.applies_to_individual)
			: form.person_type === 'moral'
				? taxRegimes.filter((r) => r.applies_to_legal_entity)
				: taxRegimes
	);

	$effect(() => {
		const cid = companyId;
		if (!cid || tab !== 'fiscal') return;
		void loadCatalogs(cid);
	});

	async function loadCatalogs(cid: number) {
		try {
			[taxRegimes, cfdiUses] = await Promise.all([
				satCatalogsAPI.taxRegimes(cid),
				satCatalogsAPI.cfdiUses(cid)
			]);
		} catch (e) {
			toast.error(e instanceof Error ? e.message : 'No se pudieron cargar los catálogos del SAT');
		}
	}

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

	// Catálogos que usa este formulario (se precargan; los selects se llenan solos).
	onMount(() => {
		void crmCatalogs.preload([
			'tipo_registro', 'tipo_persona', 'estatus', 'giro', 'clasificacion_cliente',
			'medio_contacto', 'idioma', 'regimen_fiscal', 'uso_cfdi', 'metodo_pago',
			'forma_pago', 'moneda'
		]);
	});
</script>

{#if tab === 'generales'}
	<div class="grid gap-4 sm:grid-cols-2">
		<label class="flex flex-col gap-1 text-sm sm:col-span-2"><span class="font-medium">Razón social *</span><input class={inputCls} bind:value={form.name} required /></label>
		<label class="flex flex-col gap-1 text-sm"><span class="font-medium">Nombre comercial</span><input class={inputCls} bind:value={form.trade_name} /></label>
		<label class="flex flex-col gap-1 text-sm"><span class="font-medium">RFC</span><input class="font-mono {inputCls}" maxlength="13" bind:value={form.rfc} /></label>
		<label class="flex flex-col gap-1 text-sm"><span class="font-medium">CURP</span><input class="font-mono {inputCls}" maxlength="18" bind:value={form.curp} /></label>
		<label class="flex flex-col gap-1 text-sm"><span class="font-medium">Tipo de registro</span><select class={inputCls} bind:value={form.record_type}>{#each crmCatalogs.options('tipo_registro') as r (r.value)}<option value={r.value}>{r.label}</option>{/each}</select></label>
		<label class="flex flex-col gap-1 text-sm"><span class="font-medium">Tipo de persona</span><select class={inputCls} bind:value={form.person_type}><option value={undefined}>—</option>{#each crmCatalogs.options('tipo_persona') as p (p.value)}<option value={p.value}>{p.label}</option>{/each}</select></label>
		<label class="flex flex-col gap-1 text-sm"><span class="font-medium">Giro / Industria</span><select class={inputCls} bind:value={form.industry}><option value={undefined}>—</option>{#each crmCatalogs.options('giro') as g (g.value)}<option value={g.value}>{g.label}</option>{/each}</select></label>
		{#if form.industry === 'otro'}
			<label class="flex flex-col gap-1 text-sm"><span class="font-medium">Especifica el giro</span><input class={inputCls} bind:value={form.industry_other} placeholder="Indica cuál" /></label>
		{/if}
		<label class="flex flex-col gap-1 text-sm"><span class="font-medium">Tipo operativo</span><select class={inputCls} bind:value={form.account_type}><option value={undefined}>—</option>{#each ACCOUNT_TYPES as t (t.value)}<option value={t.value}>{t.label}</option>{/each}</select></label>
		<label class="flex flex-col gap-1 text-sm"><span class="font-medium">Estatus</span><select class={inputCls} bind:value={form.status}>{#each crmCatalogs.options('estatus') as s (s.value)}<option value={s.value}>{s.label}</option>{/each}</select></label>
	</div>
{:else if tab === 'comercial'}
	<div class="grid gap-4 sm:grid-cols-2">
		<label class="flex flex-col gap-1 text-sm"><span class="font-medium">Clasificación del cliente</span><select class={inputCls} bind:value={form.commercial_classification}><option value={undefined}>—</option>{#each crmCatalogs.options('clasificacion_cliente') as c (c.value)}<option value={c.value}>{c.label}</option>{/each}</select></label>
		<label class="flex flex-col gap-1 text-sm"><span class="font-medium">Medio de contacto preferido</span><select class={inputCls} bind:value={form.preferred_contact_method}><option value={undefined}>—</option>{#each crmCatalogs.options('medio_contacto') as m (m.value)}<option value={m.value}>{m.label}</option>{/each}</select></label>
		{#if form.preferred_contact_method === 'otro'}
			<label class="flex flex-col gap-1 text-sm sm:col-span-2"><span class="font-medium">Especifica el medio de contacto</span><input class={inputCls} bind:value={form.preferred_contact_other} placeholder="Indica cuál" /></label>
		{/if}
		<label class="flex flex-col gap-1 text-sm"><span class="font-medium">Idioma</span><select class={inputCls} bind:value={form.language}><option value={undefined}>—</option>{#each crmCatalogs.options('idioma') as i (i.value)}<option value={i.value}>{i.label}</option>{/each}</select></label>
		<label class="flex flex-col gap-1 text-sm"><span class="font-medium">Email</span><input type="email" class={inputCls} bind:value={form.email} /></label>
		<label class="flex flex-col gap-1 text-sm"><span class="font-medium">Teléfono</span><input class={inputCls} bind:value={form.phone} /></label>
		<label class="flex flex-col gap-1 text-sm"><span class="font-medium">Sitio web</span><input class={inputCls} bind:value={form.website} /></label>
		<label class="flex flex-col gap-1 text-sm sm:col-span-2"><span class="font-medium">Observaciones generales</span><textarea rows="3" class={inputCls} bind:value={form.commercial_observations}></textarea></label>
	</div>
{:else if tab === 'fiscal'}
	<div class="grid gap-4 sm:grid-cols-2">
		<!-- Régimen fiscal y uso de CFDI salen del catálogo del SAT, no del catálogo configurable
		     del CRM: son las claves que viajan en el CFDI y el PAC las valida contra c_RegimenFiscal
		     y c_UsoCFDI. El resto sí son catálogos del CRM. -->
		<label class="flex flex-col gap-1 text-sm">
			<span class="font-medium">Régimen fiscal</span>
			<select class={inputCls} bind:value={form.tax_regime_id}>
				<option value={null}>Sin especificar</option>
				{#each regimesForPersonType as r (r.id)}<option value={r.id}>{r.code} — {r.description}</option>{/each}
			</select>
			{#if !form.tax_regime_id && form.tax_regime}
				<span class="text-xs text-muted-foreground">Capturado antes como texto: «{form.tax_regime}». Elige la clave del SAT que corresponde.</span>
			{/if}
		</label>
		<label class="flex flex-col gap-1 text-sm">
			<span class="font-medium">Uso de CFDI</span>
			<select class={inputCls} bind:value={form.cfdi_use_id}>
				<option value={null}>Sin especificar</option>
				{#each cfdiUses as u (u.id)}<option value={u.id}>{u.code} — {u.description}</option>{/each}
			</select>
			{#if !form.cfdi_use_id && form.cfdi_use}
				<span class="text-xs text-muted-foreground">Capturado antes como texto: «{form.cfdi_use}». Elige la clave del SAT que corresponde.</span>
			{/if}
		</label>
		<label class="flex flex-col gap-1 text-sm"><span class="font-medium">Método de pago</span><select class={inputCls} bind:value={form.payment_method}><option value={undefined}>—</option>{#each crmCatalogs.options('metodo_pago') as m (m.value)}<option value={m.value}>{m.value} — {m.label}</option>{/each}</select></label>
		<label class="flex flex-col gap-1 text-sm"><span class="font-medium">Forma de pago</span><select class={inputCls} bind:value={form.payment_form}><option value={undefined}>—</option>{#each crmCatalogs.options('forma_pago') as f (f.value)}<option value={f.value}>{f.value} — {f.label}</option>{/each}</select></label>
		<label class="flex flex-col gap-1 text-sm"><span class="font-medium">Moneda</span><select class={inputCls} bind:value={form.currency}><option value={undefined}>—</option>{#each crmCatalogs.options('moneda') as c (c.value)}<option value={c.value}>{c.value} — {c.label}</option>{/each}</select></label>
		<label class="flex flex-col gap-1 text-sm"><span class="font-medium">Límite de crédito</span><input type="number" min="0" step="0.01" class={inputCls} bind:value={form.credit_limit} /></label>
		<label class="flex flex-col gap-1 text-sm"><span class="font-medium">Días de crédito</span><input type="number" min="0" class={inputCls} bind:value={form.credit_days} /></label>
		<label class="flex flex-col gap-1 text-sm"><span class="font-medium">Patente aduanal</span><input class={inputCls} maxlength="20" bind:value={form.patente_aduanal} /></label>
		<label class="flex flex-col gap-1 text-sm sm:col-span-2"><span class="font-medium">Condiciones comerciales</span><textarea rows="3" class={inputCls} bind:value={form.commercial_terms}></textarea></label>
	</div>
{:else if tab === 'observaciones'}
	<div class="grid gap-4 sm:grid-cols-2">
		<label class="flex flex-col gap-1 text-sm"><span class="font-medium">Comentarios generales</span><textarea rows="4" class={inputCls} bind:value={form.notes}></textarea></label>
		<label class="flex flex-col gap-1 text-sm"><span class="font-medium">Notas internas</span><textarea rows="4" class={inputCls} bind:value={form.internal_notes}></textarea></label>
	</div>
{/if}
