<?php
/**
 * SmartPanel — Unified Header Component
 * Include at the top of every user and admin page.
 *
 * Expects these to be set before including:
 *   $page_title   (string)  – page title shown in <title> and topbar
 *   $current_user (array)   – result of getUser($_SESSION['user_id'])
 *   $is_admin     (bool)    – isAdmin()
 *   $active_nav   (string)  – filename e.g. 'dashboard.php' for active highlight
 */

if (!isset($page_title))   $page_title   = SITE_NAME;
if (!isset($current_user)) $current_user = getUser($_SESSION['user_id']);
if (!isset($is_admin))     $is_admin     = isAdmin();
if (!isset($active_nav))   $active_nav   = basename($_SERVER['PHP_SELF']);

$B = SITE_URL;
$username = htmlspecialchars($current_user['username'] ?? 'User');
$balance  = number_format((float)($current_user['balance'] ?? 0), 2);
$avatar_letter = strtoupper(substr($username, 0, 1));

// ── Nav icon helper ──────────────────────────────────────────────────────
function sp_icon(string $name): string {
    $icons = [
        'dashboard'   => '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>',
        'boost'       => '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg>',
        'orders'      => '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/></svg>',
        'mass-order'  => '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/></svg>',
        'funds'       => '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/></svg>',
        'txn'         => '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/></svg>',
        'referral'    => '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/></svg>',
        'reseller'    => '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9H4.5a2.5 2.5 0 010-5H6"/><path d="M18 9h1.5a2.5 2.5 0 000-5H18"/><path d="M4 22h16"/><path d="M18 2H6v7a6 6 0 0012 0V2Z"/></svg>',
        'profile'     => '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>',
        'vsim'        => '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.81 19.79 19.79 0 011 1.18h3a2 2 0 011.72 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L4.09 8.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/><path d="M15 2h5v5"/><path d="M15 7l5-5"/></svg>',
        'data'        => '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1.05 12a11 11 0 0121.9 0"/><path d="M5 12a7 7 0 0114 0"/><path d="M8.91 12a3.09 3.09 0 016.18 0"/><line x1="12" y1="12" x2="12.01" y2="12"/></svg>',
        'airtime'     => '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.81 19.79 19.79 0 011 1.18h3a2 2 0 011.72 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L4.09 8.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>',
        'electricity' => '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>',
        'cable'       => '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="15" rx="2"/><polyline points="17 2 12 7 7 2"/></svg>',
        'logout'      => '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>',
        'bell'        => '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 01-3.46 0"/></svg>',
        // admin icons
        'users'       => '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg>',
        'services'    => '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>',
        'analytics'   => '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>',
        'settings'    => '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>',
        'coupons'     => '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/></svg>',
        'margins'     => '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/></svg>',
        'top-users'   => '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg>',
    ];
    return $icons[$name] ?? '';
}

function sp_nav_item(string $label, string $href, string $icon, string $active_nav, string $match): string {
    $cls = (basename($match) === $active_nav || $match === $active_nav) ? ' active' : '';
    return '<a href="' . $href . '" class="sp-nav-item' . $cls . '">' . sp_icon($icon) . ' <span>' . $label . '</span></a>';
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  <title><?php echo htmlspecialchars($page_title); ?> – <?php echo SITE_NAME; ?></title>
  <meta name="robots" content="noindex, nofollow">
  <link rel="icon" type="image/png" href="<?php echo $B; ?>/assets/images/favicon.png">
  <link rel="apple-touch-icon"       href="<?php echo $B; ?>/assets/images/favicon.png">
  <!-- SmartPanel unified CSS -->
  <link rel="stylesheet" href="<?php echo $B; ?>/assets/css/smartpanel.css">
</head>
<body>

<!-- ── Preloader ────────────────────────────────────────────────────── -->
<div id="sp-preloader">
  <div class="sp-pre-logo">
    <img src="<?php echo $B; ?>/assets/images/logo.png" alt="<?php echo SITE_NAME; ?>">
  </div>
  <div class="sp-pre-bar"><div class="sp-pre-fill"></div></div>
</div>

<div class="sp-app">

  <!-- ══ SIDEBAR ══════════════════════════════════════════════════════ -->
  <aside class="sp-sidebar" id="spSidebar">
    <div class="sp-sidebar-logo">
      <img src="<?php echo $B; ?>/assets/images/logo.png" alt="<?php echo SITE_NAME; ?>">
      <button class="sp-sidebar-close" onclick="spToggleSidebar()" aria-label="Close menu">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
      </button>
    </div>

    <?php if ($is_admin): ?>
    <!-- ── Admin nav ── -->
    <div class="sp-nav-section">
      <div class="sp-nav-label">Admin Panel</div>
      <?php
        $anav = [
          ['Dashboard',        $B.'/admin/dashboard.php',             'dashboard',  'dashboard.php'],
          ['Users',            $B.'/admin/users.php',                 'users',      'users.php'],
          ['Orders',           $B.'/admin/orders.php',                'orders',     'orders.php'],
          ['Services',         $B.'/admin/services.php',              'services',   'services.php'],
          ['Transactions',     $B.'/admin/transactions.php',          'txn',        'transactions.php'],
          ['Sales Analysis',   $B.'/admin/analytics.php',             'analytics',  'analytics.php'],
          ['VTU Margins',      $B.'/admin/vtu-margins.php',           'margins',    'vtu-margins.php'],
          ['Data Plans',       $B.'/admin/data-plans.php',            'data',       'data-plans.php'],
          ['Virtual Numbers',  $B.'/admin/virtual-numbers-admin.php', 'vsim',       'virtual-numbers-admin.php'],
          ['Coupons',          $B.'/admin/coupons.php',               'coupons',    'coupons.php'],
          ['Referrals',        $B.'/admin/referrals.php',             'referral',   'referrals.php'],
          ['Notifications',    $B.'/admin/notifications.php',         'bell',       'notifications.php'],
          ['Top Users',        $B.'/admin/top-users.php',             'top-users',  'top-users.php'],
          ['Settings',         $B.'/admin/settings.php',              'settings',   'settings.php'],
        ];
        foreach ($anav as [$lbl, $href, $icon, $match]) {
            echo sp_nav_item($lbl, $href, $icon, $active_nav, $match);
        }
      ?>
    </div>
    <div class="sp-nav-section" style="margin-top:auto;padding-bottom:16px">
      <?php echo sp_nav_item('Logout', $B.'/admin/logout.php', 'logout', '', ''); ?>
    </div>

    <?php else: ?>
    <!-- ── User nav ── -->
    <div class="sp-nav-section">
      <div class="sp-nav-label">Menu</div>
      <?php
        $unav = [
          ['Dashboard',    $B.'/user/dashboard.php',       'dashboard',  'dashboard.php'],
          ['Boost Account',$B.'/user/new-order.php',       'boost',      'new-order.php'],
          ['Buy Number',   $B.'/user/virtual-numbers.php', 'vsim',       'virtual-numbers.php'],
          ['Orders',       $B.'/user/orders.php',          'orders',     'orders.php'],
          ['Mass Order',   $B.'/user/mass-order.php',      'mass-order', 'mass-order.php'],
          ['Add Funds',    $B.'/user/add-funds.php',       'funds',      'add-funds.php'],
          ['Transactions', $B.'/user/transactions.php',    'txn',        'transactions.php'],
          ['Refer & Earn', $B.'/user/referral.php',        'referral',   'referral.php'],
          ['Reseller Plans',$B.'/user/reseller',           'reseller',   'reseller.php'],
          ['Profile',      $B.'/user/profile.php',         'profile',    'profile.php'],
        ];
        foreach ($unav as [$lbl, $href, $icon, $match]) {
            echo sp_nav_item($lbl, $href, $icon, $active_nav, $match);
        }
      ?>
    </div>

    <!-- VTU Services group -->
    <div class="sp-nav-vtu">
      <div class="sp-nav-label"><span class="sp-pulse"></span>VTU Services</div>
      <?php
        $vnav = [
          ['Buy Data',     $B.'/user/buy-data.php',    'data',        'buy-data.php'],
          ['Buy Airtime',  $B.'/user/buy-airtime.php', 'airtime',     'buy-airtime.php'],
          ['Electricity',  $B.'/user/electricity.php', 'electricity', 'electricity.php'],
          ['Cable TV',     $B.'/user/cable-tv.php',    'cable',       'cable-tv.php'],
        ];
        foreach ($vnav as [$lbl, $href, $icon, $match]) {
            echo sp_nav_item($lbl, $href, $icon, $active_nav, $match);
        }
      ?>
    </div>

    <div class="sp-nav-section" style="margin-top:auto;padding-bottom:16px">
      <?php echo sp_nav_item('Logout', $B.'/user/logout.php', 'logout', '', ''); ?>
    </div>
    <?php endif; ?>
  </aside>

  <!-- Sidebar overlay (mobile) -->
  <div class="sp-sidebar-overlay" id="spOverlay" onclick="spToggleSidebar()"></div>

  <!-- ══ MAIN ══════════════════════════════════════════════════════ -->
  <div class="sp-main">

    <!-- Mobile header -->
    <header class="sp-mobile-header">
      <button class="sp-menu-btn" onclick="spToggleSidebar()" aria-label="Open menu">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/>
        </svg>
      </button>
      <img src="<?php echo $B; ?>/assets/images/logo.png" alt="<?php echo SITE_NAME; ?>">
      <div style="display:flex;align-items:center;gap:8px">
        <!-- Notif bell -->
        <div style="position:relative">
          <button class="sp-menu-btn" onclick="spToggleNotif()" aria-label="Notifications">
            <?php echo sp_icon('bell'); ?>
            <span class="sp-badge-notif hidden" id="spNotifBadge">0</span>
          </button>
        </div>
        <!-- Avatar -->
        <div class="sp-topbar-avatar" style="width:32px;height:32px;font-size:13px">
          <?php echo $avatar_letter; ?>
        </div>
      </div>
    </header>

    <!-- Desktop topbar -->
    <div class="sp-topbar">
      <div class="sp-topbar-title"><?php echo htmlspecialchars($page_title); ?></div>

      <!-- Balance pill (desktop) -->
      <?php if (!$is_admin): ?>
      <div class="sp-topbar-balance">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>
        <span>Balance:</span>
        <strong>₦<?php echo $balance; ?></strong>
      </div>
      <?php endif; ?>

      <!-- Notif bell -->
      <div style="position:relative">
        <button class="sp-menu-btn" onclick="spToggleNotif()" aria-label="Notifications">
          <?php echo sp_icon('bell'); ?>
          <span class="sp-badge-notif hidden" id="spNotifBadgeD">0</span>
        </button>
      </div>

      <!-- Avatar -->
      <div class="sp-topbar-avatar" title="<?php echo $username; ?>"><?php echo $avatar_letter; ?></div>
    </div>

    <!-- ── Notification Drawer ──────────────────────────────────── -->
    <div class="sp-notif-overlay" id="spNotifOverlay" onclick="spToggleNotif()"></div>
    <div class="sp-notif-drawer" id="spNotifDrawer">
      <div class="sp-notif-head">
        <h3><?php echo sp_icon('bell'); ?> Notifications</h3>
        <span class="sp-notif-count zero" id="spNotifCount">0 new</span>
        <button class="sp-notif-close" onclick="spToggleNotif()">✕</button>
      </div>
      <div style="padding:10px 18px;border-bottom:1px solid #e5e7eb;display:none" id="spMarkAllRow">
        <button onclick="spMarkAllRead()" style="background:none;border:none;font-family:inherit;font-size:12px;font-weight:600;color:var(--blue);cursor:pointer">
          ✓ Mark all as read
        </button>
      </div>
      <div class="sp-notif-list" id="spNotifList">
        <div class="sp-notif-empty">
          <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 01-3.46 0"/></svg>
          <p style="font-size:13px;font-weight:500">Loading…</p>
        </div>
      </div>
      <div class="sp-notif-footer">
        <a href="<?php echo $B; ?>/user/orders.php">View all orders →</a>
      </div>
    </div>

    <!-- ── WhatsApp float ───────────────────────────────────────── -->
    <a class="sp-wa" href="/wa.php" target="_blank" rel="noopener">
      <span class="sp-wa-label">Need help? Chat us!</span>
      <div class="sp-wa-bubble">
        <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
      </div>
    </a>

    <!-- ── Page content starts here ─────────────────────────────── -->
    <div class="sp-main-inner">
