<script setup lang="ts">
import { ref, watch, nextTick, onUnmounted } from 'vue'
import { AlertTriangle } from 'lucide-vue-next'
import { useFocusTrap } from '../utils/focusTrap'

const props = defineProps<{
  show: boolean
  entityType: string
  entityName: string
  impacts: { label: string; count: number }[]
}>()

const emit = defineEmits<{
  confirm: []
  cancel: []
}>()

const dialogRef = ref<HTMLElement | null>(null)
const deleteReady = ref(false)
const countdown = ref(3)
const liveAnnouncement = ref('')
let countdownTimer: number | null = null

const { activate, deactivate } = useFocusTrap()

watch(() => props.show, async (val) => {
  if (val) {
    deleteReady.value = false
    countdown.value = 3
    liveAnnouncement.value = `Delete ${props.entityName}? This will also remove related data. Delete button available in 3 seconds.`
    await nextTick()
    if (dialogRef.value) activate(dialogRef.value, { onDeactivate: () => emit('cancel') })
    countdownTimer = window.setInterval(() => {
      countdown.value--
      if (countdown.value <= 0) {
        deleteReady.value = true
        if (countdownTimer) clearInterval(countdownTimer)
      }
    }, 1000)
  } else {
    deactivate()
    if (countdownTimer) clearInterval(countdownTimer)
  }
})

onUnmounted(() => {
  if (countdownTimer) clearInterval(countdownTimer)
})
</script>

<template>
  <Teleport to="#app">
    <Transition name="modal">
      <div
        v-if="show"
        class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center p-4 z-[60]"
        @click.self="emit('cancel')"
      >
        <div
          ref="dialogRef"
          role="alertdialog"
          aria-modal="true"
          aria-labelledby="cascade-delete-title"
          aria-describedby="cascade-delete-desc"
          class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm p-6"
        >
          <div class="flex items-start gap-3 mb-4">
            <AlertTriangle class="w-5 h-5 text-status-error shrink-0 mt-0.5" :stroke-width="2" aria-hidden="true" />
            <div>
              <h2 id="cascade-delete-title" class="text-[0.875rem] font-semibold text-text-primary">
                Delete {{ entityName }}?
              </h2>
              <p id="cascade-delete-desc" class="text-[0.75rem] text-text-secondary mt-1">
                This will permanently delete the {{ entityType }} and all related data:
              </p>
            </div>
          </div>

          <ul class="space-y-1.5 mb-4 pl-8" role="list" aria-label="Data that will be deleted">
            <li
              v-for="impact in impacts.filter(i => i.count > 0)"
              :key="impact.label"
              class="text-[0.75rem] text-text-secondary"
            >
              {{ impact.count }} {{ impact.label }}
            </li>
          </ul>

          <div class="flex items-center justify-end gap-2">
            <button
              @click="emit('cancel')"
              class="px-3 py-1.5 text-[0.75rem] text-text-secondary hover:text-text-primary transition-colors duration-150 rounded-md focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
            >
              Cancel
            </button>
            <button
              @click="deleteReady && emit('confirm')"
              :disabled="!deleteReady"
              :aria-disabled="!deleteReady"
              :aria-label="'Permanently delete ' + entityName + ' and all related data'"
              class="px-3 py-1.5 text-[0.75rem] font-medium rounded-md transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
              :class="deleteReady
                ? 'bg-status-error text-white hover:bg-red-600'
                : 'bg-bg-elevated text-text-tertiary cursor-not-allowed'"
            >
              {{ deleteReady ? 'Delete Everything' : `Wait ${countdown}s...` }}
            </button>
          </div>
        </div>
      </div>
    </Transition>
  </Teleport>

  <div class="sr-only" aria-live="assertive" aria-atomic="true">{{ liveAnnouncement }}</div>
</template>
