const OidcScreen = ({ openModal, tweaks }) => (
  <>
    <div className="page-header">
      <div>
        <h1 className="page-title">OIDC clients</h1>
        <p className="page-sub">Register the apps that use <b>Sign in with Swop</b> — your hosted identity surface. Each client gets its own redirect, scopes, and token lifetimes.</p>
      </div>
      <div className="page-actions">
        <Btn variant="primary" icon={<IPlus size={13}/>}>New client</Btn>
      </div>
    </div>

    <div className="grid-auto" style={{ marginBottom: 24 }}>
      {OIDC_CLIENTS.map(c => (
        <Card key={c.id}>
          <div className="row" style={{ justifyContent: "space-between", marginBottom: 10 }}>
            <div style={{ width: 32, height: 32, borderRadius: 8, background: "var(--bg-sunken)", border: "1px solid var(--line)", display: "grid", placeItems: "center", color: "var(--ink-2)" }}><IShield size={15}/></div>
            <Status kind="active"/>
          </div>
          <div style={{ fontSize: 14.5, fontWeight: 500, letterSpacing: "-0.01em" }}>{c.name}</div>
          <div className="mono" style={{ fontSize: 11, color: "var(--ink-4)", marginTop: 2 }}>{c.id}</div>
          <div className="hr"/>
          <div style={{ fontSize: 12, color: "var(--ink-3)" }}>Type</div>
          <div className="mono" style={{ fontSize: 12, marginBottom: 8 }}>{c.type}</div>
          <div style={{ fontSize: 12, color: "var(--ink-3)" }}>Redirect</div>
          <div className="mono" style={{ fontSize: 11.5, color: "var(--ink-2)", wordBreak: "break-all" }}>{c.redirect}</div>
          <div className="row" style={{ marginTop: 12, gap: 8 }}>
            <Btn size="sm" variant="secondary" style={{ flex: 1 }}>Configure</Btn>
            <Btn size="sm" variant="ghost" icon={<IExternal size={12}/>}>Preview</Btn>
          </div>
        </Card>
      ))}
    </div>

    <Card title="Auth methods" sub="What your end-users see on the hosted flow. Reorder to change the default." actions={<Btn size="sm" variant="secondary">Preview flow</Btn>}>
      <AuthMethodCards layout={tweaks.authCardLayout}/>
    </Card>
  </>
);

const AuthMethodCards = ({ layout }) => {
  const methods = [
    { k: "passkey", label: "Passkey", desc: "Face ID, Touch ID, security keys", icon: <IPasskey size={18}/>, tag: "Recommended", on: true },
    { k: "email", label: "Email", desc: "One-time code · passwordless", icon: <IMail size={18}/>, on: true },
    { k: "sso", label: "SSO · OIDC", desc: "Google, Microsoft, Okta", icon: <IGlobe size={18}/>, on: true },
    { k: "wallet", label: "External wallet", desc: "MetaMask, WalletConnect, Coinbase", icon: <IWallet size={18}/>, on: false },
  ];
  if (layout === "list") {
    return (
      <div className="stack" style={{ gap: 6 }}>
        {methods.map(m => (
          <div key={m.k} className="row" style={{ padding: "12px 14px", background: "var(--bg-sunken)", borderRadius: 10, border: "1px solid var(--line)" }}>
            <div style={{ width: 32, height: 32, borderRadius: 8, background: "var(--panel)", border: "1px solid var(--line)", display: "grid", placeItems: "center", color: "var(--ink-2)" }}>{m.icon}</div>
            <div style={{ flex: 1 }}>
              <div className="row" style={{ gap: 8 }}>
                <span style={{ fontSize: 13.5, fontWeight: 500 }}>{m.label}</span>
                {m.tag && <span style={{ fontSize: 10.5, padding: "1px 6px", background: "var(--accent-soft)", color: "var(--accent-ink)", borderRadius: 999, letterSpacing: "0.03em" }}>{m.tag}</span>}
              </div>
              <div style={{ fontSize: 12, color: "var(--ink-3)" }}>{m.desc}</div>
            </div>
            <Toggle on={m.on} onChange={() => {}}/>
          </div>
        ))}
      </div>
    );
  }
  if (layout === "inline") {
    return (
      <div className="row" style={{ flexWrap: "wrap", gap: 8 }}>
        {methods.map(m => (
          <div key={m.k} className="row" style={{ gap: 8, padding: "8px 12px", borderRadius: 999, background: m.on ? "var(--accent-soft)" : "var(--bg-sunken)", color: m.on ? "var(--accent-ink)" : "var(--ink-3)", border: `1px solid ${m.on ? "color-mix(in oklch, var(--accent) 25%, transparent)" : "var(--line)"}`, cursor: "pointer" }}>
            {m.icon}
            <span style={{ fontSize: 13, fontWeight: 500 }}>{m.label}</span>
          </div>
        ))}
      </div>
    );
  }
  // stacked grid
  return (
    <div className="grid-auto">
      {methods.map(m => (
        <div key={m.k} style={{
          padding: 16, background: "var(--panel)", border: `1px solid ${m.on ? "color-mix(in oklch, var(--accent) 30%, var(--line))" : "var(--line)"}`,
          borderRadius: 12, position: "relative",
        }}>
          <div className="row" style={{ justifyContent: "space-between", marginBottom: 10 }}>
            <div style={{ width: 36, height: 36, borderRadius: 10, background: m.on ? "var(--accent-soft)" : "var(--bg-sunken)", color: m.on ? "var(--accent-ink)" : "var(--ink-3)", display: "grid", placeItems: "center" }}>{m.icon}</div>
            <Toggle on={m.on} onChange={() => {}}/>
          </div>
          <div className="row" style={{ gap: 8 }}>
            <span style={{ fontSize: 14, fontWeight: 500 }}>{m.label}</span>
            {m.tag && <span style={{ fontSize: 10.5, padding: "1px 6px", background: "var(--accent-soft)", color: "var(--accent-ink)", borderRadius: 999 }}>{m.tag}</span>}
          </div>
          <div style={{ fontSize: 12.5, color: "var(--ink-3)", marginTop: 3 }}>{m.desc}</div>
        </div>
      ))}
    </div>
  );
};

Object.assign(window, { OidcScreen, AuthMethodCards });