<?php
// ============================================================
//  header.php — Shared Admin Layout (Sidebar + Topbar)
//  Place in: /admin/includes/header.php
//  Included at the top of every protected page AFTER auth_check
// ============================================================

// Current page for active nav state
$current_page = basename($_SERVER['PHP_SELF'], '.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title><?= $page_title ?? 'Admin Panel' ?> — Control Center</title>

  <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=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,400&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
  <link rel="stylesheet" href="assets/css/admin.css" />
  <?= $extra_head ?? '' ?>
  
  <style>
  /* ======================================================
     LIGHT MODE SIDEBAR (Overrides)
     ====================================================== */
  
  /* Light mode sidebar - always light regardless of system preference */
  .sidebar {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 4px 0 25px rgba(0, 0, 0, 0.03) !important;
  }
  
  /* Sidebar brand text */
  .sidebar-brand strong {
    color: #1e293b !important;
  }
  
  .sidebar-brand span {
    color: #64748b !important;
  }
  
  /* Profile section */
  .sidebar-profile {
    background: rgba(0, 0, 0, 0.02) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
  }
  
  .sidebar-profile .sp-info strong {
    color: #1e293b !important;
  }
  
  .sidebar-profile .sp-info span {
    color: #64748b !important;
  }
  
  .sp-dot {
    background: #10B981 !important;
    border: 2px solid #ffffff !important;
  }
  
  /* Navigation labels */
  .nav-section-label {
    color: #94a3b8 !important;
  }
  
  .nav-item {
    color: #475569 !important;
  }
  
  .nav-item:hover {
    background: rgba(26, 111, 232, 0.06) !important;
    color: #1A6FE8 !important;
  }
  
  .nav-item.active {
    background: rgba(26, 111, 232, 0.1) !important;
    color: #1A6FE8 !important;
  }
  
  .nav-item.active .nav-icon i {
    color: #1A6FE8 !important;
  }
  
  .nav-icon i {
    color: #64748b !important;
    font-size: 1.2rem;
  }
  
  .nav-item:hover .nav-icon i,
  .nav-item.active .nav-icon i {
    color: #1A6FE8 !important;
  }
  
  .nav-badge {
    background: rgba(232, 98, 26, 0.1) !important;
    color: #E8621A !important;
  }
  
  /* Active pill indicator */
  .nav-active-pill {
    background: #1A6FE8 !important;
    box-shadow: 0 2px 8px rgba(26, 111, 232, 0.3) !important;
  }
  
  /* Footer / logout button */
  .sidebar-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
  }
  
  .logout-btn {
    background: rgba(239, 68, 68, 0.05) !important;
    color: #EF4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.15) !important;
  }
  
  .logout-btn:hover {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #DC2626 !important;
  }
  
  .logout-btn i {
    color: #EF4444 !important;
  }
  
  /* Close button on mobile */
  .sidebar-close {
    color: #64748b !important;
    background: rgba(0, 0, 0, 0.03) !important;
  }
  
  .sidebar-close:hover {
    background: rgba(0, 0, 0, 0.08) !important;
    color: #1e293b !important;
  }
  
  /* Brand logo fix */
  .sidebar-brand img {
    filter: brightness(0.9) !important;
  }
  
  /* Scrollbar for light sidebar */
  .sidebar-nav::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.02) !important;
  }
  
  .sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1) !important;
    border-radius: 8px;
  }
  
  .sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.15) !important;
  }
  
  /* Topbar adjustments for light mode */
  .topbar {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  }
  
  .topbar-breadcrumb {
    color: #1e293b !important;
  }
  
  .bc-root i {
    color: #64748b !important;
  }
  
  .bc-current {
    color: #1e293b !important;
    font-weight: 600;
  }
  
  .topbar-search {
    background: rgba(0, 0, 0, 0.03) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
  }
  
  .topbar-search i {
    color: #94a3b8 !important;
  }
  
  .topbar-search input {
    color: #1e293b !important;
  }
  
  .topbar-search input::placeholder {
    color: #94a3b8 !important;
  }
  
  .topbar-btn {
    background: rgba(0, 0, 0, 0.03) !important;
    color: #475569 !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
  }
  
  .topbar-btn:hover {
    background: rgba(0, 0, 0, 0.06) !important;
    color: #1e293b !important;
  }
  
  .topbar-btn-dot {
    background: #1A6FE8 !important;
    border: 2px solid #ffffff !important;
  }
  
  .topbar-admin-info strong {
    color: #1e293b !important;
  }
  
  .topbar-admin-info span {
    color: #64748b !important;
  }
  
  .topbar-chevron {
    color: #94a3b8 !important;
  }
  
  .admin-dropdown {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
  }
  
  .admin-dropdown a {
    color: #1e293b !important;
  }
  
  .admin-dropdown a:hover {
    background: rgba(26, 111, 232, 0.05) !important;
    color: #1A6FE8 !important;
  }
  
  .admin-dropdown a i {
    color: #64748b !important;
  }
  
  .admin-dropdown a:hover i {
    color: #1A6FE8 !important;
  }
  
  .admin-dropdown .dd-danger {
    color: #EF4444 !important;
  }
  
  .admin-dropdown .dd-danger i {
    color: #EF4444 !important;
  }
  
  .admin-dropdown .dd-danger:hover {
    background: rgba(239, 68, 68, 0.05) !important;
    color: #DC2626 !important;
  }
  
  .dd-divider {
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  }
  
  .menu-toggle {
    background: rgba(0, 0, 0, 0.03) !important;
    color: #475569 !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
  }
  
  .menu-toggle:hover {
    background: rgba(0, 0, 0, 0.06) !important;
    color: #1e293b !important;
  }
  
  /* Background scene adjustments for light mode */
  .bg-orb.orb-a {
    background: rgba(26, 111, 232, 0.15) !important;
    filter: blur(70px) !important;
  }
  
  .bg-orb.orb-b {
    background: rgba(232, 98, 26, 0.12) !important;
    filter: blur(80px) !important;
  }
  
  .bg-grid {
    background-image: 
      linear-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px) !important;
  }
  
  /* Mobile overlay */
  .sidebar-overlay {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
  }
  
  /* Responsive fixes for light mode */
  @media (max-width: 768px) {
    .sidebar {
      background: rgba(255, 255, 255, 0.98) !important;
    }
  }
  
  /* Dark mode specific overrides for content area only */
  @media (prefers-color-scheme: dark) {
    /* Keep sidebar light, but ensure content area still has dark mode */
    .page-content {
      background: transparent;
    }
    
    /* Ensure cards and other elements in dark mode still work */
    .glass-card {
      background: rgba(21, 31, 49, 0.7) !important;
    }
  }
  
  /* Sidebar brand image fix */
  .sidebar-brand img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 10px;
    margin-right: 12px;
  }
  </style>
</head>
<body>

<!-- ═══════════════════════════════════════════════════════════
     BACKGROUND ATMOSPHERE
════════════════════════════════════════════════════════════ -->
<div class="bg-scene" aria-hidden="true">
  <div class="bg-orb orb-a"></div>
  <div class="bg-orb orb-b"></div>
  <div class="bg-grid"></div>
</div>

<!-- ═══════════════════════════════════════════════════════════
     SIDEBAR (Light Mode)
════════════════════════════════════════════════════════════ -->
<aside class="sidebar" id="sidebar">

  <!-- Brand -->
  <div class="sidebar-brand">
    
    <div class="brand-text">
      <strong>AdminPanel</strong>
      <span>Control Center</span>
    </div>
    <button class="sidebar-close" id="sidebarClose" aria-label="Close sidebar">
      <i class="fas fa-xmark"></i>
    </button>
  </div>

  <!-- Admin mini-profile in sidebar -->
  <div class="sidebar-profile">
    <div class="sp-avatar">
      <img src="assets/images/avatars/<?= htmlspecialchars($current_admin['avatar'] ?? 'default.png') ?>"
           onerror="this.src='assets/images/logo.png'"
           alt="<?= htmlspecialchars($current_admin['name'] ?? 'Admin') ?>" />
      <span class="sp-dot"></span>
    </div>
    <div class="sp-info">
      <strong><?= htmlspecialchars($current_admin['name'] ?? 'Admin') ?></strong>
      <span><?= ($current_admin['role'] ?? 'admin') === 'super_admin' ? 'Super Admin' : 'Admin' ?></span>
    </div>
  </div>

  <!-- Navigation -->
  <nav class="sidebar-nav" aria-label="Main navigation">

    <div class="nav-section-label">Main</div>

    <a href="dashboard.php"
       class="nav-item <?= $current_page === 'dashboard' ? 'active' : '' ?>">
      <span class="nav-icon"><i class="fas fa-gauge-high"></i></span>
      <span class="nav-label">Dashboard</span>
      <?php if ($current_page === 'dashboard'): ?>
        <span class="nav-active-pill"></span>
      <?php endif; ?>
    </a>

    <div class="nav-section-label">User Management</div>

    <a href="users.php"
       class="nav-item <?= in_array($current_page, ['users','user_view','user_edit']) ? 'active' : '' ?>">
      <span class="nav-icon"><i class="fas fa-users"></i></span>
      <span class="nav-label">All Users</span>
      <span class="nav-badge" id="navUserCount">—</span>
    </a>

    <a href="users.php?status=pending"
       class="nav-item <?= ($current_page === 'users' && ($_GET['status'] ?? '') === 'pending') ? 'active' : '' ?>">
      <span class="nav-icon"><i class="fas fa-user-clock"></i></span>
      <span class="nav-label">Pending</span>
    </a>

    <a href="users.php?status=banned"
       class="nav-item <?= ($current_page === 'users' && ($_GET['status'] ?? '') === 'banned') ? 'active' : '' ?>">
      <span class="nav-icon"><i class="fas fa-user-slash"></i></span>
      <span class="nav-label">Banned</span>
    </a>

    <div class="nav-section-label">Admin</div>

    <a href="profile.php"
       class="nav-item <?= $current_page === 'profile' ? 'active' : '' ?>">
      <span class="nav-icon"><i class="fas fa-circle-user"></i></span>
      <span class="nav-label">My Profile</span>
    </a>

    <?php if (($current_admin['role'] ?? '') === 'super_admin'): ?>
    <a href="admins.php"
       class="nav-item <?= $current_page === 'admins' ? 'active' : '' ?>">
      <span class="nav-icon"><i class="fas fa-user-shield"></i></span>
      <span class="nav-label">Manage Admins</span>
    </a>
    <?php endif; ?>

    <a href="settings.php"
       class="nav-item <?= $current_page === 'settings' ? 'active' : '' ?>">
      <span class="nav-icon"><i class="fas fa-sliders"></i></span>
      <span class="nav-label">Settings</span>
    </a>

    <a href="activity_log.php"
       class="nav-item <?= $current_page === 'activity_log' ? 'active' : '' ?>">
      <span class="nav-icon"><i class="fas fa-clock-rotate-left"></i></span>
      <span class="nav-label">Activity Log</span>
    </a>

  </nav>

  <!-- Sidebar Footer -->
  <div class="sidebar-footer">
    <a href="logout.php" class="logout-btn" onclick="return confirm('Sign out of admin panel?')">
      <i class="fas fa-right-from-bracket"></i>
      <span>Sign Out</span>
    </a>
  </div>

</aside>

<!-- Sidebar overlay (mobile) -->
<div class="sidebar-overlay" id="sidebarOverlay"></div>

<!-- ═══════════════════════════════════════════════════════════
     MAIN WRAPPER
════════════════════════════════════════════════════════════ -->
<div class="main-wrapper">

  <!-- ── Topbar ──────────────────────────────────────────────── -->
  <header class="topbar">

    <div class="topbar-left">
      <button class="menu-toggle" id="menuToggle" aria-label="Toggle sidebar">
        <i class="fas fa-bars"></i>
      </button>
      <div class="topbar-breadcrumb">
        <span class="bc-root"><i class="fas fa-house"></i></span>
        <i class="fas fa-chevron-right bc-sep"></i>
        <span class="bc-current"><?= $page_title ?? 'Dashboard' ?></span>
      </div>
    </div>

    <div class="topbar-right">

      <!-- Search -->
      <div class="topbar-search">
        <i class="fas fa-magnifying-glass"></i>
        <input type="text" placeholder="Quick search users…" id="globalSearch" autocomplete="off" />
      </div>

      <!-- Notifications bell -->
      <button class="topbar-btn" id="notifBtn" aria-label="Notifications">
        <i class="fas fa-bell"></i>
        <span class="topbar-btn-dot"></span>
      </button>

      <!-- Admin avatar dropdown -->
      <div class="topbar-admin" id="adminDropdownTrigger">
        <img src="assets/images/avatars/<?= htmlspecialchars($current_admin['avatar'] ?? 'default.png') ?>"
             onerror="this.src='assets/images/logo.png'"
             alt="<?= htmlspecialchars($current_admin['name'] ?? 'Admin') ?>"
             class="topbar-avatar" />
        <div class="topbar-admin-info">
          <strong><?= htmlspecialchars($current_admin['name'] ?? 'Admin') ?></strong>
          <span><?= ($current_admin['role'] ?? 'admin') === 'super_admin' ? 'Super Admin' : 'Admin' ?></span>
        </div>
        <i class="fas fa-chevron-down topbar-chevron"></i>

        <!-- Dropdown -->
        <div class="admin-dropdown" id="adminDropdown">
          <a href="profile.php"><i class="fas fa-circle-user"></i> My Profile</a>
          <a href="settings.php"><i class="fas fa-sliders"></i> Settings</a>
          <div class="dd-divider"></div>
          <a href="logout.php" class="dd-danger" onclick="return confirm('Sign out?')">
            <i class="fas fa-right-from-bracket"></i> Sign Out
          </a>
        </div>
      </div>

    </div>
  </header>

  <!-- ── Page Content Starts Here ───────────────────────────── -->
  <main class="page-content">