<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,
    File,
    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 bg-surface-50-950 text-surface-900-100 m-auto flex h-full max-h-full max-w-7xl flex-col gap-4 overflow-auto p-4 transition-colors duration-200">
    {#if $ae_loc.manager_access}
        <header
            class="bg-surface-100-900 border-surface-500/10 flex flex-wrap items-center justify-between gap-4 rounded-xl border p-4 shadow-md">
            <div class="flex items-center gap-3">
                <div class="bg-primary-500/10 rounded-lg p-2">
                    <Database size={24} class="text-primary-500" />
                </div>
                <div>
                    <h1 class="h3 font-black tracking-tight">Æ Core</h1>
                    <p
                        class="text-[10px] font-bold tracking-widest uppercase opacity-50">
                        System Management
                    </p>
                </div>
            </div>

            <nav class="flex flex-wrap gap-1">
                <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-primary">
                    <Globe size={14} class="mr-1" /> Sites
                </a>
                <a href="/core/users" class="btn btn-sm preset-tonal-tertiary">
                    <ShieldCheck size={14} class="mr-1" /> Users
                </a>
                <a href="/core/people" class="btn btn-sm preset-tonal-tertiary">
                    <Users size={14} class="mr-1" /> People
                </a>
                <a href="/core/files" class="btn btn-sm preset-tonal-tertiary">
                    <File size={14} class="mr-1" /> Files
                </a>
                <a
                    href="/core/data_stores"
                    class="btn btn-sm preset-tonal-secondary">
                    <Database size={14} class="mr-1" /> Data Stores
                </a>
                <a
                    href="/core/lookups"
                    class="btn btn-sm preset-tonal-secondary">
                    <List size={14} class="mr-1" /> Lookups
                </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/activity_logs"
                    class="btn btn-sm preset-tonal-surface">
                    <History size={14} class="mr-1" /> Logs
                </a>
            </nav>
        </header>

        <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>
