<?php
/// file: app/View/admin/dashboard.php

declare(strict_types=1);

/** @var array<string, int> $stats */
/** @var \App\Core\App $app */
$brand = (string) $app->config('app.name', 'SANEKSA');
?>
<header class="max-w-6xl">
    <p class="muted-label">Overview</p>
    <h1 class="mt-2 font-display text-3xl tracking-tight text-white sm:text-4xl">Dashboard</h1>
    <p class="mt-3 max-w-xl text-sm leading-relaxed text-silver-500">
        Snapshot of <?= e($brand) ?> content and inbound signals. Use the panel on the right to move between areas.
    </p>
</header>

<div class="mt-10 max-w-6xl">
    <div
        class="relative overflow-hidden rounded-2xl border border-white/[0.07] bg-[#0e0e11]/80 p-6 shadow-[0_20px_60px_rgba(0,0,0,0.35)] backdrop-blur-xl sm:p-8"
    >
        <div
            class="pointer-events-none absolute -right-24 -top-24 h-64 w-64 rounded-full bg-electric-500/[0.07] blur-3xl"
            aria-hidden="true"
        ></div>
        <div
            class="pointer-events-none absolute -bottom-20 -left-12 h-52 w-52 rounded-full bg-violet-500/[0.06] blur-3xl"
            aria-hidden="true"
        ></div>
        <div class="relative flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between sm:gap-6">
            <div class="min-w-0 flex-1">
                <div class="flex flex-wrap items-center gap-x-3 gap-y-2">
                    <h2 class="text-lg font-semibold tracking-tight text-white">Studio pulse</h2>
                    <span
                        class="inline-flex items-center gap-1.5 rounded-full bg-electric-400/10 px-2.5 py-0.5 text-[0.625rem] font-semibold uppercase tracking-[0.18em] text-electric-300/95"
                    >
                        <span class="h-1 w-1 animate-pulse rounded-full bg-electric-400 shadow-[0_0_8px_rgba(56,189,248,0.75)]" aria-hidden="true"></span>
                        Live
                    </span>
                </div>
                <p class="mt-2 max-w-lg text-sm leading-relaxed text-silver-500">
                    Live counts from the database — refresh to update.
                </p>
            </div>
        </div>
        <div
            class="relative mt-8 grid grid-cols-2 gap-3 sm:gap-4 xl:grid-cols-4"
            data-admin-stats-grid
        >
            <?php
            $statTiles = [
                ['label' => 'Projects', 'value' => (int) $stats['projects']],
                ['label' => 'Journal', 'value' => (int) $stats['journal']],
                ['label' => 'New contacts', 'value' => (int) $stats['contacts']],
                ['label' => 'New applications', 'value' => (int) $stats['applications']],
            ];
            foreach ($statTiles as $tile):
                ?>
            <div
                class="rounded-xl bg-white/[0.035] p-5 transition-colors duration-200 hover:bg-white/[0.05] sm:p-6"
            >
                <p class="text-[0.65rem] font-medium uppercase tracking-[0.22em] text-silver-500"><?= e($tile['label']) ?></p>
                <p class="mt-3 font-display text-3xl tabular-nums leading-none tracking-tight text-white sm:text-4xl"><?= $tile['value'] ?></p>
            </div>
                <?php
            endforeach;
            ?>
        </div>
    </div>
</div>
