<script setup lang="ts">
const { signOut } = useAuth()
const { t } = useI18n()
const localePath = useLocalePath()
const { showStatus } = useStatus()

const isDeleteModalOpen = ref(false)
const confirmationText = ref('')
const isDeleting = ref(false)

const canDelete = computed(() => confirmationText.value.toLowerCase() === 'delete')

async function deleteAccount() {
  if (!canDelete.value || isDeleting.value) return

  isDeleting.value = true
  showStatus(t('account.dangerZone.deletingAccount'), '', 'primary')

  try {
    // Delete account via Better Auth
    const apiCall = useApiCall()
    await apiCall('/api/user/delete', {
      method: 'DELETE'
    })

    showStatus(t('account.dangerZone.accountDeleted'), t('account.dangerZone.accountDeletedDescription'), 'success')

    // Sign out and redirect
    await signOut({ redirectTo: localePath('/') })
  } catch (error) {
    showStatus(
      t('account.dangerZone.deleteFailed'),
      (error as { message?: string })?.message || t('account.dangerZone.deleteErrorDescription'),
      'error'
    )
    isDeleting.value = false
    isDeleteModalOpen.value = false
  }
}

function closeModal() {
  isDeleteModalOpen.value = false
  confirmationText.value = ''
}
</script>

<template>
  <UCard
    class="border-red-200 bg-red-50  dark:border-red-950 dark:bg-red-950/20"
  >
    <h3 class="font-medium text-red-950 dark:text-red-50">
      {{ t('account.dangerZone.title') }}
    </h3>
    <p class="mt-1 text-sm text-neutral-500 dark:text-neutral-400">
      {{ t('account.dangerZone.description') }}
    </p>
    <UButton
      class="mt-4"
      color="error"
      :label="t('account.dangerZone.deleteButton')"
      :icon="useSolarIcon('trash-bin-trash')"
      @click="isDeleteModalOpen = true"
    />
  </UCard>

  <!-- Delete Confirmation Modal -->
  <UModal
    v-model:open="isDeleteModalOpen"
    :title="t('account.dangerZone.confirmTitle')"
    :description="t('account.dangerZone.confirmDescription')"
  >
    <template #body>
      <div class="space-y-4">
        <div class="rounded-lg bg-red-50 dark:bg-red-950/20 p-4 border border-red-200 dark:border-red-950">
          <div class="flex gap-3">
            <UIcon
              :name="useSolarIcon('shield-warning')"
              class="h-5 w-5 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5"
            />
            <div class="text-sm text-red-900 dark:text-red-100">
              <p class="font-semibold mb-1">
                {{ t('account.dangerZone.warningTitle') }}
              </p>
              <p>{{ t('account.dangerZone.warningDescription') }}</p>
            </div>
          </div>
        </div>

        <UFormField
          :label="t('account.dangerZone.confirmLabel')"
          :hint="t('account.dangerZone.confirmHint')"
        >
          <UInput
            v-model="confirmationText"
            :placeholder="t('account.dangerZone.confirmPlaceholder')"
            class="w-full"
          />
        </UFormField>

        <div class="flex justify-end gap-3 pt-4">
          <UButton
            :label="t('common.cancel')"
            variant="ghost"
            color="neutral"
            :disabled="isDeleting"
            @click="closeModal"
          />
          <UButton
            :label="t('account.dangerZone.deleteButton')"
            color="error"
            :icon="useSolarIcon('trash-bin-trash')"
            :loading="isDeleting"
            :disabled="!canDelete || isDeleting"
            @click="deleteAccount"
          />
        </div>
      </div>
    </template>
  </UModal>
</template>
