<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <meta name="theme-color" content="#0EA5E9" />
  <title>takedowns — Superadmin</title>
  <link rel="stylesheet" href="/public/css/glass.css?v=2-light" />
</head>
<body>
  <div class="app">
    <aside>
      <a href="/" class="brand" aria-label="takedowns home"><img src="/public/og/logo-mark.png" alt="" width="30" height="30" /><span class="brand-wordmark">takedowns<small>admin</small></span></a>
      <nav>
        <a href="/dashboard/">Dashboard</a>
        <a href="/admin/" class="active">Admin panel</a>
        <a href="/admin/#alerts">Alerts</a>
        <a href="/admin/#keys">API keys</a>
        <a href="/admin/#users">Users</a>
        <a href="/admin/#audit">Audit</a>
        <a href="#" id="openContact">Contact us</a>
        <a href="#" id="logout">Sign out</a>
      </nav>
    </aside>
    <main>
      <header class="topbar">
        <div>
          <h1>Admin</h1>
          <div class="muted" id="topbarSub">loading…</div>
        </div>
        <div class="user-pill">
          <span class="avatar" id="avatar">A</span>
          <span id="who">…</span>
          <span id="siteHealthDot" class="site-health-dot unknown" title="checking…"></span>
        </div>
      </header>
      <div id="flash"></div>

      <!-- 4 KPIs (down from 8). Single-line metric, no verbose sub-text. -->
      <section class="cards" id="kpis"></section>

      <!-- Two side-by-side: cases-by-status (compact bar) + takedown
           resolution. Plan mix + AI cost moved to detail pages to
           keep the dashboard tight. -->
      <div class="admin-grid">
        <section class="panel" id="casesPanel">
          <h2>Cases</h2>
          <div id="casesByStatus"></div>
        </section>
        <section class="panel" id="resoPanel">
          <h2>Takedowns <span class="muted" id="resoSummary"></span></h2>
          <div id="takedownReso"></div>
        </section>
      </div>

      <!-- Alerts: ONE line of category pills by default. Click to expand. -->
      <section class="panel" id="alerts" style="border-left: 4px solid var(--accent);">
        <div class="between">
          <h2>Alerts <span class="muted" id="alertCount"></span></h2>
          <div class="flex">
            <select id="alertAckFilter" title="filter">
              <option value="false">unack</option>
              <option value="">all</option>
              <option value="true">ack'd</option>
            </select>
            <button class="secondary" id="ackVisibleBtn" title="Acknowledge all visible">Ack visible</button>
            <button class="secondary" id="testAlertBtn" title="Inject a synthetic test alert">Test</button>
          </div>
        </div>
        <div id="alertsSummary" class="muted" style="font-size:.85rem;margin:.3rem 0">…</div>
        <details id="alertsDetail">
          <summary class="muted" style="cursor:pointer">show details</summary>
          <div id="alertsBlock" style="margin-top:.5rem">
            <div class="muted center" style="padding:1rem">Loading…</div>
          </div>
        </details>
      </section>

      <!-- Trusted devices — compact. One row per device, no UA table
           details, just "browser · IP · 30d" + revoke button. -->
      <section class="panel" id="trustedDevicesPanel" style="border-left:4px solid var(--ok)">
        <div class="between">
          <h2>Trusted devices <span class="muted" id="trustedCount"></span></h2>
          <button class="secondary" id="revokeAllDevicesBtn" title="Sign out every device; require 2FA on next access">Revoke all</button>
        </div>
        <div id="trustedRows" class="muted">…</div>
      </section>

      <!-- API keys — compact. One row per key, just the essentials. -->
      <section class="panel" id="keys">
        <div class="between">
          <h2>API keys</h2>
          <button id="newKey" class="secondary">+ Add</button>
        </div>
        <div id="keyRows" class="muted">…</div>
      </section>

      <!-- Users — compact. Default shows just the superadmin. Search
           reveals the rest. Click a row to open the detail modal. -->
      <section class="panel" id="users">
        <div class="between">
          <h2>Users</h2>
          <div class="flex">
            <input id="userSearch" placeholder="search name/email" style="width:200px" />
            <button class="secondary" id="userSearchBtn">Search</button>
          </div>
        </div>
        <div id="userRows" class="muted">…</div>
      </section>

      <!-- Audit log — hidden by default. Operator opens on demand. -->
      <section class="panel" id="audit">
        <details>
          <summary><strong>Audit log</strong> <span class="muted" id="auditSummary"></span></summary>
          <div id="auditRows" style="margin-top:.5rem">
            <div class="muted center" style="padding:1rem">Click to load</div>
          </div>
        </details>
      </section>
    </main>
  </div>

  <!-- Modals -->
  <div id="keyModal" class="hidden" style="position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:99">
    <div class="panel" style="width:100%;max-width:520px">
      <h2 id="keyModalTitle">Add API key</h2>
      <form id="keyForm">
        <input type="hidden" name="id" />
        <label>Service</label>
        <select name="service" required>
          <option value="scrape_do">scrape.do</option>
          <option value="MiniMax">MiniMax</option>
          <option value="resend">resend</option>
        </select>
        <label>Label</label>
        <input name="label" placeholder="e.g. main / backup" required />
        <label>API key value</label>
        <input name="key_value" placeholder="paste the key" />
        <label>Daily quota</label>
        <input name="quota_limit" type="number" value="950" />
        <div class="row mt-2">
          <button type="submit">Save</button>
          <button type="button" class="secondary" id="keyCancel">Cancel</button>
        </div>
      </form>
    </div>
  </div>

  <!-- Contact us modal — admin → support. IDOR-safe: every read
       scoped to req.user.id, server never trusts client-supplied
       author_user_id. UUID PKs so message IDs are non-guessable. -->
  <div id="contactModal" class="hidden" style="position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:99">
    <div class="panel" style="width:100%;max-width:560px">
      <h2>Contact us</h2>
      <p class="muted" style="margin:.25rem 0 1rem;font-size:13px">
        Send a private message to the takedowns team. We reply by email.
        Your past messages are listed below and only you can see them.
      </p>
      <form id="contactForm">
        <label>Subject</label>
        <input name="subject" maxlength="200" placeholder="e.g. Resend key rotation reminder" required />
        <label>Message</label>
        <textarea name="body" maxlength="4000" rows="6" placeholder="What's up?" required style="font-family:var(--font-ui);font-size:14px"></textarea>
        <label>Priority</label>
        <select name="priority">
          <option value="low">Low — informational</option>
          <option value="normal" selected>Normal</option>
          <option value="high">High — blocking my work</option>
        </select>
        <div id="contactErr" class="muted" style="color:#ef4444;font-size:12px;min-height:1em;margin-top:6px"></div>
        <div class="row mt-2">
          <button type="submit">Send</button>
          <button type="button" class="secondary" id="contactCancel">Cancel</button>
        </div>
      </form>

      <h3 style="margin-top:1.5rem;font-size:14px">Your past messages</h3>
      <div id="contactHistory" class="muted" style="font-size:13px;max-height:160px;overflow-y:auto;border-top:1px solid var(--border);padding-top:.5rem">
        Loading…
      </div>
    </div>
  </div>


  <script src="/public/js/admin.js"></script>
  <script src="/public/js/siteHealth.js" defer></script>
</body>
</html>