<script lang="ts">
// console.log(`ae_events_pres_mgmt +page data:`, data);
// console.log(`ae_events_pres_mgmt Data Params:`, data.url.searchParams.get('event_id'));

import { onMount } from 'svelte';

import { liveQuery } from 'dexie';
import { db_events } from '$lib/ae_events/db_events';
import {
    ae_loc,
    ae_sess,
    ae_api,
    slct,
    slct_trigger
} from '$lib/stores/ae_stores';
// import {
//     events_loc,
//     events_slct,
//     events_trigger
// } from '$lib/stores/ae_events_stores';
import { ae_util } from '$lib/ae_utils/ae_utils';
import { CalendarDays, House, LoaderCircle, MapPin, TriangleAlert } from '@lucide/svelte';
import { page } from '$app/stores';

interface Props {
    data: any;
}

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

let lq__event_obj_li = $derived(
    liveQuery(async () => {
        const account_id = $page.data.account_id;
        if (!account_id) return [];
        let results = await db_events.event
            .where('account_id')
            .equals(account_id)
            .reverse()
            .sortBy('start_datetime');
        return results;
    })
);

let items_per_page = 10;
let current_page = $state(1);

let paginated_events = $derived(() => {
    const start = (current_page - 1) * items_per_page;
    const end = start + items_per_page;
    return $lq__event_obj_li?.slice(start, end) ?? [];
});

let total_events = $derived($lq__event_obj_li?.length ?? 0);
let total_pages = $derived(Math.ceil(total_events / items_per_page));

function next_page() {
    if (current_page < total_pages) {
        current_page++;
    }
}

function prev_page() {
    if (current_page > 1) {
        current_page--;
    }
}

onMount(() => {
    // console.log('Events - Presentation Management: +page.svelte');
});
</script>

<h2 class="h3">
    Presentation Management for {$ae_loc.account_name ?? 'Æ loading...'}
</h2>

{#if $ae_loc.administrator_access}
    <h3 class="h4">Administrator Access - Technical Support</h3>
    <p>
        You are accessing the presentation management system with
        "administrator" level permissions.
    </p>
{:else if $ae_loc.trusted_access}
    <h3 class="h4">Trusted Access - Staff</h3>
    <p>
        You are accessing the presentation management system with "trusted"
        level permissions.
    </p>
{:else if !$ae_loc.trusted_access}
    <h3 class="h4">Restricted Access</h3>
    <p>Your access to the presentation management system is limited.</p>
{/if}

<!-- <Element_data_store
    ds_code="events__pres_mgmt__overview"
    ds_type="html"
    for_type="event"
    for_id={$events_slct.event_id}
    display="block"
    class_li="p-2"
    /> -->

<!-- <Element_data_store
    ds_code="events__pres_mgmt__example"
    ds_type="html"
    for_type="event"
    for_id={$events_slct.event_id}
    ds_name="Default: Events - Presentation Management Example"
    store="local"
    display="block"
    class_li="variant-ghost-surface p-2"
    try_cache={true}
    show_edit={false}
    /> -->

{#if $lq__event_obj_li}
    {#if $lq__event_obj_li.length}
        <ul class="space-y-2">
            {#each $lq__event_obj_li as event_obj (event_obj.event_id)}
                <li class:dim={event_obj?.hide}>
                    <span
                        class="flex w-full flex-row items-center justify-between gap-1">
                        <!-- We do not want to show events more than 8 months old. -->
                        {#if new Date(event_obj.start_datetime ?? '').getTime() > new Date().getTime() - 1000 * 60 * 60 * 24 * 30 * 8 || $ae_loc.trusted_access}
                            <span>
                            <span>
                                <CalendarDays size="1em" class="mx-1 inline" />
                                {ae_util.iso_datetime_formatter(
                                    event_obj.start_datetime,
                                    'date_long'
                                )}
                            </span>
                            <span class="mx-2 text-sm italic opacity-75">
                            <MapPin size="1em" class="mx-1 inline" />
                            {event_obj.timezone}
                            </span>
                            </span>
                            <strong>
                                {event_obj.name}
                            </strong>
                        {:else}
                            <span>
                                <CalendarDays size="1em" class="mx-1 inline" />
                                {ae_util.iso_datetime_formatter(
                                    event_obj.start_datetime,
                                    'date_long'
                                )}
                            </span>
                            <strong>
                                {event_obj.name}
                            </strong>
                        {/if}
                    </span>

                    <span
                        class="flex w-full flex-row items-center justify-evenly gap-1">
                        {#if $ae_loc.authenticated_access}
                            <a
                                data-sveltekit-reload
                                href="/events/{event_obj.event_id}"
                                class="btn btn-sm preset-tonal-primary border-primary-500 hover:preset-filled-secondary-500 border"
                                title="Presentation Management for {event_obj.name}">
                                <House size="1em" class="mr-1 inline" />
                                Event Home
                            </a>

                            {#if $ae_loc.trusted_access && $ae_loc.edit_mode}
                            <a
                                href="/events/{event_obj.event_id}/pres_mgmt"
                                class="btn btn-sm preset-tonal-secondary border-secondary-500 hover:preset-filled-secondary-500 border"
                                title="Presentation Management for {event_obj.name}">
                                Presentation Mgmt
                            </a>
                            <a
                                href="/events/{event_obj.event_id}/launcher"
                                class="btn btn-sm preset-tonal-secondary border-secondary-500 hover:preset-filled-secondary-500 border"
                                title="Event Launcher for {event_obj.name}">
                                Pres Mgmt - Launcher
                            </a>
                            <a
                                href="/events/{event_obj.event_id}/badges"
                                class="btn btn-sm preset-tonal-secondary border-secondary-500 hover:preset-filled-secondary-500 border"
                                title="Badge Management for {event_obj.name}">
                                Badge Printing
                            </a>
                            <a
                                href="/events/{event_obj.event_id}/leads"
                                class="btn btn-sm preset-tonal-secondary border-secondary-500 hover:preset-filled-secondary-500 border"
                                title="Exhibitor Leads for {event_obj.name}">
                                Exhibitor Leads
                            </a>
                            {/if}

                        {/if}
                        <!-- {#if $ae_loc.trusted_access}
                            <a
                                data-sveltekit-reload
                                href="/event/{event_obj.event_id}"
                                class="btn btn-sm preset-tonal-warning border-warning-500 hover:preset-filled-warning-500 border"
                                title="Legacy Presentation Management System (Flask/Svelte) for {event_obj.name}">
                                Legacy Pres Mgmt
                            </a>
                        {/if} -->
                    </span>
                </li>
            {/each}
        </ul>
        {#if total_pages > 1}
        <div class="mt-4 flex items-center justify-center space-x-4">
            <button
                type="button"
                class="btn btn-sm"
                onclick={prev_page}
                disabled={current_page === 1}>Previous</button>
            <span>Page {current_page} of {total_pages}</span>
            <button
                type="button"
                class="btn btn-sm"
                onclick={next_page}
                disabled={current_page === total_pages}>Next</button>
        </div>
        {/if}
    {:else}
        <div class="flex flex-row items-center justify-center">
            <TriangleAlert size="1em" class="text-error-500 mx-1 inline" />
            <span>No events available to display.</span>
            <TriangleAlert size="1em" class="text-error-500 mx-1 inline" />
        </div>
    {/if}
{:else}
    <div class="flex flex-row items-center justify-center">
        <LoaderCircle size="1em" class="mx-1 inline animate-spin" />
        <span>Loading...</span>
    </div>
{/if}
