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

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

    import { page } from '$app/stores';

    import type { key_val } from '$lib/stores/ae_stores';
    import { ae_util } from '$lib/ae_utils/ae_utils';

    import { liveQuery } from 'dexie';
    // import { core_func } from '$lib/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_loc,
        events_sess,
        events_slct,
        events_trigger
    } from '$lib/stores/ae_events_stores';
    import { events_func } from '$lib/ae_events_functions';

    import Event_reports_page_menu from './event_reports_page_menu.svelte';
    import Reports_sessions from './reports_sessions.svelte';
    import Reports_presenters from './reports_presenters.svelte';
    import Reports_files from './reports_files.svelte';
    // import Comp_event_file_obj_tbl from '../../ae_comp__event_file_obj_tbl.svelte';

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

    // console.log(`TEST data`, data);
    // console.log(`TEST data.url`, data?.url);
    // console.log(`TEST data.url.hash`, data?.url?.hash);
    // console.log(`TEST $page.url`, $page?.url);
    console.log(`TEST $page.url.hash`, $page?.url?.hash);

    $events_slct.event_id = ae_acct.slct.event_id;
    $events_slct.event_obj = ae_acct.slct.event_obj;
    $events_slct.event_session_obj_li = ae_acct.slct.event_session_obj_li;

    let lq__event_obj = $derived(
        liveQuery(async () => {
            let results = await db_events.event.get(ae_acct.slct.event_id);
            return results;
        })
    );

    // It is important that these not be set to a value! It messes with the Dexie LiveQuery.
    // let event_file_id_random_li: Array<string> = $state();
    // let event_session_id_random_li: Array<string> = $state();
    // let event_presentation_id_random_li: Array<string>;
    // let event_presenter_id_random_li: Array<string> = $state();

    // let load_obj_li_results: Promise<any>|key_val;
    // let search_submit_results: Promise<any>|key_val;

    // let ae_promises: key_val = $state({});
    // let ae_tmp: key_val = {};
    let ae_triggers: key_val = $state({
        rpt__event_files: true,
        rpt__event_sessions: true,
        rpt__event_presenters: true
    });

    let url_hash: string = $state($page?.url?.hash);

    $effect(() => {
        if (url_hash) {
            url_hash = url_hash.replace('#', '');
            if (log_lvl) {
                console.log(`URL hash changed: ${url_hash}`);
            }
            $events_loc.pres_mgmt.show_report = url_hash;
        }
    });
</script>

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

<Event_reports_page_menu {data} {lq__event_obj} />

{#if !$lq__event_obj}
    <div>
        <span class="fas fa-spinner fa-spin m-1"></span>
        <span>Loading event information...</span>
    </div>
{:else}
    <header class="ae_module_header">
        <!-- <span
        class="flex flex-row flex-wrap gap-1 items-center justify-center"
        > -->

        <!-- rounded-md p-1 px-2 -->
        <!-- preset-filled-surface-400-600 text-neutral-800/90 -->
        <h2
            class="
            h2 text-center
            flex flex-row gap-0.25 items-center justify-between w-full
            "
        >
            <span class="flex flex-row gap-1 items-center">
                <span class="fas fa-chart-line m-1 text-neutral-800/80"></span>
                Reports
            </span>
            <!-- Reports 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>

    <div
        class="preset-tonal-success border border-success-500 my-2 p-2 rounded-md flex flex-row flex-wrap gap-1 items-center justify-center"
    >
        <span class="border border-gray-200 rounded-md p-1">
            <!-- Sessions without files uploaded -->
            <button
                type="button"
                disabled={!$ae_loc.trusted_access}
                onclick={() => {
                    ae_triggers.rpt__event_sessions = true;
                    $events_loc.pres_mgmt.show_report = 'session_no_files';
                }}
                class="btn btn-sm preset-tonal-success border border-success-500 hover:preset-filled-success-500 transition-all m-1"
                title="Toggle to show sessions with and without files uploaded."
            >
                {#if $events_loc.pres_mgmt?.show_report == 'session_no_files' && $events_sess.pres_mgmt?.status_qry__search == 'loading'}
                    <span class="fas fa-spinner fa-spin"></span>
                {:else}
                    <span class="fas fa-clipboard-list m-1"></span>
                {/if}
                Sessions
                {#if $events_loc.pres_mgmt?.rpt__session_no_files}
                    With
                {:else}
                    Without
                {/if}
                Files
            </button>

            <button
                type="button"
                disabled={!$ae_loc.trusted_access}
                onclick={() => {
                    ae_triggers.rpt__event_sessions = true;
                    $events_loc.pres_mgmt.show_report = 'sessions_poc_agree';
                }}
                class:hidden={!$events_loc.pres_mgmt?.require__session_agree}
                class="btn btn-sm preset-tonal-success border border-success-500 hover:preset-filled-success-500 transition-all m-1"
                title="Toggle to show POCs who have agreed to session terms and conditions."
            >
                {#if $events_loc.pres_mgmt?.show_report == 'sessions_poc_agree' && $events_sess.pres_mgmt?.status_qry__search == 'loading'}
                    <span class="fas fa-spinner fa-spin"></span>
                {:else if $events_loc.pres_mgmt?.rpt__session_poc_agree}
                    <span class="fas fa-check m-1"></span>
                {:else}
                    <span class="fas fa-times m-1"></span>
                {/if}
                {#if $events_loc.pres_mgmt?.rpt__session_poc_agree}
                    Session {$events_loc.pres_mgmt?.label__session_poc_name}s
                    Agreed
                {:else}
                    Session {$events_loc.pres_mgmt?.label__session_poc_name}s
                    Not Agreed
                {/if}
            </button>

            <!-- Sessions without POC bios -->
            <button
                type="button"
                disabled={!$ae_loc.trusted_access}
                onclick={() => {
                    ae_triggers.rpt__event_sessions = true;
                    $events_loc.pres_mgmt.show_report = 'session_no_bio';
                }}
                class:hidden={$lq__event_obj?.mod_pres_mgmt_json
                    ?.hide__report_kv.session_no_bio && !$ae_loc.edit_mode}
                class="btn btn-sm preset-tonal-success border border-success-500 hover:preset-filled-success-500 transition-all m-1"
                title="Show sessions without POC bios."
            >
                {#if $events_loc.pres_mgmt?.show_report == 'session_no_bio' && $events_sess.pres_mgmt?.status_qry__search == 'loading'}
                    <span class="fas fa-spinner fa-spin"></span>
                {:else}
                    <span class="fas fa-id-card m-1"></span>
                    <!-- <span class="fas fa-book m-1"></span> -->
                {/if}
                Session {$events_loc.pres_mgmt?.label__session_poc_name} Bios
            </button>
        </span>

        <span class="border border-gray-200 rounded-md p-1">
            <button
                type="button"
                disabled={!$ae_loc.trusted_access}
                onclick={() => {
                    ae_triggers.rpt__event_presenters = true;
                    $events_loc.pres_mgmt.show_report = 'presenters_agree';
                }}
                class:hidden={!$events_loc.pres_mgmt?.require__presenter_agree}
                class="btn btn-sm preset-tonal-success border border-success-500 hover:preset-filled-success-500 transition-all m-1"
                title="Show presenters who have agreed to present."
            >
                {#if $events_loc.pres_mgmt?.show_report == 'presenters_agree' && $events_sess.pres_mgmt?.status_qry__search == 'loading'}
                    <span class="fas fa-spinner fa-spin"></span>
                {:else if $events_loc.pres_mgmt.rpt__presenter_agree}
                    <span class="fas fa-check m-1"></span>
                {:else}
                    <span class="fas fa-times m-1"></span>
                {/if}
                Presenters
                {#if $events_loc.pres_mgmt.rpt__presenter_agree}
                    Agreed
                {:else}
                    Not Agreed
                {/if}
            </button>

            <button
                type="button"
                disabled={!$ae_loc.trusted_access}
                onclick={() => {
                    ae_triggers.rpt__event_presenters = true;
                    $events_loc.pres_mgmt.show_report = 'presenters_biography';
                }}
                class:hidden={$lq__event_obj?.mod_pres_mgmt_json
                    ?.hide__report_kv.presenter_no_bio && !$ae_loc.edit_mode}
                class="btn btn-sm preset-tonal-success border border-success-500 hover:preset-filled-success-500 transition-all m-1"
                title="Show presenters with bios."
            >
                {#if $events_loc.pres_mgmt?.show_report == 'presenters_biography' && $events_sess.pres_mgmt?.status_qry__search == 'loading'}
                    <span class="fas fa-spinner fa-spin"></span>
                {:else}
                    <span class="fas fa-id-card m-1"></span>
                    <!-- <span class="fas fa-book m-1"></span> -->
                {/if}
                Presenter Bios
            </button>

            <button
                type="button"
                disabled={!$ae_loc.trusted_access}
                onclick={() => {
                    ae_triggers.rpt__event_presenters = true;
                    $events_loc.pres_mgmt.show_report = 'presenters_overview';
                }}
                class:hidden={$lq__event_obj?.mod_pres_mgmt_json
                    ?.hide__report_kv.presenter_overview}
                class="btn btn-sm preset-tonal-success border border-success-500 hover:preset-filled-success-500 transition-all m-1"
                title="Show overview of presenters' statuses. (A work in progress for LCI)"
            >
                {#if $events_loc.pres_mgmt?.show_report == 'presenters_overview' && $events_sess.pres_mgmt?.status_qry__search == 'loading'}
                    <span class="fas fa-spinner fa-spin"></span>
                {:else}
                    <span class="fas fa-tasks m-1"></span>
                {/if}
                Overview of Presenters
            </button>
        </span>

        <span class="border border-gray-200 rounded-md p-1">
            <button
                type="button"
                disabled={!$ae_loc.trusted_access}
                onclick={() => {
                    ae_triggers.rpt__event_files = true;
                    $events_loc.pres_mgmt.show_report = 'event_files';
                }}
                class:hidden={$lq__event_obj?.mod_pres_mgmt_json
                    ?.hide__report_kv.event_files}
                class="btn btn-sm preset-tonal-success border border-success-500 hover:preset-filled-success-500 transition-all m-1"
                title="Show large file uploads."
            >
                {#if $events_sess.pres_mgmt?.show_report == 'event_files' && $events_sess.pres_mgmt.status_rpt[$events_sess.pres_mgmt?.show_report] == 'loading'}
                    <span class="fas fa-spinner fa-spin"></span>
                {/if}
                <span class="fas fa-file m-1"></span>
                Event Files
            </button>
        </span>
    </div>

    <!-- All Event Session related reports -->
    {#if $events_loc.pres_mgmt.show_report == 'session_no_files' || $events_loc.pres_mgmt.show_report == 'session_no_bio' || $events_loc.pres_mgmt.show_report == 'sessions_poc_agree'}
        <Reports_sessions
            {lq__event_obj}
            event_session_obj_li={$events_sess.event_session_obj_li}
            rpt__name={$events_loc.pres_mgmt.show_report}
            rpt__sort={$events_loc.pres_mgmt.qry__session_sort}
            rpt__enabled={$events_loc.pres_mgmt.qry_enabled}
            rpt__hidden={$events_loc.pres_mgmt.qry_hidden}
            rpt__limit={$events_loc.pres_mgmt.qry_limit__sessions}
            bind:qry__status={$events_sess.pres_mgmt.status_qry__search}
            qry__count={$events_sess.event_session_obj_li?.length ?? 0}
            bind:qry__trigger={ae_triggers.rpt__event_sessions}
            hide_session_code={$events_loc.pres_mgmt?.hide__session_code}
            {log_lvl}
        />
    {/if}

    <!-- All Event Presenter related reports -->
    {#if $events_loc.pres_mgmt.show_report == 'presenters_agree' || $events_loc.pres_mgmt.show_report == 'presenters_biography' || $events_loc.pres_mgmt.show_report == 'presenters_overview'}
        <Reports_presenters
            {lq__event_obj}
            event_presenter_obj_li={$events_sess.event_presenter_obj_li}
            rpt__name={$events_loc.pres_mgmt.show_report}
            rpt__sort={$events_loc.pres_mgmt.qry__presenter_sort}
            rpt__enabled={$events_loc.pres_mgmt.qry_enabled}
            rpt__hidden={$events_loc.pres_mgmt.qry_hidden}
            rpt__limit={$events_loc.pres_mgmt.qry_limit__presenters}
            bind:qry__status={$events_sess.pres_mgmt.status_qry__search}
            qry__count={$events_sess.event_presenter_obj_li?.length ?? 0}
            bind:qry__trigger={ae_triggers.rpt__event_presenters}
            hide_session_code={$events_loc.pres_mgmt?.hide__session_code}
            {log_lvl}
        />
    {/if}

    <!-- All Event File related reports -->
    {#if $events_loc.pres_mgmt.show_report == 'event_files' || $events_loc.pres_mgmt.show_report == 'recent_files' || $events_loc.pres_mgmt.show_report == 'large_files'}
        <Reports_files
            {lq__event_obj}
            event_file_obj_li={$events_sess.event_file_obj_li}
            rpt__name={$events_loc.pres_mgmt.show_report}
            rpt__sort={$events_loc.pres_mgmt.qry__files_sort}
            rpt__limit={$events_loc.pres_mgmt.qry_limit__files}
            bind:qry__status={$events_sess.pres_mgmt.status_qry__search}
            qry__count={$events_sess.event_file_obj_li?.length ?? 0}
            bind:qry__trigger={ae_triggers.rpt__event_files}
            hide_session_code={$events_loc.pres_mgmt?.hide__session_code}
            {log_lvl}
        />
    {/if}
{/if}
