<template>
  <!-- Overlay -->
  <div
    class="fixed inset-0 bg-black/40 flex items-center justify-center z-50"
    @click.self="handleCancel"
  >
    <!-- Panel -->
    <div
      role="dialog"
      aria-modal="true"
      aria-labelledby="delete-modal-title"
      class="bg-white rounded-2xl shadow-xl p-6 max-w-md w-full mx-4"
    >
      <!-- Warning icon -->
      <div class="flex justify-center">
        <div class="w-10 h-10 bg-red-50 rounded-full flex items-center justify-center">
          <svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
          </svg>
        </div>
      </div>

      <!-- Heading -->
      <h2 id="delete-modal-title" class="text-lg font-semibold text-gray-900 mt-4 text-center">
        Delete folder?
      </h2>

      <!-- Body -->
      <p class="text-sm text-gray-600 text-center mt-2 mb-6">
        This folder contains {{ folder.doc_count ?? 0 }} document{{ (folder.doc_count ?? 0) !== 1 ? 's' : '' }}.
        Deleting it will permanently delete all documents inside. This cannot be undone.
      </p>

      <!-- Buttons -->
      <div class="flex gap-3 justify-end">
        <button
          @click="handleCancel"
          class="text-sm text-gray-600 hover:text-gray-800 px-4 py-2 rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors"
        >
          Keep folder
        </button>
        <button
          @click="handleConfirm"
          class="bg-red-600 hover:bg-red-700 text-white text-sm font-semibold px-4 py-2 rounded-lg min-h-[44px] transition-colors"
        >
          Delete folder and documents
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  folder: {
    type: Object,
    required: true,
  },
  onConfirm: {
    type: Function,
    default: null,
  },
  onCancel: {
    type: Function,
    default: null,
  },
})

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

function handleConfirm() {
  emit('confirm')
  if (props.onConfirm) props.onConfirm()
}

function handleCancel() {
  emit('cancel')
  if (props.onCancel) props.onCancel()
}
</script>
