<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

import { useAuthStore } from '@/stores/auth'

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

const username = ref('')
const email = ref('')
const password = ref('')
const confirmPassword = ref('')
const localError = ref<string | null>(null)

async function handleSubmit() {
  localError.value = null

  if (password.value !== confirmPassword.value) {
    localError.value = 'Passwords do not match'
    return
  }

  if (password.value.length < 8) {
    localError.value = 'Password must be at least 8 characters'
    return
  }

  const success = await authStore.register(
    username.value,
    email.value,
    password.value
  )
  if (success) {
    router.push('/campaign')
  }
}
</script>

<template>
  <div class="container mx-auto px-4 py-16">
    <div class="max-w-md mx-auto">
      <h1 class="text-3xl font-bold text-center mb-8">
        Create Account
      </h1>

      <form
        class="space-y-6"
        @submit.prevent="handleSubmit"
      >
        <div
          v-if="localError || authStore.error"
          class="bg-error/20 text-error p-4 rounded"
        >
          {{ localError || authStore.error }}
        </div>

        <div>
          <label
            for="username"
            class="block text-sm font-medium mb-2"
          >
            Username
          </label>
          <input
            id="username"
            v-model="username"
            type="text"
            required
            class="w-full px-4 py-2 bg-surface rounded border border-gray-600 focus:border-primary focus:outline-none"
          >
        </div>

        <div>
          <label
            for="email"
            class="block text-sm font-medium mb-2"
          >
            Email
          </label>
          <input
            id="email"
            v-model="email"
            type="email"
            required
            class="w-full px-4 py-2 bg-surface rounded border border-gray-600 focus:border-primary focus:outline-none"
          >
        </div>

        <div>
          <label
            for="password"
            class="block text-sm font-medium mb-2"
          >
            Password
          </label>
          <input
            id="password"
            v-model="password"
            type="password"
            required
            class="w-full px-4 py-2 bg-surface rounded border border-gray-600 focus:border-primary focus:outline-none"
          >
        </div>

        <div>
          <label
            for="confirmPassword"
            class="block text-sm font-medium mb-2"
          >
            Confirm Password
          </label>
          <input
            id="confirmPassword"
            v-model="confirmPassword"
            type="password"
            required
            class="w-full px-4 py-2 bg-surface rounded border border-gray-600 focus:border-primary focus:outline-none"
          >
        </div>

        <button
          type="submit"
          :disabled="authStore.isLoading"
          class="btn btn-primary w-full py-3"
        >
          {{ authStore.isLoading ? 'Creating account...' : 'Create Account' }}
        </button>
      </form>

      <p class="mt-6 text-center text-gray-400">
        Already have an account?
        <RouterLink
          to="/login"
          class="text-primary-light hover:underline"
        >
          Login
        </RouterLink>
      </p>
    </div>
  </div>
</template>
