---
import BaseLayout from '../layouts/BaseLayout.astro';
import { getSessionUser } from '../lib/auth';
import { getUserByEmail } from '../lib/db';
import { verifyPassword, createSession } from '../lib/auth';

// Already logged in → home
const existing = getSessionUser(Astro.cookies);
if (existing) return Astro.redirect('/');

let error: string | null = null;

if (Astro.request.method === 'POST') {
  const data = await Astro.request.formData();
  const email    = String(data.get('email') ?? '').trim().toLowerCase();
  const password = String(data.get('password') ?? '');

  const user = getUserByEmail(email);
  if (!user || !user.active || !verifyPassword(password, user.password_hash)) {
    error = 'Email or password is incorrect.';
  } else {
    createSession(user.id, Astro.cookies);
    return Astro.redirect('/');
  }
}
---
<BaseLayout title="Sign in">
  <div class="page">
    <div class="card">
      <a href="/" class="wordmark-link" aria-label="Fenja AI home">
        <img src="/logo.svg" alt="Fenja AI" class="wordmark" />
      </a>

      <h1 class="headline-md title">Project Bifrost</h1>
      <p class="body-md subtitle">Sign in to continue.</p>

      {error && (
        <p class="error body-sm" role="alert">{error}</p>
      )}

      <form method="POST" class="form" novalidate>
        <div class="field">
          <label for="email" class="label-sm field-label">Email</label>
          <input
            type="email"
            id="email"
            name="email"
            class="input body-md"
            autocomplete="email"
            required
            autofocus
          />
        </div>

        <div class="field">
          <label for="password" class="label-sm field-label">Password</label>
          <input
            type="password"
            id="password"
            name="password"
            class="input body-md"
            autocomplete="current-password"
            required
          />
        </div>

        <button type="submit" class="btn-primary body-md">Sign in</button>
      </form>
    </div>
  </div>
</BaseLayout>

<style>
  .page {
    min-height: 100vh;
    background: var(--background);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
  }

  .card {
    width: 100%;
    max-width: 26rem;
    background: var(--surface-container-lowest);
    border-radius: var(--radius-lg);
    padding: var(--space-10) var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .wordmark-link {
    display: inline-block;
    margin-bottom: var(--space-2);
    border-bottom: none;
  }
  .wordmark-link:hover {
    border-bottom: none;
  }
  .wordmark {
    height: 22px;
    width: auto;
  }

  .title {
    font-family: var(--font-serif);
    letter-spacing: var(--tracking-snug);
    margin: 0;
  }

  .subtitle {
    color: var(--on-surface-variant);
    margin: 0 0 var(--space-2);
  }

  /* ── Error ──────────────────────────────────────────────────────── */
  .error {
    padding: var(--space-3) var(--space-4);
    background: rgba(185, 107, 88, 0.08);
    border-radius: var(--radius-sm);
    color: var(--pigment-terracotta);
    margin: 0;
  }

  /* ── Form ───────────────────────────────────────────────────────── */
  .form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin-top: var(--space-2);
  }

  .field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .field-label {
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--on-surface-variant);
  }

  .input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--background);
    border: var(--ghost-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: var(--text-body-md);
    color: var(--on-surface);
    outline: none;
    transition: border-color var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard);
    box-sizing: border-box;
  }
  .input:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 3px rgba(120, 95, 83, 0.12);
  }

  .btn-primary {
    display: block;
    width: 100%;
    padding: var(--space-3) var(--space-5);
    background: linear-gradient(180deg, var(--secondary) 0%, var(--secondary-dim) 100%);
    color: var(--on-secondary);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: var(--text-body-md);
    font-weight: 600;
    letter-spacing: var(--tracking-snug);
    cursor: pointer;
    transition: opacity var(--duration-fast) var(--ease-standard);
    margin-top: var(--space-2);
  }
  .btn-primary:hover {
    opacity: 0.9;
  }
  .btn-primary:active {
    opacity: 0.8;
  }
</style>
