---
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';
}
---

<Layout title="Sign Up - Chronus">
  <div class="flex justify-center items-center min-h-screen bg-gradient-to-br from-base-100 via-base-200 to-base-300">
    <div class="card bg-base-100 shadow-2xl w-full max-w-md mx-4">
      <div class="card-body">
        <img src="/src/assets/logo.webp" alt="Chronus" class="h-16 w-16 mx-auto mb-4" />
        <h2 class="text-3xl font-bold text-center mb-2">Create Account</h2>
        <p class="text-center text-base-content/60 mb-6">Join Chronus to start tracking time</p>
        
        {registrationDisabled ? (
          <>
            <div class="alert alert-warning">
              <Icon name="heroicons:exclamation-triangle" class="w-6 h-6" />
              <span>Registration is currently disabled by the site administrator.</span>
            </div>
            <div class="divider"></div>
            <div class="text-center">
              <p class="text-sm text-base-content/70">
                Already have an account? 
                <a href="/login" class="link link-primary font-semibold">Sign in</a>
              </p>
            </div>
          </>
        ) : (
          <>
            <form action="/api/auth/signup" method="POST" class="space-y-4">
              <label class="form-control">
                <div class="label">
                  <span class="label-text font-medium">Full Name</span>
                </div>
                <input 
                  type="text" 
                  name="name" 
                  placeholder="John Doe" 
                  class="input input-bordered w-full" 
                  required 
                />
              </label>
              
              <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="Create a strong password" 
                  class="input input-bordered w-full" 
                  required 
                />
              </label>
              
              <button class="btn btn-primary w-full mt-6">Create Account</button>
            </form>
            
            <div class="divider">OR</div>
            
            <div class="text-center">
              <p class="text-sm text-base-content/70">
                Already have an account? 
                <a href="/login" class="link link-primary font-semibold">Sign in</a>
              </p>
            </div>
          </>
        )}
      </div>
    </div>
  </div>
</Layout>