<script lang="ts">
    import { Building, Globe, Users, ShieldCheck, List, History } from 'lucide-svelte';
    import { ae_loc, slct } from '$lib/stores/ae_stores';

    interface Props {
        data: any;
    }

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

    // Quickly save the data passed from the parent(s)
    $slct.account_id = data.account_id;
</script>

<section class="ae_core md:container mx-auto p-4 space-y-6">
    <header class="flex justify-between items-center border-b border-surface-500/30 pb-4">
        <h2 class="h2">Æ Core Management</h2>
        <div class="text-right">
            <p class="text-sm opacity-60">Active Account</p>
            <p class="font-bold">{$ae_loc.account_name ?? 'Loading...'}</p>
        </div>
    </header>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <!-- Account Management Card -->
        <div class="card p-4 space-y-4 variant-soft-primary">
            <div class="flex items-center gap-2">
                <Building size={20} />
                <h3 class="h4">Accounts</h3>
            </div>
            <p class="text-sm opacity-80 text-balance">Manage client accounts and high-level system settings.</p>
            <a class="btn variant-filled-primary w-full" href="/core/accounts">
                Manage Accounts
            </a>
        </div>

        <!-- Site Management Card -->
        <div class="card p-4 space-y-4 variant-soft-secondary">
            <div class="flex items-center gap-2">
                <Globe size={20} />
                <h3 class="h4">Sites</h3>
            </div>
            <p class="text-sm opacity-80 text-balance">Configure sites and domains associated with the active account.</p>
            <a class="btn variant-filled-secondary w-full" href="/core/sites">
                Manage Sites
            </a>
        </div>

        <!-- User Management Card -->
        <div class="card p-4 space-y-4 variant-soft-error">
            <div class="flex items-center gap-2">
                <ShieldCheck size={20} />
                <h3 class="h4">Users</h3>
            </div>
            <p class="text-sm opacity-80 text-balance">Manage system access, permissions, and user credentials.</p>
            <a class="btn variant-filled-error w-full" href="/core/users">
                Manage Users
            </a>
        </div>

        <!-- Person Management Card -->
        <div class="card p-4 space-y-4 variant-soft-warning">
            <div class="flex items-center gap-2">
                <Users size={20} />
                <h3 class="h4">People</h3>
            </div>
            <p class="text-sm opacity-80 text-balance">Search and manage person records and their user linking.</p>
            <a class="btn variant-filled-warning w-full" href="/core/people">
                Manage People
            </a>
        </div>

        <!-- Activity Log Card -->
        <div class="card p-4 space-y-4 variant-soft-success">
            <div class="flex items-center gap-2">
                <History size={20} />
                <h3 class="h4">Activity Logs</h3>
            </div>
            <p class="text-sm opacity-80 text-balance">Monitor system actions and historical changes for the account.</p>
            <a class="btn variant-filled-success w-full" href="/core/activity_logs">
                View Activity Logs
            </a>
        </div>

        <!-- Lookups Card -->
        <div class="card p-4 space-y-4 variant-soft-surface">
            <div class="flex items-center gap-2">
                <List size={20} />
                <h3 class="h4">Lookups</h3>
            </div>
            <p class="text-sm opacity-80 text-balance">View system lookup tables (countries, time zones, etc).</p>
            <a class="btn variant-filled-surface w-full" href="/core/lookups">
                View Lookups
            </a>
        </div>
    </div>
</section>