const SigningScreen = ({ openModal }) => (
  <>
    <div className="page-header">
      <div>
        <h1 className="page-title">Signing queue</h1>
        <p className="page-sub">Requests awaiting approval, expiry, or execution. Wallet actions are separated into sign, review, broadcast — one decision per step.</p>
      </div>
      <div className="page-actions">
        <Btn variant="secondary" icon={<IRefresh size={13}/>}>Refresh</Btn>
      </div>
    </div>

    <Card bodyClass="pad-0">
      <table className="table">
        <thead>
          <tr>
            <th>Request</th>
            <th>Wallet</th>
            <th>Chain</th>
            <th>Amount</th>
            <th>Policy</th>
            <th>Expires</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {[
            { id: "sig_01K2Q4", wlt: "wlt_7bf24xA", chain: "ETH", amt: "1.20 ETH", policy: "needs 1 approver", exp: "in 4m 12s", action: true },
            { id: "sig_01K2Q3", wlt: "wlt_0Qm18vC", chain: "SOL", amt: "2.00 SOL", policy: "auto-approve", exp: "in 9m", action: false },
            { id: "sig_01K2Q2", wlt: "wlt_MmE92Qs", chain: "BASE", amt: "0.08 ETH", policy: "auto-approve", exp: "executed", action: false },
          ].map(r => (
            <tr key={r.id}>
              <td><MonoId>{r.id}</MonoId></td>
              <td className="mono" style={{ fontSize: 12 }}>{r.wlt}</td>
              <td><Chain chain={r.chain}/></td>
              <td className="mono" style={{ fontSize: 12.5 }}>{r.amt}</td>
              <td style={{ fontSize: 12.5 }}>{r.policy}</td>
              <td className="mono" style={{ fontSize: 12, color: r.action ? "var(--warn)" : "var(--ink-3)" }}>{r.exp}</td>
              <td>
                {r.action
                  ? <Btn size="sm" variant="primary" onClick={() => openModal("sign")}>Review</Btn>
                  : <Btn size="sm" variant="ghost">View</Btn>}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </Card>
  </>
);

Object.assign(window, { SigningScreen });
