<template>
  <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8 w-full">
    <h2 class="text-2xl font-semibold text-gray-900 mb-1">Create your account</h2>
    <p class="text-sm text-gray-500 mb-6">Start managing your documents securely.</p>

    <form @submit.prevent="submit" class="space-y-4">
      <!-- Handle -->
      <div>
        <label class="block text-sm font-semibold text-gray-700 mb-1">Username</label>
        <input
          v-model="handle"
          type="text"
          required
          autocomplete="username"
          class="block w-full rounded-lg px-3 py-3 text-sm border border-gray-300 bg-white text-gray-900 transition-colors focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 focus:outline-none"
        />
      </div>

      <!-- Email -->
      <div>
        <label class="block text-sm font-semibold text-gray-700 mb-1">Email</label>
        <input
          v-model="email"
          type="email"
          required
          autocomplete="email"
          class="block w-full rounded-lg px-3 py-3 text-sm border border-gray-300 bg-white text-gray-900 transition-colors focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 focus:outline-none"
        />
      </div>

      <!-- Password -->
      <div>
        <label class="block text-sm font-semibold text-gray-700 mb-1">Password</label>
        <input
          v-model="password"
          type="password"
          required
          autocomplete="new-password"
          class="block w-full rounded-lg px-3 py-3 text-sm border border-gray-300 bg-white text-gray-900 transition-colors focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 focus:outline-none"
        />
        <!-- Password strength indicator -->
        <PasswordStrengthBar :password="password" />
        <!-- HIBP breach inline error -->
        <p v-if="breachError" class="mt-1 text-xs text-red-600">{{ breachError }}</p>
      </div>

      <!-- Confirm password -->
      <div>
        <label class="block text-sm font-semibold text-gray-700 mb-1">Confirm password</label>
        <input
          v-model="confirmPassword"
          type="password"
          required
          autocomplete="new-password"
          class="block w-full rounded-lg px-3 py-3 text-sm border border-gray-300 bg-white text-gray-900 transition-colors focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 focus:outline-none"
        />
        <p v-if="confirmError" class="mt-1 text-xs text-red-600">{{ confirmError }}</p>
      </div>

      <!-- Form-level error -->
      <div
        v-if="error"
        class="p-3 rounded-lg bg-red-50 border border-red-200 text-sm text-red-700"
      >
        {{ error }}
      </div>

      <button
        type="submit"
        :disabled="loading"
        class="w-full flex items-center justify-center gap-2 px-6 py-3 bg-indigo-600 text-white rounded-lg text-sm font-semibold hover:bg-indigo-700 transition-colors disabled:opacity-75 min-h-[44px]"
      >
        <AppSpinner v-if="loading" />
        {{ loading ? 'Creating account…' : 'Create account' }}
      </button>

      <p class="text-center text-sm text-gray-500">
        Already have an account?
        <router-link to="/login" class="text-indigo-600 hover:underline">
          Sign in
        </router-link>
      </p>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '../../stores/auth.js'
import PasswordStrengthBar from '../../components/auth/PasswordStrengthBar.vue'
import AppSpinner from '../../components/ui/AppSpinner.vue'

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

const handle = ref('')
const email = ref('')
const password = ref('')
const confirmPassword = ref('')
const loading = ref(false)
const error = ref(null)
const breachError = ref(null)
const confirmError = ref(null)

async function submit() {
  // Client-side confirm check
  confirmError.value = null
  breachError.value = null
  error.value = null

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

  loading.value = true
  try {
    await authStore.register(handle.value, email.value, password.value)
    await router.push('/login')
  } catch (e) {
    const msg = e.message || ''
    if (msg.toLowerCase().includes('breach') || msg.toLowerCase().includes('pwned')) {
      breachError.value = msg
    } else {
      error.value = msg
    }
  } finally {
    loading.value = false
  }
}
</script>
