<script lang="ts">
interface Props {
    event_location_obj_li: any[] | undefined;
    log_lvl?: number;
}

let { event_location_obj_li, log_lvl = 0 }: Props = $props();

import {
    Clock, AlarmClockOff,
    LoaderCircle,
    MapPin, MapPinOff,
    RemoveFormatting, Search
} from '@lucide/svelte';
import { ae_loc } from '$lib/stores/ae_stores';
import { events_sess } from '$lib/stores/ae_events_stores';
import { pres_mgmt_loc } from '$lib/stores/ae_events_stores__pres_mgmt.svelte';

function handle_search_trigger() {
    pres_mgmt_loc.current.search_version++;
}

function prevent_default<T extends Event>(fn: (event: T) => void) {
    return function (event: T) {
        event.preventDefault();
        fn(event);
    };
}
</script>

<div class="ae_group pres_mgmt_session_search preset-tonal-primary rounded-xl">
    <form
        onsubmit={prevent_default(() => handle_search_trigger())}
        autocomplete="off"
        class="form flex w-full grow flex-row flex-wrap items-center justify-center gap-1 px-2 py-2">

        <span>

            <!-- Location filter toggle + select (authenticated users only) -->
            <button
                type="button"
                class="btn btn-sm mx-1"
                class:hidden={!$ae_loc.authenticated_access}
                class:opacity-10={pres_mgmt_loc.current.show_content__session_search_room_name}
                class:preset-filled-primary-300-700={pres_mgmt_loc.current.show_content__session_search_room_name}
                class:preset-filled-primary-100-900={!pres_mgmt_loc.current.show_content__session_search_room_name}
                onclick={() => {
                    pres_mgmt_loc.current.location_name_qry_str = '';
                    pres_mgmt_loc.current.show_content__session_search_room_name =
                        !pres_mgmt_loc.current.show_content__session_search_room_name;
                    handle_search_trigger();
                }}
                title="Filter by room / location">
                <MapPin size="1em" />
            </button>

            <!-- Time window toggle icon button (authenticated only).
                Highlighted when active so onsite staff can see at a glance whether the
                filter is on. The controls below only appear when enabled. -->

            <!-- TEMP: hide clock button for now, even in edit mode, since time filtering is a bit niche and the controls are a bit complex for non-technical users. Can re-enable when we have a better UI for the time filter controls. -->
            <button
                type="button"
                onclick={() => {
                    pres_mgmt_loc.current.enable_time_window =
                        !pres_mgmt_loc.current.enable_time_window;
                    handle_search_trigger();
                }}
                title={pres_mgmt_loc.current.enable_time_window
                    ? 'Time filter ON — click to disable'
                    : 'Show only sessions near current time'}
                class="btn btn-sm mx-1"
                class:hidden={!$ae_loc.edit_mode}
                class:opacity-10={pres_mgmt_loc.current.enable_time_window}
                class:preset-filled-primary-300-700={pres_mgmt_loc.current.enable_time_window}
                class:preset-filled-primary-100-900={!pres_mgmt_loc.current.enable_time_window}>
                <Clock size="1em" />
            </button>

        </span>

        <!-- Main search input -->
        <!-- svelte-ignore a11y_autofocus -->
        <input
            type="search"
            autofocus
            placeholder="Search for a session"
            id="session_fulltext_search_qry_str"
            bind:value={pres_mgmt_loc.current.fulltext_search_qry_str}
            autocomplete="off"
            data-ignore="true"
            class="input text-1xl ae_btn_info mx-1 w-80 font-mono font-bold transition-all hover:text-2xl"
            onkeyup={(e) => {
                if (e.key === 'Enter') handle_search_trigger();
            }}
            title="Search sessions by title, description, speaker, etc."
            />

        <!-- Search submit button -->
        <button
            type="submit"
            class="
                btn btn-lg
                preset-filled-primary-100-900
                hover:preset-filled-primary-300-700
                mx-1 w-48 text-2xl font-bold
                "
            title="Search for a session"
            >
            {#if $events_sess.pres_mgmt.status_qry__search == 'loading'}
                <LoaderCircle size="1em" class="text-success-800-200 mx-1 animate-spin" />
            {:else}
                <Search size="1em" class="mx-1 text-neutral-800/80" />
            {/if}
            Search
        </button>

        <!-- Clear search text button -->
        <button
            type="button"
            onclick={() => {
                pres_mgmt_loc.current.fulltext_search_qry_str = '';
                handle_search_trigger();
            }}
            class:hidden={!pres_mgmt_loc.current.fulltext_search_qry_str}
            class="btn btn-sm ae_btn_warning mx-1"
            title="Clear search text">
            <RemoveFormatting size="1em" />
        </button>


        <!-- Remote First (edit_mode only) -->
        {#if $ae_loc.edit_mode}
            <label
                class="
                    flex flex-wrap items-center justify-center gap-1
                    text-xs font-semibold
                    bg-surface-50-950/50
                    opacity-70 hover:opacity-100
                    px-2 py-1
                    rounded-md
                    cursor-pointer
                    transition-all
                    "
                    >
                <span
                    class="opacity-50"
                    class:opacity-100={pres_mgmt_loc.current.qry__remote_first}
                    >
                    Remote First
                </span>
                <input
                    type="checkbox"
                    bind:checked={pres_mgmt_loc.current.qry__remote_first}
                    onchange={() => handle_search_trigger()}
                    class="checkbox checkbox-sm" />
            </label>
        {/if}

    {#if pres_mgmt_loc.current.enable_time_window ||
        pres_mgmt_loc.current.show_content__session_search_room_name}

    <div class="
        w-full
        flex flex-wrap items-center justify-center gap-2
        px-2
        text-xs
        "
        >
    <!-- Location filter controls — shown only when location filter is active -->
    {#if pres_mgmt_loc.current.show_content__session_search_room_name}
        <span class="
            flex flex-wrap items-center justify-center gap-1
            text-xs
            bg-surface-50-950/50
            opacity-70
            hover:opacity-100
            px-2 py-1
            rounded-md
            transition-all
            "


            >

        <span
            class="opacity-50"
            >
            <MapPin size="0.875em" class="opacity-70" /> Location/Room:
        </span>
        <select
            name="location_name_list"
            id="session_location_name_list"
            bind:value={pres_mgmt_loc.current.location_name_qry_str}
            class="input w-min max-w-40 min-w-fit font-mono text-xs font-semibold transition-all"
            class:hidden={!$ae_loc.authenticated_access ||
                !pres_mgmt_loc.current.show_content__session_search_room_name}
            onchange={() => handle_search_trigger()}
            title="Filter by location / room name">
            {#if event_location_obj_li}
                <option value="">-- none --</option>
                {#each event_location_obj_li as loc (loc.event_location_id)}
                    <option value={loc?.name}>{loc.name}</option>
                {/each}
            {/if}
        </select>

        <!-- Location filter toggle + select (authenticated users only) -->
        <button
            type="button"
            class="btn btn-sm mx-1"
            class:hidden={!pres_mgmt_loc.current.show_content__session_search_room_name}
            class:preset-filled-warning-300-700={pres_mgmt_loc.current.show_content__session_search_room_name}
            onclick={() => {
                pres_mgmt_loc.current.location_name_qry_str = '';
                pres_mgmt_loc.current.show_content__session_search_room_name =
                    !pres_mgmt_loc.current.show_content__session_search_room_name;
                handle_search_trigger();
            }}
            title="Filter by room / location">
            <MapPinOff size="1em" />
        </button>
    </span>
    {/if}

    <!-- Time window controls — compact row, shown only when filter is active.
         Two simple selects (before / after current time) keep this readable for
         all experience levels without the noise of preset chip arrays. -->
    {#if pres_mgmt_loc.current.enable_time_window}
        <span
            class="
                flex flex-wrap items-center justify-center gap-1
                text-xs
                bg-surface-50-950/50
                opacity-70 hover:opacity-100
                px-2 py-1
                rounded-md
                transition-all
                "
                >

            <span class="opacity-50">
                <Clock size="0.875em" class="opacity-70" /> Showing sessions:
            </span>
            <span class="opacity-50">&minus;</span>
            <select
                bind:value={pres_mgmt_loc.current.time_window_before_minutes}
                onchange={handle_search_trigger}
                class="select select-sm max-w-fit px-1 py-0 text-xs font-semibold">
                <!-- <option value="">0m</option> -->
                <option value={0}>0m</option>
                <option value={25}>25m</option>
                <option value={90}>90m</option>
                <option value={120}>2h</option>
                <option value={240}>4h</option>
                <option value={480}>8h</option>
                <option value={720}>12h</option>
                <option value={1440}>24h</option>
                {#if $ae_loc.trusted_access}<option value={4320}>3d</option>{/if}
                {#if $ae_loc.trusted_access}<option value={10080}>7d</option>{/if}
            </select>
            <span class="opacity-50">to &plus;</span>
            <select
                bind:value={pres_mgmt_loc.current.time_window_after_minutes}
                onchange={handle_search_trigger}
                class="select select-sm max-w-fit px-1 py-0 text-xs font-semibold">
                <option value={90}>90m</option>
                <option value={120}>2h</option>
                <option value={240}>4h</option>
                <option value={480}>8h</option>
                <option value={720}>12h</option>
                <option value={1440}>24h</option>
                {#if $ae_loc.trusted_access}<option value={4320}>3d</option>{/if}
                {#if $ae_loc.trusted_access}<option value={10080}>7d</option>{/if}
            </select>
            <!-- <span class="opacity-50">from now</span> -->

            <button
                type="button"
                onclick={() => {
                    pres_mgmt_loc.current.enable_time_window =
                        !pres_mgmt_loc.current.enable_time_window;
                    handle_search_trigger();
                }}
                title={pres_mgmt_loc.current.enable_time_window
                    ? 'Time filter ON — click to disable'
                    : 'Show only sessions near current time'}
                class="btn btn-sm mx-1"
                class:hidden={!pres_mgmt_loc.current.enable_time_window}
                class:preset-filled-warning-300-700={pres_mgmt_loc.current.enable_time_window}
                >
                <AlarmClockOff size="1em" />
            </button>
        </span>
    {/if}

    </div>

    {/if}


    </form>
</div>
