// terminal-receipts.jsx — Trade history with compute_proof per row.
// TradeXchange spin on standard "trade history" — every cleared trade carries
// a real receipt: backend, ms, dispatcher commit, Base block, Merkle root.

function ReceiptsScreen({ onOpenDetail }) {
  const receipts = React.useMemo(() => recentReceipts(20), []);
  const [filter, setFilter] = React.useState('all');

  const filtered = filter === 'cleared'  ? receipts.filter(r => r.cleared)
                  : filter === 'refused' ? receipts.filter(r => !r.cleared) : receipts;

  const cleared = receipts.filter(r => r.cleared).length;
  const refused = receipts.length - cleared;

  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflowY: 'auto' }} className="tx-scroll">
      <TopBar title="Receipts" subtitle={`${receipts.length} trades · ${cleared} cleared · ${refused} refused`}/>

      {/* Summary strip */}
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
        margin: '14px 16px 0', background: TM.surfaceHi,
        border: `1px solid ${TM.border}`, borderRadius: 10,
      }}>
        {[
          { k: 'CLEARED',  v: cleared,  c: TM.green },
          { k: 'REFUSED',  v: refused,  c: TM.red },
          { k: 'COMPUTE',  v: 'cusv',   c: TM.cyan },
        ].map((it, i) => (
          <div key={it.k} style={{
            padding: '14px 8px', textAlign: 'center',
            borderLeft: i === 0 ? 'none' : `1px solid ${TM.border}`,
          }}>
            <div style={{ fontFamily: GM, fontSize: 9.5, color: TM.muted, letterSpacing: 1, fontWeight: 600 }}>{it.k}</div>
            <div style={{
              marginTop: 4, fontFamily: GM, fontSize: 20, fontWeight: 600,
              color: it.c, letterSpacing: -0.3,
            }}>{it.v}</div>
          </div>
        ))}
      </div>

      <div style={{ padding: '14px 16px 8px' }}>
        <Segmented value={filter} onChange={setFilter} options={[
          { key: 'all',     label: 'All' },
          { key: 'cleared', label: 'Cleared' },
          { key: 'refused', label: 'Refused' },
        ]}/>
      </div>

      {filtered.map(r => <ReceiptRow key={r.i} r={r} onClick={() => onOpenDetail && onOpenDetail(r)}/>)}

      <div style={{ height: 24 }}/>
    </div>
  );
}

function ReceiptRow({ r, onClick }) {
  const color = r.cleared ? TM.green : TM.red;
  const sideColor = r.side === 'BUY' ? TM.green : TM.orange;
  return (
    <button onClick={onClick} style={{
      width: '100%', textAlign: 'left',
      padding: '14px 16px', borderBottom: `1px solid ${TM.border}`,
      display: 'flex', flexDirection: 'column', gap: 8,
    }}>
      {/* Row 1 — sym · qty · side · verdict */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 8, alignItems: 'baseline' }}>
        <span style={{ display: 'inline-flex', alignItems: 'baseline', gap: 8 }}>
          <span style={{ fontFamily: GE, fontSize: 15, fontWeight: 600, color: TM.text, letterSpacing: -0.2 }}>{r.sym}</span>
          <span style={{ fontFamily: GM, fontSize: 11, color: sideColor, letterSpacing: 0.4 }}>{r.side}</span>
          <span style={{ fontFamily: GM, fontSize: 11.5, color: TM.muted }}>
            {r.qty} {r.sym === 'BTC' || r.sym === 'ETH' ? '' : 'sh'} @ ${r.price}
          </span>
        </span>
        <Pill color={color} border={color} bg={r.cleared ? TM.greenSoft : TM.redSoft}>
          {r.cleared ? '✓ CLEARED' : '✗ REFUSED'}
        </Pill>
      </div>

      {/* Row 2 — agreement · compute · base */}
      <div style={{
        display: 'flex', gap: 10, flexWrap: 'wrap',
        fontFamily: GM, fontSize: 10.5, color: TM.muted, letterSpacing: 0.4,
      }}>
        <span>{r.yesVotes}/25 verifiers</span>
        <span>·</span>
        <span style={{ color: TM.cyan }}>cusv · {r.computeMs}ms</span>
        <span>·</span>
        <span>block #{r.block.toLocaleString()}</span>
        <span>·</span>
        <span>{r.time} ET</span>
      </div>

      {/* Compute proof strip — TradeXchange-specific spin */}
      {r.cleared && (
        <div style={{
          display: 'flex', alignItems: 'center', gap: 10,
          padding: '6px 10px', background: TM.cyanSoft,
          border: `1px solid rgba(35,200,233,0.25)`, borderRadius: 4,
        }}>
          <span style={{ fontFamily: GM, fontSize: 9.5, color: TM.cyan, letterSpacing: 1, fontWeight: 600 }}>PROOF</span>
          <span style={{ fontFamily: GM, fontSize: 10.5, color: TM.text, letterSpacing: 0.3 }}>
            dispatcher@5e504bfd · 0x{r.proof}
          </span>
          <span style={{ marginLeft: 'auto', fontFamily: GM, fontSize: 9.5, color: TM.cyan, letterSpacing: 0.6 }}>
            REPLAY ↗
          </span>
        </div>
      )}
    </button>
  );
}

Object.assign(window, { ReceiptsScreen, ReceiptRow });