<script lang="ts">
interface Props {
    /** @type {import('./$types').PageData} */
    data: any;
}

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

let log_lvl: number = 0;
// console.log(`ae_events_pres_mgmt event [slug] +page.svelte data:`, data);

// Imports
import { onMount, untrack } from 'svelte';

import type { key_val } from '$lib/stores/ae_stores';
import { ae_util } from '$lib/ae_utils/ae_utils';
import Element_data_store from '$lib/elements/element_data_store.svelte';

let ae_promises: key_val = {};
let ae_tmp: key_val = {};
let ae_triggers: key_val = {};

import { liveQuery } from 'dexie';
import { core_func } from '$lib/ae_core/ae_core_functions';
import { db_events } from '$lib/ae_events/db_events';
import {
    ae_snip,
    ae_loc,
    ae_sess,
    ae_api,
    ae_trig,
    slct,
    slct_trigger
} from '$lib/stores/ae_stores';
import {
    EVENTS_MODULE_TITLE,
    events_sess,
    events_slct,
    events_trigger,
    events_trig_kv
} from '$lib/stores/ae_events_stores';
import { pres_mgmt_loc } from '$lib/stores/ae_events_stores__pres_mgmt.svelte';
import { events_func } from '$lib/ae_events/ae_events_functions';

import Comp_event_location_obj_li from './ae_comp__event_location_obj_li.svelte';
import Locations_page_menu from './ae_comp__locations_page_menu.svelte';
// import Sign_in_out from './../../sign_in_out.svelte';

import { browser } from '$app/environment';
import { LoaderCircle, MapPinned } from '@lucide/svelte';
// Variables
$effect(() => {
    if (browser) {
        console.log('Browser environment detected.');
    }
});

// Quickly save the data passed from the parent(s) to the Svelte stores, localStorage, and other.
let ae_acct = $derived(data[data.account_id]);

$effect(() => {
    if (!ae_acct) return;
    untrack(() => {
        $ae_loc.url_origin = data.url.origin;
        $events_slct.event_id = ae_acct.slct.event_id;
    });
});

let lq__event_obj = $derived(
    liveQuery(async () => {
        if (!$events_slct.event_id) return null;
        let results = await db_events.event.get($events_slct.event_id);
        return results;
    })
);

// Sync server-side pres_mgmt config into local PersistedState.
// WHY: this page can be reached directly without first visiting the pres_mgmt
// overview or a session page — the only other places this sync runs. Without
// it, pres_mgmt_loc.current keeps stale defaults (e.g. hide__session_poc,
// show__session_li_poc_field) for the session lists rendered on this page.
$effect(() => {
    const remote_cfg = $lq__event_obj?.mod_pres_mgmt_json;
    if (remote_cfg) {
        untrack(() => {
            events_func.sync_config__event_pres_mgmt({
                pres_mgmt_cfg_remote: remote_cfg,
                log_lvl: 0
            });
        });
    }
});

let lq__event_location_obj_li = $derived(
    liveQuery(async () => {
        if (!ae_acct?.slct.event_id) return [];
        let results = await db_events.location
            .where('event_id')
            .equals(ae_acct.slct.event_id)
            .sortBy('name');
        return results;
    })
);

// *** Functions and Logic
onMount(() => {
    if (log_lvl) {
        console.log('Events [event_id] Locations: +page.svelte');
    }
});
</script>

<svelte:head>
    <title>
        Locations: {ae_util.shorten_string({
            string: $lq__event_obj?.name ?? 'Loading...',
            max_length: 12
        })} ({$lq__event_obj?.event_id ?? ''}) - Pres Mgmt - {EVENTS_MODULE_TITLE}
    </title>
</svelte:head>

<div class="ae_events_pres_mgmt_event_locations w-full">
    <Locations_page_menu {lq__event_obj} />

    {#if !$lq__event_location_obj_li}
        <div>
            <LoaderCircle size="1em" class="m-1 animate-spin" />
            <span>Loading locations...</span>
        </div>
    {:else}
        <header class="ae_module_header">
            <h2
                class="
            flex w-full flex-row
            items-center justify-between gap-0.25 text-center text-2xl font-bold
            ">
                <span class="flex flex-row items-center gap-1">
                    <MapPinned size="1em" class="m-1 text-neutral-800/80" />
                    Locations/Rooms
                    <!-- Button to toggle between the regular location view and managing locations??? -->
                </span>
                <!-- Locations for: -->
                {#if $lq__event_obj?.cfg_json?.short_name}
                    {@html $lq__event_obj?.cfg_json.short_name ??
                        ae_snip.html__not_set}
                {:else}
                    {@html $lq__event_obj?.name ?? ae_snip.html__not_set}
                {/if}
            </h2>
        </header>

        <Element_data_store
            ds_code="events__pres_mgmt__locations_msg"
            ds_name="Default: Events - Pres Mgmt Locations Message"
            ds_type="html"
            for_type="event"
            for_id={$lq__event_obj?.event_id}
            class_li="w-full max-w-(--breakpoint-lg) text-lg text-blue-500 font-bold text-center p-1 m-auto border border-blue-200 rounded-md bg-blue-100 space-y-2"
            hide={!$ae_loc.manager_access ||
                pres_mgmt_loc.current.hide__locations_msg}
            show_edit={false}
            show_edit_btn={true} />
    {/if}

    <Comp_event_location_obj_li
        {lq__event_location_obj_li}
        link_to_id={$events_slct?.event_id ?? ''} />
</div>

<style lang="postcss">
</style>
