<template>
  <div class="min-h-screen bg-background flex items-center justify-center">
    <div class="w-full max-w-md p-8 border rounded-lg bg-card">
      <h1 class="text-3xl font-bold mb-6 text-center">Register</h1>
      
      <div v-if="error" class="mb-4 p-3 bg-destructive/10 text-destructive rounded">
        {{ error }}
      </div>

      <div v-if="success" class="mb-4 p-3 bg-green-500/10 text-green-600 rounded">
        Registration successful! Redirecting to login...
      </div>

      <form @submit.prevent="handleRegister" class="space-y-4">
        <div>
          <label class="block text-sm font-medium mb-2">Tenant ID</label>
          <input
            v-model="tenantId"
            type="text"
            required
            class="w-full px-3 py-2 border rounded-md bg-background"
            placeholder="123"
          />
        </div>

        <div>
          <label class="block text-sm font-medium mb-2">Email</label>
          <input
            v-model="email"
            type="email"
            required
            class="w-full px-3 py-2 border rounded-md bg-background"
            placeholder="user@example.com"
          />
        </div>

        <div>
          <label class="block text-sm font-medium mb-2">Password</label>
          <input
            v-model="password"
            type="password"
            required
            minlength="6"
            class="w-full px-3 py-2 border rounded-md bg-background"
            placeholder="••••••••"
          />
        </div>

        <div>
          <label class="block text-sm font-medium mb-2">First Name (Optional)</label>
          <input
            v-model="firstName"
            type="text"
            class="w-full px-3 py-2 border rounded-md bg-background"
            placeholder="John"
          />
        </div>

        <div>
          <label class="block text-sm font-medium mb-2">Last Name (Optional)</label>
          <input
            v-model="lastName"
            type="text"
            class="w-full px-3 py-2 border rounded-md bg-background"
            placeholder="Doe"
          />
        </div>

        <button
          type="submit"
          :disabled="loading"
          class="w-full px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50"
        >
          {{ loading ? 'Registering...' : 'Register' }}
        </button>
      </form>

      <div class="mt-4 text-center text-sm text-muted-foreground">
        Already have an account? 
        <NuxtLink to="/login" class="text-primary hover:underline">
          Login
        </NuxtLink>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const config = useRuntimeConfig()
const router = useRouter()

const tenantId = ref('123')
const email = ref('')
const password = ref('')
const firstName = ref('')
const lastName = ref('')
const loading = ref(false)
const error = ref('')
const success = ref(false)

const handleRegister = async () => {
  try {
    loading.value = true
    error.value = ''
    success.value = false

    const response = await fetch(`${config.public.apiBaseUrl}/api/auth/register`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'x-tenant-id': tenantId.value,
      },
      body: JSON.stringify({
        email: email.value,
        password: password.value,
        firstName: firstName.value || undefined,
        lastName: lastName.value || undefined,
      }),
    })

    if (!response.ok) {
      const data = await response.json()
      throw new Error(data.message || 'Registration failed')
    }

    success.value = true
    
    // Redirect to login after 2 seconds
    setTimeout(() => {
      router.push('/login')
    }, 2000)
  } catch (e: any) {
    error.value = e.message || 'Registration failed'
  } finally {
    loading.value = false
  }
}
</script>
