<!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/#users">Users</a>
        <a href="/admin/#keys">API keys</a>
        <a href="/admin/#audit">Audit log</a>
        <a href="#" id="logout">Sign out</a>
      </nav>
    </aside>
    <main>
      <header class="topbar">
        <div>
          <h1>Superadmin control</h1>
          <div class="muted">Platform-wide settings, users, billing, and integrations.</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>

      <section class="cards" id="kpis"></section>

      <div class="admin-grid">
        <section class="panel">
          <h2>Cases by status</h2>
          <div id="casesByStatus"></div>
        </section>
        <section class="panel">
          <h2>Takedown resolution</h2>
          <div id="takedownReso"></div>
        </section>
        <section class="panel">
          <h2>Plan mix</h2>
          <div id="planMix"></div>
        </section>
        <section class="panel">
          <h2>AI cost &amp; avoidance</h2>
          <div id="aiBlock"></div>
        </section>
      </div>

      <section class="panel" id="productionPending" style="border-left: 4px solid var(--warn);">
        <div class="between">
          <h2>Production-pending takedowns <span class="muted" id="ppCount"></span></h2>
          <div class="flex">
            <button class="warn" id="sendAllPP">Send all (production)</button>
            <button class="secondary" id="refreshPP">Refresh</button>
          </div>
        </div>
        <div class="muted" style="margin-bottom:.5rem;font-size:.85rem">
          These are ready-to-send takedowns that were queued by deep discovery scans.
          The emails have <b>not</b> been sent yet (test Resend key is bound to
          yourdomain.com which isn't verified, so any send would 403).
          <b>Swap the Resend key in /admin → API keys, then click "Send all".</b>
        </div>
        <table class="tight">
          <thead><tr><th>Case</th><th>URL</th><th>To</th><th>Method</th><th>Queued</th><th>Action</th></tr></thead>
          <tbody id="ppRows"></tbody>
        </table>
      </section>

      <section class="panel" id="alerts" style="border-left: 4px solid var(--accent);">
        <div class="between">
          <h2>Operator alerts <span class="muted" id="alertCount"></span></h2>
          <div class="flex">
            <select id="alertFilter">
              <option value="">all severities</option>
              <option value="critical">critical</option>
              <option value="error">error</option>
              <option value="warn">warn</option>
              <option value="info">info</option>
            </select>
            <select id="alertAckFilter">
              <option value="false">unacknowledged only</option>
              <option value="">all</option>
              <option value="true">acknowledged only</option>
            </select>
            <button class="secondary" id="testAlertBtn">Inject test alert</button>
            <a href="/admin/#alerts" class="button">Open full alerts</a>
          </div>
        </div>
        <div id="alertsBlock">
          <div class="muted center" style="padding:1rem">Loading…</div>
        </div>
        <details style="margin-top:1rem">
          <summary class="muted">Email preferences</summary>
          <div class="mt-1" id="alertPrefs" style="font-size:.85rem"></div>
          <div class="mt-1 row">
            <input id="prefEmailTo" placeholder="admin@yourdomain.com" />
            <button class="secondary" id="savePrefs">Save</button>
          </div>
        </details>
      </section>

      <section class="panel" id="keys">
        <div class="between">
          <h2>API keys</h2>
          <button id="newKey">+ Add key</button>
        </div>
        <table class="tight">
          <thead><tr><th>Service</th><th>Label</th><th>Masked</th><th>Calls today</th><th>Quota</th><th>% used</th><th>Status</th><th></th></tr></thead>
          <tbody id="keyRows"></tbody>
        </table>
      </section>

      <section class="panel" id="users">
        <div class="between">
          <h2>Users</h2>
          <div class="row">
            <input id="userSearch" placeholder="search name/email" />
            <select id="userPlan"><option value="">all plans</option><option>free</option><option>standard</option><option>pro</option><option>agency</option></select>
            <select id="userStatus"><option value="">any status</option><option value="active">active</option><option value="suspended">suspended</option><option value="payment_failed">payment failed</option></select>
            <button id="userSearchBtn">Search</button>
          </div>
        </div>
        <table class="tight">
          <thead><tr><th>ID</th><th>Email</th><th>Name</th><th>Role</th><th>Plan</th><th>Status</th><th>Last login</th><th></th></tr></thead>
          <tbody id="userRows"></tbody>
        </table>
      </section>

      <section class="panel" id="audit">
        <h2>Audit log</h2>
        <table class="tight">
          <thead><tr><th>When</th><th>Actor</th><th>Action</th><th>Target</th><th>Meta</th></tr></thead>
          <tbody id="auditRows"></tbody>
        </table>
      </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">Primary search proxy</option>
          <option value="MiniMax">Visual-AI inference</option>
          <option value="resend">Email delivery</option>
        </select>
        <label>Label</label>
        <input name="label" placeholder="e.g. main / backup / eu" required />
        <label>API key value</label>
        <input name="key_value" placeholder="paste the key" />
        <label>Daily quota (calls before rotation)</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>

  <div id="userModal" 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>Override plan / limits</h2>
      <form id="userForm">
        <input type="hidden" name="id" />
        <label>Plan</label>
        <select name="plan">
          <option>free</option><option>standard</option><option>pro</option><option>agency</option>
        </select>
        <label>Override limits (JSON, optional)</label>
        <textarea name="plan_override" rows="4" placeholder='e.g. { "scans_limit": 5000 }'></textarea>
        <label>Reason</label>
        <input name="plan_override_reason" placeholder="logged to audit_log" />
        <label>Suspend account</label>
        <select name="suspended">
          <option value="0">No</option>
          <option value="1">Yes</option>
        </select>
        <div class="row mt-2">
          <button type="submit">Save</button>
          <button type="button" class="secondary" id="userCancel">Cancel</button>
        </div>
      </form>
    </div>
  </div>

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