<?php
// Logged-in user app shell header. Expects: $user (migrated array), $activeNav (string), $pageTitle (string).
$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 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7.5" height="7.5" rx="2"/><rect x="13.5" y="3" width="7.5" height="7.5" rx="2"/><rect x="3" y="13.5" width="7.5" height="7.5" rx="2"/><rect x="13.5" y="13.5" width="7.5" height="7.5" rx="2"/></svg>',
    'keys' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="15.5" r="4.5"/><path d="M10.5 12.5 20 3M16 7l3 3M13 10l2 2"/></svg>',
    'links' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" 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 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M20.6 13.4 13.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 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16v16H4z"/><path d="M4 9h16M9 4v5M4 14h7v6"/></svg>',
    'integrations' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" 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 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" 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 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" 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 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" 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>
<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&family=JetBrains+Mono:wght@500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/coinbase.css?v=9">
<link rel="stylesheet" href="assets/user.css?v=1">
</head>
<body>
<div class="app">
  <div class="side-overlay" id="sideOverlay" onclick="toggleSidebar()"></div>
  <aside class="sidebar" id="sidebar">
    <div class="side-logo">
      <a href="dashboard.php">Fam<span class="nav-logo-accent">API</span></a>
      <button class="side-close" onclick="toggleSidebar()">✕</button>
    </div>

    <div class="side-section">Main</div>
    <a href="dashboard.php" class="side-link side-anim-1 <?= $activeNav === 'dashboard' ? 'active' : '' ?>"><?= $icons['dashboard'] ?> Overview</a>
    <a href="api_keys.php" class="side-link side-anim-2 <?= $activeNav === 'api_keys' ? 'active' : '' ?>"><?= $icons['keys'] ?> API Keys</a>
    <a href="payment_links.php" class="side-link side-anim-3 <?= $activeNav === 'payment_links' ? 'active' : '' ?>"><?= $icons['links'] ?> Payment Links</a>
    <a href="plans.php" class="side-link side-anim-4 <?= $activeNav === 'plans' ? 'active' : '' ?>"><?= $icons['plans'] ?> Plans</a>
    <a href="transactions.php" class="side-link side-anim-5 <?= $activeNav === 'transactions' ? 'active' : '' ?>"><?= $icons['transactions'] ?> Transactions</a>

    <div class="side-section">Account</div>
    <a href="integrations.php" class="side-link side-anim-6 <?= $activeNav === 'integrations' ? 'active' : '' ?>"><?= $icons['integrations'] ?> Gmail &amp; Settings</a>
    <a href="profile.php" class="side-link side-anim-7 <?= $activeNav === 'profile' ? 'active' : '' ?>"><?= $icons['profile'] ?> Profile</a>
    <a href="docs.php" class="side-link side-anim-8 <?= $activeNav === 'docs' ? 'active' : '' ?>"><?= $icons['docs'] ?> Documentation</a>

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

  <div class="app-main">
    <header class="app-topbar">
      <button class="hamburger" onclick="toggleSidebar()">☰</button>
      <div class="app-topbar-title"><?= htmlspecialchars($pageTitle) ?></div>
      <div class="flex items-center gap-12">
        <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-menu" id="userMenu">
          <button type="button" class="user-menu-trigger" onclick="toggleUserMenu()" aria-label="Account menu">
            <?php if (!empty($avatar)): ?>
              <img src="<?= htmlspecialchars($avatar) ?>" class="user-menu-avatar" alt="">
            <?php else: ?>
              <span class="user-menu-avatar user-menu-avatar-text"><?= htmlspecialchars($initial) ?></span>
            <?php endif; ?>
            <svg class="user-menu-caret" 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-menu-dropdown" id="userMenuDropdown">
            <div class="user-menu-head">
              <div class="user-menu-name"><?= htmlspecialchars($name) ?></div>
              <div class="user-menu-email"><?= htmlspecialchars($email) ?></div>
            </div>
            <a href="profile.php" class="user-menu-item"><?= $icons['profile'] ?> Profile</a>
            <a href="logout.php" class="user-menu-item user-menu-item-danger"><?= $icons['logout'] ?> Log Out</a>
          </div>
        </div>
      </div>
    </header>
    <main class="app-content">