{# templates/credit_confirm_modal.html #}
<style>
    #credit-confirm-modal .credit-confirm-btn-shine {
        position: relative;
        overflow: hidden;
        box-shadow: none !important;
        border: none !important;
    }
    #credit-confirm-modal .credit-confirm-btn-shine:hover {
        box-shadow: none !important;
    }
    #credit-confirm-modal .credit-confirm-btn-shine::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 60%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
        transition: left 0.5s ease;
        z-index: 1;
        pointer-events: none;
    }
    #credit-confirm-modal .credit-confirm-btn-shine:hover::before {
        left: 100%;
    }
    #credit-confirm-modal .glass-button:hover,
    #credit-confirm-modal .glass-button.no-hover-lift:hover {
        transform: none !important;
        box-shadow: none !important;
    }
</style>
<div id="credit-confirm-modal" class="hidden modal-hidden fixed inset-0 flex items-center justify-center z-[200] p-4">
    <div class="modal-backdrop fixed inset-0 bg-black/60 modal-transition" id="credit-confirm-backdrop"></div>
    <div
        class="modal-content glass-modal modal-radius-xl shadow-3xl w-full max-w-md border border-white/10 modal-content-transition relative flex flex-col overflow-hidden">

        <div class="p-8 text-center">
            <div
                class="mx-auto w-20 h-20 bg-yellow-500/10 rounded-3xl border border-yellow-500/20 flex items-center justify-center mb-6 shadow-lg shadow-yellow-500/5">
                <i data-lucide="coins" class="h-10 w-10 text-yellow-400"></i>
            </div>

            <h3 class="text-2xl font-bold text-white mb-2" id="credit-confirm-title">Confirm Action</h3>
            <p class="text-zinc-400 text-sm mb-8">
                <span id="credit-confirm-message">This action requires </span><span id="credit-confirm-amount" class="text-yellow-400 font-bold">0</span><span id="credit-confirm-suffix"> Credits.</span>
            </p>

            <div class="flex flex-col gap-3">
                <button type="button" id="credit-confirm-btn"
                    class="credit-confirm-btn-shine glass-button-primary w-full py-4 rounded-2xl font-bold text-sm">
                    Confirm & Proceed
                </button>
                <button type="button" id="credit-confirm-cancel"
                    class="glass-button no-hover-lift w-full py-4 rounded-2xl font-bold text-sm text-zinc-400 hover:text-white">
                    Cancel
                </button>
            </div>
        </div>
    </div>
</div>

<script>
    window.confirmCreditAction = function (options) {
        const { cost, title, message, onConfirm, onCancel } = options;
        const modal = document.getElementById('credit-confirm-modal');
        const amountEl = document.getElementById('credit-confirm-amount');
        const titleEl = document.getElementById('credit-confirm-title');
        const messageEl = document.getElementById('credit-confirm-message');
        const confirmBtn = document.getElementById('credit-confirm-btn');
        const cancelBtn = document.getElementById('credit-confirm-cancel');
        const backdrop = document.getElementById('credit-confirm-backdrop');

        if (!modal || !amountEl || !confirmBtn || !cancelBtn) return;

        if (cost <= 0) {
            if (onConfirm) onConfirm();
            return;
        }

        amountEl.textContent = cost;
        if (title) titleEl.textContent = title;
        if (message) {
            messageEl.innerHTML = message;
            messageEl.nextElementSibling?.classList.add('hidden');
            messageEl.nextElementSibling?.nextElementSibling?.classList.add('hidden');
        } else {
            messageEl.textContent = 'This action requires ';
            messageEl.nextElementSibling?.classList.remove('hidden');
            messageEl.nextElementSibling?.nextElementSibling?.classList.remove('hidden');
        }

        const cleanup = () => {
            confirmBtn.onclick = null;
            cancelBtn.onclick = null;
            backdrop.onclick = null;
        };

        confirmBtn.onclick = () => {
            confirmBtn.disabled = true;
            cleanup();
            closeModalAnimation(modal);
            try {
                const ret = onConfirm();
                if (ret != null && typeof ret.then === 'function') {
                    ret.finally(() => { confirmBtn.disabled = false; });
                } else {
                    confirmBtn.disabled = false;
                }
            } catch (e) {
                confirmBtn.disabled = false;
            }
        };

        const handleCancel = () => {
            cleanup();
            closeModalAnimation(modal);
            if (onCancel) onCancel();
        };

        cancelBtn.onclick = handleCancel;
        backdrop.onclick = handleCancel;

        openModalAnimation(modal);
    };
</script>