<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{% block title %}Admin - {{ config.APP_NAME }}{% endblock %}</title>
  <link rel="icon" href="{{ url_for('static', filename='favicon.svg') }}" type="image/svg+xml">

  <!-- Fonts -->
  <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=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap" rel="stylesheet">

  <!-- Tailwind CSS -->
  <link rel="stylesheet" href="{{ url_for('static', filename='css/output.css') }}">

  <style>
    /* ── Admin Shell Layout ── */
    html, body { height: 100%; }

    .admin-shell {
      display: flex;
      min-height: 100vh;
      background: #F5F0EB;
    }

    /* ── Sidebar ── */
    .admin-sidebar {
      width: 220px;
      min-width: 220px;
      background: #2C1810;
      display: flex;
      flex-direction: column;
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      z-index: 50;
      overflow-y: auto;
    }

    .admin-sidebar-logo {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 20px 20px 18px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      text-decoration: none;
    }
    .admin-sidebar-logo:hover { text-decoration: none; }
    .admin-sidebar-logo-mark {
      width: 28px;
      height: 28px;
      background: #B45309;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 800;
      color: #fff;
      letter-spacing: -0.5px;
      flex-shrink: 0;
    }
    .admin-sidebar-logo-text {
      font-size: 13px;
      font-weight: 600;
      color: rgba(255,255,255,0.9);
      letter-spacing: -0.01em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .admin-sidebar-logo-badge {
      font-size: 9px;
      font-weight: 700;
      color: #B45309;
      background: rgba(180,83,9,0.2);
      border: 1px solid rgba(180,83,9,0.4);
      border-radius: 3px;
      padding: 1px 5px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      flex-shrink: 0;
    }

    .admin-nav {
      flex: 1;
      padding: 12px 10px;
    }

    .admin-nav-item {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 8px 10px;
      border-radius: 6px;
      font-size: 13.5px;
      font-weight: 500;
      color: rgba(255,255,255,0.6);
      text-decoration: none;
      transition: background 0.12s, color 0.12s;
      position: relative;
      margin-bottom: 1px;
    }
    .admin-nav-item:hover {
      background: rgba(255,255,255,0.07);
      color: rgba(255,255,255,0.9);
      text-decoration: none;
    }
    .admin-nav-item.active {
      background: rgba(180,83,9,0.2);
      color: #fff;
      font-weight: 600;
    }
    .admin-nav-item.active::before {
      content: '';
      position: absolute;
      left: 0;
      top: 6px;
      bottom: 6px;
      width: 3px;
      background: #B45309;
      border-radius: 0 2px 2px 0;
    }
    .admin-nav-icon {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      opacity: 0.7;
    }
    .admin-nav-item.active .admin-nav-icon { opacity: 1; }
    .admin-nav-item:hover .admin-nav-icon { opacity: 0.9; }

    .admin-nav-badge {
      margin-left: auto;
      font-size: 10px;
      font-weight: 700;
      background: #EF4444;
      color: #fff;
      border-radius: 10px;
      padding: 1px 6px;
      min-width: 18px;
      text-align: center;
    }
    .admin-nav-badge.unread { background: #D97706; }

    .admin-nav-divider {
      height: 1px;
      background: rgba(255,255,255,0.07);
      margin: 6px 10px;
    }

    .admin-sidebar-footer {
      padding: 12px 10px;
      border-top: 1px solid rgba(255,255,255,0.08);
    }

    /* ── Main Content ── */
    .admin-main {
      flex: 1;
      margin-left: 220px;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    .admin-topbar {
      background: #fff;
      border-bottom: 1px solid #E8DFD5;
      padding: 0 28px;
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      z-index: 40;
    }
    .admin-topbar-title {
      font-size: 14px;
      font-weight: 600;
      color: #2C1810;
    }
    .admin-topbar-right {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 13px;
      color: #78716C;
    }

    /* ── Horizontal subnav ── */
    .admin-subnav {
      display: flex; align-items: stretch; padding: 0 28px;
      background: #fff; border-bottom: 1px solid #E8DFD5;
      flex-shrink: 0; overflow-x: auto; gap: 0;
    }
    .admin-subnav a {
      display: flex; align-items: center; gap: 5px;
      padding: 0 1px; margin: 0 14px 0 0; height: 40px;
      font-size: 13px; font-weight: 500; color: #78716C;
      text-decoration: none; white-space: nowrap;
      border-bottom: 2px solid transparent; margin-bottom: -1px;
      transition: color 0.12s, border-color 0.12s;
    }
    .admin-subnav a:hover { color: #B45309; text-decoration: none; }
    .admin-subnav a.active { color: #B45309; border-bottom-color: #B45309; font-weight: 600; }
    .admin-subnav__badge {
      font-size: 9px; padding: 1px 5px; border-radius: 9999px; font-weight: 700;
    }
    .admin-subnav__badge.error { background: #EF4444; color: white; }
    .admin-subnav__badge.unread { background: #D97706; color: white; }

    .admin-content {
      flex: 1;
      padding: 28px;
    }

    /* ── Mobile toggle ── */
    .admin-mobile-toggle {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: 6px;
      color: #2C1810;
    }

    /* ── Responsive ── */
    @media (max-width: 768px) {
      .admin-sidebar {
        transform: translateX(-100%);
        transition: transform 0.22s ease;
      }
      .admin-sidebar.open { transform: translateX(0); }
      .admin-main { margin-left: 0; }
      .admin-mobile-toggle { display: flex; }
      .admin-content { padding: 16px; }
      .admin-subnav { padding: 0 16px; }
    }

    /* ── Overlay ── */
    .admin-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.4);
      z-index: 49;
    }
    .admin-overlay.active { display: block; }

    /* ── Impersonation banner ── */
    .impersonate-banner {
      background: #FEF3C7;
      border-bottom: 1px solid #D97706;
      padding: 8px 28px;
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 13px;
      color: #92400E;
    }
  </style>

  {% block admin_head %}{% endblock %}
</head>
<body>
{%- set _section_map = {
  'dashboard': 'overview',
  'users': 'manage', 'tasks': 'manage',
  'cms': 'content', 'cms_templates': 'content',
  'feedback': 'engagement', 'waitlist': 'engagement',
  'flags': 'system', 'emails': 'system',
} -%}
{%- set active_section = _section_map.get(admin_page|default(''), 'overview') -%}
<div class="admin-shell">

  <!-- Sidebar -->
  <aside class="admin-sidebar" id="adminSidebar">
    <!-- Logo -->
    <a href="{{ url_for('admin.index') }}" class="admin-sidebar-logo">
      <div class="admin-sidebar-logo-mark">{{ config.APP_NAME[0] }}</div>
      <span class="admin-sidebar-logo-text">{{ config.APP_NAME }}</span>
      <span class="admin-sidebar-logo-badge">Admin</span>
    </a>

    <!-- Navigation -->
    <nav class="admin-nav">

      <a href="{{ url_for('admin.index') }}"
         class="admin-nav-item {% if active_section == 'overview' %}active{% endif %}">
        <svg class="admin-nav-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <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>
        Dashboard
      </a>

      <div class="admin-nav-divider"></div>

      <a href="{{ url_for('admin.users') }}"
         class="admin-nav-item {% if active_section == 'manage' %}active{% endif %}">
        <svg class="admin-nav-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
          <circle cx="9" cy="7" r="4"/>
          <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
          <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
        </svg>
        Manage
        {% if stats is defined and stats.tasks_failed > 0 %}
        <span class="admin-nav-badge">{{ stats.tasks_failed }}</span>
        {% endif %}
      </a>

      <a href="{{ url_for('cms.cms_index') }}"
         class="admin-nav-item {% if active_section == 'content' %}active{% endif %}">
        <svg class="admin-nav-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
          <polyline points="14 2 14 8 20 8"/>
          <line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/>
          <polyline points="10 9 9 9 8 9"/>
        </svg>
        Content
      </a>

      <div class="admin-nav-divider"></div>

      <a href="{{ url_for('admin.feedback') }}"
         class="admin-nav-item {% if active_section == 'engagement' %}active{% endif %}">
        <svg class="admin-nav-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
        </svg>
        Engagement
        {% if feedback_unread is defined and feedback_unread > 0 %}
        <span class="admin-nav-badge unread">{{ feedback_unread }}</span>
        {% endif %}
      </a>

      <a href="{{ url_for('admin.flags') }}"
         class="admin-nav-item {% if active_section == 'system' %}active{% endif %}">
        <svg class="admin-nav-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
        </svg>
        System
      </a>

    </nav>

    <!-- Footer links -->
    <div class="admin-sidebar-footer">
      <form method="post" action="{{ url_for('admin.logout') }}" style="margin:0;">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <button type="submit" class="admin-nav-item" style="width:100%;border:none;cursor:pointer;background:none;text-align:left;">
          <svg class="admin-nav-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
            <polyline points="16 17 21 12 16 7"/>
            <line x1="21" y1="12" x2="9" y2="12"/>
          </svg>
          Logout
        </button>
      </form>
      <a href="{{ url_for('dashboard.index') }}" class="admin-nav-item">
        <svg class="admin-nav-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/>
          <polyline points="10 17 15 12 10 7"/>
          <line x1="15" y1="12" x2="3" y2="12"/>
        </svg>
        Back to App
      </a>
    </div>
  </aside>

  <!-- Overlay for mobile -->
  <div class="admin-overlay" id="adminOverlay" onclick="closeSidebar()"></div>

  <!-- Main -->
  <div class="admin-main">

    <!-- Top bar -->
    <header class="admin-topbar">
      <div style="display:flex;align-items:center;gap:12px;">
        <button class="admin-mobile-toggle" onclick="toggleSidebar()" aria-label="Toggle menu">
          <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <line x1="3" y1="6" x2="21" y2="6"/>
            <line x1="3" y1="12" x2="21" y2="12"/>
            <line x1="3" y1="18" x2="21" y2="18"/>
          </svg>
        </button>
        <span class="admin-topbar-title">{% block topbar_title %}Admin{% endblock %}</span>
      </div>
      <div class="admin-topbar-right">
        {% block topbar_right %}
        <a href="{{ url_for('public.landing') }}" style="color:#78716C;text-decoration:none;font-size:12px;">
          ← {{ config.APP_NAME }}
        </a>
        {% endblock %}
      </div>
    </header>

    {# ── Horizontal subnav — rendered only for multi-page sections ── #}
    {% if active_section == 'manage' %}
    <nav class="admin-subnav">
      <a href="{{ url_for('admin.users') }}" class="{% if admin_page == 'users' %}active{% endif %}">Users</a>
      <a href="{{ url_for('admin.tasks') }}" class="{% if admin_page == 'tasks' %}active{% endif %}">
        Tasks
        {% if stats is defined and stats.tasks_failed > 0 %}
        <span class="admin-subnav__badge error">{{ stats.tasks_failed }}</span>
        {% endif %}
      </a>
    </nav>
    {% elif active_section == 'content' %}
    <nav class="admin-subnav">
      <a href="{{ url_for('cms.cms_index') }}" class="{% if admin_page == 'cms' %}active{% endif %}">Articles</a>
      <a href="{{ url_for('cms.template_list') }}" class="{% if admin_page == 'cms_templates' %}active{% endif %}">pSEO Templates</a>
    </nav>
    {% elif active_section == 'engagement' %}
    <nav class="admin-subnav">
      <a href="{{ url_for('admin.feedback') }}" class="{% if admin_page == 'feedback' %}active{% endif %}">
        Feedback
        {% if feedback_unread is defined and feedback_unread > 0 %}
        <span class="admin-subnav__badge unread">{{ feedback_unread }}</span>
        {% endif %}
      </a>
      <a href="{{ url_for('admin.waitlist') }}" class="{% if admin_page == 'waitlist' %}active{% endif %}">Waitlist</a>
    </nav>
    {% elif active_section == 'system' %}
    <nav class="admin-subnav">
      <a href="{{ url_for('admin.flags') }}" class="{% if admin_page == 'flags' %}active{% endif %}">Feature Flags</a>
      <a href="{{ url_for('admin.emails') }}" class="{% if admin_page == 'emails' %}active{% endif %}">Email Log</a>
    </nav>
    {% endif %}

    <!-- Impersonation banner -->
    {% if session.get('admin_impersonating') %}
    <div class="impersonate-banner">
      <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
        <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
      </svg>
      <span>You are currently impersonating a user.</span>
      <form method="post" action="{{ url_for('admin.stop_impersonating') }}" style="margin:0;">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <button type="submit" style="background:none;border:1px solid #D97706;color:#92400E;border-radius:4px;padding:2px 10px;font-size:12px;font-weight:600;cursor:pointer;">
          Stop
        </button>
      </form>
    </div>
    {% endif %}

    <!-- Flash messages -->
    {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
    <div style="padding:12px 28px 0;">
      {% for category, message in messages %}
      <div class="{% if category == 'error' %}flash-error{% elif category == 'success' %}flash-success{% elif category == 'warning' %}flash-warning{% else %}flash{% endif %}">
        {{ message }}
      </div>
      {% endfor %}
    </div>
    {% endif %}
    {% endwith %}

    <!-- Page content -->
    <main class="admin-content">
      {% block admin_content %}{% endblock %}
    </main>

  </div>
</div>

<!-- HTMX -->
<script src="https://unpkg.com/htmx.org@2.0.4"></script>

<script>
  function toggleSidebar() {
    document.getElementById('adminSidebar').classList.toggle('open');
    document.getElementById('adminOverlay').classList.toggle('active');
  }
  function closeSidebar() {
    document.getElementById('adminSidebar').classList.remove('open');
    document.getElementById('adminOverlay').classList.remove('active');
  }
</script>

{% block scripts %}{% endblock %}
</body>
</html>
