<script setup>
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { deleteTerm } from '@/api/termService.js'

// Delete-confirmation dialog. Owns the deleteTerm API call, isDeleting
// state, and inline error display. Parent passes the term to delete via
// the `term` prop; we emit `@deleted(id)` on success and `@close` on
// either cancel or after a successful delete.
const props = defineProps({
  open: { type: Boolean, default: false },
  term: { type: Object, default: null },
})
const emit = defineEmits(['close', 'deleted'])

const { t } = useI18n()

const isDeleting = ref(false)
const isError = ref(false)
const errorMessage = ref('')

function formatDate(dateString) {
  if (!dateString) return ''
  return new Date(dateString).toLocaleDateString('zh-CN')
}

function close() {
  if (isDeleting.value) return
  emit('close')
}

async function confirm() {
  if (!props.term?.term_id) return
  isDeleting.value = true
  isError.value = false
  errorMessage.value = ''
  try {
    await deleteTerm(props.term.term_id)
    emit('deleted', props.term.term_id)
    emit('close')
  } catch (error) {
    console.error('Term deletion failed:', error)
    isError.value = true
    errorMessage.value = error?.message || t('term.messages.deleteError')
  } finally {
    isDeleting.value = false
  }
}
</script>

<template>
  <v-dialog :model-value="open" max-width="400px" @update:model-value="(v) => !v && close()">
    <v-card>
      <v-card-title class="text-h5 text-error">
        <v-icon icon="mdi-alert" class="mr-2" />
        {{ t('term.dialog.delete') }}
      </v-card-title>
      <v-card-text>
        <div class="text-body-1 mb-4">
          {{ t('term.deleteConfirmation.message') }}
        </div>
        <div v-if="term" class="bg-grey-lighten-4 pa-3 rounded">
          <div class="font-weight-medium">{{ term.term_name }}</div>
          <div class="text-caption text-medium-emphasis">
            {{ term.student_name }} |
            {{ formatDate(term.term_start_date) }} -
            {{ formatDate(term.term_end_date) }}
          </div>
        </div>
        <v-alert
          v-if="isError"
          type="error"
          variant="tonal"
          class="mt-4"
          closable
          @click:close="isError = false"
        >
          {{ errorMessage }}
        </v-alert>
        <div class="text-body-2 text-error mt-4">
          <v-icon icon="mdi-alert-circle" size="small" class="mr-1" />
          {{ t('term.deleteConfirmation.warning') }}
        </div>
      </v-card-text>
      <v-card-actions>
        <v-spacer />
        <v-btn
          color="grey-darken-1"
          variant="text"
          :disabled="isDeleting"
          @click="close"
        >
          {{ t('common.buttons.cancel') }}
        </v-btn>
        <v-btn
          color="error"
          variant="elevated"
          prepend-icon="mdi-delete"
          :loading="isDeleting"
          :disabled="isDeleting"
          @click="confirm"
        >
          {{ t('common.buttons.confirm') + ' ' + t('common.buttons.delete') }}
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>