<template>
  <div v-if="isVisible" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
    <div class="bg-white rounded-lg p-6 w-full max-w-md mx-4 shadow-xl">
      <!-- Header -->
      <div class="flex items-center mb-4">
        <div class="flex-shrink-0">
          <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center">
            <Icon name="alert-line" class="w-6 h-6 text-red-600" />
          </div>
        </div>
        <div class="ml-4">
          <h3 class="text-lg font-medium text-gray-900">
            {{ title || $t('Confirm Action') }}
          </h3>
        </div>
      </div>

      <!-- Content -->
      <div class="mb-6">
        <p class="text-sm text-gray-600">
          {{ message || $t('Are you sure you want to proceed? This action cannot be undone.') }}
        </p>
      </div>

      <!-- Actions -->
      <div class="flex justify-end gap-3">
        <BaseButton
          variant="secondary"
          @click="handleCancel"
          :disabled="loading"
        >
          {{ cancelText || $t('Cancel') }}
        </BaseButton>
        <BaseButton
          :variant="confirmVariant || 'danger'"
          @click="handleConfirm"
          :loading="loading"
          :disabled="loading"
        >
          {{ confirmText || $t('Confirm') }}
        </BaseButton>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Icon from './Icon.vue'
import BaseButton from './BaseButton.vue'

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  message: {
    type: String,
    default: ''
  },
  confirmText: {
    type: String,
    default: ''
  },
  cancelText: {
    type: String,
    default: ''
  },
  confirmVariant: {
    type: String,
    default: 'danger',
    validator: (value) => ['primary', 'secondary', 'outlined', 'danger', 'success'].includes(value)
  },
  loading: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['confirm', 'cancel'])

const isVisible = ref(false)

// Methods
const show = () => {
  isVisible.value = true
}

const hide = () => {
  isVisible.value = false
}

const handleConfirm = () => {
  emit('confirm')
}

const handleCancel = () => {
  emit('cancel')
  hide()
}

// Expose methods for parent components
defineExpose({
  show,
  hide
})
</script>

<style scoped>
/* Modal backdrop animation */
.fixed {
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Modal content animation */
.bg-white {
  animation: slideIn 0.2s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
</style>
