<template>
  <div class="min-h-full flex items-center justify-center py-16 px-4 sm:px-6 lg:px-8 bg-gray-50">
    <div class="max-w-md w-full space-y-8">
      <div class="text-center">
        <h2 class="text-3xl font-display font-bold text-gray-900">
          Neues Passwort setzen
        </h2>
        <p class="mt-2 text-sm text-gray-600">
          Vergeben Sie ein neues Passwort für Ihren Zugang.
        </p>
      </div>

      <div class="bg-white rounded-xl shadow-lg p-8">
        <form
          class="space-y-6"
          @submit.prevent="handleSubmit"
        >
          <div
            v-if="!token"
            class="bg-red-50 border border-red-200 rounded-lg p-4"
          >
            <p class="text-sm text-red-800">
              Der Reset-Link ist unvollständig. Fordern Sie bitte einen neuen Link an.
            </p>
          </div>

          <div>
            <label
              for="password"
              class="block text-sm font-medium text-gray-700 mb-2"
            >
              Neues Passwort
            </label>
            <input
              id="password"
              v-model="password"
              type="password"
              required
              minlength="8"
              autocomplete="new-password"
              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-600 focus:border-transparent transition-all"
            >
          </div>

          <div>
            <label
              for="passwordRepeat"
              class="block text-sm font-medium text-gray-700 mb-2"
            >
              Neues Passwort wiederholen
            </label>
            <input
              id="passwordRepeat"
              v-model="passwordRepeat"
              type="password"
              required
              minlength="8"
              autocomplete="new-password"
              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-600 focus:border-transparent transition-all"
            >
          </div>

          <div
            v-if="errorMessage"
            class="bg-red-50 border border-red-200 rounded-lg p-4"
          >
            <p class="text-sm text-red-800">
              {{ errorMessage }}
            </p>
          </div>

          <div
            v-if="successMessage"
            class="bg-green-50 border border-green-200 rounded-lg p-4"
          >
            <p class="text-sm text-green-800 flex items-center">
              <Check
                :size="18"
                class="mr-2"
              />
              {{ successMessage }}
            </p>
          </div>

          <button
            type="submit"
            :disabled="isLoading || !token || Boolean(successMessage)"
            class="w-full px-6 py-3 bg-primary-600 hover:bg-primary-700 disabled:bg-gray-400 text-white font-semibold rounded-lg transition-colors flex items-center justify-center"
          >
            <Loader2
              v-if="isLoading"
              :size="20"
              class="mr-2 animate-spin"
            />
            <span>{{ isLoading ? 'Wird gespeichert...' : 'Passwort speichern' }}</span>
          </button>

          <div class="text-center">
            <NuxtLink
              to="/login"
              class="text-sm text-primary-600 hover:text-primary-700 font-medium"
            >
              Zurück zum Login
            </NuxtLink>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { Check, Loader2 } from 'lucide-vue-next'

const route = useRoute()
const token = computed(() => String(route.query.token || '').trim())
const password = ref('')
const passwordRepeat = ref('')
const isLoading = ref(false)
const errorMessage = ref('')
const successMessage = ref('')

const handleSubmit = async () => {
  errorMessage.value = ''
  successMessage.value = ''

  if (password.value.length < 8) {
    errorMessage.value = 'Das Passwort muss mindestens 8 Zeichen lang sein.'
    return
  }

  if (password.value !== passwordRepeat.value) {
    errorMessage.value = 'Die Passwörter stimmen nicht überein.'
    return
  }

  isLoading.value = true
  try {
    const response = await $fetch('/api/auth/reset-password/complete', {
      method: 'POST',
      body: { token: token.value, password: password.value }
    })
    successMessage.value = response?.message || 'Ihr Passwort wurde geändert.'
    password.value = ''
    passwordRepeat.value = ''
  } catch (error) {
    errorMessage.value = error?.data?.message || 'Der Reset-Link ist ungültig oder abgelaufen.'
  } finally {
    isLoading.value = false
  }
}

useHead({
  title: 'Neues Passwort setzen - Harheimer TC',
})
</script>
