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

// Delete-confirmation dialog. Owns the deleteSubject API call, isDeleting
// state, and inline error display. Parent passes the subject to delete via
// the `subject` 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 },
  subject: { type: Object, default: null },
})
const emit = defineEmits(['close', 'deleted'])

const { t } = useI18n()

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

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

async function confirm() {
  if (!props.subject?.subject_id) return
  isDeleting.value = true
  isError.value = false
  errorMessage.value = ''
  try {
    await deleteSubject(props.subject.subject_id)
    emit('deleted', props.subject.subject_id)
    emit('close')
  } catch (error) {
    console.error('Subject deletion failed:', error)
    isError.value = true
    errorMessage.value = error?.message || t('subject.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('subject.dialog.delete') }}
      </v-card-title>
      <v-card-text>
        <div class="text-body-1 mb-4">
          {{ t('subject.deleteConfirmation.message') }}
        </div>
        <div v-if="subject" class="bg-grey-lighten-4 pa-3 rounded">
          <div class="font-weight-medium">{{ subject.subject_name }}</div>
          <div class="text-caption text-medium-emphasis">
            {{
              t('subject.deleteConfirmation.subjectInfo', {
                name: subject.subject_name,
                sort: subject.sort_sequence,
              })
            }}
          </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('subject.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>