/* global React, Ic, Chip, ScoreBar, KPI, Panel, AiBand, Av */

const SUSPECTS = [
  { id: "FS-2401", carrier: "Velocity Express LLC", mc: "MC-991884", risk: 96, status: "BLOCKED",
    signals: ["MC registered 28 days ago", "Email domain registered 14 days ago", "Voice match: prior scammer profile #PSC-44 (94%)", "Banking change request 2h after booking"],
    target: "KW-48218 · $4,200 · LA → Atlanta", action: "BLOCKED · Real carrier notified",
    when: "12:18 today" },
  { id: "FS-2400", carrier: "Apex Premier Trans", mc: "MC-882144", risk: 78, status: "QUARANTINE",
    signals: ["Rate con came from gmail (not corp domain)", "Driver phone matches OOS-flagged driver 3mo ago", "Insurance COI font/layout differs from issuer template"],
    target: "KW-48215 · $1,450 · LB → Phoenix", action: "Held · Awaiting manual review",
    when: "10:42 today" },
  { id: "FS-2399", carrier: "Cypress Cargo Inc",   mc: "MC-882211", risk: 71, status: "FLAGGED",
    signals: ["Vehicle OOS rate 11.2% (industry median 6%)", "2 broker complaints in last 12 months (Carrier411)", "Lane bid 22% under market"],
    target: "Onboarding application",   action: "Manual review required",
    when: "08:14 today" },
  { id: "FS-2398", carrier: "Northern Star Transit",mc: "MC-771029", risk: 42, status: "MONITORED",
    signals: ["MC 6 months old", "Asked to change banking after first load", "Otherwise clean"],
    target: "KW-48201 · delivered ok",   action: "Watch · 2nd-load test passed",
    when: "Yesterday" },
];

function FraudShield() {
  const [sel, setSel] = React.useState(0);
  const cur = SUSPECTS[sel];
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="page-title">Fraud Shield</div>
          <div className="page-sub">Double-broker · identity · voice-clone · phishing — detected pre-dispatch</div>
        </div>
        <div className="page-actions">
          <span className="chip danger"><span className="dot pulse" /> 2 ACTIVE THREATS</span>
          <button className="btn ghost">Watchlist</button>
          <button className="btn">Industry intel feed</button>
        </div>
      </div>

      <div className="grid cols-4 pad" style={{ paddingBottom: 0 }}>
        <KPI label="Blocked This Month" value="14" delta="6" spark={[2,2,4,5,6,8,9,10,11,12,13,14]} />
        <KPI label="Loss Prevented" value="$184k" delta="22%" spark={[20,40,60,80,100,120,140,150,160,170,180,184]} />
        <KPI label="False Positive Rate" value="2.1%" delta="0.4pt" deltaKind="down" spark={[5,5,4.5,4,3.8,3.5,3,2.8,2.5,2.3,2.1,2.1]} />
        <KPI label="Avg Detect Time" value="38s" delta="14s" deltaKind="down" spark={[120,100,84,72,60,52,48,45,42,40,39,38]} />
      </div>

      <AiBand
        confidence={96}
        text={<><b>Velocity Express LLC</b> (MC-991884) — caller voice matches prior scammer profile #PSC-44 with 94% confidence. Auto-blocked from KW-48218. Real carrier (Velocity Trans Inc) notified.</>}
        actions={<>
          <button className="btn ghost sm">Review</button>
          <button className="btn primary sm">Confirm block</button>
        </>}
      />

      <div style={{ display: "grid", gridTemplateColumns: "1fr 420px", minHeight: 540 }}>
        <table className="tbl">
          <thead>
            <tr><th>Risk</th><th>Carrier</th><th>MC</th><th>Status</th><th>Target</th><th>Detected</th><th>Top Signal</th></tr>
          </thead>
          <tbody>
            {SUSPECTS.map((s, i) => (
              <tr key={s.id} className={sel === i ? "selected" : ""} onClick={() => setSel(i)}>
                <td style={{ minWidth: 110 }}>
                  <ScoreBar value={s.risk} color={s.risk > 80 ? "var(--danger)" : s.risk > 60 ? "var(--warn)" : "var(--accent)"} />
                </td>
                <td>{s.carrier}</td>
                <td className="mono dim" style={{ fontSize: 11 }}>{s.mc}</td>
                <td><Chip kind={s.status === "BLOCKED" ? "danger" : s.status === "QUARANTINE" ? "warn" : s.status === "FLAGGED" ? "warn" : ""}>{s.status}</Chip></td>
                <td style={{ fontSize: 12 }}>{s.target}</td>
                <td className="mono dim" style={{ fontSize: 11 }}>{s.when}</td>
                <td style={{ fontSize: 11, color: "var(--text-mid)", maxWidth: 260, overflow: "hidden", textOverflow: "ellipsis" }}>{s.signals[0]}</td>
              </tr>
            ))}
          </tbody>
        </table>

        <aside className="inspector">
          <div style={{ padding: 14, borderBottom: "1px solid var(--line)" }}>
            <Chip kind={cur.status === "BLOCKED" ? "danger" : "warn"}>{cur.status}</Chip>
            <div style={{ marginTop: 8, fontSize: 14, fontWeight: 600 }}>{cur.carrier}</div>
            <div className="mono dim" style={{ fontSize: 11 }}>{cur.mc} · risk {cur.risk}/100</div>
          </div>

          <div style={{ padding: 14, borderBottom: "1px solid var(--line)" }}>
            <div className="h-rule">SIGNALS DETECTED</div>
            <div style={{ marginTop: 10, fontSize: 12, display: "flex", flexDirection: "column", gap: 6 }}>
              {cur.signals.map((s, i) => (
                <div key={i} style={{ display: "flex", gap: 8, padding: 8, background: "var(--danger-bg)", borderLeft: "2px solid var(--danger)", borderRadius: 2 }}>
                  <span style={{ color: "var(--danger)" }}>!</span>
                  <span style={{ flex: 1, lineHeight: 1.5 }}>{s}</span>
                </div>
              ))}
            </div>
          </div>

          <div style={{ padding: 14, borderBottom: "1px solid var(--line)" }}>
            <div className="h-rule">VOICEPRINT MATCH</div>
            <div style={{ marginTop: 10 }}>
              <VoiceprintViz />
              <div style={{ marginTop: 6, fontSize: 11, color: "var(--text-mid)" }}>
                94% match to <span className="mono">PSC-44</span> · scammer flagged by TIA on 04/12. Cross-broker network confirms 3 prior attempts.
              </div>
            </div>
          </div>

          <div style={{ padding: 14, borderBottom: "1px solid var(--line)" }}>
            <div className="h-rule">TARGET</div>
            <div style={{ marginTop: 8, fontSize: 12 }}>{cur.target}</div>
            <div style={{ marginTop: 4, fontSize: 11, color: "var(--text-dim)" }}>Action: {cur.action}</div>
          </div>

          <div style={{ padding: 14 }}>
            <div style={{ display: "flex", gap: 6 }}>
              <button className="btn ghost" style={{ flex: 1 }}>Whitelist</button>
              <button className="btn" style={{ flex: 1 }}>Investigate</button>
              <button className="btn danger" style={{ flex: 1.5 }}>Permanently block</button>
            </div>
          </div>
        </aside>
      </div>
    </div>
  );
}

function VoiceprintViz() {
  // two stacked waveforms with shared peaks to suggest match
  return (
    <svg viewBox="0 0 280 80" style={{ width: "100%", height: 80, background: "var(--bg-2)", border: "1px solid var(--line)", borderRadius: 4 }}>
      <text x="6" y="12" fontSize="8" fontFamily="var(--font-mono)" fill="var(--text-dim)" letterSpacing="1">CALLER (NOW)</text>
      <g transform="translate(6,18)">
        {Array.from({ length: 40 }).map((_, i) => {
          const h = 4 + Math.sin(i * 0.7) * 14 + Math.cos(i * 0.3) * 6;
          return <rect key={i} x={i * 7} y={20 - h / 2} width="3" height={h} fill="var(--accent)" />;
        })}
      </g>
      <text x="6" y="60" fontSize="8" fontFamily="var(--font-mono)" fill="var(--text-dim)" letterSpacing="1">PSC-44 (KNOWN)</text>
      <g transform="translate(6,66)">
        {Array.from({ length: 40 }).map((_, i) => {
          const h = 4 + Math.sin(i * 0.7) * 14 + Math.cos(i * 0.3) * 6 + (Math.sin(i) * 1);
          return <rect key={i} x={i * 7} y={10 - h / 2} width="3" height={h} fill="var(--danger)" />;
        })}
      </g>
      <text x="220" y="44" fontSize="14" fontFamily="var(--font-mono)" fill="var(--danger)" fontWeight="600">94%</text>
    </svg>
  );
}

window.FraudShield = FraudShield;