<div class="space-y-8">

    <!-- PAGE HEADER -->
    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">

        <div>
            <div
                class="inline-flex items-center gap-2 bg-white/5 border border-white/10 rounded-full px-4 py-2 text-sm text-cyan-100 mb-4">
                <span class="w-2 h-2 rounded-full bg-[#06B6D4]"></span>
                Driftly Control Center
            </div>

            <h1 class="text-4xl font-bold text-white">
                Dashboard overview
            </h1>

            <p class="text-slate-400 mt-2">
                Monitor rides, users, revenue and platform activity in real time.
            </p>
        </div>

        <div class="flex items-center gap-3">
            <button
                class="bg-white/5 border border-white/10 text-slate-300 px-5 py-3 rounded-2xl hover:bg-white/10 transition">
                Export report
            </button>

            <button
                class="bg-gradient-to-r from-[#3B82F6] to-[#06B6D4] text-white px-5 py-3 rounded-2xl font-semibold shadow-lg hover:scale-[1.02] transition">
                Create ride
            </button>
        </div>

    </div>

    <!-- STATS -->
    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">

        <div class="relative overflow-hidden bg-white/[0.04] border border-white/10 rounded-[2rem] p-6 shadow-2xl">
            <div class="absolute -right-10 -top-10 w-32 h-32 bg-[#06B6D4]/20 rounded-full blur-3xl"></div>

            <div class="relative flex items-center justify-between mb-8">
                <div class="w-12 h-12 rounded-2xl bg-[#06B6D4]/10 flex items-center justify-center">
                    <i data-lucide="users" class="w-6 h-6 text-[#06B6D4]"></i>
                </div>

                <span class="text-emerald-400 text-sm font-semibold">
                    <?= ($stats['users_growth'] ?? 0) >= 0 ? '+' : '' ?>
                    <?= htmlspecialchars($stats['users_growth'] ?? 0) ?>%
                </span>
            </div>

            <div class="relative">
                <div class="text-slate-400 text-sm mb-2">Total users</div>
                <div class="text-4xl font-bold text-white">
                    <?= htmlspecialchars($stats['users'] ?? 0) ?>
                </div>
            </div>
        </div>

        <div class="relative overflow-hidden bg-white/[0.04] border border-white/10 rounded-[2rem] p-6 shadow-2xl">
            <div class="absolute -right-10 -top-10 w-32 h-32 bg-[#3B82F6]/20 rounded-full blur-3xl"></div>

            <div class="relative flex items-center justify-between mb-8">
                <div class="w-12 h-12 rounded-2xl bg-[#3B82F6]/10 flex items-center justify-center">
                    <i data-lucide="car-front" class="w-6 h-6 text-[#3B82F6]"></i>
                </div>

                <span class="text-emerald-400 text-sm font-semibold">
                    <?= ($stats['rides_growth'] ?? 0) >= 0 ? '+' : '' ?>
                    <?= htmlspecialchars($stats['rides_growth'] ?? 0) ?>%
                </span>
            </div>

            <div class="relative">
                <div class="text-slate-400 text-sm mb-2">Active rides</div>
                <div class="text-4xl font-bold text-white">
                    <?= htmlspecialchars($stats['rides'] ?? 0) ?>
                </div>
            </div>
        </div>

        <div class="relative overflow-hidden bg-white/[0.04] border border-white/10 rounded-[2rem] p-6 shadow-2xl">
            <div class="absolute -right-10 -top-10 w-32 h-32 bg-emerald-400/20 rounded-full blur-3xl"></div>

            <div class="relative flex items-center justify-between mb-8">
                <div class="w-12 h-12 rounded-2xl bg-emerald-400/10 flex items-center justify-center">
                    <i data-lucide="wallet" class="w-6 h-6 text-emerald-400"></i>
                </div>

                <span class="text-emerald-400 text-sm font-semibold">
                    +18.7%
                </span>
            </div>

            <div class="relative">
                <div class="text-slate-400 text-sm mb-2">Revenue</div>
                <div class="text-4xl font-bold text-white">
                    €12.8k
                </div>
            </div>
        </div>

        <div class="relative overflow-hidden bg-white/[0.04] border border-white/10 rounded-[2rem] p-6 shadow-2xl">
            <div class="absolute -right-10 -top-10 w-32 h-32 bg-purple-400/20 rounded-full blur-3xl"></div>

            <div class="relative flex items-center justify-between mb-8">
                <div class="w-12 h-12 rounded-2xl bg-purple-400/10 flex items-center justify-center">
                    <i data-lucide="badge-check" class="w-6 h-6 text-purple-400"></i>
                </div>

                <span class="text-emerald-400 text-sm font-semibold">
                    <?= ($stats['drivers_growth'] ?? 0) >= 0 ? '+' : '' ?>
                    <?= htmlspecialchars($stats['drivers_growth'] ?? 0) ?>%
                </span>
            </div>

            <div class="relative">
                <div class="text-slate-400 text-sm mb-2">Drivers</div>
                <div class="text-4xl font-bold text-white">
                    <?= htmlspecialchars($stats['drivers'] ?? 0) ?>
                </div>
            </div>
        </div>

    </div>

    <!-- MAIN GRID -->
    <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">

        <!-- CHART CARD -->
        <div class="xl:col-span-2 bg-white/[0.04] border border-white/10 rounded-[2rem] p-6 shadow-2xl">

            <div class="flex items-center justify-between mb-8">
                <div>
                    <h2 class="text-xl font-bold text-white">
                        Ride activity
                    </h2>

                    <p class="text-slate-400 text-sm mt-1">
                        Weekly completed rides and bookings.
                    </p>
                </div>

                <div class="bg-white/5 border border-white/10 rounded-2xl px-4 py-2 text-sm text-slate-300">
                    Last 7 days
                </div>
            </div>

            <!-- FAKE CHART -->
            <?php
            $rideActivity = [
                ['day' => 'Mon', 'rides' => 42],
                ['day' => 'Tue', 'rides' => 68],
                ['day' => 'Wed', 'rides' => 55],
                ['day' => 'Thu', 'rides' => 94],
                ['day' => 'Fri', 'rides' => 76],
                ['day' => 'Sat', 'rides' => 120],
                ['day' => 'Sun', 'rides' => 88],
            ];

            $max = max(array_column($rideActivity, 'rides'));

            $points = [];

            foreach ($rideActivity as $index => $item) {

                $x = $index * 110 + 40;

                $y = 240 - (($item['rides'] / $max) * 180);

                $points[] = "{$x},{$y}";
            }
            ?>

            <div class="relative h-80">

                <svg viewBox="0 0 760 280" class="w-full h-full overflow-visible">

                    <!-- GRID -->
                    <?php for ($i = 0; $i < 5; $i++): ?>

                        <line x1="0" y1="<?= 40 + ($i * 50) ?>" x2="760" y2="<?= 40 + ($i * 50) ?>"
                            stroke="rgba(255,255,255,0.05)" stroke-width="1" />

                    <?php endfor; ?>

                    <!-- GLOW -->
                    <polyline fill="none" stroke="rgba(6,182,212,0.25)" stroke-width="12"
                        points="<?= implode(' ', $points) ?>" stroke-linecap="round" stroke-linejoin="round" />

                    <!-- LINE -->
                    <polyline fill="none" stroke="url(#lineGradient)" stroke-width="4"
                        points="<?= implode(' ', $points) ?>" stroke-linecap="round" stroke-linejoin="round" />

                    <!-- GRADIENT -->
                    <defs>

                        <linearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="0%">
                            <stop offset="0%" stop-color="#3B82F6" />
                            <stop offset="100%" stop-color="#06B6D4" />
                        </linearGradient>

                    </defs>

                    <!-- DOTS -->
                    <?php foreach ($rideActivity as $index => $item): ?>

                        <?php
                        $x = $index * 110 + 40;
                        $y = 240 - (($item['rides'] / $max) * 180);
                        ?>

                        <circle cx="<?= $x ?>" cy="<?= $y ?>" r="6" fill="#06B6D4"
                            class="hover:r-8 transition-all duration-300" />

                        <circle cx="<?= $x ?>" cy="<?= $y ?>" r="14" fill="rgba(6,182,212,0.15)" />

                        <text x="<?= $x ?>" y="265" text-anchor="middle" fill="#64748B" font-size="12">
                            <?= $item['day'] ?>
                        </text>

                    <?php endforeach; ?>

                </svg>

            </div>

            <!-- <div class="flex items-center justify-center gap-8 mt-8">

                <div class="flex items-center gap-3">
                    <div class="w-4 h-4 rounded-full bg-[#3B82F6]"></div>
                    <span class="text-sm text-slate-400">Completed rides</span>
                </div>

                <div class="flex items-center gap-3">
                    <div class="w-4 h-4 rounded-full bg-[#06B6D4]"></div>
                    <span class="text-sm text-slate-400">Bookings</span>
                </div>

            </div> -->

        </div>

        <!-- LIVE STATUS -->
        <div class="bg-white/[0.04] border border-white/10 rounded-[2rem] p-6 shadow-2xl">

            <div class="flex items-center justify-between mb-8">
                <div>
                    <h2 class="text-xl font-bold text-white">
                        Platform health
                    </h2>

                    <p class="text-slate-400 text-sm mt-1">
                        Current system status.
                    </p>
                </div>

                <span class="w-3 h-3 rounded-full bg-emerald-400 shadow-[0_0_20px_rgba(52,211,153,0.8)]"></span>
            </div>

            <div class="space-y-5">

                <div>
                    <div class="flex justify-between text-sm mb-2">
                        <span class="text-slate-400">Server load</span>
                        <span class="text-white">32%</span>
                    </div>
                    <div class="h-2 bg-white/5 rounded-full overflow-hidden">
                        <div class="h-full w-[32%] bg-gradient-to-r from-[#3B82F6] to-[#06B6D4] rounded-full"></div>
                    </div>
                </div>

                <div>
                    <div class="flex justify-between text-sm mb-2">
                        <span class="text-slate-400">Payment success</span>
                        <span class="text-white">98%</span>
                    </div>
                    <div class="h-2 bg-white/5 rounded-full overflow-hidden">
                        <div class="h-full w-[98%] bg-emerald-400 rounded-full"></div>
                    </div>
                </div>

                <div>
                    <?php
                    $verificationPercent = min(
                        ($stats['verification_queue'] ?? 0) * 10,
                        100
                    );
                    ?>

                    <div class="text-sm text-slate-300 mb-3 flex items-center justify-between">
                        <span>Verification queue</span>

                        <span>
                            <?= htmlspecialchars($stats['verification_queue'] ?? 0) ?>
                        </span>
                    </div>

                    <div class="h-2 bg-white/5 rounded-full overflow-hidden">
                        <div class="h-full bg-purple-400 rounded-full transition-all duration-700"
                            style="width: <?= $verificationPercent ?>%">
                        </div>
                    </div>
                </div>

            </div>

            <div class="mt-8 bg-emerald-400/10 border border-emerald-400/20 rounded-3xl p-5">
                <div class="flex items-center gap-3">
                    <i data-lucide="check-circle" class="w-6 h-6 text-emerald-400"></i>
                    <div>
                        <div class="text-white font-bold">All systems operational</div>
                        <div class="text-slate-400 text-sm">Last checked 2 minutes ago</div>
                    </div>
                </div>
            </div>

        </div>

    </div>

    <!-- RECENT ACTIVITY -->
    <div class="grid grid-cols-1 xl:grid-cols-2 gap-6">

        <div class="bg-white/[0.04] border border-white/10 rounded-[2rem] p-6 shadow-2xl">

            <div class="flex items-center justify-between mb-6">
                <h2 class="text-xl font-bold text-white">
                    Recent bookings
                </h2>

                <a href="/driftly/public/admin/bookings" data-link
                    class="text-sm text-[#06B6D4] hover:text-white transition">
                    View all
                </a>
            </div>

            <div class="space-y-4">

                <?php
                $bookings = [
                    ['Emma Wilson', 'New York → Boston', '+€28'],
                    ['Lucas Martin', 'Paris → Lyon', '+€42'],
                    ['James Carter', 'LA → San Diego', '+€35'],
                ];

                foreach ($bookings as $booking):
                    ?>
                    <div class="flex items-center justify-between bg-white/[0.03] border border-white/5 rounded-2xl p-4">
                        <div>
                            <div class="font-semibold text-white">
                                <?= $booking[0] ?>
                            </div>
                            <div class="text-sm text-slate-400">
                                <?= $booking[1] ?>
                            </div>
                        </div>

                        <div class="text-emerald-400 font-bold">
                            <?= $booking[2] ?>
                        </div>
                    </div>
                <?php endforeach; ?>

            </div>

        </div>

        <div class="bg-white/[0.04] border border-white/10 rounded-[2rem] p-6 shadow-2xl">

            <div class="flex items-center justify-between mb-6">
                <h2 class="text-xl font-bold text-white">
                    Driver verification
                </h2>

                <a href="/driftly/public/admin/drivers" data-link
                    class="text-sm text-[#06B6D4] hover:text-white transition">
                    Review
                </a>
            </div>

            <div class="space-y-4">

                <?php foreach ($pendingDrivers as $driver): ?>
                    <div class="flex items-center gap-4 bg-white/[0.03] border border-white/5 rounded-2xl p-4">

                        <div
                            class="w-11 h-11 rounded-2xl bg-gradient-to-r from-[#3B82F6] to-[#06B6D4] flex items-center justify-center font-bold text-white overflow-hidden">

                            <?php if (!empty($driver['avatar'])): ?>
                                <img src="<?= htmlspecialchars($driver['avatar']) ?>" class="w-full h-full object-cover"
                                    alt="<?= htmlspecialchars($driver['name']) ?>">
                            <?php else: ?>
                                <?= strtoupper(substr($driver['name'], 0, 1)) ?>
                            <?php endif; ?>

                        </div>

                        <div class="flex-1">
                            <div class="font-semibold text-white">
                                <?= htmlspecialchars($driver['name']) ?>
                            </div>

                            <div class="text-sm text-slate-400">
                                <?= htmlspecialchars($driver['verification_note'] ?: 'Pending verification') ?>
                            </div>
                        </div>

                        <span class="text-xs bg-amber-400/10 text-amber-300 px-3 py-1 rounded-full">
                            <?= htmlspecialchars(ucfirst($driver['verification_status'])) ?>
                        </span>

                    </div>
                <?php endforeach; ?>

            </div>

        </div>

    </div>
</div>