<script setup lang="ts">
const { resetPassword } = useAuth()

const { t } = useI18n()
const localePath = useLocalePath()
const route = useRoute()
const toast = useToast()

const password = ref('')
const confirmPassword = ref('')
const loading = ref(false)
const resetSuccess = ref(false)

// Get token from URL query
const token = computed(() => route.query.token as string)

// Validation
const passwordsMatch = computed(() => password.value === confirmPassword.value)
const isPasswordValid = computed(() => password.value.length >= 8)
const canSubmit = computed(() =>
  password.value
  && confirmPassword.value
  && passwordsMatch.value
  && isPasswordValid.value
  && token.value
)

async function handleSubmit() {
  if (loading.value || !canSubmit.value) return

  loading.value = true
  try {
    const { error } = await resetPassword({
      newPassword: password.value,
      token: token.value
    })

    if (error) {
      toast.add({
        title: t('auth.resetPassword.error'),
        description: error.message,
        color: 'error'
      })
    } else {
      resetSuccess.value = true
      toast.add({
        title: t('auth.resetPassword.success'),
        description: t('auth.resetPassword.successDescription'),
        color: 'success'
      })
    }
  } catch {
    toast.add({
      title: t('auth.resetPassword.error'),
      description: t('auth.resetPassword.errorDescription'),
      color: 'error'
    })
  } finally {
    loading.value = false
  }
}

// Check if token exists on mount
onMounted(() => {
  if (!token.value) {
    toast.add({
      title: t('auth.resetPassword.invalidToken'),
      description: t('auth.resetPassword.invalidTokenDescription'),
      color: 'error'
    })
  }
})
</script>

<template>
  <NuxtLayout>
    <UContainer>
      <UPageBody>
        <AuthCard :title="t('auth.resetPassword.title')">
          <template v-if="!resetSuccess">
            <p class="text-muted text-sm mb-6">
              {{ t('auth.resetPassword.description') }}
            </p>

            <form
              class="flex flex-col gap-4"
              @submit.prevent="handleSubmit"
            >
              <UFormField
                :label="t('auth.password')"
                required
                :error="password && !isPasswordValid ? t('auth.validation.passwordMinLength') : undefined"
              >
                <UInput
                  v-model="password"
                  type="password"
                  :placeholder="t('auth.password')"
                  class="w-full"
                  :icon="useSolarIcon('lock')"
                />
              </UFormField>

              <UFormField
                :label="t('auth.resetPassword.confirmPassword')"
                required
                :error="confirmPassword && !passwordsMatch ? t('auth.validation.passwordsDoNotMatch') : undefined"
              >
                <UInput
                  v-model="confirmPassword"
                  type="password"
                  :placeholder="t('auth.resetPassword.confirmPassword')"
                  class="w-full"
                  :icon="useSolarIcon('lock')"
                />
              </UFormField>

              <UButton
                type="submit"
                color="primary"
                :loading="loading"
                :disabled="!canSubmit || loading"
                block
              >
                {{ t('auth.resetPassword.resetButton') }}
              </UButton>

              <div class="text-center mt-4">
                <ULink
                  :to="localePath('/auth')"
                  class="hover:text-primary"
                >
                  {{ t('auth.resetPassword.backToLogin') }}
                </ULink>
              </div>
            </form>
          </template>

          <template v-else>
            <div class="text-center py-6">
              <UIcon
                :name="useSolarIcon('check-circle')"
                class="h-10 w-10 mx-auto mb-4 text-success"
              />
              <h2 class="text-xl font-semibold mb-2">
                {{ t('auth.resetPassword.success') }}
              </h2>
              <p class="text-muted mb-6">
                {{ t('auth.resetPassword.successRedirect') }}
              </p>
              <UButton
                :to="localePath('/auth')"
                color="primary"
              >
                {{ t('auth.resetPassword.goToLogin') }}
              </UButton>
            </div>
          </template>
        </AuthCard>
      </UPageBody>
    </UContainer>
  </NuxtLayout>
</template>
