const PoliciesScreen = () => {
  const policy = {
    id: "policy_payments_v3",
    rules: [
      { k: "daily_cap", op: "<=", v: "250 ETH", scope: "project" },
      { k: "recipient", op: "in", v: "allowlist_payees", scope: "env:prod" },
      { k: "value", op: "<=", v: "1 ETH", scope: "no-approval" },
      { k: "value", op: ">", v: "1 ETH", scope: "requires 1 approver" },
      { k: "chain", op: "in", v: "ETH, BASE, ARB", scope: "project" },
    ],
  };
  return (
    <>
      <div className="page-header">
        <div>
          <h1 className="page-title">Signing policies</h1>
          <p className="page-sub">Policies are evaluated before every signature. Failing requests are logged and can trigger approval workflows or webhook alerts.</p>
        </div>
        <div className="page-actions">
          <Btn variant="secondary" icon={<IRefresh size={13}/>}>Simulate</Btn>
          <Btn variant="primary" icon={<IPlus size={13}/>}>New policy</Btn>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 20 }}>
        <Card title="Active policies" bodyClass="pad-0">
          <div className="stack" style={{ gap: 0 }}>
            {[
              { n: "payments_v3", s: "active", c: "3 wallets · 18 rules" },
              { n: "treasury_ops", s: "active", c: "2 wallets · 6 rules" },
              { n: "test_sandbox", s: "active", c: "dev only · 2 rules" },
              { n: "legacy_v1", s: "revoked", c: "archived Apr 2" },
            ].map((p, i) => (
              <div key={p.n} style={{
                display: "flex", padding: "14px 18px",
                borderTop: i === 0 ? "none" : "1px solid var(--line)",
                background: i === 0 ? "var(--bg-sunken)" : "transparent",
                gap: 10, alignItems: "center",
                borderLeft: i === 0 ? "2px solid var(--accent)" : "2px solid transparent",
              }}>
                <IPolicy size={14} style={{ color: "var(--ink-3)" }}/>
                <div style={{ flex: 1 }}>
                  <div className="mono" style={{ fontSize: 12.5, fontWeight: 500 }}>{p.n}</div>
                  <div style={{ fontSize: 11.5, color: "var(--ink-3)" }}>{p.c}</div>
                </div>
                <Status kind={p.s}/>
              </div>
            ))}
          </div>
        </Card>

        <Card title="payments_v3" sub="Editor · YAML-compatible rules" actions={<Btn size="sm" variant="secondary" icon={<IDownload size={12}/>}>Export</Btn>}>
          <div className="code">
            <div className="code-header"><span className="mono" style={{ fontSize: 11.5 }}>payments_v3.yaml</span><span className="code-lang">YAML</span></div>
            <pre className="code-body" style={{ margin: 0 }}>
              <Highlight code={`rules:
  - daily_cap: 250 ETH        # across project
  - allow_recipients_in: allowlist_payees
  - require_approver_when: value > 1 ETH
  - chains: [ETH, BASE, ARB]
  - on_violation:
      log: audit
      webhook: alerts.policy
      action: block`}/>
            </pre>
          </div>
          <div className="row" style={{ marginTop: 14, gap: 8 }}>
            <Btn variant="secondary">Validate</Btn>
            <Btn variant="secondary" icon={<IRefresh size={12}/>}>Dry-run</Btn>
            <div style={{ flex: 1 }}/>
            <Btn variant="primary">Save draft</Btn>
          </div>
        </Card>
      </div>
    </>
  );
};

Object.assign(window, { PoliciesScreen });