<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' — what to do after adding (QR mode only)
     *    - rapid:   auto-reset scanner → scan next person immediately
     *    - qualify: navigate to lead detail → fill qualifiers/notes right away
     */
    import { QrCode, Search, Zap, ClipboardList } from 'lucide-svelte';
    import Comp_lead_qr_scanner from './ae_comp__lead_qr_scanner.svelte';
    import Comp_lead_manual_search from './ae_comp__lead_manual_search.svelte';
    import { events_loc } from '$lib/stores/ae_events_stores';

    interface Props {
        exhibit_id: string;
    }

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

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

    function set_mode(new_mode: string) {
        if (!$events_loc.leads.tab_add_mode) $events_loc.leads.tab_add_mode = {};
        $events_loc.leads.tab_add_mode[exhibit_id] = new_mode;
    }

    // Rapid vs Qualify scan mode (persisted per exhibit)
    let scan_qualify = $derived($events_loc.leads.tab_scan_qualify?.[exhibit_id] ?? 'rapid');

    function set_scan_qualify(new_mode: 'rapid' | 'qualify') {
        if (!$events_loc.leads.tab_scan_qualify) $events_loc.leads.tab_scan_qualify = {};
        $events_loc.leads.tab_scan_qualify[exhibit_id] = new_mode;
    }

    function handle_lead_added(badge: any) {
        $events_loc.leads.tracking__search_version++;
    }
</script>

<div class="ae-tab-add flex flex-col items-center space-y-4 w-full mx-auto">

    <!-- Controls Row: input mode toggle + scan qualify toggle -->
    <div class="flex items-center gap-2 w-full">

        <!-- QR / Search toggle (takes remaining space) -->
        <button
            type="button"
            class="btn btn-sm variant-filled-secondary font-bold shadow-sm px-4 py-2.5 flex items-center gap-2 flex-1 transition-all"
            onclick={() => set_mode(mode === 'qr' ? 'search' : 'qr')}
        >
            {#if mode === 'qr'}
                <Search size="1.1em" />
                <span>Manual Search</span>
            {:else}
                <QrCode size="1.1em" />
                <span>QR Scan</span>
            {/if}
        </button>

        <!-- Rapid / Qualify mode (only meaningful for QR mode) -->
        {#if mode === 'qr'}
            <div class="flex rounded-lg overflow-hidden border border-surface-500/30 shadow-sm flex-none">
                <button
                    type="button"
                    class="btn btn-sm px-3 py-2.5 rounded-none transition-all"
                    class:preset-filled-primary={scan_qualify === 'rapid'}
                    class:variant-ghost-surface={scan_qualify !== 'rapid'}
                    onclick={() => set_scan_qualify('rapid')}
                    title="Rapid Scan — reset immediately and scan the next person"
                >
                    <Zap size="1.1em" />
                </button>
                <button
                    type="button"
                    class="btn btn-sm px-3 py-2.5 rounded-none border-l border-surface-500/20 transition-all"
                    class:preset-filled-secondary={scan_qualify === 'qualify'}
                    class:variant-ghost-surface={scan_qualify !== 'qualify'}
                    onclick={() => set_scan_qualify('qualify')}
                    title="Qualify Mode — open lead detail after adding to fill in notes"
                >
                    <ClipboardList size="1.1em" />
                </button>
            </div>
        {/if}
    </div>

    <!-- Mode hint line -->
    {#if mode === 'qr'}
        <p class="text-[10px] uppercase font-bold tracking-widest opacity-30 w-full -mt-2">
            {scan_qualify === 'rapid' ? 'Rapid Scan — scan next after adding' : 'Qualify Mode — open lead detail after adding'}
        </p>
    {/if}

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