{% extends "base.html" %}

{% block head %}
<style>
  /* ── Layout ── */
  .admin-layout { display: flex; min-height: calc(100vh - 64px); }

  /* ── Sidebar ── */
  .admin-sidebar {
    width: 196px; flex-shrink: 0;
    background: #F8FAFC; border-right: 1px solid #E2E8F0;
    padding: 1.25rem 0; overflow-y: auto;
  }
  .admin-sidebar__title {
    padding: 0 1.125rem 1rem; font-size: 0.8125rem; font-weight: 700; color: #0F172A;
    border-bottom: 1px solid #E2E8F0; margin-bottom: 0.375rem; letter-spacing: 0.01em;
  }
  .admin-sidebar__divider {
    height: 1px; background: #F1F5F9; margin: 0.375rem 1.125rem;
  }
  .admin-nav a {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 1.125rem; font-size: 0.8125rem; color: #64748B;
    text-decoration: none; transition: color 0.1s, background 0.1s;
  }
  .admin-nav a:hover { background: #EFF6FF; color: #1D4ED8; }
  .admin-nav a.active {
    background: #EFF6FF; color: #1D4ED8; font-weight: 600;
    box-shadow: inset 3px 0 0 #1D4ED8;
  }
  .admin-nav a svg { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.85; }
  .admin-nav a.active svg { opacity: 1; }

  /* ── Content column (subnav + main) ── */
  .admin-content-area {
    flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0;
  }

  /* ── Horizontal subnav ── */
  .admin-subnav {
    display: flex; align-items: stretch; padding: 0 2rem;
    background: #fff; border-bottom: 1px solid #E2E8F0;
    flex-shrink: 0; overflow-x: auto; overflow-y: hidden; gap: 0;
    scrollbar-width: none;
  }
  .admin-subnav::-webkit-scrollbar { display: none; }
  .admin-subnav a {
    display: flex; align-items: center; gap: 5px;
    padding: 0 1px; margin: 0 13px 0 0; height: 42px;
    font-size: 0.8rem; font-weight: 500; color: #64748B;
    text-decoration: none; white-space: nowrap;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: color 0.1s, border-color 0.1s;
  }
  .admin-subnav a:first-child { margin-left: 0; }
  .admin-subnav a:hover { color: #1D4ED8; }
  .admin-subnav a.active { color: #1D4ED8; border-bottom-color: #1D4ED8; font-weight: 600; }
  .admin-subnav__badge {
    font-size: 9px; padding: 1px 5px; border-radius: 9999px;
    background: #EF4444; color: white; font-weight: 700;
  }

  /* ── Main content ── */
  .admin-main { flex: 1; padding: 2rem; overflow-y: auto; }

  /* ── Confirm dialog ── */
  #confirm-dialog {
    border: none; border-radius: 12px; padding: 1.5rem; max-width: 380px; width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 4px 16px rgba(0,0,0,0.08);
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0;
  }
  #confirm-dialog::backdrop { background: rgba(15,23,42,0.45); backdrop-filter: blur(3px); }
  #confirm-dialog p { margin: 0 0 1.25rem; font-size: 0.9375rem; color: #0F172A; line-height: 1.55; }
  #confirm-dialog .dialog-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }

  /* ── Mobile ── */
  @media (max-width: 768px) {
    .admin-layout { flex-direction: column; }
    .admin-sidebar {
      width: 100%; padding: 0.5rem; overflow-x: auto; overflow-y: hidden;
      border-right: none; border-bottom: 1px solid #E2E8F0;
    }
    .admin-sidebar__title { display: none; }
    .admin-sidebar__divider { display: none; }
    .admin-nav { display: flex; gap: 2px; }
    .admin-nav a {
      padding: 7px 11px; white-space: nowrap;
      box-shadow: none !important; border-radius: 6px;
    }
    .admin-subnav { padding: 0 1rem; }
    .admin-main { padding: 1rem; }
  }
</style>
{% block admin_head %}{% endblock %}
{% endblock %}

{% block content %}
{%- set _section_map = {
  'dashboard': 'overview',
  'marketplace': 'marketplace', 'leads': 'marketplace',
  'suppliers': 'suppliers',
  'articles': 'content', 'scenarios': 'content', 'templates': 'content', 'pseo': 'content',
  'emails': 'email', 'inbox': 'email', 'compose': 'email', 'gallery': 'email', 'audiences': 'email', 'outreach': 'email',
  'affiliate': 'affiliate', 'affiliate_dashboard': 'affiliate', 'affiliate_programs': 'affiliate',
  'billing': 'billing',
  'seo': 'analytics',
  'pipeline': 'pipeline',
  'users': 'system', 'flags': 'system', 'tasks': 'system', 'feedback': 'system',
} -%}
{%- set active_section = _section_map.get(admin_page|default(''), 'overview') -%}

<div class="admin-layout">

  {# ── Sidebar ── #}
  <aside class="admin-sidebar">
    <div class="admin-sidebar__title">Admin</div>
    <nav class="admin-nav">

      <a href="{{ url_for('admin.index') }}" class="{% if active_section == 'overview' %}active{% endif %}">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25a2.25 2.25 0 0 1-2.25-2.25v-2.25Z"/></svg>
        Dashboard
      </a>

      <div class="admin-sidebar__divider"></div>

      <a href="{{ url_for('admin.marketplace_dashboard') }}" class="{% if active_section == 'marketplace' %}active{% endif %}">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18 9 11.25l4.306 4.306a11.95 11.95 0 0 1 5.814-5.518l2.74-1.22m0 0-5.94-2.281m5.94 2.28-2.28 5.941"/></svg>
        Marketplace
      </a>

      <a href="{{ url_for('admin.suppliers') }}" class="{% if active_section == 'suppliers' %}active{% endif %}">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 21h19.5M3.75 3v18m4.5-18v18M12 3v18m4.5-18v18m4.5-18v18M6 6.75h.008v.008H6V6.75Zm0 3h.008v.008H6V9.75Zm0 3h.008v.008H6v-.008Zm4.5-6h.008v.008H10.5V6.75Zm0 3h.008v.008H10.5V9.75Zm0 3h.008v.008H10.5v-.008Zm4.5-6h.008v.008H15V6.75Zm0 3h.008v.008H15V9.75Zm0 3h.008v.008H15v-.008Z"/></svg>
        Suppliers
      </a>

      <div class="admin-sidebar__divider"></div>

      <a href="{{ url_for('admin.articles') }}" class="{% if active_section == 'content' %}active{% endif %}">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"/></svg>
        Content
      </a>

      <a href="{{ url_for('admin.emails') }}" class="{% if active_section == 'email' %}active{% endif %}">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75"/></svg>
        Email{% if unread_count %} <span class="admin-subnav__badge" style="margin-left:auto">{{ unread_count }}</span>{% endif %}
      </a>

      <div class="admin-sidebar__divider"></div>

      <a href="{{ url_for('admin.billing_products') }}" class="{% if active_section == 'billing' %}active{% endif %}">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Z"/></svg>
        Billing
      </a>

      <a href="{{ url_for('admin.affiliate_dashboard') }}" class="{% if active_section == 'affiliate' %}active{% endif %}">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 21v-7.5a.75.75 0 0 1 .75-.75h3a.75.75 0 0 1 .75.75V21m-4.5 0H2.36m11.14 0H18m0 0h3.64m-1.39 0V9.349M3.75 21V9.349m0 0a3.001 3.001 0 0 0 3.75-.615A2.993 2.993 0 0 0 9.75 9.75c.896 0 1.7-.393 2.25-1.016a2.993 2.993 0 0 0 2.25 1.016 2.993 2.993 0 0 0 2.25-1.016 3.001 3.001 0 0 0 3.75.614m-16.5 0a3.004 3.004 0 0 1-.621-4.72l1.189-1.19A1.5 1.5 0 0 1 5.378 3h13.243a1.5 1.5 0 0 1 1.06.44l1.19 1.189a3 3 0 0 1-.621 4.72M6.75 18h3.75a.75.75 0 0 0 .75-.75V13.5a.75.75 0 0 0-.75-.75H6.75a.75.75 0 0 0-.75.75v3.75c0 .414.336.75.75.75Z"/></svg>
        Affiliate
      </a>

      <a href="{{ url_for('admin.seo') }}" class="{% if active_section == 'analytics' %}active{% endif %}">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18 9 11.25l4.306 4.306a11.95 11.95 0 0 1 5.814-5.518l2.74-1.22m0 0-5.94-2.281m5.94 2.28-2.28 5.941"/></svg>
        Analytics
      </a>

      <a href="{{ url_for('pipeline.pipeline_dashboard') }}" class="{% if active_section == 'pipeline' %}active{% endif %}">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125"/></svg>
        Data Platform
      </a>

      <div class="admin-sidebar__divider"></div>

      <a href="{{ url_for('admin.users') }}" class="{% if active_section == 'system' %}active{% endif %}">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/></svg>
        System
      </a>

    </nav>
  </aside>

  {# ── Content column ── #}
  <div class="admin-content-area">

    {# ── Horizontal subnav — rendered only for multi-page sections ── #}
    {% if active_section == 'marketplace' %}
    <nav class="admin-subnav">
      <a href="{{ url_for('admin.marketplace_dashboard') }}" class="{% if admin_page == 'marketplace' %}active{% endif %}">Overview</a>
      <a href="{{ url_for('admin.leads') }}" class="{% if admin_page == 'leads' %}active{% endif %}">Leads</a>
    </nav>
    {% elif active_section == 'content' %}
    <nav class="admin-subnav">
      <a href="{{ url_for('admin.articles') }}" class="{% if admin_page == 'articles' %}active{% endif %}">Articles</a>
      <a href="{{ url_for('admin.templates') }}" class="{% if admin_page == 'templates' %}active{% endif %}">Templates</a>
      <a href="{{ url_for('admin.scenarios') }}" class="{% if admin_page == 'scenarios' %}active{% endif %}">Scenarios</a>
      <a href="{{ url_for('pseo.pseo_dashboard') }}" class="{% if admin_page == 'pseo' %}active{% endif %}">pSEO Engine</a>
    </nav>
    {% elif active_section == 'email' %}
    <nav class="admin-subnav">
      <a href="{{ url_for('admin.emails') }}" class="{% if admin_page == 'emails' %}active{% endif %}">Sent Log</a>
      <a href="{{ url_for('admin.inbox') }}" class="{% if admin_page == 'inbox' %}active{% endif %}">
        Inbox{% if unread_count %} <span class="admin-subnav__badge">{{ unread_count }}</span>{% endif %}
      </a>
      <a href="{{ url_for('admin.email_compose') }}" class="{% if admin_page == 'compose' %}active{% endif %}">Compose</a>
      <a href="{{ url_for('admin.email_gallery') }}" class="{% if admin_page == 'gallery' %}active{% endif %}">Gallery</a>
      <a href="{{ url_for('admin.audiences') }}" class="{% if admin_page == 'audiences' %}active{% endif %}">Audiences</a>
      <a href="{{ url_for('admin.outreach') }}" class="{% if admin_page == 'outreach' %}active{% endif %}">Outreach</a>
    </nav>
    {% elif active_section == 'affiliate' %}
    <nav class="admin-subnav">
      <a href="{{ url_for('admin.affiliate_dashboard') }}" class="{% if admin_page == 'affiliate_dashboard' %}active{% endif %}">Dashboard</a>
      <a href="{{ url_for('admin.affiliate_products') }}" class="{% if admin_page == 'affiliate' %}active{% endif %}">Products</a>
      <a href="{{ url_for('admin.affiliate_programs') }}" class="{% if admin_page == 'affiliate_programs' %}active{% endif %}">Programs</a>
    </nav>
    {% elif active_section == 'system' %}
    <nav class="admin-subnav">
      <a href="{{ url_for('admin.users') }}" class="{% if admin_page == 'users' %}active{% endif %}">Users</a>
      <a href="{{ url_for('admin.flags') }}" class="{% if admin_page == 'flags' %}active{% endif %}">Flags</a>
      <a href="{{ url_for('admin.tasks') }}" class="{% if admin_page == 'tasks' %}active{% endif %}">Tasks</a>
      <a href="{{ url_for('admin.feedback') }}" class="{% if admin_page == 'feedback' %}active{% endif %}">Feedback</a>
    </nav>
    {% endif %}

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

  </div>
</div>

<dialog id="confirm-dialog">
  <p id="confirm-msg"></p>
  <form method="dialog" class="dialog-actions">
    <button value="cancel" class="btn-outline btn-sm">Cancel</button>
    <button value="ok" class="btn btn-sm">Confirm</button>
  </form>
</dialog>
<script>
function showConfirm(message) {
  var dialog = document.getElementById('confirm-dialog');
  document.getElementById('confirm-msg').textContent = message;
  dialog.showModal();
  return new Promise(function(resolve) {
    dialog.addEventListener('close', function() {
      resolve(dialog.returnValue === 'ok');
    }, { once: true });
  });
}

document.body.addEventListener('htmx:confirm', function(evt) {
  if (!evt.detail.question) return;
  evt.preventDefault();
  showConfirm(evt.detail.question).then(function(ok) {
    if (ok) evt.detail.issueRequest(true);
  });
});
</script>
{% endblock %}
