<script lang="ts">
    import { Search, Plus, Filter, User, SearchCode } from 'lucide-svelte';
    import { ae_api, ae_loc, slct } from '$lib/stores/ae_stores';
    import { load_ae_obj_li__person } from '$lib/ae_core/ae_core__person';
    
    interface Props {
        on_results: (results: any[]) => void;
    }
    
    let { on_results }: Props = $props();
    
    let qry_str = $state('');
    let loading = $state(false);
    let qry_enabled = $state('enabled');
    let qry_hidden = $state('not_hidden');

    async function handle_search() {
        if (!$ae_loc.account_id) return;
        loading = true;
        
        // V3 search logic
        const results = await load_ae_obj_li__person({
            api_cfg: $ae_api,
            for_obj_id: $ae_loc.account_id,
            enabled: qry_enabled as any,
            hidden: qry_hidden as any,
            // qry_str: qry_str || null, // Assuming load_ae_obj_li__person supports qry_str in the future or we use search_ae_obj_v3
            log_lvl: 1
        });
        
        // Filter locally for now if needed, or update the API wrapper to support search_query
        const filtered = qry_str 
            ? results.filter(p => 
                p.full_name?.toLowerCase().includes(qry_str.toLowerCase()) || 
                p.primary_email?.toLowerCase().includes(qry_str.toLowerCase()) ||
                p.person_id_random?.toLowerCase().includes(qry_str.toLowerCase())
              )
            : results;

        on_results(filtered);
        loading = false;
    }
</script>

<div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-4">
    <div class="flex flex-wrap gap-6 items-end">
        <div class="flex-1 min-w-[280px] space-y-1">
            <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Search People</span>
            <div class="flex bg-surface-200-700-token rounded-lg overflow-hidden border border-surface-500/20 shadow-inner group focus-within:ring-2 focus-within:ring-primary-500/50 transition-all">
                <div class="flex items-center justify-center px-4 bg-surface-300-600-token border-r border-surface-500/20">
                    <Search size={18} class="opacity-50" />
                </div>
                <input 
                    class="bg-transparent border-0 ring-0 focus:ring-0 p-3 grow placeholder:opacity-50"
                    type="search" 
                    bind:value={qry_str} 
                    placeholder="Search by name, email, or ID..." 
                    onkeydown={(e) => e.key === 'Enter' && handle_search()} 
                />
                <button class="variant-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]" onclick={handle_search} disabled={loading}>
                    {#if loading}
                        <span class="animate-spin text-xl">⏳</span>
                    {:else}
                        <span class="whitespace-nowrap tracking-wide">Go</span>
                    {/if}
                </button>
            </div>
        </div>

        <div class="grid grid-cols-2 gap-4">
            <div class="space-y-1">
                <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Account Status</span>
                <select class="select variant-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_enabled} onchange={handle_search}>
                    <option value="all">All Records</option>
                    <option value="enabled">Enabled Only</option>
                    <option value="not_enabled">Disabled Only</option>
                </select>
            </div>

            <div class="space-y-1">
                <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Visibility</span>
                <select class="select variant-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_hidden} onchange={handle_search}>
                    <option value="all">All Visible</option>
                    <option value="not_hidden">Publicly Visible</option>
                    <option value="hidden">System Hidden</option>
                </select>
            </div>
        </div>
    </div>
</div>
