// API keys, OIDC, Wallets, Audit screens

const KeysScreen = ({ openModal, env }) => {
  const [filter, setFilter] = useStateS("all");
  const keys = API_KEYS.filter(k => k.env === env || env === "dev" && k.env === "dev" || filter !== "all");
  const shown = API_KEYS.filter(k => filter === "all" ? true : k.status === filter);
  return (
    <>
      <div className="page-header">
        <div>
          <h1 className="page-title">API keys</h1>
          <p className="page-sub">Server and test credentials for this project. Keys are scoped to an environment — rotating one in prod does not affect staging.</p>
        </div>
        <div className="page-actions">
          <Btn variant="secondary" icon={<IDownload size={13}/>}>Export scopes</Btn>
          <Btn variant="primary" icon={<IPlus size={13}/>} onClick={() => openModal("newkey")}>New key</Btn>
        </div>
      </div>

      <div className="row" style={{ justifyContent: "space-between", marginBottom: 16 }}>
        <Segmented value={filter} onChange={setFilter} options={[
          { value: "all", label: `All · ${API_KEYS.length}` },
          { value: "active", label: `Active · ${API_KEYS.filter(k => k.status === "active").length}` },
          { value: "pending", label: "Pending" },
          { value: "revoked", label: "Revoked" },
        ]}/>
        <div className="row" style={{ gap: 8 }}>
          <div className="search-trigger" style={{ minWidth: 220, height: 32 }}>
            <ISearch size={13}/>
            <span>Filter keys…</span>
          </div>
        </div>
      </div>

      <Card bodyClass="pad-0">
        <table className="table">
          <thead>
            <tr>
              <th>Label</th>
              <th>Prefix</th>
              <th>Env</th>
              <th>Scopes</th>
              <th>Last used</th>
              <th>Created</th>
              <th>Status</th>
              <th style={{ width: 40 }}></th>
            </tr>
          </thead>
          <tbody>
            {shown.map(k => (
              <tr key={k.id}>
                <td>
                  <div style={{ fontSize: 13, fontWeight: 500 }}>{k.label}</div>
                  <div className="mono" style={{ fontSize: 11, color: "var(--ink-4)" }}>{k.id}</div>
                </td>
                <td><MonoId>{k.prefix}…</MonoId></td>
                <td>
                  <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
                    <span style={{ width: 6, height: 6, borderRadius: "50%", background: `var(--env-${k.env})` }}/>
                    <span className="mono" style={{ fontSize: 11.5, textTransform: "uppercase" }}>{k.env}</span>
                  </span>
                </td>
                <td>
                  <div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
                    {k.scopes.slice(0, 2).map(s => (
                      <span key={s} className="mono" style={{ fontSize: 11, padding: "1px 6px", background: "var(--bg-sunken)", borderRadius: 3, border: "1px solid var(--line)" }}>{s}</span>
                    ))}
                    {k.scopes.length > 2 && <span className="mono" style={{ fontSize: 11, color: "var(--ink-3)" }}>+{k.scopes.length - 2}</span>}
                  </div>
                </td>
                <td style={{ fontSize: 12, color: "var(--ink-3)" }}>{k.lastUsed}</td>
                <td style={{ fontSize: 12, color: "var(--ink-3)" }}>{k.created}</td>
                <td><Status kind={k.status}/></td>
                <td>
                  <button className="icon-btn" onClick={() => k.status === "active" ? openModal("rotate") : null}><IDots size={14}/></button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>

      <div style={{ marginTop: 24, padding: 16, border: "1px dashed var(--line-strong)", borderRadius: 10, display: "flex", gap: 16, alignItems: "flex-start" }}>
        <div style={{ width: 32, height: 32, borderRadius: 8, background: "var(--accent-soft)", color: "var(--accent-ink)", display: "grid", placeItems: "center" }}><IFingerprint size={15}/></div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 14, fontWeight: 500, marginBottom: 3 }}>Passkey step-up is required for production keys</div>
          <div style={{ fontSize: 12.5, color: "var(--ink-3)", lineHeight: 1.5 }}>
            Any reveal, rotate, or revoke of a <span className="mono">sk_live</span> key triggers a hardware-backed step-up. Set per-owner policies in <a style={{ color: "var(--accent-ink)", textDecoration: "underline", textUnderlineOffset: 3 }}>Settings → Safety</a>.
          </div>
        </div>
        <Btn variant="secondary" size="sm">Configure</Btn>
      </div>
    </>
  );
};

Object.assign(window, { KeysScreen });