<script lang="ts">
	import { Label } from '$lib/components/ui/label/index.js';
	import { Input } from '$lib/components/ui/input/index.js';
	import { Checkbox } from '$lib/components/ui/checkbox/index.js';
	import * as RadioGroup from '$lib/components/ui/radio-group/index.js';
	import { Settings2 } from 'lucide-svelte';
	import { tabSettings } from '$lib/config/csv-upload';
	import { csvMsg } from '$lib/i18n/csv-msg';

	const TAB_LABEL: Record<string, string> = {
		catalogos: 'tab_catalogos',
		transportes: 'tab_transportes',
		importacion: 'tab_importacion',
		exportacion: 'tab_exportacion'
	};

	let {
		activeTab,
		settings = $bindable()
	}: {
		activeTab: string;
		settings: Record<string, any>;
	} = $props();

	let currentFields = $derived(tabSettings[activeTab] || []);

	// Determine grid columns based on number of fields
	let gridClass = $derived(
		currentFields.length > 4
			? 'grid-cols-4'
			: currentFields.length > 2
				? 'grid-cols-3'
				: currentFields.length > 1
					? 'grid-cols-2'
					: 'grid-cols-1'
	);
</script>

<!-- 
    No positioning here. Parent layout controls placement. 
    Just styling the "Island".
-->
<div
	class="border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 p-4 rounded-xl shadow-2xl mx-4 mb-4"
>
	<div class="flex flex-col gap-4">
		<div class="flex items-center gap-2 text-muted-foreground border-b pb-2">
			<Settings2 class="h-4 w-4" />
			<span class="text-xs font-semibold uppercase tracking-wider"
				>{csvMsg('config_prefix')}: {csvMsg(TAB_LABEL[activeTab] ?? activeTab)}</span
			>
		</div>

		{#if currentFields.length > 0}
			<div class="grid {gridClass} gap-6">
				{#each currentFields as field}
					<div class="flex flex-col gap-2">
						{#if field.type !== 'boolean'}
							<Label class="text-xs font-medium text-muted-foreground uppercase"
								>{csvMsg(field.labelKey)}</Label
							>
						{/if}

						{#if field.type === 'text'}
							<Input type="text" bind:value={settings[field.name]} class="h-8" />
						{:else if field.type === 'boolean'}
							<div class="flex items-center space-x-2 h-8">
								<Checkbox id={field.name} bind:checked={settings[field.name]} />
								<Label
									for={field.name}
									class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
									>{csvMsg(field.labelKey)}</Label
								>
							</div>
						{:else if field.type === 'select' && field.options}
							<select
								class="flex h-8 w-full rounded-md border border-input bg-background px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
								bind:value={settings[field.name]}
							>
								{#each field.options as opt}
									<option value={opt.value}>{csvMsg(opt.labelKey)}</option>
								{/each}
							</select>
						{:else if field.type === 'radio' && field.options}
							<RadioGroup.Root
								bind:value={settings[field.name]}
								class="flex gap-4 h-8 items-center"
							>
								{#each field.options as opt}
									<div class="flex items-center space-x-2">
										<RadioGroup.Item value={opt.value} id={`${field.name}-${opt.value}`} />
										<Label for={`${field.name}-${opt.value}`}>{csvMsg(opt.labelKey)}</Label>
									</div>
								{/each}
							</RadioGroup.Root>
						{/if}
					</div>
				{/each}
			</div>
		{:else}
			<div class="flex items-center justify-center h-8 text-sm text-muted-foreground italic">
				{csvMsg('config_empty')}
			</div>
		{/if}
	</div>
</div>
