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

     Uso para forms (DELETE):
       <button onclick="confirmForm(this)" data-form="form-id"
               data-title="Eliminar usuario"
               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"
     style="background:rgba(8,15,30,0.6)">

    <div id="confirm-box"
         class="bg-white rounded-3xl shadow-2xl w-full max-w-sm p-8 transform scale-95 opacity-0 transition-all duration-200 relative">

        {{-- Cerrar --}}
        <button id="confirm-close"
                class="absolute top-4 right-4 text-slate-300 hover:text-slate-500 transition-colors cursor-pointer p-1 rounded-lg hover:bg-slate-100">
            <svg class="w-4 h-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="w-14 h-14 rounded-2xl flex items-center justify-center mx-auto mb-6">
            <svg class="w-7 h-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="text-xl font-bold text-navy-900 text-center mb-2"></h3>
        <p id="confirm-message"
           class="text-slate-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-2xl border-2 border-slate-200 text-slate-600 font-semibold text-sm
                           hover:bg-slate-50 transition-all cursor-pointer">
                Cancelar
            </button>
            {{-- confirm-ok text is set dynamically --}}
            <button id="confirm-ok"
                    class="flex-1 py-3 rounded-2xl font-semibold text-sm transition-all cursor-pointer">
                Confirmar
            </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  = icon.querySelector('svg');
    const title    = document.getElementById('confirm-title');
    const message  = document.getElementById('confirm-message');
    const btnOk    = document.getElementById('confirm-ok');
    const btnCancel= document.getElementById('confirm-cancel');

    let resolveCallback = null;

    function open(opts = {}) {
        const isDanger = opts.danger ?? false;

        title.textContent   = opts.title   ?? 'Confirmar ação?';
        message.textContent = opts.message ?? 'Deseja continuar com esta ação?';
        btnOk.textContent   = opts.confirmText ?? 'Confirmar';

        if (isDanger) {
            icon.className    = 'w-14 h-14 rounded-2xl flex items-center justify-center mx-auto mb-6 bg-red-50';
            iconSvg.className = 'w-7 h-7 text-red-500';
            btnOk.className   = btnOk.className.replace(/bg-\S+|text-\S+(?=\s|$)/g, '');
            btnOk.classList.add('bg-red-500', 'hover:bg-red-600', 'text-white', 'flex-1', 'py-3', 'rounded-2xl', 'font-semibold', 'text-sm', 'transition-all');
        } else {
            icon.className    = 'w-14 h-14 rounded-2xl flex items-center justify-center mx-auto mb-6 bg-brand-500/10';
            iconSvg.className = 'w-7 h-7 text-brand-500';
            btnOk.classList.add('bg-brand-600', 'hover:bg-brand-700', 'text-white', 'flex-1', 'py-3', 'rounded-2xl', 'font-semibold', 'text-sm', 'transition-all');
        }

        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);
    }

    btnOk.addEventListener('click', () => {
        close();
        if (resolveCallback) resolveCallback();
    });

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

    overlay.addEventListener('click', (e) => {
        if (e.target === overlay) close();
    });

    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') close();
    });

    window.confirm = open;

    window.confirmForm = function (btn) {
        const formId = btn.dataset.form;
        const form   = document.getElementById(formId);
        if (!form) return;

        open({
            title:       btn.dataset.title   ?? 'Confirmar',
            message:     btn.dataset.message ?? 'Esta ação não pode ser desfeita.',
            confirmText: btn.dataset.confirm ?? 'Confirmar',
            danger:      btn.dataset.danger === 'true',
            onConfirm:   () => form.submit(),
        });
    };
})();
</script>