---
export const prerender = false;
import '../../styles/global.css';
---

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Admin — Connexion</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Space+Grotesk:wght@500;700&family=JetBrains+Mono:wght@400&display=swap"
      rel="stylesheet"
    />
  </head>
  <body class="aurora-bg min-h-screen flex items-center justify-center px-4">
    <form
      id="login-form"
      class="card-neon w-full max-w-sm"
      style="border-color: rgba(0, 240, 255, 0.3)"
    >
      <p class="font-mono text-xs text-[color:var(--color-cyan)] mb-3 uppercase tracking-widest">
        // Admin access
      </p>
      <h1 class="font-display text-2xl font-bold mb-6">
        <span class="text-[color:var(--color-text)]">Authentification</span>
      </h1>

      <label class="block mb-4">
        <span class="text-xs font-mono uppercase tracking-wider text-[color:var(--color-text-muted)]"
          >Mot de passe</span
        >
        <input
          name="password"
          type="password"
          required
          autocomplete="current-password"
          class="mt-2 w-full bg-[color:var(--color-bg)] border border-[color:var(--color-border)] focus:border-[color:var(--color-cyan)] focus:outline-none focus:ring-1 focus:ring-[color:var(--color-cyan)] px-4 py-2 rounded text-[color:var(--color-text)] font-mono"
        />
      </label>

      <p id="error-msg" class="text-sm text-[color:var(--color-magenta)] mb-4 hidden font-mono">
        Mot de passe invalide
      </p>

      <button type="submit" class="btn-primary w-full justify-center"> Entrer </button>
    </form>

    <script>
      const form = document.getElementById('login-form') as HTMLFormElement;
      const err = document.getElementById('error-msg') as HTMLElement;
      form.addEventListener('submit', async (e) => {
        e.preventDefault();
        err.classList.add('hidden');
        const data = new FormData(form);
        const password = data.get('password') as string;
        const res = await fetch('/api/auth/login', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ password }),
        });
        if (res.ok) {
          window.location.href = '/admin';
        } else {
          err.classList.remove('hidden');
        }
      });
    </script>
  </body>
</html>
