<script lang="ts">
    import { Building, Globe, Users, ShieldCheck, List, History, MapPin, Phone, Landmark, LayoutDashboard } 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)
    $effect(() => { $slct.account_id = data.account_id; });
</script>

<div class="container mx-auto p-4 space-y-8">
    <header class="flex flex-wrap justify-between items-center bg-surface-50-900-token p-6 rounded-2xl shadow-xl border border-surface-500/10 gap-4">
        <div class="flex items-center gap-4">
            <div class="p-3 bg-primary-500/10 rounded-xl">
                <LayoutDashboard size={32} class="text-primary-500" />
            </div>
            <div>
                <h1 class="h2 font-black tracking-tight text-balance">Æ Core Management</h1>
                <p class="text-xs font-bold opacity-50 uppercase tracking-widest">System Infrastructure & Identity</p>
            </div>
        </div>
        <div class="bg-black/5 p-3 rounded-xl border border-surface-500/10 min-w-50">
            <p class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1 mb-1">
                <Landmark size={10} /> Active Account
            </p>
            <p class="font-bold text-sm">{$ae_loc.account_name ?? 'Loading...'}</p>
        </div>
    </header>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
        <!-- Account Management Card -->
        <div class="card p-6 space-y-4 variant-soft-primary shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
            <div class="space-y-4">
                <div class="flex items-center gap-3">
                    <div class="p-2 bg-primary-500/20 rounded-lg group-hover:scale-110 transition-transform">
                        <Building size={24} />
                    </div>
                    <h3 class="h4 font-black">Accounts</h3>
                </div>
                <p class="text-sm opacity-80 leading-relaxed">Manage client accounts and high-level system settings.</p>
            </div>
            <a class="btn variant-filled-primary font-bold shadow-md w-full mt-4" href="/core/accounts">
                Manage
            </a>
        </div>

        <!-- Site Management Card -->
        <div class="card p-6 space-y-4 variant-soft-secondary shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
            <div class="space-y-4">
                <div class="flex items-center gap-3">
                    <div class="p-2 bg-secondary-500/20 rounded-lg group-hover:scale-110 transition-transform">
                        <Globe size={24} />
                    </div>
                    <h3 class="h4 font-black">Sites</h3>
                </div>
                <p class="text-sm opacity-80 leading-relaxed">Configure sites and domains associated with the active account.</p>
            </div>
            <a class="btn variant-filled-secondary font-bold shadow-md w-full mt-4" href="/core/sites">
                Manage
            </a>
        </div>

        <!-- User Management Card -->
        <div class="card p-6 space-y-4 variant-soft-error shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
            <div class="space-y-4">
                <div class="flex items-center gap-3">
                    <div class="p-2 bg-error-500/20 rounded-lg group-hover:scale-110 transition-transform">
                        <ShieldCheck size={24} />
                    </div>
                    <h3 class="h4 font-black">Users</h3>
                </div>
                <p class="text-sm opacity-80 leading-relaxed">Manage system access, permissions, and user credentials.</p>
            </div>
            <a class="btn variant-filled-error font-bold shadow-md w-full mt-4" href="/core/users">
                Manage
            </a>
        </div>

        <!-- Person Management Card -->
        <div class="card p-6 space-y-4 variant-soft-warning shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
            <div class="space-y-4">
                <div class="flex items-center gap-3">
                    <div class="p-2 bg-warning-500/20 rounded-lg group-hover:scale-110 transition-transform">
                        <Users size={24} />
                    </div>
                    <h3 class="h4 font-black">People</h3>
                </div>
                <p class="text-sm opacity-80 leading-relaxed">Search and manage person records and their user linking.</p>
            </div>
            <a class="btn variant-filled-warning font-bold shadow-md w-full mt-4" href="/core/people">
                Manage
            </a>
        </div>

        <!-- Address Management Card -->
        <div class="card p-6 space-y-4 variant-soft shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between border border-surface-500/10">
            <div class="space-y-4">
                <div class="flex items-center gap-3">
                    <div class="p-2 bg-surface-500/20 rounded-lg group-hover:scale-110 transition-transform">
                        <MapPin size={24} />
                    </div>
                    <h3 class="h4 font-black">Addresses</h3>
                </div>
                <p class="text-sm opacity-80 leading-relaxed">Manage physical locations, shipping, and billing addresses.</p>
            </div>
            <a class="btn variant-filled-surface font-bold shadow-md w-full mt-4" href="/core/addresses">
                Manage
            </a>
        </div>

        <!-- Contact Management Card -->
        <div class="card p-6 space-y-4 variant-soft shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between border border-surface-500/10">
            <div class="space-y-4">
                <div class="flex items-center gap-3">
                    <div class="p-2 bg-surface-500/20 rounded-lg group-hover:scale-110 transition-transform">
                        <Phone size={24} />
                    </div>
                    <h3 class="h4 font-black">Contacts</h3>
                </div>
                <p class="text-sm opacity-80 leading-relaxed">Maintain support contacts, office numbers, and digital links.</p>
            </div>
            <a class="btn variant-filled-surface font-bold shadow-md w-full mt-4" href="/core/contacts">
                Manage
            </a>
        </div>

        <!-- Activity Log Card -->
        <div class="card p-6 space-y-4 variant-soft-success shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
            <div class="space-y-4">
                <div class="flex items-center gap-3">
                    <div class="p-2 bg-success-500/20 rounded-lg group-hover:scale-110 transition-transform">
                        <History size={24} />
                    </div>
                    <h3 class="h4 font-black">Activity Logs</h3>
                </div>
                <p class="text-sm opacity-80 leading-relaxed">Monitor system actions and historical changes for the account.</p>
            </div>
            <a class="btn variant-filled-success font-bold shadow-md w-full mt-4" href="/core/activity_logs">
                View Logs
            </a>
        </div>

        <!-- Lookups Card -->
        <div class="card p-6 space-y-4 variant-soft shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between border border-surface-500/10">
            <div class="space-y-4">
                <div class="flex items-center gap-3">
                    <div class="p-2 bg-surface-500/20 rounded-lg group-hover:scale-110 transition-transform">
                        <List size={24} />
                    </div>
                    <h3 class="h4 font-black">Lookups</h3>
                </div>
                <p class="text-sm opacity-80 leading-relaxed">View system lookup tables (countries, time zones, etc).</p>
            </div>
            <a class="btn variant-filled-surface font-bold shadow-md w-full mt-4" href="/core/lookups">
                View
            </a>
        </div>
    </div>
</div>