<script setup lang="ts">
import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'

interface RecordData {
  id: number | string
  name?: string
  title?: string
  code?: string
  [key: string]: any
}

interface RecordConfirmationProps {
  open?: boolean
  action?: 'delete' | 'deactivate' | 'activate' | 'archive' | 'restore'
  record?: RecordData | null
  customTitle?: string
  customMessage?: string
  customConfirmText?: string
  customCancelText?: string
}

interface RecordConfirmationEmits {
  'update:open': [value: boolean]
  'confirm': [record: RecordData, action: string]
  'cancel': []
}

const props = withDefaults(defineProps<RecordConfirmationProps>(), {
  open: false,
  action: 'delete',
  record: null,
  customTitle: '',
  customMessage: '',
  customConfirmText: '',
  customCancelText: '',
})

const emit = defineEmits<RecordConfirmationEmits>()

const isOpen = computed({
  get: () => props.open,
  set: (value) => emit('update:open', value),
})

const actionConfig = computed(() => {
  const configs = {
    delete: {
      title: 'Hapus Data',
      message: 'Apakah Anda yakin ingin menghapus data ini? Tindakan ini tidak dapat dibatalkan.',
      confirmText: 'Hapus',
      variant: 'destructive' as const,
    },
    deactivate: {
      title: 'Nonaktifkan Data',
      message: 'Apakah Anda yakin ingin menonaktifkan data ini?',
      confirmText: 'Nonaktifkan',
      variant: 'warning' as const,
    },
    activate: {
      title: 'Aktifkan Data',
      message: 'Apakah Anda yakin ingin mengaktifkan data ini?',
      confirmText: 'Aktifkan',
      variant: 'default' as const,
    },
    archive: {
      title: 'Arsipkan Data',
      message: 'Apakah Anda yakin ingin mengarsipkan data ini?',
      confirmText: 'Arsipkan',
      variant: 'warning' as const,
    },
    restore: {
      title: 'Pulihkan Data',
      message: 'Apakah Anda yakin ingin memulihkan data ini?',
      confirmText: 'Pulihkan',
      variant: 'default' as const,
    },
  }
  return configs[props.action]
})

const finalTitle = computed(() => {
  return props.customTitle || actionConfig.value.title
})

const finalMessage = computed(() => {
  if (props.customMessage) {
    return props.customMessage
  }

  const baseMessage = actionConfig.value.message
  // if (props.record) {
  // const recordName = props.record.name || props.record.title || props.record.code || `ID: ${props.record.id}`
  // return `${baseMessage}\n\nData: ${recordName}`
  // }

  return baseMessage
})

const finalConfirmText = computed(() => {
  return props.customConfirmText || actionConfig.value.confirmText
})

const finalCancelText = computed(() => {
  return props.customCancelText || 'Batal'
})

function handleConfirm() {
  if (props.record) {
    emit('confirm', props.record, props.action)
  }
  emit('update:open', false)
}

function handleCancel() {
  emit('cancel')
  emit('update:open', false)
}
</script>

<template>
  <Confirmation
v-model:open="isOpen" :title="finalTitle" :message="finalMessage" :confirm-text="finalConfirmText"
    :cancel-text="finalCancelText" :variant="actionConfig.variant" size="md" @confirm="handleConfirm"
    @cancel="handleCancel"
>
    <!-- Slot untuk informasi tambahan record -->
    <div v-if="record && $slots.default" class="mt-4 p-3 bg-muted rounded-md">
      <slot :record="record" :action="action" />
    </div>
  </Confirmation>
</template>
