<?php
$activeNav = $activeNav ?? 'dashboard';
$pageTitle = $pageTitle ?? 'Dashboard';
$avatar = $user['avatar'] ?? '';
$name = $user['name'] ?? 'User';
$email = $user['email'] ?? '';
$initial = strtoupper(substr(trim($name), 0, 1) ?: 'U');

$icons = [
    'dashboard' => '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>',
    'keys' => '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="15.5" r="4.5"/><path d="M10.5 12.5L20 3M16 7l3 3M13 10l2 2"/></svg>',
    'links' => '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 14a5 5 0 0 0 7.07 0l2.83-2.83a5 5 0 0 0-7.07-7.07L11.6 5.34"/><path d="M14 10a5 5 0 0 0-7.07 0L4.1 12.83a5 5 0 0 0 7.07 7.07L12.4 18.66"/></svg>',
    'plans' => '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.6 13.4L13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8Z"/><circle cx="7.5" cy="7.5" r="1.5"/></svg>',
    'transactions' => '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16v16H4z"/><path d="M4 9h16M9 4v5M4 14h7v6"/></svg>',
    'integrations' => '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>',
    'profile' => '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>',
    'docs' => '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20V2H6.5A2.5 2.5 0 0 0 4 4.5v15Z"/><path d="M4 19.5A2.5 2.5 0 0 0 6.5 22H20v-5"/></svg>',
    'logout' => '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><path d="m16 17 5-5-5-5M21 12H9"/></svg>',
];
?>
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<script>try{if(localStorage.getItem('fampapi_theme')==='light')document.documentElement.removeAttribute('data-theme');}catch(e){}</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= htmlspecialchars($pageTitle) ?> - FamAPI</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=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/user.css?v=12">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
</head>
<body>
<div class="app">
  <div class="side-overlay" id="sideOverlay" onclick="toggleSidebar()"></div>
  <aside class="sidebar" id="sidebar" role="navigation" aria-label="Main menu">
    <div class="side-header">
      <a href="dashboard.php" class="side-brand">
        <span class="brand-mark"><img src="assets/img/logo.png" alt="FamAPI" width="32" height="32" style="border-radius:8px;object-fit:cover;"></span>
        <span>Fam<span class="brand-accent">API</span></span>
      </a>
      <button class="side-close" onclick="toggleSidebar()" aria-label="Close menu">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
      </button>
    </div>

    <nav class="side-nav">
      <div class="nav-section">Main</div>
      <a href="dashboard.php" class="nav-item <?= $activeNav === 'dashboard' ? 'active' : '' ?>" data-icon="dashboard">
        <span class="nav-icon"><?= $icons['dashboard'] ?></span>
        <span>Overview</span>
      </a>
      <a href="api_keys.php" class="nav-item <?= $activeNav === 'api_keys' ? 'active' : '' ?>" data-icon="keys">
        <span class="nav-icon"><?= $icons['keys'] ?></span>
        <span>API Keys</span>
      </a>
      <a href="payment_links.php" class="nav-item <?= $activeNav === 'payment_links' ? 'active' : '' ?>" data-icon="links">
        <span class="nav-icon"><?= $icons['links'] ?></span>
        <span>Payment Links</span>
      </a>
      <a href="plans.php" class="nav-item <?= $activeNav === 'plans' ? 'active' : '' ?>" data-icon="plans">
        <span class="nav-icon"><?= $icons['plans'] ?></span>
        <span>Plans & Billing</span>
      </a>
      <a href="transactions.php" class="nav-item <?= $activeNav === 'transactions' ? 'active' : '' ?>" data-icon="transactions">
        <span class="nav-icon"><?= $icons['transactions'] ?></span>
        <span>Transactions</span>
      </a>

      <div class="nav-section">Account</div>
      <a href="integrations.php" class="nav-item <?= $activeNav === 'integrations' ? 'active' : '' ?>" data-icon="integrations">
        <span class="nav-icon"><?= $icons['integrations'] ?></span>
        <span>Gmail & Settings</span>
      </a>
      <a href="profile.php" class="nav-item <?= $activeNav === 'profile' ? 'active' : '' ?>" data-icon="profile">
        <span class="nav-icon"><?= $icons['profile'] ?></span>
        <span>Profile</span>
      </a>
      <a href="docs.php" class="nav-item <?= $activeNav === 'docs' ? 'active' : '' ?>" data-icon="docs">
        <span class="nav-icon"><?= $icons['docs'] ?></span>
        <span>Documentation</span>
      </a>
    </nav>

    <div class="side-footer">
      <div class="side-user">
        <?php if (!empty($avatar)): ?>
          <img src="<?= htmlspecialchars($avatar) ?>" class="user-avatar" alt="">
        <?php else: ?>
          <div class="user-avatar placeholder"><?= htmlspecialchars($initial) ?></div>
        <?php endif; ?>
        <div class="user-info">
          <div class="user-name"><?= htmlspecialchars($name) ?></div>
          <div class="user-email"><?= htmlspecialchars($email) ?></div>
        </div>
      </div>
      <a href="logout.php" class="nav-item signout">
        <span class="nav-icon"><?= $icons['logout'] ?></span>
        <span>Sign Out</span>
      </a>
    </div>
  </aside>

  <div class="app-main">
    <header class="topbar" role="banner">
      <button class="menu-btn" onclick="toggleSidebar()" aria-label="Open menu" aria-expanded="false">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/></svg>
      </button>
      <h1 class="topbar-title"><?= htmlspecialchars($pageTitle) ?></h1>
      <div class="topbar-actions">
        <button type="button" class="theme-toggle" id="themeToggle" title="Toggle day / night mode" aria-label="Toggle day / night mode">
          <svg class="theme-icon theme-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4.5"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
          <svg class="theme-icon theme-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.8A9 9 0 1 1 11.2 3 7 7 0 0 0 21 12.8Z"/></svg>
        </button>
        <div class="user-dropdown" id="userDropdown">
          <button class="user-btn" onclick="toggleUserMenu()" aria-label="Account menu" aria-expanded="false">
            <?php if (!empty($avatar)): ?>
              <img src="<?= htmlspecialchars($avatar) ?>" class="user-btn-avatar" alt="">
            <?php else: ?>
              <span class="user-btn-avatar placeholder"><?= htmlspecialchars($initial) ?></span>
            <?php endif; ?>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
          </button>
          <div class="user-dropdown-menu" id="userDropdownMenu" role="menu">
            <div class="dropdown-header">
              <div class="dropdown-name"><?= htmlspecialchars($name) ?></div>
              <div class="dropdown-email"><?= htmlspecialchars($email) ?></div>
            </div>
            <a href="profile.php" class="dropdown-item" role="menuitem">
              <span class="dropdown-icon"><?= $icons['profile'] ?></span>
              Profile
            </a>
            <a href="logout.php" class="dropdown-item dropdown-danger" role="menuitem">
              <span class="dropdown-icon"><?= $icons['logout'] ?></span>
              Sign Out
            </a>
          </div>
        </div>
      </div>
    </header>
    <main class="app-content" role="main">