// Lighter-weight surfaces: KYT transactions, auto-approved log, settings stubs.

function KYTTransactions({ auditorMode }) {
  const txs = [
    { ts: "2026-05-19 09:02:11", hash: "0x7c2f…a18b", from: "Helios Maritime",   to: "0x7AaE…4c0d", amt: 2_450_000, asset: "USDT", chain: "Ethereum", score: 82, label: "Sanctioned-adjacent", state: "alert" },
    { ts: "2026-05-19 08:14:55", hash: "0xa49b…1102", from: "Konstantin Petrov", to: "5n2k…q8Px",   amt: 38000,   asset: "USDC", chain: "Solana",   score: 28, label: "Clean", state: "ok" },
    { ts: "2026-05-19 07:21:09", hash: "0xb02e…f44e", from: "Northern Crest",    to: "0x14F8…ee32", amt: 168_000, asset: "USDC", chain: "Ethereum", score: 71, label: "Mixer exposure (1-hop)", state: "review" },
    { ts: "2026-05-19 06:42:33", hash: "0xff21…7c0c", from: "Cayman Cove VII",   to: "0x5C11…02A4", amt: 980_000, asset: "USDC", chain: "Ethereum", score: 11, label: "Clean", state: "ok" },
    { ts: "2026-05-19 05:55:18", hash: "0x77ab…9991", from: "Mariana Salgado",   to: "0x9F4c…a18B", amt: 164_200, asset: "USDC", chain: "Base",     score: 18, label: "Clean", state: "ok" },
    { ts: "2026-05-18 22:01:09", hash: "0x310a…bbcc", from: "Andean Capital",    to: "0xAA21…9ab1", amt: 4_400_000, asset: "USDT", chain: "Ethereum", score: 64, label: "High-volume counterparty", state: "review" },
  ];

  return (
    <>
      <div className="app-subheader">
        <div className="subheader-title">KYT Transactions</div>
        <div className="subheader-meta">Chainalysis · last sync 12s ago · 3 active alerts</div>
        <div className="subheader-spacer" />
        <Btn variant="outlined" icon={IDownload}>Export</Btn>
      </div>

      <div className="fbar">
        <FilterChip label="State" value="Alert + Review" active />
        <FilterChip label="Chain" value="Any" />
        <FilterChip label="Min score" value="50" active />
        <span className="fbar-spacer" />
        <span className="fbar-result"><b>3</b> alerts · <b>2</b> review · <b>1,247</b> clean</span>
      </div>

      <div className="tbl-wrap">
        <div className="tbl-scroll">
          <table className="tbl">
            <thead>
              <tr>
                <th className="sticky-first" style={{paddingLeft:16}}>Timestamp</th>
                <th>Tx Hash</th>
                <th>From</th>
                <th>Destination</th>
                <th className="numeric">Amount</th>
                <th>Chain</th>
                <th className="numeric">Score</th>
                <th>Label</th>
                <th className="col-narrow"></th>
              </tr>
            </thead>
            <tbody>
              {txs.map((t, i) => (
                <tr key={i} className={t.state === "alert" ? "is-row-open" : ""}>
                  <td className="sticky-first mono" style={{paddingLeft:16, fontSize:11.5}}>{t.ts}</td>
                  <td><Mono>{t.hash}</Mono></td>
                  <td className="fg-1" style={{fontWeight:500}}>{t.from}</td>
                  <td><Mono>{t.to}</Mono></td>
                  <td className="numeric mono">{formatUsd(t.amt)} <span className="fg-4" style={{fontSize:10.5}}>{t.asset}</span></td>
                  <td><ChainGlyph chain={t.chain} /> <span style={{marginLeft:6}}>{t.chain}</span></td>
                  <td className="numeric"><RiskScore value={t.score} /></td>
                  <td>{t.state === "alert" ? <StatusPill status="rejected" label={t.label} />
                       : t.state === "review" ? <StatusPill status="pending" label={t.label} />
                       : <span className="fg-3">{t.label}</span>}</td>
                  <td className="col-narrow">
                    <div className="row-actions">
                      <ActionIcon icon={IEye} label="View trace" />
                      <ActionIcon icon={IExternal} label="Open in Chainalysis" />
                      {t.state !== "ok" && !auditorMode && <ActionIcon icon={IBolt} label="Freeze" danger />}
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </>
  );
}

function AutoApprovedLog() {
  const rows = window.withdrawals.filter(w => w.tier === "low").concat([
    { id: "WD-09A06", user: "Ana Lucía Ramírez", country: "CO", amount: 800,  asset: "USDC", chain: "Solana",   dest: "Hk71…02vQ", destRisk:"low", kycTier:"Tier-1", amlBand:"Low", ts:"2026-05-19T03:14:00Z" },
    { id: "WD-09A05", user: "Daniel Ortiz",      country: "PA", amount: 250,  asset: "USDC", chain: "Base",     dest: "0x081d…aa9f", destRisk:"low", kycTier:"Tier-1", amlBand:"Low", ts:"2026-05-19T02:01:00Z" },
    { id: "WD-09A04", user: "Sofia Lindqvist",   country: "PT", amount: 1450, asset: "USDC", chain: "Ethereum", dest: "0x91cd…aa28", destRisk:"low", kycTier:"Tier-1", amlBand:"Low", ts:"2026-05-19T01:42:00Z" },
    { id: "WD-09A03", user: "Isabela Furtado",   country: "BR", amount: 990,  asset: "USDT", chain: "Polygon",  dest: "0xCC22…0901", destRisk:"low", kycTier:"Tier-1", amlBand:"Low", ts:"2026-05-19T00:18:00Z" },
  ]);
  return (
    <>
      <div className="app-subheader">
        <div className="subheader-title">Auto-Approved Log</div>
        <div className="subheader-meta">{rows.length} approvals today · all &lt; $5,000</div>
        <div className="subheader-spacer" />
        <Btn variant="outlined" icon={IDownload}>Export</Btn>
      </div>
      <div className="audit-banner" style={{background:"var(--accent-soft)", color:"var(--accent-fg)", borderColor:"var(--accent-soft)"}}>
        <ICheckCirc size={14} />
        Auto-approval log. Every row was approved by policy <Mono dim>policy.wd.auto_low_tier</Mono>. No action required.
      </div>
      <div className="tbl-wrap">
        <div className="tbl-scroll">
          <table className="tbl">
            <thead>
              <tr>
                <th className="sticky-first" style={{paddingLeft:16}}>ID</th>
                <th>User</th>
                <th className="numeric">Amount</th>
                <th>Destination</th>
                <th>Chain</th>
                <th>Time</th>
              </tr>
            </thead>
            <tbody>
              {rows.map(w => (
                <tr key={w.id}>
                  <td className="sticky-first mono" style={{paddingLeft:16}}>{w.id}</td>
                  <td><Flag code={w.country} /> <span style={{marginLeft:8}}>{w.user}</span></td>
                  <td className="numeric mono">{formatUsd(w.amount)}</td>
                  <td><Mono>{w.dest}</Mono></td>
                  <td><ChainGlyph chain={w.chain} /> <span style={{marginLeft:6}}>{w.chain}</span></td>
                  <td className="mono fg-3" style={{fontSize:11}}>{formatTime(w.ts)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </>
  );
}

function SettingsThresholds({ auditorMode }) {
  return (
    <>
      <div className="app-subheader">
        <div className="subheader-title">Risk-Tier Thresholds</div>
        <div className="subheader-meta">Three-tier withdrawal model</div>
        <div className="subheader-spacer" />
        <Btn variant="outlined">Discard</Btn>
        <Btn variant="filled" tone="accent" disabled={auditorMode}>Save changes</Btn>
      </div>
      <div className="page-scroll">
        <div style={{padding:24, maxWidth:720, display:"flex", flexDirection:"column", gap:14}}>
          {[
            { tier:"Low",    range:"< $5,000",      control:"Auto-approved · logged · not surfaced", tone:"green" },
            { tier:"Medium", range:"$5,000 – $25,000", control:"One-click reviewer approval", tone:"amber" },
            { tier:"High",   range:"> $25,000",     control:"Compliance officer + EDD attestation", tone:"red" },
          ].map(t => (
            <Card key={t.tier} title={`${t.tier} tier`} hint={t.range}
              actions={<StatusPill tone={t.tone} label={t.control} />}>
              <div style={{display:"grid", gridTemplateColumns:"160px 1fr", gap:12, alignItems:"center", fontSize:12}}>
                <span className="fg-4">Lower bound (USD)</span>
                <input className="sp-reason" style={{minHeight:0, height:30}} defaultValue={t.tier==="Low"?"0":t.tier==="Medium"?"5000":"25000"} disabled={auditorMode} />
                <span className="fg-4">Upper bound (USD)</span>
                <input className="sp-reason" style={{minHeight:0, height:30}} defaultValue={t.tier==="Low"?"4999":t.tier==="Medium"?"24999":"∞"} disabled={auditorMode} />
                <span className="fg-4">Control</span>
                <span className="fg-2">{t.control}</span>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </>
  );
}

function GenericStub({ title, hint }) {
  return (
    <>
      <div className="app-subheader">
        <div className="subheader-title">{title}</div>
        <div className="subheader-meta">{hint}</div>
      </div>
      <div className="page-scroll" style={{display:"grid", placeItems:"center"}}>
        <Empty title="Surface stub" hint="This surface lives in the Information Architecture but isn't part of this exploration."
          cta={<Btn variant="outlined">View IA →</Btn>} />
      </div>
    </>
  );
}

Object.assign(window, { KYTTransactions, AutoApprovedLog, SettingsThresholds, GenericStub });