<?php
if (session_status() === PHP_SESSION_NONE) session_start();
require_once __DIR__ . '/auth.php';

// Determine base URL
$base = '';

// Cart count
$cartCount = 0;
if (isLoggedIn() && isset($pdo)) {
    $cartCount = getCartCount($pdo);
}

$flash = getFlash();
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="FITZONE Gym — Booking kelas olahraga terbaik. Yoga, Zumba, Muay Thai, dan lainnya.">
    <meta name="csrf-token" content="<?= csrfToken() ?>">
    <meta name="base-url" content="<?= BASE_URL ?>">
    <title>FITZONE GYM — Booking System</title>

    <!-- Google Fonts: Inter -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap" rel="stylesheet">

    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        volt: '#D4F900',
                        dark: '#0D0D0D',
                        surface: '#1A1A1A',
                        border: '#2a2a2a',
                        muted: '#888888',
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    }
                }
            }
        }
    </script>

    <!-- Custom CSS -->
    <link rel="stylesheet" href="<?= BASE_URL ?>/assets/css/style.css?v=<?= time() ?>">
</head>
<body class="bg-dark text-white font-inter min-h-screen">

<!-- ======== NAVBAR ======== -->
<nav class="fixed top-0 left-0 right-0 z-50 bg-surface/80 backdrop-blur-xl border-b border-border" id="main-navbar">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between h-16">
            <!-- Logo -->
            <a href="<?= BASE_URL ?>/index.php" class="flex items-center gap-1 text-2xl font-black tracking-tight select-none">
                <span class="text-white">FIT</span><span class="text-volt">ZONE</span>
            </a>

            <!-- Desktop Nav -->
            <div class="hidden md:flex items-center gap-6">
                <?php if (isLoggedIn() && $_SESSION['role'] === 'member'): ?>
                    <a href="<?= BASE_URL ?>/member/katalog.php" class="nav-link">Kelas</a>
                    <a href="<?= BASE_URL ?>/member/keranjang.php" class="nav-link">Keranjang
                        <?php if ($cartCount > 0): ?>
                            <span class="cart-count ml-1 inline-flex items-center justify-center w-5 h-5 text-xs font-bold bg-volt text-dark rounded-full"><?= $cartCount ?></span>
                        <?php endif; ?>
                    </a>
                    <a href="<?= BASE_URL ?>/member/riwayat.php" class="nav-link">Riwayat</a>
                    <a href="<?= BASE_URL ?>/member/rating.php" class="nav-link">Rating</a>
                <?php elseif (isLoggedIn() && $_SESSION['role'] === 'admin'): ?>
                    <a href="<?= BASE_URL ?>/admin/dashboard.php" class="nav-link">Dashboard</a>
                    <a href="<?= BASE_URL ?>/admin/kelas/index.php" class="nav-link">Kelas</a>
                    <a href="<?= BASE_URL ?>/admin/validasi.php" class="nav-link">Validasi</a>
                    <a href="<?= BASE_URL ?>/admin/absensi.php" class="nav-link">Absensi</a>
                <?php endif; ?>
            </div>

            <!-- Right side -->
            <div class="hidden md:flex items-center gap-3">
                <?php if (isLoggedIn()): ?>
                    <span class="text-muted text-sm">Halo, <span class="text-white font-bold"><?= htmlspecialchars($_SESSION['nama']) ?></span></span>
                    <a href="<?= BASE_URL ?>/logout.php" class="px-4 py-2 bg-volt/10 text-volt border border-volt/30 rounded-lg text-sm font-bold hover:bg-volt hover:text-dark transition-all duration-200">Logout</a>
                <?php else: ?>
                    <a href="<?= BASE_URL ?>/login_admin.php" class="px-4 py-2 text-sm text-muted hover:text-white transition-colors">Login Admin</a>
                    <a href="<?= BASE_URL ?>/login_member.php" class="px-4 py-2 text-sm text-muted hover:text-white transition-colors">Login Member</a>
                    <a href="<?= BASE_URL ?>/register.php" class="px-4 py-2 bg-volt text-dark rounded-lg text-sm font-black hover:shadow-lg hover:shadow-volt/25 transition-all duration-200">Daftar</a>
                <?php endif; ?>
            </div>

            <!-- Mobile burger -->
            <button class="md:hidden flex flex-col gap-1.5 p-2" id="burger-btn" onclick="toggleMobileMenu()">
                <span class="w-6 h-0.5 bg-white transition-all duration-300" id="burger-1"></span>
                <span class="w-6 h-0.5 bg-white transition-all duration-300" id="burger-2"></span>
                <span class="w-6 h-0.5 bg-white transition-all duration-300" id="burger-3"></span>
            </button>
        </div>
    </div>

    <!-- Mobile menu -->
    <div class="md:hidden hidden bg-surface border-t border-border" id="mobile-menu">
        <div class="px-4 py-4 space-y-2">
            <?php if (isLoggedIn() && $_SESSION['role'] === 'member'): ?>
                <a href="<?= BASE_URL ?>/member/katalog.php" class="block py-2 text-muted hover:text-volt transition-colors">Kelas</a>
                <a href="<?= BASE_URL ?>/member/keranjang.php" class="block py-2 text-muted hover:text-volt transition-colors">Keranjang <span class="cart-count text-xs bg-volt text-dark px-2 py-0.5 rounded-full"><?= $cartCount ?></span></a>
                <a href="<?= BASE_URL ?>/member/riwayat.php" class="block py-2 text-muted hover:text-volt transition-colors">Riwayat</a>
                <a href="<?= BASE_URL ?>/member/rating.php" class="block py-2 text-muted hover:text-volt transition-colors">Rating</a>
            <?php elseif (isLoggedIn() && $_SESSION['role'] === 'admin'): ?>
                <a href="<?= BASE_URL ?>/admin/dashboard.php" class="block py-2 text-muted hover:text-volt transition-colors">Dashboard</a>
                <a href="<?= BASE_URL ?>/admin/kelas/index.php" class="block py-2 text-muted hover:text-volt transition-colors">Kelas</a>
                <a href="<?= BASE_URL ?>/admin/validasi.php" class="block py-2 text-muted hover:text-volt transition-colors">Validasi</a>
                <a href="<?= BASE_URL ?>/admin/absensi.php" class="block py-2 text-muted hover:text-volt transition-colors">Absensi</a>
            <?php endif; ?>
            <hr class="border-border">
            <?php if (isLoggedIn()): ?>
                <div class="text-muted text-sm py-1">Halo, <span class="text-white font-bold"><?= htmlspecialchars($_SESSION['nama']) ?></span></div>
                <a href="<?= BASE_URL ?>/logout.php" class="block py-2 text-volt font-bold">Logout</a>
            <?php else: ?>
                <a href="<?= BASE_URL ?>/login_admin.php" class="block py-2 text-muted hover:text-white transition-colors">Login Admin</a>
                <a href="<?= BASE_URL ?>/login_member.php" class="block py-2 text-muted hover:text-white transition-colors">Login Member</a>
                <a href="<?= BASE_URL ?>/register.php" class="block py-2 text-volt font-bold">Daftar</a>
            <?php endif; ?>
        </div>
    </div>
</nav>

<!-- Spacer for fixed navbar -->
<div class="h-16"></div>

<!-- Flash message -->
<?php if ($flash): ?>
<div class="max-w-7xl mx-auto px-4 mt-4">
    <div class="flash-toast px-4 py-3 rounded-lg border <?= $flash['type'] === 'success' ? 'bg-volt/10 border-volt/30 text-volt' : ($flash['type'] === 'error' ? 'bg-red-500/10 border-red-500/30 text-red-400' : 'bg-blue-500/10 border-blue-500/30 text-blue-400') ?> text-sm font-medium animate-fadeUp">
        <?= htmlspecialchars($flash['message']) ?>
    </div>
</div>
<?php endif; ?>

<main>
