---
import Layout from '@/layouts/Layout.astro';
import BrandMark from '@/components/BrandMark.astro';

const url = Astro.url;
const errorParam = url.searchParams.get('error');
const errorMsg = errorParam === 'dominio'
  ? 'Debes iniciar sesión con tu correo institucional @uabc.edu.mx'
  : errorParam === 'oauth'
    ? 'No se pudo completar la autenticación con Google. Inténtalo de nuevo.'
    : null;

const googleAuthUrl = '/api/auth/signin';
---
<Layout title="Iniciar sesión — LabPréstamos UABC">
  <main id="main" class="min-h-screen grid place-items-center p-4">
    <div class="w-full max-w-md">
      <div class="text-center mb-8">
        <div class="inline-grid place-items-center w-16 h-16 rounded-[12px] bg-linen text-verde-institucional p-4 mb-4 motion-safe:animate-[fadein_.4s_ease-out]" aria-hidden="true">
          <BrandMark class="w-full h-full" />
        </div>
        <h1>Sistema de Préstamos</h1>
        <p class="text-sm mt-2 text-graphite/70">Laboratorio de Sistemas Computacionales · UABC</p>
      </div>

      <div class="card motion-safe:animate-[fadein_.5s_ease-out]">
        <h2 class="text-xl mb-1">Inicia sesión</h2>
        <p class="text-sm mb-6 text-graphite/70">Accede con tu cuenta institucional.</p>

        <a href={googleAuthUrl} class="btn btn-primary w-full">
          <svg width="18" height="18" viewBox="0 0 48 48" aria-hidden="true" focusable="false">
            <path fill="currentColor" d="M44.5 20H24v8.5h11.7C34.4 33.4 29.7 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c2.9 0 5.5 1 7.6 2.7l6.2-6.2C33.8 5.1 29.2 3 24 3 12.4 3 3 12.4 3 24s9.4 21 21 21c11 0 20-8 20-21 0-1.4-.1-2.7-.5-4z"/>
          </svg>
          Continuar con Google
        </a>

        {errorMsg && (
          <div role="alert" class="mt-4 rounded-[8px] p-4 text-sm bg-linen border border-negro-institucional text-graphite">
            {errorMsg}
          </div>
        )}
      </div>

      <p class="text-center text-xs mt-6 text-graphite/70">
        Acceso exclusivo con correo institucional <strong class="text-graphite font-medium">@uabc.edu.mx</strong>
      </p>
    </div>
  </main>
</Layout>

<style is:global>
  @keyframes fadein {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
</style>