// Transactions scene — 1:1 with the SOC console at app.dipoli.io/transactions.
// Toolbar (title + count + clear filters + export CSV) → 6-col filter bar
// → sortable 8-col table with staggered row-in animation → pager footer.

const TX_FULL = [
  { when: '02/05/2026 17:10:09', id: 'tx-clean-001',     client: 'acme-19104',  amt: '250.50 USDT',   ip: '8.8.8.8',          score: 71, rules: 6, dec: 'BLOCK'   },
  { when: '02/05/2026 16:42:31', id: 'tx-1776854127',    client: 'acme-19104',  amt: '250.00 USDT',   ip: '185.156.72.10',    score: 53, rules: 4, dec: 'REVIEW'  },
  { when: '02/05/2026 12:14:08', id: 'tx-huge-1776847',  client: 'acme-19104',  amt: '50 000 USDT',   ip: '185.156.72.10',    score: 49, rules: 3, dec: 'REVIEW'  },
  { when: '02/05/2026 12:14:07', id: 'tx-warmup-7775',   client: 'acme-19104',  amt: '50.00 USDT',    ip: '185.156.72.10',    score: 56, rules: 4, dec: 'REVIEW'  },
  { when: '02/05/2026 11:08:52', id: 'tx-ls2-r10',       client: 'orbit-18769', amt: '3 472.00 USDT', ip: '3.122.14.91',      score: 3,  rules: 0, dec: 'APPROVE' },
  { when: '02/05/2026 11:08:48', id: 'tx-ls2-r9',        client: 'orbit-18769', amt: '57.20 USDT',    ip: '52.10.4.198',      score: 0,  rules: 0, dec: 'APPROVE' },
  { when: '02/05/2026 11:08:43', id: 'tx-ls2-r8',        client: 'orbit-18769', amt: '2 435.13 USDT', ip: '34.224.18.7',      score: 1,  rules: 0, dec: 'APPROVE' },
  { when: '02/05/2026 11:08:32', id: 'tx-ls2-r7',        client: 'lyra-20126',  amt: '87.75 USDT',    ip: '4.71.182.4',       score: 0,  rules: 0, dec: 'APPROVE' },
  { when: '02/05/2026 09:53:21', id: 'tx-eu-9d40b1',     client: 'apex-19104',  amt: '1 480.00 USDT', ip: '5.255.232.201',    score: 28, rules: 1, dec: 'APPROVE' },
  { when: '02/05/2026 09:14:18', id: 'tx-eu-44ac9c',     client: 'apex-19104',  amt: '14 220 USDT',   ip: '5.255.232.201',    score: 64, rules: 2, dec: 'REVIEW'  },
  { when: '02/05/2026 08:48:02', id: 'tx-mx-7780af',     client: 'lyra-20126',  amt: '180.00 USDT',   ip: '187.190.4.21',     score: 18, rules: 1, dec: 'APPROVE' },
  { when: '02/05/2026 08:30:11', id: 'tx-mx-7780ac',     client: 'lyra-20126',  amt: '9 800 USDT',    ip: '187.190.4.21',     score: 76, rules: 5, dec: 'BLOCK'   },
];

function TransactionsScene({ active }) {
  // Rows fade-in staggered when the scene becomes active. We reset to
  // an empty list then push each row on a setTimeout — matches the
  // legacy startTxScene() rhythm (90 ms cadence).
  const [rows, setRows] = React.useState([]);
  React.useEffect(() => {
    if (!active) return;
    setRows([]);
    const timers = TX_FULL.map((t, i) =>
      setTimeout(() => setRows((prev) => [...prev, t]), i * 90)
    );
    return () => timers.forEach(clearTimeout);
  }, [active]);

  const total = useTween(31065, { format: (n) => Math.round(n).toLocaleString('en-US').replace(/,/g, ' ') });

  return (
    <React.Fragment>
      <MockNav active="tx" />
      <div className="mock-page">
        <div className="tx-toolbar">
          <div>
            <h2 className="mock-h1" style={{ marginBottom: 4 }}>Transactions</h2>
            <div className="tx-count"><strong>{total}</strong> evaluations</div>
          </div>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
            <a className="tx-clear">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
              Clear filters
            </a>
            <a className="tx-export">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
              Export CSV
            </a>
          </div>
        </div>

        <div className="filter-bar tx-filter">
          <div className="cs2">
            <label>Client ID</label>
            <div className="ipt with-icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
              <span className="ph">e.g. merchant_main</span>
            </div>
          </div>
          <div>
            <label>Decision</label>
            <div className="ipt sel"><span>All</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="6 9 12 15 18 9"/></svg></div>
          </div>
          <div>
            <label>Min score</label>
            <div className="ipt mono"><span className="ph">0</span></div>
          </div>
          <div>
            <label>Max score</label>
            <div className="ipt mono"><span className="ph">100</span></div>
          </div>
          <div>
            <label>IP address</label>
            <div className="ipt mono"><span className="ph">1.2.3.4</span></div>
          </div>
          <div className="cs3">
            <label>Destination wallet</label>
            <div className="ipt mono"><span className="ph">0x… or bc1…</span></div>
          </div>
          <label className="cs3 auto-bl">
            <span className="cb"></span>
            Only auto-blocked (sanctions, darknet, compound rules)
          </label>
        </div>

        <div className="panel" style={{ padding: 0 }}>
          <table className="tx" style={{ margin: 0 }}>
            <thead>
              <tr>
                <th style={{ paddingLeft: 16 }}>
                  <span className="sortable active">When
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="6 9 12 15 18 9"/></svg>
                  </span>
                </th>
                <th className="mono">TX ID</th>
                <th>Client</th>
                <th style={{ textAlign: 'right' }}>
                  <span className="sortable" style={{ justifyContent: 'flex-end' }}>Amount
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="7 15 12 20 17 15"/><polyline points="7 9 12 4 17 9"/></svg>
                  </span>
                </th>
                <th className="mono">IP</th>
                <th style={{ textAlign: 'center' }}>
                  <span className="sortable" style={{ justifyContent: 'center' }}>Score
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="7 15 12 20 17 15"/><polyline points="7 9 12 4 17 9"/></svg>
                  </span>
                </th>
                <th style={{ textAlign: 'center' }}>Rules</th>
                <th style={{ textAlign: 'center', paddingRight: 16 }}>Decision</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((t, i) => (
                <tr key={t.id + i} className="row-anim">
                  <td className="mono" style={{ paddingLeft: 16, color: 'var(--ink-mute)' }}>{t.when}</td>
                  <td className="mono">{t.id}</td>
                  <td>{t.client}</td>
                  <td className="mono" style={{ textAlign: 'right' }}>{t.amt}</td>
                  <td className="mono">{t.ip}</td>
                  <td style={{ textAlign: 'center' }}><span className={scoreClass(t.score)}>{t.score}</span></td>
                  <td className="mono" style={{ textAlign: 'center', color: 'var(--ink-mute)' }}>{t.rules}</td>
                  <td style={{ textAlign: 'center', paddingRight: 16 }}>
                    <span className={'badge ' + decisionClass(t.dec)}>{t.dec}</span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
          <div className="pager">
            <span>Page <span className="mono">1</span> of <span className="mono">622</span> · 50 per page</span>
            <div className="pager-btns">
              <button className="pg disabled">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="15 18 9 12 15 6"/></svg>Prev
              </button>
              <button className="pg">
                Next<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="9 18 15 12 9 6"/></svg>
              </button>
            </div>
          </div>
        </div>
      </div>
    </React.Fragment>
  );
}