<script lang="ts">
interface Props {
    log_lvl?: number;
    container_class_li?: string | Array<string>;
    lq__event_session_obj_li?: any;
    event_session_obj_li?: any[] | null;
    hide__session_location?: boolean;
    hide__session_poc?: boolean;
    hide__admin?: boolean;
    hide__launcher_link?: boolean;
    hide__location_link?: boolean;
    show__session_files?: boolean;
    show__session_presentations?: boolean;
}

let {
    log_lvl = 0,
    container_class_li = [],
    lq__event_session_obj_li = null,
    event_session_obj_li = null,
    hide__session_location = $bindable(false),
    hide__session_poc = $bindable(false),
    hide__admin = $bindable(false),
    hide__launcher_link = $bindable(false),
    hide__location_link = $bindable(false),
    show__session_files = $bindable(false),
    show__session_presentations = $bindable(false)
}: Props = $props();

import { ae_util } from '$lib/ae_utils/ae_utils';
import {
    Barcode,
    Bell,
    BellOff,
    CalendarDays,
    Check,
    ChevronDown,
    ChevronUp,
    Clock,
    Eye,
    EyeOff,
    FileSearch,
    LoaderCircle,
    Mail,
    MapPin,
    Presentation,
    Rocket,
    User
} from '@lucide/svelte';
import { api } from '$lib/ae_api/api';
import Comp_event_presenter_obj_li from './[event_id]/(pres_mgmt)/presenter/ae_comp__event_presenter_obj_li_wrapper.svelte';
import Element_manage_event_file_li from '$lib/elements/element_manage_event_file_li_direct.svelte';
import Comp_event_session_alert from './[event_id]/(pres_mgmt)/session/ae_comp__event_session_alert.svelte';

import { events_func } from '$lib/ae_events/ae_events_functions';
import { ae_loc, ae_api } from '$lib/stores/ae_stores';
// import {
//     events_loc,
//     events_sess,
//     events_slct
// } from '$lib/stores/ae_events_stores';
import { pres_mgmt_loc } from '$lib/stores/ae_events_stores__pres_mgmt.svelte';

let show_details_kv: Record<string, boolean> = $state({});

// Derived list of visible items (Standardized Pattern 2026-01-27)
// Supports both a liveQuery observable (lq__event_session_obj_li) and a
// plain pre-fetched array (event_session_obj_li) as a fallback.
let visible_session_obj_li = $derived(
    (() => {
        const list = $lq__event_session_obj_li ?? event_session_obj_li;
        if (list === undefined || list === null) return null;
        if (!Array.isArray(list)) return [];

        const filtered = list.filter((item: any) => {
            if (!item) return false;
            if ($ae_loc.trusted_access) return true;
            return !item.hide;
        });

        if (log_lvl)
            console.log(
                `visible_session_obj_li: Input=${list.length}, Output=${filtered.length}`
            );
        return filtered;
    })()
);

function toggle_details(id: string) {
    show_details_kv[id] = !show_details_kv[id];
}
</script>

<section
    class="ae_comp event_session_obj_li container w-full min-w-full space-y-2 overflow-x-auto px-0.5 py-2 {container_class_li}">
    {#if visible_session_obj_li === null}
        <div class="flex flex-col items-center justify-center p-10 opacity-50">
            <LoaderCircle size="3em" class="mb-2 animate-spin" />

            <p>Loading sessions...</p>
        </div>
    {:else if visible_session_obj_li.length > 0}
        <header
            class="mb-2 flex w-full flex-row items-center justify-start gap-2 px-2">
            <h2 class="text-sm font-normal text-gray-500">Sessions found:</h2>

            <span
                class="preset-filled-surface-300-700 rounded-lg px-4 text-xl font-bold">
                <Presentation size="1em" class="text-surface-800-200" />
                {visible_session_obj_li.length}<span
                    class="text-surface-800-200">&times;</span>
            </span>
        </header>

        <table class="table-striped table w-full table-auto">
            <thead>
                <tr class="bg-surface-100-900">
                    <th>Session</th>

                    <th class="hidden md:table-cell">Schedule</th>

                    <th class:hidden={hide__session_location}>Location</th>

                    <th class:hidden={hide__session_poc}>POC</th>

                    <th
                        class:hidden={!$ae_loc.edit_mode ||
                            !$ae_loc.adv_mode ||
                            hide__admin}>Admin</th>
                </tr>
            </thead>

            <tbody>
                {#each visible_session_obj_li as session_obj, index (session_obj.id || session_obj.event_session_id || session_obj.event_session_id_random || index)}
                    <tr
                        class="relative transition-colors duration-200"
                        class:opacity-50={session_obj?.hide}
                        class:preset-tonal-warning={!session_obj?.enable}>
                        <td>
                            {#if session_obj?.alert && $ae_loc.trusted_access}
                                <Comp_event_session_alert
                                    event_session_obj={session_obj}
                                    {log_lvl} />
                            {/if}

                            <div class="flex flex-col gap-1">
                                <div class="flex items-center gap-2">
                                    <a
                                        href="/events/{session_obj?.event_id}/session/{session_obj?.event_session_id}"
                                        class="hover:text-primary-800-200 hover:bg-surface-400-600 active:bg-surface-200-700 flex flex-1 flex-row items-center gap-2 rounded-lg px-2 py-2 text-left text-lg font-bold transition-colors duration-1000 hover:duration-300 min-w-0">
                                        {#if session_obj?.hide}
                                            <EyeOff
                                                size="1em"
                                                class="text-gray-400" />
                                        {:else}
                                            <Presentation
                                                size="1em"
                                                class="text-primary-500" />
                                        {/if}

                                        <span class="flex-1">{session_obj?.name}</span>

                                        {#if (!pres_mgmt_loc.current.hide__session_code && session_obj?.code) || session_obj?.file_count_all}
                                            <div class="flex flex-col items-end gap-0.5">
                                                {#if !pres_mgmt_loc.current.hide__session_code && session_obj?.code}
                                                    <span class="border-surface-300-700 text-surface-700-300 bg-surface-200-800 rounded border px-1.5 py-0.5 font-mono text-xs select-all hover:bg-surface-100-900">
                                                    <Barcode size="1em" class="text-surface-600-400" />
                                                        {session_obj.code}
                                                    </span>
                                                {/if}

                                                {#if session_obj?.file_count_all}
                                                    <span
                                                        class="badge preset-tonal-success flex items-center gap-1 px-1 py-0 text-xs">
                                                        <Check size="1em" />
                                                        {session_obj.file_count_all}
                                                    </span>
                                                {/if}
                                            </div>
                                        {/if}
                                    </a>

                                    {#if (show__session_presentations || show__session_files) && $ae_loc.manager_access}
                                        <button
                                            type="button"
                                            class="btn btn-icon btn-sm preset-tonal-surface"
                                            onclick={() =>
                                                toggle_details(
                                                    session_obj.event_session_id
                                                )}>
                                            {#if show_details_kv[session_obj.event_session_id]}
                                                <ChevronUp size="1.2em" />
                                            {:else}
                                                <ChevronDown size="1.2em" />
                                            {/if}
                                        </button>
                                    {/if}
                                </div>

                                <!-- Mobile Schedule Summary -->

                                <div
                                    class="text-surface-500 flex flex-wrap gap-x-3 gap-y-1 text-xs md:hidden">
                                    <span class="flex items-center gap-1"
                                        ><CalendarDays size="1em" />
                                        {ae_util.iso_datetime_formatter(
                                            session_obj?.start_datetime,
                                            'date_short_month_day'
                                        )}</span>

                                    <span class="flex items-center gap-1 font-bold"
                                        ><Clock size="1em" />
                                        {ae_util.iso_datetime_formatter(
                                            session_obj?.start_datetime,
                                            'time_12_short'
                                        )}</span>
                                </div>

                                {#if show_details_kv[session_obj.event_session_id]}
                                    <div
                                        class="bg-surface-500/5 border-surface-500/10 mt-1 rounded-lg border p-2">
                                        {#if show__session_presentations && $ae_loc.manager_access}
                                            <Comp_event_presenter_obj_li
                                                link_to_type={'event_session'}
                                                link_to_id={session_obj?.event_session_id}
                                                display_mode={'minimal'}
                                                {log_lvl} />
                                        {/if}

                                        {#if show__session_files && $ae_loc.manager_access}
                                            <Element_manage_event_file_li
                                                link_to_type={'event_session'}
                                                link_to_id={session_obj?.event_session_id}
                                                allow_basic={true}
                                                allow_moderator={true}
                                                display_mode={'minimal'} />
                                        {/if}
                                    </div>
                                {/if}
                            </div>
                        </td>

                        <td class="hidden md:table-cell">
                            <div class="flex flex-col text-xs hover:scale-125 transition-all duration-400 hover:duration-1000">
                                <span class=" text-surface-700-300 min-w-30"
                                    >
                                    <span class="font-bold">
                                    {ae_util.iso_datetime_formatter(
                                        session_obj?.start_datetime,
                                        'dddd'
                                    )}
                                    </span><span class="text-surface-500">,
                                    {ae_util.iso_datetime_formatter(
                                        session_obj?.start_datetime,
                                        'MMM D'
                                    )}</span>
                                </span>

                                <span class="whitespace-nowrap text-surface-700-300"
                                    ><span class="font-bold">
                                        {ae_util.iso_datetime_formatter(
                                        session_obj?.start_datetime,
                                        'time_12_short'
                                    )}</span>
                                    {#if session_obj?.end_datetime}
                                    <span class="text-surface-500">
                                    – {ae_util.iso_datetime_formatter(
                                        session_obj?.end_datetime,
                                        'time_12_short'
                                    )}</span>
                                    {/if}
                                </span>
                            </div>
                        </td>

                        <td class:hidden={hide__session_location}>
                            <div class="flex min-w-32 flex-col gap-1">
                                <span class="text-xs font-semibold  text-surface-700-300 hover:scale-125 transition-all  duration-400 hover:duration-1000"
                                    >{session_obj?.event_location_name ??
                                        '--'}</span>

                                <div class="flex gap-1">
                                    {#if !hide__launcher_link}
                                        <a
                                            href="/events/{session_obj?.event_id}/launcher/{session_obj?.event_location_id}?session_id={session_obj?.event_session_id}"
                                            class="btn btn-icon btn-xs preset-tonal-tertiary"
                                            title="Svelte Launcher"
                                            ><Rocket size="1em" /></a>
                                    {/if}

                                    {#if !hide__location_link}
                                        <a
                                            href="/events/{session_obj?.event_id}/location/{session_obj?.event_location_id}"
                                            class="btn btn-icon btn-xs preset-tonal-surface"
                                            title="Location Details"
                                            ><MapPin size="1em" /></a>
                                    {/if}
                                </div>
                            </div>
                        </td>

                        <td class:hidden={hide__session_poc}>
                            <div class="flex min-w-32 flex-col text-xs">
                                {#if session_obj?.poc_person_full_name}
                                    <span
                                        class="flex items-center gap-1 font-bold"
                                        ><User size="1em" />
                                        {session_obj.poc_person_full_name}</span>

                                    {#if $ae_loc.trusted_access && session_obj?.poc_person_primary_email}
                                        <a
                                            href="mailto:{session_obj.poc_person_primary_email}"
                                            class="text-primary-500 flex items-center gap-1 hover:underline"
                                            ><Mail size="1em" /> Email</a>
                                    {/if}
                                {:else}
                                    <span class="opacity-30">--</span>
                                {/if}
                            </div>
                        </td>

                        <td
                            class:hidden={!$ae_loc.edit_mode ||
                                !$ae_loc.adv_mode ||
                                hide__admin}>
                            <div class="flex gap-1">
                                <button
                                    type="button"
                                    class="btn btn-icon btn-xs {session_obj?.hide
                                        ? 'preset-tonal-error'
                                        : 'preset-tonal-secondary'}"
                                    onclick={async () => {
                                        await api.update_ae_obj({
                                            api_cfg: $ae_api,
                                            obj_type: 'event_session',
                                            obj_id: session_obj.event_session_id,
                                            fields: { hide: !session_obj.hide },
                                            log_lvl: 1
                                        });
                                        events_func.load_ae_obj_id__event_session(
                                            {
                                                api_cfg: $ae_api,
                                                event_session_id:
                                                    session_obj.event_session_id
                                            }
                                        );
                                    }}>
                                    {#if session_obj?.hide}<EyeOff
                                            size="1.2em" />{:else}<Eye
                                            size="1.2em" />{/if}
                                </button>

                                <button
                                    type="button"
                                    class="btn btn-icon btn-xs {session_obj?.alert
                                        ? 'preset-tonal-warning'
                                        : 'preset-tonal-surface'}"
                                    onclick={async () => {
                                        await api.update_ae_obj({
                                            api_cfg: $ae_api,
                                            obj_type: 'event_session',
                                            obj_id: session_obj.event_session_id,
                                            fields: {
                                                alert: !session_obj.alert
                                            },
                                            log_lvl: 1
                                        });
                                        events_func.load_ae_obj_id__event_session(
                                            {
                                                api_cfg: $ae_api,
                                                event_session_id:
                                                    session_obj.event_session_id
                                            }
                                        );
                                    }}>
                                    {#if session_obj?.alert}<Bell
                                            size="1.2em" />{:else}<BellOff
                                            size="1.2em" />{/if}
                                </button>
                            </div>
                        </td>
                    </tr>
                {/each}
            </tbody>
        </table>
    {:else}
        <div
            class="bg-surface-50 dark:bg-surface-900/50 border-surface-300 flex flex-col items-center justify-center rounded-lg border border-dashed p-20 text-center opacity-50">
            <FileSearch size="3em" class="mx-auto mb-2 opacity-20" />

            <p class="text-xl">No sessions found matching your criteria.</p>

            <p class="text-sm">Try adjusting your filters or search terms.</p>
        </div>
    {/if}
</section>
