<script lang="ts">
import { liveQuery } from 'dexie';
import { Wrench, Presentation, Plane, IdCard, Contact } from '@lucide/svelte';
import { db_events } from '$lib/ae_events/db_events';
import { ae_util } from '$lib/ae_utils/ae_utils';
import { events_slct } from '$lib/stores/ae_events_stores';
import { ae_loc } from '$lib/stores/ae_stores';

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

let lq__event_obj = $derived(
    liveQuery(async () => {
        return await db_events.event.get($events_slct?.event_id ?? '');
    })
);

const modules = [
    {
        name: 'Presentation Management',
        path: 'pres_mgmt',
        icon: Presentation,
        description: 'Manage sessions, presentations, and presenters.',
        color: 'preset-filled-primary-200-800',
        access: 'authenticated_access'
    },
    {
        name: 'Launcher',
        path: 'launcher',
        icon: Plane,
        description: 'Launch presentations and manage live session display.',
        color: 'preset-filled-secondary-200-800',
        access: 'authenticated_access'
    },
    {
        name: 'Badges',
        path: 'badges',
        icon: IdCard,
        description: 'Manage and print event badges.',
        color: 'preset-filled-tertiary-200-800',
        access: 'authenticated_access'
    },
    {
        name: 'Leads',
        path: 'leads',
        icon: Contact,
        description: 'Exhibitor lead retrieval and management.',
        color: 'preset-filled-success-200-800',
        access: 'authenticated_access'
    }
];

// Filter modules by both access level and per-event cfg_json.modules_enabled
let filtered_modules = $derived(
    modules.filter((mod) => {
        // Access level gating (site/user level)
        if (mod.access === 'authenticated_access' && !$ae_loc.authenticated_access)
            return false;
        if (mod.access === 'trusted_access' && !$ae_loc.trusted_access)
            return false;
        if (mod.access === 'administrator_access' && !$ae_loc.administrator_access)
            return false;

        // Event-level gating via event.cfg_json.modules_enabled
        // When modules_enabled is configured, it is a strict whitelist —
        // only modules explicitly set to true are shown. All others are hidden.
        // Default is HIDE: if modules_enabled is absent or the key is not set
        // to true, the module is not shown. Admin must opt-in via the config page.
        const modules_cfg = $lq__event_obj?.cfg_json?.modules_enabled ?? null;
        if (modules_cfg !== null && typeof modules_cfg === 'object') {
            return modules_cfg[mod.path] === true;
        }

        // modules_enabled key not present at all → hide everything
        return false;
    })
);
</script>

<svelte:head>
    <title>
        &AElig;: {$lq__event_obj?.name ?? 'Event'} Hub
    </title>
</svelte:head>

<div class="container mx-auto space-y-8 p-4">
    <header class="space-y-2 text-center">
        <h1 class="text-4xl font-bold">
            {$lq__event_obj?.name ?? 'Event Hub'}
        </h1>
        <p class="text-xl opacity-70">
            Welcome to the event management dashboard. Please select a module to
            begin.
        </p>
    </header>

    <div class="flex flex-wrap justify-center gap-6">
        {#each filtered_modules as mod (mod.path)}
            <a
                href="/events/{$events_slct.event_id}/{mod.path}"
                class="card card-hover bg-surface-100 dark:bg-surface-800 border-surface-200 dark:border-surface-700 flex w-56 flex-col items-center space-y-4 border p-6 text-center shadow-lg transition-transform hover:scale-105">
                <div class="rounded-full p-6 {mod.color} text-4xl text-white">
                    <mod.icon size="2rem" />
                </div>
                <h3 class="text-2xl font-bold">{mod.name}</h3>
                <p class="opacity-80">{mod.description}</p>
            </a>
        {/each}
    </div>

    {#if $ae_loc.administrator_access && $ae_loc.edit_mode}
        <section
            class="card preset-tonal-warning border-warning-500 mt-12 border-l-4 p-6 shadow-lg">
            <div class="flex items-center gap-4">
                <Wrench size="2rem" class="shrink-0" aria-hidden="true" />
                <div>
                    <h3 class="text-xl font-bold">Event Admin Settings</h3>
                    <p>
                        You have elevated privileges. Use the menu above to
                        access advanced settings and reports.
                    </p>
                </div>
                <a
                    href="/events/{$events_slct.event_id}/settings"
                    class="btn ae_btn_warning ml-auto">
                    Event Settings
                </a>
            </div>
        </section>
    {/if}
</div>

<style>
</style>
