<script lang="ts">
import { Funnel, Plus, Search, SearchCode, User } 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
        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
                      ?.toLowerCase()
                      .includes(qry_str.toLowerCase())
          )
        : results;

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

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

        <div class="grid grid-cols-2 gap-4">
            <div class="space-y-1">
                <span
                    class="label ml-1 block text-xs font-bold tracking-wider uppercase opacity-75"
                    >Account Status</span>
                <select
                    class="select preset-filled-surface border-surface-500/20 rounded-lg border p-2 text-sm"
                    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 ml-1 block text-xs font-bold tracking-wider uppercase opacity-75"
                    >Visibility</span>
                <select
                    class="select preset-filled-surface border-surface-500/20 rounded-lg border p-2 text-sm"
                    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>
