<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>LEXFile Control Panel • DEEM</title>
  <meta name="viewport" content="width=device-width,initial-scale=1" />

  <style>
    :root{
      --ink:#0b0b0f;
      --muted:#4b4b55;
      --soft:#f6f7fb;
      --line:#e2e3ea;
      --card:#ffffff;
      --radius:14px;
    }
    *{ box-sizing:border-box; }
    body{
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color:var(--ink);
      margin: 18px;
      line-height:1.35;
      background:#fff;
    }
    a{ color:inherit; text-decoration:underline; }
    .page{ max-width: 980px; margin: 0 auto; }

    /* ===== brand header (matches report) ===== */
    .brand-top{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:10px;
      margin: 6px 0 14px 0;
    }
    .deem-mark{
      height:56px;
      width:auto;
      display:block;
    }
    .banner{
      border:1px solid var(--line);
      background:var(--card);
      border-radius:var(--radius);
      padding:14px 16px;
      margin:14px 0 14px 0;
    }
    .banner h1{
      margin:0 0 8px 0;
      font-size:20px;
      letter-spacing:0.2px;
    }
    .meta{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:8px 14px;
      font-size:13px;
      color:var(--ink);
    }
    .meta span{ color:var(--muted); }

    /* ===== cards/panels (matches report) ===== */
    .card{
      background:var(--card);
      border:1px solid var(--line);
      border-radius:var(--radius);
      padding:12px 14px;
      margin:10px 0;
    }
    .panel{
      background:var(--soft);
      border:1px solid var(--line);
      border-radius:var(--radius);
      padding:12px 14px;
      margin:12px 0 16px 0;
      font-size:13px;
    }
    h2{ margin: 0 0 8px 0; font-size:16px; }
    h3{ margin: 12px 0 8px 0; font-size:14px; }
    .muted{ color:var(--muted); font-size:12px; }
    .hr{ height:1px; background:var(--line); margin:10px 0; border:0; }

    /* ===== controls ===== */
    .row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px; align-items:center; }
    input, select{
      padding:10px;
      width: 280px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background:#fff;
      color:var(--ink);
      outline:none;
    }
    input:focus, select:focus{
      border-color:#b9bbca;
      box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08);
    }
    button{
      padding: 10px 12px;
      cursor:pointer;
      border-radius: 10px;
      border: 1px solid var(--ink);
      background:#fff;
      color:var(--ink);
      font-weight:600;
    }
    button:hover{ opacity:0.95; }
    .pill{
      display:inline-block;
      padding: 2px 10px;
      border: 1px solid var(--ink);
      border-radius: 999px;
      font-size: 12px;
      background:#fff;
      white-space:nowrap;
    }
    .checkbox-wrap{
      display:flex;
      gap:10px;
      align-items:center;
      padding:10px 12px;
      border:1px solid var(--line);
      border-radius: 12px;
      background:#fff;
    }
    .checkbox-wrap input[type="checkbox"]{
      width:auto;
      padding:0;
      margin:0;
    }

    /* ===== table ===== */
    table{ border-collapse: collapse; width: 100%; overflow:hidden; border-radius:12px; }
    th, td{
      border:1px solid var(--line);
      padding:10px;
      vertical-align: top;
      font-size: 13px;
    }
    th{
      background: var(--soft);
      text-align:left;
      font-size:12px;
      letter-spacing:0.2px;
    }

    /* ===== report box ===== */
    #admin_report_box{
      border:1px solid var(--line);
      border-radius: var(--radius);
      padding:12px 14px;
      min-height:80px;
      background:#fff;
      overflow:auto;
    }
    pre{
      margin:0;
      white-space: pre-wrap;
      word-break: break-word;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      font-size:12px;
      color:#101018;
    }

    /* ===== footer nav ===== */
    .footer-nav{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      margin-top:14px;
      flex-wrap:wrap;
    }
  </style>
</head>

<body>
  <div class="page">

    <!-- Brand Header (DEEM + LEXFile logos) -->
    <div class="brand-top">
      <img
        class="deem-mark"
        src="https://d11n7da8rpqbjy.cloudfront.net/novelcity/275892551725DEEM_LOGO.png"
        alt="DEEM"
      />
    </div>

    <div class="banner">
      <h1>LEXFile Control Panel</h1>
      <div class="meta">
        <div><span>Panel</span><br><strong>Admin + Operations</strong></div>
        <div><span>Powered by</span><br>
          <strong>
            <img
              src="https://d11n7da8rpqbjy.cloudfront.net/novelcity/28991486_1765249784gojlexfile-novel-v2.png"
              alt="LEXFile"
              style="height:18px; width:auto; vertical-align:middle; margin-right:6px;"
            />
            LEXFile
          </strong>
        </div>
        <div><span>Status</span><br><strong class="pill" id="admin_status_pill">Ready</strong></div>
        <div><span>Tip</span><br><strong>Use admin_secret once</strong></div>
      </div>
      <div class="hr"></div>
      <div class="muted">
        First time only: open this page with <span class="pill">?admin_secret=YOUR_ADMIN_SECRET</span>. It saves into your browser storage.
      </div>
      <div id="admin_status" class="muted" style="margin-top:8px;"></div>
    </div>

    <div class="panel">
      <strong>Operator Note:</strong> This panel is for management tasks, not customer-facing intake. Keep it inside the portal.
    </div>

    <!-- Run DEEM as admin -->
    <div class="card">
      <h2>Run DEEM as admin (toggle)</h2>
      <div class="row">
        <div class="checkbox-wrap">
          <input type="checkbox" id="admin_run_toggle" onchange="DEEM.adminToggleRunAsAdmin()">
          <label for="admin_run_toggle"><strong>Enable “Run DEEM as admin”</strong></label>
        </div>
      </div>
      <div class="muted">This controls whether DEEM runs bypass access checks when triggered as admin.</div>
      <div class="hr"></div>
      <pre id="admin_settings_box">(settings not loaded yet)</pre>
    </div>

    <!-- Runs List -->
    <div class="card">
      <div class="row" style="justify-content:space-between;">
        <h2 style="margin:0;">Runs List</h2>
        <button onclick="DEEM.adminLoadRuns()">Load recent runs</button>
      </div>

      <table>
        <thead>
          <tr>
            <th>run_id</th>
            <th>mechanism_id</th>
            <th>created_at</th>
            <th>deem_score</th>
            <th>category</th>
            <th>report</th>
          </tr>
        </thead>
        <tbody id="admin_runs_tbody">
          <tr><td colspan="6">Click load.</td></tr>
        </tbody>
      </table>

      <h3>Report</h3>
      <div id="admin_report_box"><em class="muted">No report loaded.</em></div>
    </div>

    <!-- User Lookup + Membership -->
    <div class="card">
      <h2>User Lookup + Membership</h2>

      <div class="row">
        <input id="admin_user_id" placeholder="user_id" />
        <button onclick="DEEM.adminLookupUser()">Lookup</button>
      </div>

      <div class="row">
        <select id="admin_membership_plan">
          <option value="none">none</option>
          <option value="full">full</option>
        </select>
        <button onclick="DEEM.adminSetMembership()">Set membership_plan</button>
      </div>

      <div class="hr"></div>
      <pre id="admin_user_box">(no user loaded)</pre>
    </div>

    <!-- KV Presence -->
    <div class="card">
      <div class="row" style="justify-content:space-between;">
        <h2 style="margin:0;">KV Presence</h2>
        <button onclick="DEEM.adminKvPresence()">Check KV keys</button>
      </div>
      <div class="hr"></div>
      <pre id="admin_kv_box">(not checked)</pre>
    </div>

    <!-- Footer -->
    <div class="footer-nav">
      <a href="index.html">Back to DEEM Intake</a>
      <span class="muted">DEEM • LEXFile • Novelopers</span>
    </div>

  </div>

  <script src="app.js"></script>

  <!-- Optional: tiny visual status sync (no dependencies, won't break anything) -->
  <script>
    (function(){
      const statusEl = document.getElementById("admin_status");
      const pillEl = document.getElementById("admin_status_pill");
      if(!statusEl || !pillEl) return;

      const observer = new MutationObserver(() => {
        const txt = (statusEl.textContent || "").trim();
        if(!txt) return;
        pillEl.textContent = txt.length > 18 ? "Updated" : txt;
      });

      observer.observe(statusEl, { childList:true, subtree:true, characterData:true });
    })();
  </script>
</body>
</html>
