// AdminSignIn.jsx — SSO sign-in. Internal/mock chrome removed per scope;
// the SSO-protected note stays because it's a real security affordance.

const SSOButton = ({ icon, label, onClick }) => (
  <button type="button" onClick={onClick} style={{
    all: "unset", cursor: "pointer", boxSizing: "border-box",
    display: "flex", alignItems: "center", gap: 14, width: "100%",
    padding: "0 20px", height: 56, borderRadius: 12,
    border: "1px solid var(--border-strong)", background: "var(--surface)",
    font: '500 15px/20px "Inter", sans-serif', color: "var(--fg)",
    transition: "border-color var(--motion-fast), background var(--motion-fast)",
  }}
  onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--fg)"; e.currentTarget.style.background = "var(--bg-alt)"; }}
  onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--border-strong)"; e.currentTarget.style.background = "var(--surface)"; }}>
    <span style={{ color: "var(--fg-muted)" }}><Icon name={icon} size={20} stroke={1.5}/></span>
    {label}
  </button>
);

const AdminSignIn = ({ onSignIn }) => (
  <div className="signin-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", minHeight: "100vh", background: "var(--surface)" }}>
    {/* Left panel */}
    <div className="signin-left" style={{ background: "var(--bg-alt)", display: "flex", flexDirection: "column", justifyContent: "center", padding: "64px 72px", gap: 28 }}>
      <Mark size={44} />
      <div>
        <h1 style={{ margin: 0, font: '700 40px/44px "Figtree", sans-serif', letterSpacing: "-0.018em", color: "var(--fg)" }}>Ascend admin</h1>
        <p style={{ margin: "20px 0 0", maxWidth: 440, font: '400 17px/27px "Inter", sans-serif', color: "var(--fg-muted)" }}>
          Manage credit facilities, monitor margin accounts, oversee compliance, and administer the Ascend protocol — all from one place.
        </p>
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 8, font: '500 13px/18px "Inter", sans-serif', color: "var(--fg-subtle)" }}>
        <Icon name="lock" size={15} stroke={1.6}/> SSO protected · operator access only
      </div>
    </div>

    {/* Right panel */}
    <div className="signin-right" style={{ display: "flex", flexDirection: "column", justifyContent: "center", padding: "64px 72px" }}>
      <div style={{ width: "100%", maxWidth: 420, marginInline: "auto" }}>
        <h2 style={{ margin: 0, font: '700 28px/32px "Figtree", sans-serif', letterSpacing: "-0.012em", color: "var(--fg)" }}>Sign in</h2>
        <p style={{ margin: "8px 0 28px", font: '400 15px/22px "Inter", sans-serif', color: "var(--fg-subtle)" }}>
          Use your organization's SSO to access the admin panel.
        </p>
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          <SSOButton icon="okta" label="Continue with Okta" onClick={onSignIn} />
          <SSOButton icon="google" label="Continue with Google" onClick={onSignIn} />
          <SSOButton icon="microsoft" label="Continue with Microsoft" onClick={onSignIn} />
        </div>
        <p style={{ margin: "24px 0 0", font: '400 13px/20px "Inter", sans-serif', color: "var(--fg-faint)" }}>
          Click any provider to sign in. This is a demo environment.
        </p>
      </div>
    </div>
  </div>
);

window.AdminSignIn = AdminSignIn;