<script lang="ts">
import { onMount } from 'svelte';
import { goto } from '$app/navigation';
import { ae_loc, ae_sess, ae_api, slct } from '$lib/stores/ae_stores';
import {
    Building,
    Database,
    Globe,
    History,
    LayoutDashboard,
    List,
    Lock,
    MapPin,
    Phone,
    ShieldCheck,
    Users
} from '@lucide/svelte';
interface Props {
    data: any;
    children?: import('svelte').Snippet;
}
let { data, children }: Props = $props();

onMount(() => {
    if (!$ae_loc.manager_access) {
        // Wait for a second to see if the permissions load before redirecting.
        setTimeout(() => {
            if (!$ae_loc.manager_access) {
                console.log('Access Denied to /core. Redirecting to home.');
                goto('/');
            }
        }, 500);
    }
});
</script>

<svelte:head>
    <title>Core - {$ae_loc.title ?? 'Æ loading...'}</title>
</svelte:head>

<div
    class="ae_core m-auto flex h-full max-h-full max-w-6xl flex-col gap-1 overflow-auto p-4">
    {#if $ae_loc.manager_access}
        <nav
            class="border-surface-500/30 mb-6 flex flex-wrap gap-2 border-b pb-4">
            <a href="/core" class="btn btn-sm preset-tonal-surface">
                <LayoutDashboard size={14} class="mr-1" /> Dashboard
            </a>
            <a href="/core/accounts" class="btn btn-sm preset-tonal-primary">
                <Building size={14} class="mr-1" /> Accounts
            </a>
            <a href="/core/sites" class="btn btn-sm preset-tonal-secondary">
                <Globe size={14} class="mr-1" /> Sites
            </a>
            <a href="/core/users" class="btn btn-sm preset-tonal-error">
                <ShieldCheck size={14} class="mr-1" /> Users
            </a>
            <a href="/core/people" class="btn btn-sm preset-tonal-warning">
                <Users size={14} class="mr-1" /> People
            </a>
            <a
                href="/core/activity_logs"
                class="btn btn-sm preset-tonal-success">
                <History size={14} class="mr-1" /> Logs
            </a>
            <a href="/core/addresses" class="btn btn-sm preset-tonal-surface">
                <MapPin size={14} class="mr-1" /> Addresses
            </a>
            <a href="/core/contacts" class="btn btn-sm preset-tonal-surface">
                <Phone size={14} class="mr-1" /> Contacts
            </a>
            <a href="/core/lookups" class="btn btn-sm preset-tonal-surface">
                <List size={14} class="mr-1" /> Lookups
            </a>
            <a href="/core/data_stores" class="btn btn-sm preset-tonal-surface">
                <Database size={14} class="mr-1" /> Data Stores
            </a>
        </nav>

        <section class="main_content grow px-1 pb-28 md:px-2">
            {@render children?.()}
        </section>
    {:else}
        <section
            class="flex grow flex-col items-center justify-center space-y-4 py-20 text-center">
            <div class="bg-error-500/10 rounded-full p-6">
                <Lock size={64} class="text-error-500" />
            </div>
            <h1 class="h1 font-black">Access Restricted</h1>
            <p class="max-w-md opacity-70">
                The area you are trying to access is reserved for system
                managers. If you believe you should have access, please sign in
                with an authorized account.
            </p>
            <div class="flex gap-4 pt-4">
                <a href="/" class="btn preset-filled-primary font-bold"
                    >Return Home</a>
            </div>
        </section>
    {/if}
</div>
