<script lang="ts">
    import * as Dialog from '$lib/components/ui/dialog';
    import * as Select from '$lib/components/ui/select';
    import { Button } from '$lib/components/ui/button';
    import { Label } from '$lib/components/ui/label';
    import { Download, RectangleVertical, RectangleHorizontal, DollarSign, FileText, Globe, Scale, Weight, Tag, Package, Box } from 'lucide-svelte';
    import { cn } from '$lib/utils';

    export let open = false;

    export let onConfirm: (type: string, format: string, currency: string, uomSource: string, weightUnit: string) => void;

    let invoiceType = 'mexican'; // 'mexican' | 'american'
    let format = 'vertical'; // 'vertical' | 'horizontal'
    let currency = 'ORIGINAL'; // 'ORIGINAL' | 'MXN' | 'USD'
    let uomSource = 'PART'; // 'CLASS' | 'PART' | 'STOCK'
    let weightUnit = 'KG'; // 'KG' | 'LB'

    const currencyOptions = [
        { value: 'ORIGINAL', label: 'Captura', desc: 'Original', icon: FileText },
        { value: 'MXN', label: 'Nacional', desc: 'Pesos', icon: DollarSign },
        { value: 'USD', label: 'Extranjera', desc: 'Dólares', icon: Globe }
    ];

    const uomOptions = [
        { value: 'CLASS', label: 'Clase', icon: Tag },
        { value: 'PART', label: 'Parte', icon: Package },
        { value: 'STOCK', label: 'Existencia', icon: Box }
    ];

    const weightOptions = [
        { value: 'KG', label: 'Kilos', icon: Scale },
        { value: 'LB', label: 'Libras', icon: Weight }
    ];

    function handleConfirm() {
        onConfirm(invoiceType, format, currency, uomSource, weightUnit);
        open = false; 
    }
</script>

<Dialog.Root bind:open>
    <Dialog.Content class="sm:max-w-[550px]">
        <Dialog.Header>
            <Dialog.Title>Descargar Factura</Dialog.Title>
            <Dialog.Description>
                Configure las opciones para generar el documento PDF.
            </Dialog.Description>
        </Dialog.Header>
        
        <div class="grid gap-6 py-4">
            
            <div class="grid grid-cols-2 gap-6">
                <!-- 1. Invoice Type -->
                <div class="space-y-2">
                    <Label>Tipo de Factura</Label>
                    <Select.Root type="single" value={invoiceType} onValueChange={(v) => invoiceType = v}>
                        <Select.Trigger>
                            {invoiceType === 'mexican' ? 'Factura Mexicana' : 'Factura Americana'}
                        </Select.Trigger>
                        <Select.Content>
                            <Select.Item value="mexican" label="Factura Mexicana">Factura Mexicana</Select.Item>
                            <Select.Item value="american" label="Factura Americana">Factura Americana</Select.Item>
                        </Select.Content>
                    </Select.Root>
                </div>

                <!-- 2. Format -->
                <div class="space-y-2">
                    <Label>Formato</Label>
                    <Select.Root 
                        type="single" 
                        value={format} 
                        onValueChange={(v) => format = v}
                        disabled
                    >
                        <Select.Trigger disabled>
                            <div class="flex items-center gap-2">
                                {#if format === 'vertical'}
                                    <RectangleVertical class="h-4 w-4" />
                                    <span>Vertical</span>
                                {:else}
                                    <RectangleHorizontal class="h-4 w-4" />
                                    <span>Horizontal</span>
                                {/if}
                            </div>
                        </Select.Trigger>
                        <Select.Content>
                            <Select.Item value="vertical" label="Vertical">
                                <div class="flex items-center gap-2">
                                    <RectangleVertical class="h-4 w-4" />
                                    <span>Vertical</span>
                                </div>
                            </Select.Item>
                            <Select.Item value="horizontal" label="Horizontal">
                                <div class="flex items-center gap-2">
                                    <RectangleHorizontal class="h-4 w-4" />
                                    <span>Horizontal</span>
                                </div>
                            </Select.Item>
                        </Select.Content>
                    </Select.Root>
                </div>
            </div>

            <!-- 3. Currency Selection -->
            <div class="space-y-3">
                <Label>Moneda de Impresión</Label>
                <div class="grid grid-cols-3 gap-3">
                    {#each currencyOptions as option}
                        <button
                            type="button"
                            disabled
                            class={cn(
                                "flex flex-col items-center justify-between rounded-md border-2 p-3 transition-all h-[80px] opacity-50 cursor-not-allowed",
                                currency === option.value ? "border-primary bg-primary/5" : "border-muted bg-transparent"
                            )}
                            onclick={() => currency = option.value}
                        >
                            <svelte:component this={option.icon} class={cn("mb-1 h-5 w-5 text-muted-foreground", currency === option.value && "text-primary")} />
                            <div class="text-center leading-tight">
                                <div class="font-semibold text-xs whitespace-nowrap">{option.label}</div>
                                <div class="text-[10px] text-muted-foreground">{option.desc}</div>
                            </div>
                        </button>
                    {/each}
                </div>
            </div>

            <div class="grid grid-cols-2 gap-6">
                <!-- 4. UOM Source -->
                <div class="space-y-3">
                    <Label>Imprimir en la UM de la</Label>
                    <div class="flex gap-2">
                        {#each uomOptions as option}
                            <button
                                type="button"
                                disabled
                                class={cn(
                                    "flex-1 flex flex-col items-center justify-center rounded-md border-2 p-2 transition-all h-[60px] opacity-50 cursor-not-allowed",
                                    uomSource === option.value ? "border-primary bg-primary/5" : "border-muted bg-transparent"
                                )}
                                onclick={() => uomSource = option.value}
                            >
                                <svelte:component this={option.icon} class={cn("mb-1 h-4 w-4 text-muted-foreground", uomSource === option.value && "text-primary")} />
                                <div class="font-semibold text-[10px] whitespace-nowrap">{option.label}</div>
                            </button>
                        {/each}
                    </div>
                </div>

                <!-- 5. Weight Unit -->
                <div class="space-y-3">
                    <Label>Tipo UM de peso</Label>
                    <div class="flex gap-2">
                         {#each weightOptions as option}
                            <button
                                type="button"
                                disabled
                                class={cn(
                                    "flex-1 flex flex-col items-center justify-center rounded-md border-2 p-2 transition-all h-[60px] opacity-50 cursor-not-allowed",
                                    weightUnit === option.value ? "border-primary bg-primary/5" : "border-muted bg-transparent"
                                )}
                                onclick={() => weightUnit = option.value}
                            >
                                <svelte:component this={option.icon} class={cn("mb-1 h-4 w-4 text-muted-foreground", weightUnit === option.value && "text-primary")} />
                                <div class="font-semibold text-[10px] whitespace-nowrap">{option.label}</div>
                            </button>
                        {/each}
                    </div>
                </div>
            </div>

        </div>

        <Dialog.Footer>
            <Button variant="outline" onclick={() => open = false}>Cancelar</Button>
            <Button onclick={handleConfirm}>
                <Download class="mr-2 h-4 w-4" />
                Descargar
            </Button>
        </Dialog.Footer>
    </Dialog.Content>
</Dialog.Root>
