---
import Layout from '../layouts/Layout.astro';
import { Icon } from 'astro-icon/components';
import { db } from '../db';
import { siteSettings, users } from '../db/schema';
import { eq, count } from 'drizzle-orm';

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

const userCountResult = await db.select({ count: count() }).from(users).get();
const isFirstUser = userCountResult ? userCountResult.count === 0 : true;

let registrationDisabled = false;
if (!isFirstUser) {
  const registrationSetting = await db.select()
    .from(siteSettings)
    .where(eq(siteSettings.key, 'registration_enabled'))
    .get();
  registrationDisabled = registrationSetting?.value !== 'true';
}

const error = Astro.url.searchParams.get('error');
const errorMessage =
  error === 'user_exists'
    ? 'An account with this email already exists'
    : error === 'missing_fields'
      ? 'Please fill in all fields'
      : error === 'registration_disabled'
        ? 'Registration is currently disabled'
        : null;
---

<Layout title="Sign Up - Chronus">
  <div class="flex justify-center items-center flex-1 bg-base-100">
    <div class="card card-border bg-base-100 w-full max-w-sm mx-4">
      <div class="card-body gap-0">
        <img src="/logo.webp" alt="Chronus" class="h-14 w-14 mx-auto mb-3" />
        <h2 class="text-2xl font-extrabold tracking-tight text-center">Create Account</h2>
        <p class="text-center text-base-content/60 text-sm mt-1 mb-5">Join Chronus to start tracking time</p>

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

        {registrationDisabled ? (
          <>
            <div class="alert alert-warning text-sm">
              <Icon name="heroicons:exclamation-triangle" class="w-5 h-5" />
              <span>Registration is currently disabled by the site administrator.</span>
            </div>
            <div class="divider text-xs"></div>
            <p class="text-center text-sm text-base-content/60">
              Already have an account?
              <a href="/login" class="link link-primary font-semibold">Sign in</a>
            </p>
          </>
        ) : (
          <>
            <form action="/api/auth/signup" method="POST" class="space-y-3">
              <fieldset class="fieldset">
                <legend class="fieldset-legend text-xs">Full Name</legend>
                <input
                  type="text"
                  id="name"
                  name="name"
                  placeholder="John Doe"
                  class="input w-full"
                  autocomplete="name"
                  required
                />
              </fieldset>

              <fieldset class="fieldset">
                <legend class="fieldset-legend text-xs">Email</legend>
                <input
                  type="email"
                  id="email"
                  name="email"
                  placeholder="your@email.com"
                  class="input w-full"
                  autocomplete="email"
                  required
                />
              </fieldset>

              <fieldset class="fieldset">
                <legend class="fieldset-legend text-xs">Password</legend>
                <input
                  type="password"
                  id="password"
                  name="password"
                  placeholder="Create a strong password"
                  class="input w-full"
                  autocomplete="new-password"
                  required
                />
              </fieldset>

              <button class="btn btn-primary w-full mt-4">Create Account</button>
            </form>

            <div class="divider text-xs">OR</div>

            <p class="text-center text-sm text-base-content/60">
              Already have an account?
              <a href="/login" class="link link-primary font-semibold">Sign in</a>
            </p>
          </>
        )}
      </div>
    </div>
  </div>
</Layout>