<script lang="ts">
// *** Import Svelte specific
import { ae_loc } from '$lib/stores/ae_stores';

// *** Import icons
import {
    Archive,
    CalendarCheck,
    CalendarClock,
    MessageSquare,
    ShieldAlert,
    Users
} from '@lucide/svelte';
</script>

<div class="flex w-full flex-col items-center justify-center gap-8 py-12">
    <header class="text-center">
        <h1 class="h1">IDAA Module Dashboard</h1>
        <p class="text-lg opacity-60">Select a customized module to continue</p>
    </header>

    {#if $ae_loc.trusted_access}
        <div
            class="grid w-full max-w-5xl grid-cols-1 gap-8 px-4 text-center md:grid-cols-3">
            <a
                href="/idaa/archives"
                class="card card-hover preset-tonal-secondary border-secondary-500/30 hover:border-secondary-500 flex flex-col items-center gap-6 border p-12 transition-all">
                <Archive size={64} class="text-secondary-500" />
                <span class="text-2xl font-bold">Archives</span>
                <p class="text-sm opacity-70">
                    Browse historical documents and records
                </p>
            </a>

            <a
                href="/idaa/bb"
                class="card card-hover preset-tonal-primary border-primary-500/30 hover:border-primary-500 flex flex-col items-center gap-6 border p-12 transition-all">
                <MessageSquare size={64} class="text-primary-500" />
                <span class="text-2xl font-bold">Bulletin Board</span>
                <p class="text-sm opacity-70">
                    Post and view community messages
                </p>
            </a>

            <a
                href="/idaa/recovery_meetings"
                class="card card-hover preset-tonal-tertiary border-tertiary-500/30 hover:border-tertiary-500 flex flex-col items-center gap-6 border p-12 transition-all">
                <CalendarClock size={64} class="text-tertiary-500" />
                <span class="text-2xl font-bold">Recovery Meetings</span>
                <p class="text-sm opacity-70">
                    Join and manage ongoing recovery sessions
                </p>
            </a>
        </div>
    {:else}
        <div
            class="card preset-tonal-error border-error-500 flex max-w-lg flex-col items-center gap-6 border p-12 text-center">
            <ShieldAlert size={80} class="text-error-500" />
            <h2 class="h2 text-error-500">Access Restricted</h2>
            <p class="text-lg">
                You must be signed in with <strong>Trusted Access</strong> or higher
                to view these modules.
            </p>
            <div class="mt-6 flex gap-4">
                <a href="/" class="btn preset-filled-surface"> Return Home </a>
                <button
                    type="button"
                    class="btn preset-filled-primary"
                    onclick={() =>
                        ($ae_loc.sys_menu.expand_access_type = true)}>
                    Request Higher Access
                </button>
            </div>
        </div>
    {/if}
</div>
