<script setup>
// Вход — SSO gnexus-auth целиком на сервере (/auth/login -> /auth/callback).
// Никакой работы с токенами в UI: сервер сам строит PKCE, проверяет роль
// и возвращает только уже отрезанного админа.
import { GnButton } from "gnexus-ui-kit/vue";

function startSso() {
  window.location.href = "/auth/login";
}
</script>

<template>
  <div class="login-page">
    <div class="login-panel">
      <h2 class="login-title">Synapse Admin</h2>
      <p class="login-note">
        Вход через единую систему gnexus-auth. Доступ — только роли admin и выше.
      </p>
      <GnButton variant="primary" icon="ph-sign-in" @click="startSso">
        Войти через gnexus-auth
      </GnButton>
    </div>
  </div>
</template>

<style scoped>
.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--gn-space-4);
}
.login-panel {
  background: var(--gn-surface-panel-muted);
  border: var(--gn-border-width-base) var(--gn-border-style-base) var(--gn-border-color-muted);
  border-left-width: var(--gn-border-width-accent);
  padding: var(--gn-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--gn-space-4);
  max-width: 420px;
  width: 100%;
}
.login-title {
  font-size: var(--gn-font-size-lg);
  font-weight: var(--gn-font-weight-bold);
  text-transform: uppercase;
}
.login-note {
  font-size: var(--gn-font-size-xs);
  color: var(--gn-color-text-medium);
}
</style>