// auth.jsx — Merion Totem login (gate). window.Login()
// Login EXCLUSIVAMENTE via Merion ID (OIDC/SSO): um único botão que redireciona
// para /auth/merion/login. Sem formulário de e-mail/senha (regra dura: o totem
// não tem login local).

/* compass watermark for the brand panel (same path as the Wordmark "O") */
function TotemCompassMark({ size = 560, color = "rgba(0,255,212,.16)", style }) {
  return (
    <svg width={size} height={size} viewBox="376 0 102 138" fill="none" style={style} aria-hidden="true">
      <path d="M478.166 0L457.248 27.758C469.929 37.0418 478.166 52.0568 478.166 69C478.166 96.5445 456.395 118.993 429.158 120.005C427.889 120.053 426.625 120.257 425.427 120.679L376.308 138L397.224 110.241C384.545 100.957 376.308 85.9427 376.308 69C376.308 41.4555 398.079 19.0071 425.315 17.9946C426.585 17.9474 427.849 17.7431 429.047 17.3206L478.166 0ZM427.237 38.375C410.361 38.375 396.679 52.0865 396.679 69C396.679 85.9135 410.361 99.625 427.237 99.625C444.113 99.625 457.795 85.9135 457.795 69C457.795 52.0865 444.113 38.375 427.237 38.375Z" fill={color} />
    </svg>
  );
}

/* brand panel (left) — deep gunmetal + cyan signature */
function TotemBrandPanel() {
  return (
    <aside className="split-brand">
      <div className="bp-glow" />
      <div className="bp-rings" />
      <TotemCompassMark size={560} color="rgba(0,255,212,.16)"
        style={{ position: "absolute", right: -120, top: "50%", transform: "translateY(-50%)", zIndex: 1 }} />
      <div className="bp-wordmark"><Wordmark height={22} /></div>
      <div className="bp-body">
        <div className="bp-kicker">Totem · Digital Signage</div>
        <h2 className="bp-tagline">Sua rede de telas, sob controle.</h2>
        <p className="bp-text">Gerencie totens, mídias e playlists em tempo real. Cada tela conectada, cada conteúdo no lugar certo — com a clareza Merion.</p>
      </div>
      <div className="bp-foot"><Icon name="compass" />Menos hype, mais resultado</div>
    </aside>
  );
}

/* ---- Login (gate) — único caminho: Merion ID ---- */
function Login() {
  const params = typeof window !== "undefined" ? new URLSearchParams(window.location.search) : null;
  const authError = params && params.get("auth_error");

  const enter = () => { window.location.href = "/auth/merion/login"; };

  return (
    <div className="totem-auth-root auth-root" data-theme="dark" data-direction="glow" data-neon="cyan">
      <div className="split-shell">
        <TotemBrandPanel />
        <div className="split-form">
          <div className="auth-screen">
            <div className="auth-head">
              <div className="auth-kicker">Acesso · Painel</div>
              <h1 className="auth-title">Entrar no Merion Totem</h1>
              <p className="auth-sub">A autenticação é feita pelo Merion ID, o login único da Merion.</p>
            </div>
            <div className="auth-form">
              {authError && <Alert variant="destructive" title="Falha no acesso">{authError}</Alert>}

              <div className="auth-actions">
                <Button variant="brand" className="btn-xl" onClick={enter}>
                  <Icon name="compass" />Entrar com Merion ID
                </Button>
              </div>

              <p className="auth-sub" style={{ marginTop: 4 }}>
                Você será redirecionado para o <strong>Merion ID</strong> e voltará autenticado.
                Não há cadastro aqui — contas são criadas pelo administrador.
              </p>
            </div>
            <div className="auth-trust"><Icon name="lock" />Conexão segura · SSO Merion</div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Login });