{{-- ── Modal de confirmación ────────────────────────────────────
     Uso desde JS:
       confirm({
         title:       'Eliminar usuario',
         message:     'Esta acción no puede deshacerse.',
         onConfirm:   () => { ... },
         confirmText: 'Eliminar',   // default: 'Confirm'
         danger:      true,         // default: false
       })

     Uso para forms:
       <button onclick="confirmForm(this)"
               data-form="form-id"
               data-title="Eliminar"
               data-message="Esta acción no puede deshacerse."
               data-danger="true">Eliminar</button>
--}}

<div id="confirm-overlay"
     class="fixed inset-0 z-50 hidden items-center justify-center p-4 backdrop-blur-sm bg-black/75">

    <div id="confirm-box"
         class="relative w-full max-w-sm rounded-2xl border border-white/10 bg-[#111111] p-8 shadow-2xl shadow-black/80
                scale-95 opacity-0 transition-all duration-200">

        {{-- Cerrar --}}
        <button id="confirm-close"
                class="absolute top-4 right-4 p-1.5 rounded-lg text-gray-500 hover:text-white hover:bg-white/8 transition-all cursor-pointer border-0 bg-transparent">
            <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
            </svg>
        </button>

        {{-- Icono --}}
        <div id="confirm-icon" class="size-14 rounded-2xl flex items-center justify-center mx-auto mb-6">
            <svg id="confirm-icon-svg" class="size-7" 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>

        {{-- Texto --}}
        <h3 id="confirm-title" class="font-heading font-bold text-white text-xl text-center mb-2"></h3>
        <p id="confirm-message" class="text-gray-400 text-sm text-center leading-relaxed mb-8"></p>

        {{-- Botones --}}
        <div class="flex gap-3">
            <button id="confirm-cancel"
                    class="flex-1 py-3 rounded-xl border border-white/15 text-gray-300 font-semibold text-sm
                           hover:border-white/30 hover:text-white hover:bg-white/5 transition-all cursor-pointer bg-transparent">
                Cancel
            </button>
            <button id="confirm-ok"
                    class="flex-1 py-3 rounded-xl font-semibold text-sm text-white transition-all cursor-pointer border-0">
                Confirm
            </button>
        </div>

    </div>
</div>

<script>
(function () {
    const overlay   = document.getElementById('confirm-overlay');
    const box       = document.getElementById('confirm-box');
    const icon      = document.getElementById('confirm-icon');
    const iconSvg   = document.getElementById('confirm-icon-svg');
    const titleEl   = document.getElementById('confirm-title');
    const messageEl = document.getElementById('confirm-message');
    const btnOk     = document.getElementById('confirm-ok');
    const btnCancel = document.getElementById('confirm-cancel');

    const CLASSES = {
        normal: {
            icon:    'bg-brand-green/10',
            iconSvg: 'text-brand-green',
            btn:     'bg-brand-green hover:bg-brand-green-dark',
        },
        danger: {
            icon:    'bg-red-500/10',
            iconSvg: 'text-red-400',
            btn:     'bg-red-500 hover:bg-red-600',
        },
    };

    let resolveCallback = null;

    function applyClasses(el, remove, add) {
        el.classList.remove(...remove.split(' '));
        el.classList.add(...add.split(' '));
    }

    function open(opts = {}) {
        if (locked) return; // acción en progreso, no reabrir

        const isDanger = opts.danger ?? false;
        const c = isDanger ? CLASSES.danger : CLASSES.normal;

        // Resetea estado por si se reutiliza
        locked             = false;
        btnOk.disabled     = false;
        btnCancel.disabled = false;
        document.getElementById('confirm-close').disabled = false;
        btnCancel.classList.remove('opacity-40', 'cursor-not-allowed');

        titleEl.textContent   = opts.title      ?? 'Confirm action?';
        messageEl.textContent = opts.message     ?? 'Do you want to continue?';
        btnOk.textContent     = opts.confirmText ?? 'Confirm';

        const other = isDanger ? CLASSES.normal : CLASSES.danger;
        applyClasses(icon,   other.icon,    c.icon);
        applyClasses(iconSvg, other.iconSvg, c.iconSvg);
        applyClasses(btnOk,  other.btn,     c.btn);

        overlay.classList.remove('hidden');
        overlay.classList.add('flex');
        requestAnimationFrame(() => {
            box.classList.remove('scale-95', 'opacity-0');
            box.classList.add('scale-100', 'opacity-100');
        });

        resolveCallback = opts.onConfirm ?? null;
    }

    function close() {
        box.classList.add('scale-95', 'opacity-0');
        box.classList.remove('scale-100', 'opacity-100');
        setTimeout(() => {
            overlay.classList.add('hidden');
            overlay.classList.remove('flex');
        }, 200);
    }

    let locked = false;

    function lockAll() {
        locked             = true;
        btnOk.disabled     = true;
        btnCancel.disabled = true;
        document.getElementById('confirm-close').disabled = true;
        btnCancel.classList.add('opacity-40', 'cursor-not-allowed');
    }

    btnOk.addEventListener('click', () => {
        if (locked) return;
        lockAll();
        btnOk.innerHTML = `
            <svg class="animate-spin size-4 mx-auto" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"/>
            </svg>`;
        if (resolveCallback) resolveCallback();
    });

    function tryClose() {
        if (locked) return;
        close();
    }

    btnCancel.addEventListener('click', tryClose);
    document.getElementById('confirm-close').addEventListener('click', tryClose);

    window.confirm     = open;
    window.confirmForm = function (btn) {
        const form = document.getElementById(btn.dataset.form);
        if (!form) return;
        open({
            title:       btn.dataset.title   ?? 'Confirm',
            message:     btn.dataset.message ?? 'This action cannot be undone.',
            confirmText: btn.dataset.confirm ?? 'Confirm',
            danger:      btn.dataset.danger  === 'true',
            onConfirm:   () => form.submit(),
        });
    };
})();
</script>