<script lang="ts">
import {
    Building,
    Database,
    File,
    Globe,
    History,
    Landmark,
    LayoutDashboard,
    List,
    MapPin,
    Phone,
    ShieldCheck,
    Users
} 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="space-y-8">
    <header
        class="bg-surface-100-900 border-surface-500/10 flex flex-wrap items-center justify-between gap-4 rounded-2xl border p-6 shadow-xl">
        <div class="flex items-center gap-4">
            <div class="bg-primary-500/10 rounded-xl p-3">
                <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 tracking-widest uppercase opacity-50">
                    System Infrastructure & Identity
                </p>
            </div>
        </div>
        <div
            class="border-surface-500/10 min-w-50 rounded-xl border bg-surface-200-800 p-3">
            <p
                class="mb-1 flex items-center gap-1 text-[10px] font-black tracking-widest uppercase opacity-60">
                <Landmark size={10} /> Active Account
            </p>
            <p class="text-sm font-bold">
                {$ae_loc.account_name ?? 'Loading...'}
            </p>
        </div>
    </header>

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

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

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

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

        <!-- Files Card -->
        <div
            class="card preset-tonal-tertiary group flex flex-col justify-between space-y-4 p-6 shadow-lg transition-colors duration-200 hover:brightness-110">
            <div class="space-y-4">
                <div class="flex items-center gap-3">
                    <div
                        class="bg-tertiary-500/20 rounded-lg p-2 transition-transform group-hover:scale-110">
                        <File size={24} />
                    </div>
                    <h3 class="h4 font-black">Files</h3>
                </div>
                <p class="text-sm leading-relaxed opacity-80">
                    Browse and manage hosted files across all accounts.
                </p>
            </div>
            <a
                class="btn preset-filled-tertiary mt-4 w-full font-bold shadow-md"
                href="/core/files">
                Manage
            </a>
        </div>

        <!-- Data Stores Card -->
        <div
            class="card preset-tonal-secondary group flex flex-col justify-between space-y-4 p-6 shadow-lg transition-colors duration-200 hover:brightness-110">
            <div class="space-y-4">
                <div class="flex items-center gap-3">
                    <div
                        class="bg-secondary-500/20 rounded-lg p-2 transition-transform group-hover:scale-110">
                        <Database size={24} />
                    </div>
                    <h3 class="h4 font-black">Data Stores</h3>
                </div>
                <p class="text-sm leading-relaxed opacity-80">
                    Manage all content and configuration data stores across accounts.
                </p>
            </div>
            <a
                class="btn preset-filled-secondary mt-4 w-full font-bold shadow-md"
                href="/core/data_stores">
                Manage
            </a>
        </div>

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

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

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

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