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

const { t } = useI18n()
const localePath = useLocalePath()

// Create card-specific status instance
const { cardStatus, showStatus } = useCardStatus()

const currentPassword = ref('')
const newPassword = ref('')
const confirmPassword = ref('')
const loading = ref(false)

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

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

  loading.value = true
  showStatus(t('account.security.updatingPassword'), '', 'primary')

  try {
    const { error } = await changePassword({
      currentPassword: currentPassword.value,
      newPassword: newPassword.value,
      revokeOtherSessions: false
    })

    if (error) {
      showStatus(t('account.security.updateFailed'), error.message, 'error')
    } else {
      showStatus(t('account.security.passwordUpdated'), t('account.security.passwordUpdatedDescription'), 'success')
      // Reset form
      currentPassword.value = ''
      newPassword.value = ''
      confirmPassword.value = ''
    }
  } catch {
    showStatus(t('account.security.updateFailed'), t('account.security.updateErrorDescription'), 'error')
  } finally {
    loading.value = false
  }
}

function resetForm() {
  currentPassword.value = ''
  newPassword.value = ''
  confirmPassword.value = ''
}
</script>

<template>
  <NuxtLayout
    :page-title="t('account.security.title')"
    :parent="{
      label: t('account.title'),
      to: localePath('/dashboard/account')
    }"
    name="dashboard"
    type="account"
  >
    <UPageBody>
      <UForm
        class="space-y-6"
        @submit.prevent="handleSubmit"
      >
        <PageMainCard
          v-model:status="cardStatus"
          :title="t('account.security.changePassword')"
          :description="t('account.security.changePasswordDescription')"
          :icon="useSolarIcon('shield-keyhole')"
          :show-refresh-button="false"
        >
          <UFormField
            :label="t('account.security.currentPassword')"
            name="currentPassword"
            required
          >
            <UInput
              v-model="currentPassword"
              type="password"
              :placeholder="t('account.security.currentPassword')"
              :icon="useSolarIcon('lock')"
            />
          </UFormField>

          <UFormField
            :label="t('account.security.newPassword')"
            name="newPassword"
            required
            :error="newPassword && !isPasswordValid ? t('auth.validation.passwordMinLength') : undefined"
          >
            <UInput
              v-model="newPassword"
              type="password"
              :placeholder="t('account.security.newPassword')"
              :icon="useSolarIcon('lock')"
            />
            <template #hint>
              <span class="text-xs text-muted">
                {{ t('auth.validation.passwordMinLength') }}
              </span>
            </template>
          </UFormField>

          <UFormField
            :label="t('account.security.confirmPassword')"
            name="confirmPassword"
            required
            :error="confirmPassword && !passwordsMatch ? t('auth.validation.passwordsDoNotMatch') : undefined"
          >
            <UInput
              v-model="confirmPassword"
              type="password"
              :placeholder="t('account.security.confirmPassword')"
              :icon="useSolarIcon('lock')"
            />
          </UFormField>
          <template #footer-actions>
            <div>
              <UButton
                color="neutral"
                variant="outline"
                @click="resetForm"
              >
                {{ t('common.reset') }}
              </UButton>
            </div>
            <div>
              <UButton
                type="submit"
                :loading="loading"
                :disabled="!canSubmit || loading"
                :icon=" useSolarIcon('check-circle')"
              >
                {{ t('account.security.updatePassword') }}
              </UButton>
            </div>
          </template>
        </PageMainCard>
      </UForm>

      <AccountPasskeyManager />
    </UPageBody>
  </NuxtLayout>
</template>
