<script lang="ts">
	import * as Dialog from "$lib/components/ui/dialog";
	import * as Table from "$lib/components/ui/table";
	import { Button } from "$lib/components/ui/button";
	import { Input } from "$lib/components/ui/input";
	import { Search, Loader2 } from "lucide-svelte";
	import { valuationMethodsApi, type ValuationMethod } from "$lib/api/dashboard/reference_data/valuation_methods";
	import { onMount } from "svelte";
	import { m } from '$lib/i18n/messages';

	let {
		open = $bindable(false),
		onSelect,
		onClear
	}: {
		open: boolean;
		onSelect: (method: ValuationMethod) => void;
		onClear?: () => void;
	} = $props();

	let methods = $state<ValuationMethod[]>([]);
	let loading = $state(false);
	let searchTerm = $state("");

	async function loadMethods() {
		loading = true;
		try {
			const res = await valuationMethodsApi.list(1, 100);
			if (res.data) {
				methods = res.data.items || [];
			}
		} catch (error) {
			console.error("Error loading valuation methods:", error);
		} finally {
			loading = false;
		}
	}

	onMount(() => {
		loadMethods();
	});

	const filteredMethods = $derived(
		methods.filter(m => 
			m.key.toLowerCase().includes(searchTerm.toLowerCase()) || 
			m.description.toLowerCase().includes(searchTerm.toLowerCase())
		)
	);

	function handleSelect(method: ValuationMethod) {
		onSelect(method);
		open = false;
	}
</script>

<Dialog.Root bind:open>
	<Dialog.Content class="sm:max-w-[500px] h-[600px] flex flex-col p-0">
		<Dialog.Header class="px-6 pt-6 pb-4 shrink-0">
			<Dialog.Title>{m.invoice_selectors_valuation_method_title()}</Dialog.Title>
			<Dialog.Description>
				{m.invoice_selectors_valuation_method_description()}
			</Dialog.Description>
		</Dialog.Header>

		<div class="px-6 pb-4 shrink-0">
			<div class="relative">
				<Search class="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
				<Input
					type="search"
					placeholder={m.invoice_selectors_valuation_method_search_placeholder()}
					class="pl-9 h-9"
					bind:value={searchTerm}
				/>
			</div>
		</div>

		<div class="flex-1 overflow-y-auto px-6 pb-6">
			{#if loading}
				<div class="flex h-full items-center justify-center">
					<Loader2 class="h-6 w-6 animate-spin text-muted-foreground" />
				</div>
			{:else}
				<Table.Root>
					<Table.Header class="sticky top-0 bg-background z-10">
						<Table.Row>
							<Table.Head class="w-20">{m.invoice_selectors_valuation_method_column_code()}</Table.Head>
							<Table.Head>{m.invoice_selectors_valuation_method_column_description()}</Table.Head>
						</Table.Row>
					</Table.Header>
					<Table.Body>
						{#each filteredMethods as method}
							<Table.Row 
								class="cursor-pointer hover:bg-muted" 
								onclick={() => handleSelect(method)}
							>
								<Table.Cell class="font-medium">{method.key}</Table.Cell>
								<Table.Cell>{method.description}</Table.Cell>
							</Table.Row>
						{:else}
							<Table.Row>
								<Table.Cell colspan={2} class="h-24 text-center text-muted-foreground">
									{m.invoice_selectors_valuation_method_empty()}
								</Table.Cell>
							</Table.Row>
						{/each}
					</Table.Body>
				</Table.Root>
			{/if}
		</div>
		<div class="flex shrink-0 items-center justify-end gap-2 border-t px-6 py-4">
			{#if onClear}
				<Button variant="ghost" onclick={() => { onClear(); open = false; }}>Quitar selección</Button>
			{/if}
			<Button variant="outline" onclick={() => (open = false)}>Cerrar</Button>
		</div>
	</Dialog.Content>
</Dialog.Root>
