<template>
  <div class="mx-auto max-w-sm space-y-6">
    <div class="space-y-2 text-center">
      <h1 class="text-3xl font-bold">Create Account</h1>
      <p class="text-muted-foreground">
        Enter your information to create an account
      </p>
    </div>
    
    <form @submit.prevent="handleSubmit" class="space-y-4">
      <div class="grid grid-cols-2 gap-4">
        <div class="space-y-2">
          <Label for="first_name">First Name</Label>
          <Input
            id="first_name"
            v-model="form.first_name"
            placeholder="John"
            required
            :disabled="isLoading"
          />
        </div>
        <div class="space-y-2">
          <Label for="last_name">Last Name</Label>
          <Input
            id="last_name"
            v-model="form.last_name"
            placeholder="Doe"
            required
            :disabled="isLoading"
          />
        </div>
      </div>
      
      <div class="space-y-2">
        <Label for="email">Email</Label>
        <Input
          id="email"
          v-model="form.email"
          type="email"
          placeholder="john.doe@example.com"
          required
          :disabled="isLoading"
        />
      </div>
      
      <div class="space-y-2">
        <Label for="password">Password</Label>
        <Input
          id="password"
          v-model="form.password"
          type="password"
          placeholder="Create a password"
          required
          :disabled="isLoading"
        />
      </div>
      
      <div class="space-y-2">
        <Label for="confirm_password">Confirm Password</Label>
        <Input
          id="confirm_password"
          v-model="confirmPassword"
          type="password"
          placeholder="Confirm your password"
          required
          :disabled="isLoading"
        />
      </div>
      
      <Button type="submit" class="w-full" :disabled="isLoading || !isFormValid">
        <Loader2 v-if="isLoading" class="mr-2 h-4 w-4 animate-spin" />
        Create Account
      </Button>
      
      <div v-if="error" class="text-sm text-destructive text-center">
        {{ error }}
      </div>
      
      <div v-if="successMessage" class="text-sm text-green-600 text-center">
        {{ successMessage }}
      </div>
    </form>
    
    <div class="text-center text-sm">
      Already have an account?
      <router-link to="/login" class="underline underline-offset-4 hover:text-primary">
        Sign in
      </router-link>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Loader2 } from 'lucide-vue-next'
import { useAuthStore } from '@/stores/auth'
import type { RegisterData } from '@/types/auth'

const router = useRouter()
const authStore = useAuthStore()

const form = reactive<RegisterData>({
  email: '',
  password: '',
  first_name: '',
  last_name: ''
})

const confirmPassword = ref('')
const successMessage = ref('')

const isLoading = computed(() => authStore.isLoading)
const error = computed(() => authStore.error)

const isFormValid = computed(() => {
  return form.email && 
         form.password && 
         form.first_name && 
         form.last_name && 
         form.password === confirmPassword.value
})

const handleSubmit = async () => {
  if (form.password !== confirmPassword.value) {
    authStore.error = 'Passwords do not match'
    return
  }
  
  try {
    authStore.clearError()
    await authStore.register(form)
    
    successMessage.value = 'Account created successfully! Please wait for admin approval before signing in.'
    
    // Redirect to login after a delay
    setTimeout(() => {
      router.push('/login')
    }, 3000)
  } catch (err) {
    // Error is handled by the store
    console.error('Registration error:', err)
  }
}
</script>