<!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>Dashboard — takedowns</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="28" height="28" /><span class="brand-wordmark">takedowns<small>by vesamuni</small></span></a>
      <nav>
        <a href="/dashboard/" class="active">Dashboard</a>
        <a href="/cases/">My cases</a>
        <a href="/scan/">Run a scan</a>
        <a href="/takedown/">Takedowns</a>
        <a href="/billing/">Billing &amp; plan</a>
        <a href="/dashboard/sessions/">Active sessions</a>
        <a href="/admin/" data-admin-only class="hidden">Admin panel</a>
        <a href="#" id="logout">Sign out</a>
      </nav>
    </aside>

    <main>
      <header class="topbar">
        <div>
          <h1>Hi, <span id="who">there</span> 👋</h1>
          <div class="muted" id="tagline">Here's where things stand on your account.</div>
        </div>
        <div class="user-pill">
          <span class="avatar" id="avatar">U</span>
          <span id="planPill" class="pill">…</span>
          <span id="siteHealthDot" class="site-health-dot unknown" title="checking…"></span>
        </div>
      </header>

      <div id="flash"></div>

      <!-- Quick actions — what most users actually want to do -->
      <section class="panel">
        <h2>What would you like to do?</h2>
        <div class="cards" id="actions">
          <a class="card" href="/cases/" style="text-decoration:none">
            <h3>1. Add a case</h3>
            <div class="v">+</div>
            <div class="sub">Start tracking a new person who needs protection.</div>
          </a>
          <a class="card" href="/scan/" style="text-decoration:none">
            <h3>2. Run a scan</h3>
            <div class="v">⌕</div>
            <div class="sub">Search Google for leaks and matches.</div>
          </a>
          <a class="card" href="/takedown/" style="text-decoration:none">
            <h3>3. Send a takedown</h3>
            <div class="v">✉</div>
            <div class="sub">DMCA notice to the platform hosting the content.</div>
          </a>
          <a class="card" href="/billing/" style="text-decoration:none">
            <h3>4. Upgrade plan</h3>
            <div class="v">★</div>
            <div class="sub">Get more cases, scans, and takedowns.</div>
          </a>
        </div>
      </section>

      <!-- Plan + usage -->
      <section class="cards" id="usageCards">
        <div class="card">
          <h3>Your plan</h3>
          <div class="v" id="planName">…</div>
          <div class="sub"><span id="planPrice">…</span> · <a href="/billing/">change</a></div>
        </div>
        <div class="card">
          <h3>Active cases</h3>
          <div class="v"><span id="casesUsed">0</span> / <span id="casesLimit">…</span></div>
          <div class="bar"><span id="casesBar"></span></div>
          <div class="sub" id="casesHint">…</div>
        </div>
        <div class="card">
          <h3>Scans this month</h3>
          <div class="v"><span id="scansUsed">0</span> / <span id="scansLimit">…</span></div>
          <div class="bar"><span id="scansBar"></span></div>
          <div class="sub" id="scansHint">…</div>
        </div>
        <div class="card">
          <h3>Takedowns this month</h3>
          <div class="v"><span id="takedownsUsed">0</span> / <span id="takedownsLimit">…</span></div>
          <div class="bar"><span id="takedownsBar"></span></div>
          <div class="sub" id="takedownsHint">…</div>
        </div>
      </section>

      <!-- Outcome snapshot: what happened after takedowns were sent -->
      <section class="panel" id="outcomesPanel">
        <div class="between">
          <div>
            <h2>Takedown outcomes</h2>
            <div class="muted">Removal history, still-live links, and escalation workload.</div>
          </div>
          <a href="/takedown/" class="button secondary">Open takedown desk</a>
        </div>
        <div class="cards outcome-cards" id="outcomeCards"></div>
        <div class="dashboard-split mt-2">
          <div>
            <div class="between mb-1">
              <h2 class="compact-heading">Recent removals</h2>
              <span class="muted" id="removedCountLabel"></span>
            </div>
            <table class="tight">
              <thead><tr><th>Removed</th><th>Domain</th><th>Recipient</th><th>Time to remove</th></tr></thead>
              <tbody id="removedRows"></tbody>
            </table>
          </div>
          <div>
            <div class="between mb-1">
              <h2 class="compact-heading">Domains</h2>
              <span class="muted">Top takedown targets</span>
            </div>
            <div id="domainStats" class="domain-stats"></div>
          </div>
        </div>
      </section>

      <!-- Customer's recent activity -->
      <section class="panel">
        <div class="between">
          <h2>Your recent cases</h2>
          <a href="/cases/" class="button">View all</a>
        </div>
        <div id="casesBlock">
          <table class="tight">
            <thead><tr><th>ID</th><th>Victim</th><th>Status</th><th>Findings</th><th>Created</th><th></th></tr></thead>
            <tbody id="casesRows"></tbody>
          </table>
        </div>
      </section>

      <section class="panel" id="findingsPanel">
        <div class="between">
          <h2>Confirmed findings (leaks detected)</h2>
          <a href="/scan/" class="button secondary">Run another scan</a>
        </div>
        <div id="findingsBlock">
          <table class="tight">
            <thead><tr><th>When</th><th>URL</th><th>Tier</th><th>Confidence</th><th>Status</th><th>Action</th></tr></thead>
            <tbody id="findingsRows"></tbody>
          </table>
        </div>
      </section>

      <section class="panel" id="takedownsPanel">
        <div class="between">
          <h2>Takedowns <span class="muted" id="tdCount"></span> <span class="muted" id="bulkCount"></span></h2>
          <a href="/takedown/" class="button secondary">All takedowns</a>
        </div>
        <!-- KPI cards: counts by state -->
        <div class="cards" id="tdKpis"></div>
        <div class="muted" style="font-size:.85rem;margin:.35rem 0 .5rem">
          Live re-probe runs every 4h. When a takedown is marked
          <code>removed</code>, the contact is auto-promoted to
          <code>observed_success</code> so the next case uses it
          immediately.
        </div>
        <!-- Bulk action toolbar (only shows when something is selected) -->
        <div id="bulkToolbar" style="display:none;padding:.5rem;background:var(--bg-3);border-radius:6px;margin-bottom:.5rem;gap:.5rem;align-items:center">
          <span class="muted">Bulk action:</span>
          <button id="bulkMarkRemoved"  class="pill">Mark removed</button>
          <button id="bulkMarkResponded" class="pill">Mark responded</button>
          <button id="bulkMarkFailed"    class="pill">Mark failed</button>
          <button id="bulkRequeue"       class="pill">Re-queue (30h window)</button>
          <a href="#" id="exportCsv" class="pill" style="text-decoration:none">⬇ Export CSV</a>
        </div>
        <div id="takedownsBlock" class="table-scroll">
          <table class="tight takedowns-table">
            <thead>
              <tr>
                <th><input type="checkbox" id="tdCheckAll" title="Select all" /></th>
                <th>State</th>
                <th>When</th>
                <th>URL</th>
                <th>Platform</th>
                <th>Recipient</th>
                <th>Sent</th>
                <th>Escalated</th>
                <th>Removed</th>
                <th>Last probe</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody id="takedownsRows"></tbody>
          </table>
        </div>
      </section>

      <!-- Superadmin-only sections rendered conditionally -->
      <section class="panel" id="adminOnly" style="display:none">
        <h2>Platform quick view <span class="pill info">superadmin</span></h2>
        <div class="cards" id="adminKpis"></div>
        <p class="muted mt-2"><a href="/admin/">Open full admin panel →</a></p>
      </section>

      <!-- Operator notes modal -->
      <div id="notesModal" class="hidden" style="position:fixed;inset:0;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;z-index:99;overflow:auto;padding:2rem">
        <div class="panel" style="width:100%;max-width:680px;max-height:90vh;overflow:auto">
          <div class="between">
            <h2>Operator notes <span class="muted small-text">(takedown <span id="notesTakedownId"></span>)</span></h2>
            <button type="button" class="secondary" id="notesClose">Close</button>
          </div>
          <div class="muted small-text" style="margin-bottom:.5rem">Notes persist alongside the takedown — useful for "called platform rep on the 15th, promised takedown by Friday" six months later when the lawyer asks.</div>
          <div id="notesBody"></div>
          <form id="notesAddForm" class="mt-2" style="display:none">
            <label>Add a note (superadmin only)</label>
            <textarea name="body" rows="3" maxlength="4000" required placeholder="What happened? Who did you talk to? When's the followup?" style="width:100%;font-family:var(--mono);font-size:.9rem"></textarea>
            <div class="row mt-1">
              <button type="submit">Save note</button>
            </div>
          </form>
        </div>
      </div>
    </main>
  </div>

  <script src="/public/js/dashboard.js?v=20260617-takedown-actions"></script>
  <script src="/public/js/siteHealth.js" defer></script>
</body>
</html>
