<script lang="ts">
	import { Button } from '$lib/components/ui/button';
	import * as Dialog from '$lib/components/ui/dialog';
	import { Input } from '$lib/components/ui/input';
	import { Label } from '$lib/components/ui/label';
	import * as Select from '$lib/components/ui/select';
	import {
		invoicesApi,
		type Invoice,
		type CreateInvoiceData,
		type UpdateInvoiceData
	} from '$lib/api/dashboard/a76/invoices';
	import { getExchangeRates } from '$lib/api/dashboard/a76/general_catalogs/exchange-rate';
	import { companyStore } from '$lib/stores/company.svelte';
	import { LoaderCircle } from 'lucide-svelte';
	import * as Tabs from '$lib/components/ui/tabs';
	import ExchangeRateDialog from '$lib/components/dashboard/exchange_rate/create-edit-dialog.svelte';
	import { m } from '$lib/i18n/messages';
	import { tick } from 'svelte';
	import { normalizeInvoiceFieldPath } from './focus-invoice-field';

	type DialogTabKind = 'general' | 'compliance' | 'financials';

	let dialogTab = $state<DialogTabKind>('general');

	const DIALOG_FIELD_TAB: Record<string, DialogTabKind> = {
		operation_type: 'general',
		invoice_type: 'general',
		invoice_number: 'general',
		invoice_date: 'general',
		project_number: 'general',
		purchase_order: 'general',
		traffic_light_status: 'general',
		cfdi_uuid: 'general',
		observation_es: 'general',
		observation_en: 'general',
		comments_status: 'general',
		aduana: 'compliance',
		pedimento: 'compliance',
		remesa: 'compliance',
		customs_broker_id: 'compliance',
		provider_id: 'compliance',
		edocument: 'compliance',
		sold_to_id: 'compliance',
		shipped_to_id: 'compliance',
		exchange_rate: 'financials',
		currency: 'financials',
		currency_foreign: 'financials',
		value_mn: 'financials',
		value_me: 'financials',
		customs_value_mn: 'financials',
		freight: 'financials',
		insurance: 'financials',
		iva_mn: 'financials',
		iva_factor: 'financials'
	};

	async function focusInvoiceDialogControl(fieldRaw: string) {
		const key = normalizeInvoiceFieldPath(fieldRaw);
		if (!key) return;
		const tab = DIALOG_FIELD_TAB[key];
		if (tab) dialogTab = tab;
		await tick();
		await new Promise<void>((r) => requestAnimationFrame(() => r()));
		let el = document.querySelector(`[data-invoice-dialog-field="${key}"]`) as HTMLElement | null;
		if (!el && key === 'currency_foreign') {
			el = document.querySelector('[data-invoice-dialog-field="exchange_rate"]') as HTMLElement | null;
		}
		if (!el) return;
		el.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' });
		try {
			el.focus({ preventScroll: true });
		} catch {
			try {
				el.focus();
			} catch {
				/* ignore */
			}
		}
	}

	let {
		open = $bindable(false),
		item = $bindable<Invoice | null>(null),
		defaultOperationType,
		defaultInvoiceType,
		onSuccess
	}: {
		open: boolean;
		item?: Invoice | null;
		defaultOperationType?: 'imp' | 'exp';
		defaultInvoiceType?: string;
		onSuccess?: () => void;
	} = $props();

	let formData = $state({
		// Header fields
		operation_type: 'imp' as 'imp' | 'exp',
		invoice_type: '',
		invoice_number: '',
		project_number: '',
		purchase_order: '',
		related_doc_id: null as number | null,
		invoice_date: '',
		traffic_light_status: '',
		observation_es: '',
		observation_en: '',
		comments_status: '',
		cfdi_uuid: '',
		path_pdf: '',
		path_xml: '',
		// Compliance MX fields
		remesa: null as number | null,
		aduana: '',
		customs_broker_id: '',
		provider_id: '',
		sold_to_id: '',
		shipped_to_id: '',
		shipped_by_id: '',
		is_mixed: false,
		waste_type: '',
		appendix_17: null as number | null,
		edocument: '',
		// Financials fields
		currency: 'MXN',
		exchange_rate: null as number | null,
		value_mn: null as number | null,
		value_me: null as number | null,
		customs_value_mn: null as number | null,
		freight: null as number | null,
		insurance: null as number | null,
		iva_mn: null as number | null,
		iva_factor: null as number | null,
		total_quantity: null as number | null,
		gross_weight: null as number | null,
		net_weight: null as number | null,
		bundle_count: null as number | null
	});

	let loading = $state(false);
	let error = $state<string | null>(null);

	let showExchangeRateDialog = $state(false);
	let missingExchangeRateDate = $state('');

	// Actualizar formData cuando item cambia
	$effect(() => {
		if (item) {
			formData = {
				operation_type: item.operation_type || 'imp',
				invoice_type: item.invoice_type || '',
				invoice_number: item.invoice_number || '',
				project_number: item.project_number || '',
				purchase_order: item.purchase_order || '',
				related_doc_id: item.related_doc_id || null,
				invoice_date: item.invoice_date || '',
				traffic_light_status: item.traffic_light_status || '',
				observation_es: item.observation_es || '',
				observation_en: item.observation_en || '',
				comments_status: item.comments_status || '',
				cfdi_uuid: item.cfdi_uuid || '',
				path_pdf: item.path_pdf || '',
				path_xml: item.path_xml || '',
				remesa: item.compliance_mx?.remesa || null,
				aduana: item.compliance_mx?.aduana || '',
				customs_broker_id: item.compliance_mx?.customs_broker_id?.toString() || '',
				provider_id: item.compliance_mx?.provider_id?.toString() || '',
				sold_to_id: item.compliance_mx?.sold_to_id?.toString() || '',
				shipped_to_id: item.compliance_mx?.shipped_to_id?.toString() || '',
				shipped_by_id: item.compliance_mx?.shipped_by_id?.toString() || '',
				is_mixed: item.compliance_mx?.is_mixed || false,
				waste_type: item.compliance_mx?.waste_type || '',
				appendix_17: item.compliance_mx?.appendix_17 || null,
				edocument: item.compliance_mx?.edocument || '',
				currency: item.financials?.currency || 'MXN',
				exchange_rate: item.financials?.exchange_rate || null,
				value_mn: item.financials?.value_mn || null,
				value_me: item.financials?.value_me || null,
				customs_value_mn: item.financials?.customs_value_mn || null,
				freight: item.financials?.freight || null,
				insurance: item.financials?.insurance || null,
				iva_mn: item.financials?.iva_mn || null,
				iva_factor: item.financials?.iva_factor || null,
				total_quantity: item.financials?.total_quantity || null,
				gross_weight: item.financials?.gross_weight || null,
				net_weight: item.financials?.net_weight || null,
				bundle_count: item.financials?.bundle_count || null
			};
		} else {
			resetForm();
		}
	});

	const isEditing = $derived(!!item);

	function resetForm() {
		formData = {
			operation_type: defaultOperationType || 'imp',
			invoice_type: defaultInvoiceType || '',
			invoice_number: '',
			project_number: '',
			purchase_order: '',
			related_doc_id: null,
			invoice_date: '',
			traffic_light_status: '',
			observation_es: '',
			observation_en: '',
			comments_status: '',
			cfdi_uuid: '',
			path_pdf: '',
			path_xml: '',
			remesa: null,
			aduana: '',
			customs_broker_id: '',
			provider_id: '',
			sold_to_id: '',
			shipped_to_id: '',
			shipped_by_id: '',
			is_mixed: false,
			waste_type: '',
			appendix_17: null,
			edocument: '',
			currency: 'MXN',
			exchange_rate: null,
			value_mn: null,
			value_me: null,
			customs_value_mn: null,
			freight: null,
			insurance: null,
			iva_mn: null,
			iva_factor: null,
			total_quantity: null,
			gross_weight: null,
			net_weight: null,
			bundle_count: null
		};
	}

	async function handleSubmit(e: Event) {
		e.preventDefault();

		if (!companyStore.activeCompany) {
			error = m.invoice_edit_form_no_company_selected();
			return;
		}

		// Validar tipo de cambio
		if (
			formData.exchange_rate === null ||
			formData.exchange_rate === undefined ||
			String(formData.exchange_rate).trim() === ''
		) {
			error = m.invoice_edit_form_exchange_rate_required();
			await focusInvoiceDialogControl('exchange_rate');
			return;
		}
		if (Number(formData.exchange_rate) <= 0) {
			error = m.invoice_edit_form_exchange_rate_positive();
			await focusInvoiceDialogControl('exchange_rate');
			return;
		}

		loading = true;
		error = null;

		try {
			// Verificar tipo de cambio antes de guardar
			if (formData.invoice_date) {
				const rateExists = await checkExchangeRate(formData.invoice_date);
				if (!rateExists) {
					loading = false;
					return;
				}
			}

			let response;
			if (isEditing && item) {
				const payload: UpdateInvoiceData = {
					id: item.id,
					operation_type: formData.operation_type,
					invoice_type: formData.invoice_type || null,
					invoice_number: formData.invoice_number || null,
					project_number: formData.project_number || null,
					purchase_order: formData.purchase_order || null,
					related_doc_id: formData.related_doc_id,
					invoice_date: formData.invoice_date || null,
					traffic_light_status: formData.traffic_light_status || null,
					observation_es: formData.observation_es || null,
					observation_en: formData.observation_en || null,
					comments_status: formData.comments_status || null,
					cfdi_uuid: formData.cfdi_uuid || null,
					path_pdf: formData.path_pdf || null,
					path_xml: formData.path_xml || null,
					compliance_mx: {
						remesa: formData.remesa,
						aduana: formData.aduana || null,
						customs_broker_id: formData.customs_broker_id
							? parseInt(formData.customs_broker_id)
							: null,
						provider_id: formData.provider_id ? parseInt(formData.provider_id) : null,
						sold_to_id: formData.sold_to_id ? parseInt(formData.sold_to_id) : null,
						shipped_to_id: formData.shipped_to_id ? parseInt(formData.shipped_to_id) : null,
						shipped_by_id: formData.shipped_by_id ? parseInt(formData.shipped_by_id) : null,
						is_mixed: formData.is_mixed,
						waste_type: formData.waste_type || null,
						appendix_17: formData.appendix_17 || null,
						edocument: formData.edocument || null
					},
					financials: {
						currency: formData.currency || null,
						exchange_rate: formData.exchange_rate,
						value_mn: formData.value_mn,
						value_me: formData.value_me,
						customs_value_mn: formData.customs_value_mn,
						freight: formData.freight,
						insurance: formData.insurance,
						iva_mn: formData.iva_mn,
						iva_factor: formData.iva_factor,
						total_quantity: formData.total_quantity,
						gross_weight: formData.gross_weight,
						net_weight: formData.net_weight,
						bundle_count: formData.bundle_count
					}
				};
				response = await invoicesApi.update(item.id, companyStore.activeCompany.id, payload);
			} else {
				const payload: CreateInvoiceData = {
					system: 'a76',
					document_type: 'invoice',
					operation_type: formData.operation_type,
					invoice_type: formData.invoice_type,
					invoice_number: formData.invoice_number,
					project_number: formData.project_number || null,
					purchase_order: formData.purchase_order || null,
					related_doc_id: formData.related_doc_id,
					invoice_date: formData.invoice_date || null,
					traffic_light_status: formData.traffic_light_status || null,
					observation_es: formData.observation_es || null,
					observation_en: formData.observation_en || null,
					comments_status: formData.comments_status || null,
					cfdi_uuid: formData.cfdi_uuid || null,
					path_pdf: formData.path_pdf || null,
					path_xml: formData.path_xml || null,
					compliance_mx: {
						remesa: formData.remesa,
						aduana: formData.aduana || null,
						customs_broker_id: formData.customs_broker_id
							? parseInt(formData.customs_broker_id)
							: null,
						provider_id: formData.provider_id ? parseInt(formData.provider_id) : null,
						sold_to_id: formData.sold_to_id ? parseInt(formData.sold_to_id) : null,
						shipped_to_id: formData.shipped_to_id ? parseInt(formData.shipped_to_id) : null,
						shipped_by_id: formData.shipped_by_id ? parseInt(formData.shipped_by_id) : null,
						is_mixed: formData.is_mixed,
						waste_type: formData.waste_type || null,
						appendix_17: formData.appendix_17 || null,
						edocument: formData.edocument || null
					},
					financials: {
						currency: formData.currency || null,
						exchange_rate: formData.exchange_rate,
						value_mn: formData.value_mn,
						value_me: formData.value_me,
						customs_value_mn: formData.customs_value_mn,
						freight: formData.freight,
						insurance: formData.insurance,
						iva_mn: formData.iva_mn,
						iva_factor: formData.iva_factor,
						total_quantity: formData.total_quantity,
						gross_weight: formData.gross_weight,
						net_weight: formData.net_weight,
						bundle_count: formData.bundle_count
					}
				};
				response = await invoicesApi.create(companyStore.activeCompany.id, payload);
			}

			if (response.error) {
				if (response.status === 401) {
					error = 'Sesión expirada. Recargando página...';
					setTimeout(() => {
						window.location.reload();
					}, 1500);
				} else {
					// Convertir el error a string para buscar mensajes específicos (maneja objetos/arrays de DRF)
					const errorStr =
						typeof response.error === 'string' ? response.error : JSON.stringify(response.error);

					if (
						errorStr.includes('No existe un Tipo de Cambio registrado') ||
						errorStr.includes('financials.exchange_rate')
					) {
						// Interceptar error de tipo de cambio
						error = null;

						const dateMatch = errorStr.match(/(\d{4}-\d{2}-\d{2})/);
						missingExchangeRateDate = dateMatch ? dateMatch[0] : formData.invoice_date || '';

						showExchangeRateDialog = true;
						await focusInvoiceDialogControl('financials.exchange_rate');
						return;
					}

					error = response.error;
					const firstErr = response.validationErrors?.[0]?.field;
					if (firstErr) {
						await focusInvoiceDialogControl(firstErr);
					}
				}
				return;
			}

			// Check exchange rate BEFORE calling API to avoid 400 error
			if (formData.invoice_date) {
				const rateExists = await checkExchangeRate(formData.invoice_date);
				if (!rateExists) {
					loading = false;
					return;
				}
			}

			// Éxito
			open = false;
			if (onSuccess) {
				onSuccess();
			}
		} catch (e) {
			error = e instanceof Error ? e.message : m.invoice_edit_form_save_error();
			console.error('Error saving:', e);
		} finally {
			loading = false;
		}
	}

	async function checkExchangeRate(date: string): Promise<boolean> {
		if (!date || !companyStore.activeCompany?.id) return true;

		try {
			const response = await getExchangeRates(companyStore.activeCompany.id, {
				date: date,
				page_size: 1
			});

			// api.get returns { data: ..., status: ... } and types now reflect that
			const items = response.data?.items || [];

			// Verificar estrictamente que haya items
			if (items.length === 0) {
				missingExchangeRateDate = date;
				showExchangeRateDialog = true;
				return false;
			}
			return true;
		} catch (error) {
			console.error('Error checking exchange rate:', error);
			missingExchangeRateDate = date;
			showExchangeRateDialog = true;
			return false;
		}
	}

	function handleOpenChange(newOpen: boolean) {
		if (!newOpen) {
			resetForm();
			error = null;
			dialogTab = 'general';
		}
		open = newOpen;
	}
</script>

<Dialog.Root {open} onOpenChange={handleOpenChange}>
	<Dialog.Content class="max-h-[90vh] overflow-y-auto sm:max-w-full">
		<Dialog.Header>
			<Dialog.Title>
				{isEditing ? m.invoice_edit_edit_title() : m.invoice_edit_new_title()}
			</Dialog.Title>
			<Dialog.Description>
				{isEditing ? m.invoice_edit_edit_description() : m.invoice_edit_new_description()}
			</Dialog.Description>
		</Dialog.Header>

		<form onsubmit={handleSubmit} class="space-y-4">
			<Tabs.Root bind:value={dialogTab} class="w-full">
				<Tabs.List class="grid w-full grid-cols-3">
					<Tabs.Trigger value="general">{m.invoice_edit_tabs_general()}</Tabs.Trigger>
					<Tabs.Trigger value="compliance">{m.invoice_edit_tabs_compliance()}</Tabs.Trigger>
					<Tabs.Trigger value="financials">{m.invoice_edit_tabs_financials()}</Tabs.Trigger>
				</Tabs.List>

				<!-- General Tab -->
				<Tabs.Content value="general" class="space-y-4">
					<div class="grid grid-cols-2 gap-4">
						<div class="space-y-2">
							<Label for="operation_type">{m.invoice_edit_form_operation_type_label()}</Label>
							<Select.Root
								type="single"
								value={formData.operation_type}
								onValueChange={(v: string) => {
									if (v) formData.operation_type = v as 'imp' | 'exp';
								}}
							>
								<Select.Trigger data-invoice-dialog-field="operation_type">
									{formData.operation_type === 'imp'
										? m.invoice_edit_form_operation_type_import()
										: formData.operation_type === 'exp'
											? m.invoice_edit_form_operation_type_export()
											: m.invoice_edit_form_operation_type_placeholder()}
								</Select.Trigger>
								<Select.Content>
									<Select.Item value="imp">{m.invoice_edit_form_operation_type_import()}</Select.Item>
									<Select.Item value="exp">{m.invoice_edit_form_operation_type_export()}</Select.Item>
								</Select.Content>
							</Select.Root>
						</div>
						<div class="space-y-2">
							<Label for="invoice_number">{m.invoice_edit_form_invoice_number_label()}</Label>
							<Input
								id="invoice_number"
								data-invoice-dialog-field="invoice_number"
								bind:value={formData.invoice_number}
								placeholder={m.invoice_edit_form_invoice_number_placeholder()}
							/>
						</div>

						<div class="space-y-2">
							<Label for="invoice_type">{m.invoice_edit_form_invoice_type_label()}</Label>
							<Input
								id="invoice_type"
								data-invoice-dialog-field="invoice_type"
								bind:value={formData.invoice_type}
								placeholder={m.invoice_edit_form_invoice_type_placeholder()}
							/>
						</div>

						<div class="space-y-2">
							<Label for="project_number">{m.invoice_edit_form_project_number_label()}</Label>
							<Input
								id="project_number"
								bind:value={formData.project_number}
								placeholder={m.invoice_edit_form_project_number_placeholder()}
							/>
						</div>

						<div class="space-y-2">
							<Label for="purchase_order">{m.invoice_edit_form_purchase_order_label()}</Label>
							<Input
								id="purchase_order"
								bind:value={formData.purchase_order}
								placeholder={m.invoice_edit_form_purchase_order_placeholder()}
							/>
						</div>

						<div class="space-y-2">
							<Label for="invoice_date">{m.invoice_edit_form_invoice_date_label()}</Label>
							<Input
								id="invoice_date"
								data-invoice-dialog-field="invoice_date"
								type="date"
								bind:value={formData.invoice_date}
							/>
						</div>

						<div class="space-y-2">
							<Label for="traffic_light_status">{m.invoice_edit_form_traffic_light_status_label()}</Label>
							<Input
								id="traffic_light_status"
								bind:value={formData.traffic_light_status}
								placeholder={m.invoice_edit_form_traffic_light_status_placeholder()}
							/>
						</div>

						<div class="space-y-2">
							<Label for="cfdi_uuid">CFDI UUID</Label>
							<Input id="cfdi_uuid" bind:value={formData.cfdi_uuid} placeholder="UUID del CFDI" />
						</div>
					</div>

					<div class="grid grid-cols-1 gap-4">
						<div class="space-y-2">
							<Label for="observation_es">{m.invoice_edit_form_observation_es_label()}</Label>
							<Input
								id="observation_es"
								bind:value={formData.observation_es}
								placeholder={m.invoice_edit_form_observation_es_placeholder()}
							/>
						</div>

						<div class="space-y-2">
							<Label for="observation_en">{m.invoice_edit_form_observation_en_label()}</Label>
							<Input
								id="observation_en"
								bind:value={formData.observation_en}
								placeholder={m.invoice_edit_form_observation_en_placeholder()}
							/>
						</div>
					</div>
				</Tabs.Content>

				<!-- Compliance Tab -->
				<Tabs.Content value="compliance" class="space-y-4">
					<div class="grid grid-cols-2 gap-4">
						<div class="space-y-2">
							<Label for="remesa">{m.invoice_edit_general_remesa_label()}</Label>
							<Input
								id="remesa"
								type="number"
								bind:value={formData.remesa}
								placeholder={m.invoice_edit_form_remesa_placeholder()}
							/>
						</div>

						<div class="space-y-2">
							<Label for="aduana">{m.invoice_edit_form_aduana_label()}</Label>
							<Input
								id="aduana"
								data-invoice-dialog-field="aduana"
								bind:value={formData.aduana}
								placeholder={m.invoice_edit_form_aduana_placeholder()}
							/>
						</div>

						<div class="space-y-2">
							<Label for="customs_broker_id">{m.invoice_edit_form_customs_broker_label()}</Label>
							<Input
								id="customs_broker_id"
								bind:value={formData.customs_broker_id}
								placeholder={m.invoice_edit_form_customs_broker_placeholder()}
							/>
						</div>

						<div class="space-y-2">
							<Label for="provider_id">{m.invoice_edit_form_provider_label()}</Label>
							<Input
								id="provider_id"
								bind:value={formData.provider_id}
								placeholder={m.invoice_edit_form_provider_placeholder()}
							/>
						</div>

						<div class="space-y-2">
							<Label for="edocument">{m.invoice_edit_form_edocument_label()}</Label>
							<Input
								id="edocument"
								bind:value={formData.edocument}
								placeholder={m.invoice_edit_form_edocument_placeholder()}
							/>
						</div>

						<div class="flex items-center gap-2 space-y-2 pt-8">
							<input
								id="is_mixed"
								type="checkbox"
								bind:checked={formData.is_mixed}
								class="h-4 w-4"
							/>
							<Label for="is_mixed" class="!mt-0">{m.invoice_edit_form_is_mixed_label()}</Label>
						</div>
					</div>
				</Tabs.Content>

				<!-- Financials Tab -->
				<Tabs.Content value="financials" class="space-y-4">
					<div class="grid grid-cols-2 gap-4">
						<div class="space-y-2">
							<Label for="currency">{m.invoice_edit_general_currency_label()}</Label>
							<Input id="currency" bind:value={formData.currency} placeholder={m.invoice_edit_form_currency_placeholder()} />
						</div>

						<div class="space-y-2">
							<Label for="exchange_rate">{m.invoice_edit_general_exchange_rate()}</Label>
							<Input
								id="exchange_rate"
								data-invoice-dialog-field="exchange_rate"
								type="number"
								step="0.000001"
								bind:value={formData.exchange_rate}
								placeholder={m.invoice_edit_form_exchange_rate_placeholder()}
							/>
						</div>

						<div class="space-y-2">
							<Label for="value_mn">{m.invoice_edit_form_value_mn_label()}</Label>
							<Input
								id="value_mn"
								type="number"
								step="0.01"
								bind:value={formData.value_mn}
								placeholder={m.invoice_edit_form_value_mn_placeholder()}
							/>
						</div>

						<div class="space-y-2">
							<Label for="value_me">{m.invoice_edit_form_value_me_label()}</Label>
							<Input
								id="value_me"
								type="number"
								step="0.01"
								bind:value={formData.value_me}
								placeholder={m.invoice_edit_form_value_me_placeholder()}
							/>
						</div>

						<div class="space-y-2">
							<Label for="customs_value_mn">{m.invoice_edit_form_customs_value_mn_label()}</Label>
							<Input
								id="customs_value_mn"
								type="number"
								step="0.01"
								bind:value={formData.customs_value_mn}
								placeholder={m.invoice_edit_form_customs_value_mn_placeholder()}
							/>
						</div>

						<div class="space-y-2">
							<Label for="freight">{m.invoice_edit_form_freight_label()}</Label>
							<Input
								id="freight"
								type="number"
								step="0.01"
								bind:value={formData.freight}
								placeholder={m.invoice_edit_form_freight_placeholder()}
							/>
						</div>

						<div class="space-y-2">
							<Label for="insurance">{m.invoice_edit_form_insurance_label()}</Label>
							<Input
								id="insurance"
								type="number"
								step="0.01"
								bind:value={formData.insurance}
								placeholder={m.invoice_edit_form_insurance_placeholder()}
							/>
						</div>

						<div class="space-y-2">
							<Label for="iva_mn">{m.invoice_edit_form_iva_mn_label()}</Label>
							<Input
								id="iva_mn"
								type="number"
								step="0.01"
								bind:value={formData.iva_mn}
								placeholder={m.invoice_edit_form_iva_mn_placeholder()}
							/>
						</div>

						<div class="space-y-2">
							<Label for="total_quantity">{m.invoice_edit_form_total_quantity_label()}</Label>
							<Input
								id="total_quantity"
								type="number"
								step="0.01"
								bind:value={formData.total_quantity}
								placeholder={m.invoice_edit_form_total_quantity_placeholder()}
							/>
						</div>

						<div class="space-y-2">
							<Label for="gross_weight">{m.invoice_edit_form_gross_weight_label()}</Label>
							<Input
								id="gross_weight"
								type="number"
								step="0.01"
								bind:value={formData.gross_weight}
								placeholder={m.invoice_edit_form_gross_weight_placeholder()}
							/>
						</div>

						<div class="space-y-2">
							<Label for="net_weight">{m.invoice_edit_form_net_weight_label()}</Label>
							<Input
								id="net_weight"
								type="number"
								step="0.01"
								bind:value={formData.net_weight}
								placeholder={m.invoice_edit_form_net_weight_placeholder()}
							/>
						</div>

						<div class="space-y-2">
							<Label for="bundle_count">{m.invoice_edit_form_bundle_count_label()}</Label>
							<Input
								id="bundle_count"
								type="number"
								bind:value={formData.bundle_count}
								placeholder={m.invoice_edit_form_bundle_count_placeholder()}
							/>
						</div>
					</div>
				</Tabs.Content>
			</Tabs.Root>

			{#if error}
				<div class="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
					{error}
				</div>
			{/if}

			<Dialog.Footer>
				<Button type="button" variant="outline" onclick={() => (open = false)} disabled={loading}>
					{m.invoice_edit_page_cancel()}
				</Button>
				<Button type="submit" disabled={loading}>
					{#if loading}
						<LoaderCircle class="mr-2 h-4 w-4 animate-spin" />
					{/if}
					{isEditing ? m.invoice_edit_form_update_button() : m.invoice_edit_form_create_button()}
				</Button>
			</Dialog.Footer>
		</form>
	</Dialog.Content>
</Dialog.Root>

<ExchangeRateDialog
	bind:open={showExchangeRateDialog}
	initialDate={missingExchangeRateDate}
	overlayClass="bg-black/20"
	onSuccess={() => {
		/* Optional: maybe refresh something or just let user continue */
	}}
/>
