---
import Layout from '../layouts/Layout.astro';
import { Icon } from 'astro-icon/components';

if (Astro.locals.user) {
  return Astro.redirect('/dashboard');
}

const error = Astro.url.searchParams.get('error');
const errorMessage =
  error === 'invalid_credentials'
    ? 'Invalid email or password'
    : error === 'missing_fields'
      ? 'Please fill in all fields'
      : null;
---

<Layout title="Login - Chronus">
  <div class="flex justify-center items-center flex-1 bg-base-100">
    <div class="card bg-base-100 shadow-2xl w-full max-w-md mx-4">
      <div class="card-body">
        <img src="/logo.webp" alt="Chronus" class="h-16 w-16 mx-auto mb-4" />
        <h2 class="text-3xl font-bold text-center mb-2">Welcome Back</h2>
        <p class="text-center text-base-content/60 mb-6">Sign in to continue to Chronus</p>

        {errorMessage && (
          <div role="alert" class="alert alert-error mb-4">
            <Icon name="heroicons:exclamation-circle" class="w-6 h-6" />
            <span>{errorMessage}</span>
          </div>
        )}

        <form action="/api/auth/login" method="POST" class="space-y-4">
          <label class="form-control">
            <div class="label">
              <span class="label-text font-medium">Email</span>
            </div>
            <input
              type="email"
              name="email"
              placeholder="your@email.com"
              class="input input-bordered w-full"
              required
            />
          </label>

          <label class="form-control">
            <div class="label">
              <span class="label-text font-medium">Password</span>
            </div>
            <input
              type="password"
              name="password"
              placeholder="Enter your password"
              class="input input-bordered w-full"
              required
            />
          </label>

          <button class="btn btn-primary w-full mt-6">Sign In</button>
        </form>

        <div class="divider">OR</div>

        <div class="text-center">
          <p class="text-sm text-base-content/70">
            Don't have an account?
            <a href="/signup" class="link link-primary font-semibold">Create one</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</Layout>