// SanctionsQueue — second admin screen, showing the queue + the dual-approval flow inline.

const SANCTIONS = [
  { id: "S-2026-0331", tenant: "Bangkok Beauty", actor: "Khun Mali Wattana", match: "OFAC SDN · partial", confidence: 0.62, sla: "1h 24m", state: "awaiting_review" },
  { id: "S-2026-0330", tenant: "Hat Yai Fresh",  actor: "Khun Anan Phan",   match: "EU CFSP · partial", confidence: 0.48, sla: "3h 02m", state: "awaiting_review" },
  { id: "S-2026-0329", tenant: "Sanya Traders",  actor: "Liu Han",          match: "UK HMT · low",      confidence: 0.21, sla: "—",       state: "auto_cleared" },
  { id: "S-2026-0328", tenant: "Krua Phuket",    actor: "Khun Surin K.",    match: "OFAC SDN · partial", confidence: 0.71, sla: "—",       state: "awaiting_second" },
  { id: "S-2026-0327", tenant: "Lanna Tea",      actor: "Khun Kanya M.",    match: "—",                  confidence: 0.04, sla: "—",       state: "cleared" },
];

const STATE = {
  awaiting_review:  { label: "Awaiting review",   tone: "warning" },
  awaiting_second:  { label: "Awaiting second",   tone: "info" },
  auto_cleared:     { label: "Auto-cleared",      tone: "success" },
  cleared:          { label: "Cleared",           tone: "success" },
  confirmed_hit:    { label: "Confirmed hit",     tone: "danger" },
};

function SanctionsQueue() {
  return (
    <div>
      <div className="page-head">
        <h1>Sanctions queue</h1>
        <span className="count">5 in last 7 days · 2 awaiting review</span>
        <div className="right">
          <button className="btn secondary"><i className="ti ti-download"></i>Export</button>
          <button className="btn secondary"><i className="ti ti-refresh"></i>Refresh</button>
        </div>
      </div>

      <div className="metric-strip">
        <div className="metric">
          <div className="lbl">Awaiting review</div>
          <div className="val">2</div>
          <div className="foot"><span className="up"><i className="ti ti-trending-down" style={{fontSize:14}}></i> −1</span> vs yesterday</div>
        </div>
        <div className="metric">
          <div className="lbl">SLA breach risk</div>
          <div className="val">1</div>
          <div className="foot"><span style={{color:"var(--color-text-on-warning)"}}>Bangkok Beauty · 1h 24m</span></div>
        </div>
        <div className="metric">
          <div className="lbl">Hits this week</div>
          <div className="val">5</div>
          <div className="foot">3 cleared · 1 hit · 1 pending</div>
        </div>
        <div className="metric">
          <div className="lbl">Auto-clear rate</div>
          <div className="val">94.2%</div>
          <div className="foot"><span className="up"><i className="ti ti-trending-up" style={{fontSize:14}}></i> +0.4pp</span> vs last week</div>
        </div>
      </div>

      <div className="table-card">
        <table>
          <thead>
            <tr>
              <th style={{width:130}}>Screen ID</th>
              <th>Tenant</th>
              <th>Subject</th>
              <th>Match</th>
              <th style={{width:120, textAlign:"right"}}>Confidence</th>
              <th style={{width:100}}>SLA</th>
              <th style={{width:160}}>State</th>
              <th style={{width:36}}></th>
            </tr>
          </thead>
          <tbody>
            {SANCTIONS.map((s, i) => (
              <tr key={s.id} className={i === 0 ? "selected" : ""}>
                <td className="data-mono">{s.id}</td>
                <td>{s.tenant}</td>
                <td>{s.actor}</td>
                <td><span className="body-sm" style={{color:"var(--on-surface-variant)"}}>{s.match}</span></td>
                <td className="num">{(s.confidence*100).toFixed(0)}%</td>
                <td className="data-mono">{s.sla}</td>
                <td><span className={"pill " + STATE[s.state].tone}>{STATE[s.state].label}</span></td>
                <td><span className="kebab"><i className="ti ti-dots-vertical"></i></span></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

window.SanctionsQueue = SanctionsQueue;