// Blocklist scene — 1:1 with app.dipoli.io/blocklist.
// Title + description + underline tabs (IPs / Destinations) + table with
// staggered row-in animation. Checkbox column + sticky bulk bar removed
// per 2026-05-21 review — they were operator-only and felt out of place
// in a marketing showcase.

const BL = [
  { ip: '3.122.14.91',   reason: 'Phishing botnet C2',      src: 'orbit-18769', by: 'John Carter', added: '27/04/2026 10:59' },
  { ip: '185.156.72.10', reason: 'Velocity abuse · 24h',    src: 'acme-19104',  by: 'Maya Lin',    added: '24/04/2026 14:12' },
  { ip: '52.10.4.198',   reason: 'Datacenter ASN · TOR',    src: 'apex-19104',  by: 'John Carter', added: '21/04/2026 09:40' },
  { ip: '4.71.182.4',    reason: 'Sanctions match (OFAC)',  src: 'lyra-20126',  by: 'Sasha Wong',  added: '19/04/2026 17:08' },
  { ip: '187.190.4.21',  reason: 'Multi-account ring',      src: 'lyra-20126',  by: 'Maya Lin',    added: '15/04/2026 11:22' },
  { ip: '5.255.232.201', reason: 'Compound-rule trigger',   src: 'apex-19104',  by: 'John Carter', added: '12/04/2026 08:55' },
];

function BlocklistScene({ active }) {
  const [rows, setRows] = React.useState([]);
  React.useEffect(() => {
    if (!active) return;
    setRows([]);
    const timers = BL.map((r, i) =>
      setTimeout(() => setRows((prev) => [...prev, r]), i * 110)
    );
    return () => timers.forEach(clearTimeout);
  }, [active]);

  return (
    <React.Fragment>
      <MockNav active="bl" />
      <div className="mock-page">
        <h2 className="mock-h1">Blocklist</h2>
        <p className="bl-desc">
          Global blacklist (per tenant). Any future transaction matching an
          IP or destination wallet listed here is auto-blocked, across every
          client.
        </p>
        <div className="bl-tabs">
          <button className="act">IPs (<span>12</span>)</button>
          <button>Destinations (<span>7</span>)</button>
        </div>
        <div className="panel" style={{ padding: 0 }}>
          <table className="tx" style={{ margin: 0 }}>
            <thead>
              <tr>
                <th style={{ paddingLeft: 16 }} className="mono">IP address</th>
                <th>Reason</th>
                <th>Source client</th>
                <th>Added by</th>
                <th>Added</th>
                <th style={{ textAlign: 'right', paddingRight: 16, width: 36 }}></th>
              </tr>
            </thead>
            <tbody>
              {rows.map((r, i) => (
                <tr key={r.ip + i} className="row-anim">
                  <td className="mono" style={{ paddingLeft: 16 }}>{r.ip}</td>
                  <td style={{ color: 'var(--ink-mute)' }}>{r.reason}</td>
                  <td className="mono" style={{ color: 'var(--ink-mute)' }}>{r.src}</td>
                  <td style={{ color: 'var(--ink-mute)' }}>{r.by}</td>
                  <td className="mono" style={{ color: 'var(--ink-mute)' }}>{r.added}</td>
                  <td style={{ textAlign: 'right', paddingRight: 16 }}>
                    <button title="Remove from blacklist" aria-label={`Remove ${r.ip} from blacklist`} style={{ background: 'transparent', border: 0, color: 'var(--ink-mute)', padding: 6, borderRadius: 6, cursor: 'pointer' }}>
                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="14" height="14" aria-hidden="true"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-2 14a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2L5 6"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </React.Fragment>
  );
}