<script setup>
import { ref } from 'vue'
import { CheckCircleIcon, ExclamationTriangleIcon, XCircleIcon, InformationCircleIcon } from '@heroicons/vue/24/outline'

const open = ref(false)
const config = ref({})
const resolver = ref(null)

const variantConfig = {
    warning: { icon: ExclamationTriangleIcon, color: 'amber', confirmClass: 'bg-amber-600 hover:bg-amber-700' },
    danger: { icon: XCircleIcon, color: 'red', confirmClass: 'bg-red-600 hover:bg-red-700' },
    info: { icon: InformationCircleIcon, color: 'indigo', confirmClass: 'bg-indigo-600 hover:bg-indigo-700' },
    success: { icon: CheckCircleIcon, color: 'emerald', confirmClass: 'bg-emerald-600 hover:bg-emerald-700' },
}

defineExpose({
    ask(options = {}) {
        return new Promise((resolve) => {
            config.value = {
                title: options.title || 'Onaylayın',
                message: options.message || 'Devam etmek istediğinize emin misiniz?',
                confirmText: options.confirmText || 'Tamam',
                cancelText: options.cancelText || 'İptal',
                variant: options.variant || 'warning',
                details: options.details || null,
            }
            resolver.value = resolve
            open.value = true
        })
    },
})

const handle = (result) => {
    open.value = false
    resolver.value?.(result)
    resolver.value = null
}

const onEsc = (e) => {
    if (e.key === 'Escape' && open.value) {
        e.preventDefault()
        handle(false)
    }
    if (e.key === 'Enter' && open.value) {
        e.preventDefault()
        handle(true)
    }
}
</script>

<template>
    <Teleport to="body">
        <Transition
            enter-active-class="transition ease-out duration-200"
            enter-from-class="opacity-0"
            enter-to-class="opacity-100"
            leave-active-class="transition ease-in duration-150"
            leave-from-class="opacity-100"
            leave-to-class="opacity-0"
        >
            <div
                v-if="open"
                class="fixed inset-0 z-[9999] flex items-center justify-center p-4 bg-slate-900/70 backdrop-blur-sm"
                @keydown="onEsc"
                tabindex="-1"
                @click.self="handle(false)"
            >
                <Transition
                    enter-active-class="transition ease-out duration-300"
                    enter-from-class="opacity-0 scale-95"
                    enter-to-class="opacity-100 scale-100"
                >
                    <div
                        v-if="open"
                        class="w-full max-w-md rounded-2xl bg-white dark:bg-slate-900 shadow-2xl ring-1 ring-slate-200 dark:ring-slate-700 overflow-hidden"
                        role="dialog"
                        aria-modal="true"
                        :aria-labelledby="'confirm-title'"
                        :aria-describedby="'confirm-desc'"
                    >
                        <!-- Icon header -->
                        <div
                            :class="[
                                'flex items-start gap-4 p-6',
                                config.variant === 'danger' ? 'bg-red-50 dark:bg-red-950/30' :
                                config.variant === 'warning' ? 'bg-amber-50 dark:bg-amber-950/30' :
                                config.variant === 'success' ? 'bg-emerald-50 dark:bg-emerald-950/30' :
                                'bg-indigo-50 dark:bg-indigo-950/30'
                            ]"
                        >
                            <div
                                :class="[
                                    'rounded-lg p-2.5 shrink-0',
                                    config.variant === 'danger' ? 'bg-red-100 dark:bg-red-900/50' :
                                    config.variant === 'warning' ? 'bg-amber-100 dark:bg-amber-900/50' :
                                    config.variant === 'success' ? 'bg-emerald-100 dark:bg-emerald-900/50' :
                                    'bg-indigo-100 dark:bg-indigo-900/50'
                                ]"
                            >
                                <component
                                    :is="variantConfig[config.variant]?.icon"
                                    :class="[
                                        'h-6 w-6',
                                        config.variant === 'danger' ? 'text-red-600 dark:text-red-400' :
                                        config.variant === 'warning' ? 'text-amber-600 dark:text-amber-400' :
                                        config.variant === 'success' ? 'text-emerald-600 dark:text-emerald-400' :
                                        'text-indigo-600 dark:text-indigo-400'
                                    ]"
                                />
                            </div>
                            <div class="flex-1 min-w-0">
                                <h3 id="confirm-title" class="text-base font-semibold text-slate-900 dark:text-white">{{ config.title }}</h3>
                                <p id="confirm-desc" class="mt-1 text-sm text-slate-600 dark:text-slate-300 whitespace-pre-line">{{ config.message }}</p>
                                <pre v-if="config.details" class="mt-3 text-xs font-mono bg-slate-100 dark:bg-slate-800 rounded p-2 overflow-x-auto">{{ config.details }}</pre>
                            </div>
                        </div>
                        <!-- Buttons -->
                        <div class="flex items-center justify-end gap-2 px-6 py-4 bg-slate-50 dark:bg-slate-900/50 border-t border-slate-200 dark:border-slate-700">
                            <button
                                type="button"
                                @click="handle(false)"
                                class="rounded-lg px-4 py-2 text-sm font-medium text-slate-700 dark:text-slate-200 bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-700 transition"
                            >
                                {{ config.cancelText }}
                            </button>
                            <button
                                type="button"
                                @click="handle(true)"
                                :class="['rounded-lg px-4 py-2 text-sm font-semibold text-white shadow transition', variantConfig[config.variant]?.confirmClass]"
                                autofocus
                            >
                                {{ config.confirmText }}
                            </button>
                        </div>
                    </div>
                </Transition>
            </div>
        </Transition>
    </Teleport>
</template>
