<script lang="ts">
/**
 * src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/ae_tab__add.svelte
 * Tab 2: Add - Search / QR Scan Layout.
 *
 * Two orthogonal toggles:
 *  - mode: 'qr' | 'search' — how to find the attendee
 *  - scan_qualify: 'rapid' | 'qualify' | 'auto' | 'multi' — what to do after finding (QR mode only)
 *      rapid:   confirm tap → auto-reset → scan next person immediately
 *      qualify: confirm tap → navigate to lead detail → fill qualifiers/notes
 *      auto:    no confirm — badge is added immediately on scan → auto-reset
 *      multi:   BarcodeDetector batch scan → grid of confirm cards
 */
import { Bot, ChevronDown, Layers, QrCode, Search, Zap } from '@lucide/svelte';
import Comp_lead_qr_scanner from './ae_comp__lead_qr_scanner.svelte';
import Comp_lead_qr_scanner_multi from './ae_comp__lead_qr_scanner_multi.svelte';
import Comp_lead_manual_search from './ae_comp__lead_manual_search.svelte';
import { leads_loc } from '$lib/stores/ae_events_stores__leads.svelte';

interface Props {
    exhibit_id: string;
}

let { exhibit_id }: Props = $props();

// QR vs Manual Search (persisted per exhibit)
let mode = $derived(leads_loc.current.tab_add_mode?.[exhibit_id] ?? 'qr');

function set_mode(new_mode: string) {
    leads_loc.current.tab_add_mode[exhibit_id] = new_mode;
}

// Scan qualify mode (persisted per exhibit)
// 'qualify' was merged into 'rapid' — normalize stale localStorage values
type ScanQualifyMode = 'rapid' | 'auto' | 'multi';
let scan_qualify = $derived.by(() => {
    const raw = leads_loc.current.tab_scan_qualify?.[exhibit_id] ?? 'rapid';
    // 'qualify' was merged into 'rapid' — normalize stale localStorage values
    return (raw === 'qualify' ? 'rapid' : raw) as ScanQualifyMode;
});

function set_scan_qualify(new_mode: ScanQualifyMode) {
    leads_loc.current.tab_scan_qualify[exhibit_id] = new_mode;
    show_mode_opts = false;
}

function handle_lead_added(badge: any) {
    leads_loc.current.tracking__search_version++;
}

// Mode selector expand/collapse
let show_mode_opts = $state(false);

// Mode config — drives both the trigger display and the options grid
const qr_modes: Array<{
    value: ScanQualifyMode;
    label: string;
    desc: string;
    icon: any;
}> = [
    {
        value: 'rapid',
        label: 'Confirm',
        desc: 'Tap Add & Scan or Add & View',
        icon: Zap
    },
    {
        value: 'auto',
        label: 'Auto',
        desc: 'Auto-add · no tap needed',
        icon: Bot
    },
    {
        value: 'multi',
        label: 'Multi',
        desc: 'Batch scan up to 4 badges',
        icon: Layers
    }
];

let active_mode = $derived(
    qr_modes.find((m) => m.value === scan_qualify) ?? qr_modes[0]
);
</script>

<div class="ae-tab-add mx-auto flex w-full flex-col items-center gap-3">
    <!-- QR / Search toggle -->
    <button
        type="button"
        class="btn btn-sm preset-filled-secondary flex w-full items-center gap-2 px-4 py-2.5 font-bold shadow-sm transition-all"
        onclick={() => set_mode(mode === 'qr' ? 'search' : 'qr')}>
        {#if mode === 'qr'}
            <Search size="1.1em" />
            <span>Switch to Manual Search</span>
        {:else}
            <QrCode size="1.1em" />
            <span>Switch to QR Scan</span>
        {/if}
    </button>

    <!-- Scan mode selector (QR mode only) -->
    {#if mode === 'qr'}
        <div class="w-full">
            <!-- Trigger: shows active mode, tapping expands options -->
            <button
                type="button"
                class="bg-surface-100-900 border-surface-500/20 flex w-full cursor-pointer items-center gap-3 rounded-xl border px-4 py-3 shadow-sm transition-colors"
                onclick={() => (show_mode_opts = !show_mode_opts)}
                title="Change scan mode">
                <!-- Colored icon pill -->
                <span
                    class="shrink-0 rounded-lg p-1.5 text-white"
                    class:bg-primary-500={scan_qualify === 'rapid'}
                    class:bg-tertiary-500={scan_qualify === 'auto'}
                    class:bg-warning-500={scan_qualify === 'multi'}>
                    <active_mode.icon size="1em" />
                </span>

                <!-- Mode name + description -->
                <div class="flex-1 text-left">
                    <span class="text-sm font-bold">{active_mode.label}</span>
                    <span class="ml-2 text-xs opacity-50"
                        >{active_mode.desc}</span>
                </div>

                <!-- Chevron -->
                <ChevronDown
                    size="1.1em"
                    class="opacity-40 transition-transform duration-200 {show_mode_opts
                        ? 'rotate-180'
                        : ''}" />
            </button>

            <!-- Options grid (2×2) — shown when trigger is tapped -->
            {#if show_mode_opts}
                <div
                    class="bg-surface-50-900 border-surface-500/20 mt-1.5 grid grid-cols-3 gap-2 rounded-xl border p-2 shadow-lg">
                    {#each qr_modes as m}
                        <button
                            type="button"
                            class="flex cursor-pointer flex-col items-center gap-1.5 rounded-lg p-3 text-center transition-all"
                            class:bg-surface-100-900={scan_qualify !== m.value}
                            class:opacity-50={scan_qualify !== m.value}
                            class:bg-surface-50-900={scan_qualify === m.value}
                            class:shadow={scan_qualify === m.value}
                            class:ring-1={scan_qualify === m.value}
                            class:ring-surface-500={scan_qualify === m.value}
                            onclick={() => set_scan_qualify(m.value)}>
                            <span
                                class="rounded-lg p-1.5 text-white"
                                class:bg-primary-500={m.value === 'rapid'}
                                class:bg-tertiary-500={m.value === 'auto'}
                                class:bg-warning-500={m.value === 'multi'}>
                                <m.icon size="1.1em" />
                            </span>
                            <span class="text-sm font-bold">{m.label}</span>
                            <span class="text-[10px] leading-tight opacity-60"
                                >{m.desc}</span>
                        </button>
                    {/each}
                </div>
            {/if}
        </div>
    {/if}

    <!-- Content Area -->
    <div class="flex min-h-100 w-full flex-col items-center">
        {#if mode === 'qr'}
            {#if scan_qualify === 'multi'}
                <Comp_lead_qr_scanner_multi
                    {exhibit_id}
                    on_lead_added={handle_lead_added} />
            {:else}
                <Comp_lead_qr_scanner
                    {exhibit_id}
                    {scan_qualify}
                    on_lead_added={handle_lead_added} />
            {/if}
        {:else}
            <Comp_lead_manual_search
                {exhibit_id}
                on_lead_added={handle_lead_added} />
        {/if}
    </div>
</div>
