{{-- Reusable Modal Dialog — Confirm & Notice --}}
<div id="tensealModal" class="ts-modal-overlay" style="display:none;">
    <div class="ts-modal">
        <div class="ts-modal-icon" id="tsModalIcon"></div>
        <h3 class="ts-modal-title" id="tsModalTitle"></h3>
        <p class="ts-modal-message" id="tsModalMessage"></p>
        <div class="ts-modal-input-wrap" id="tsModalInputWrap" style="display:none;">
            <input type="text" class="ts-modal-input" id="tsModalInput" autocomplete="off">
            <div class="ts-modal-input-hint" id="tsModalInputHint"></div>
        </div>
        <div class="ts-modal-actions" id="tsModalActions"></div>
    </div>
</div>

<style>
    .ts-modal-overlay {
        position: fixed;
        inset: 0;
        z-index: 99999;
        background: rgba(0, 0, 0, 0.65);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .ts-modal-overlay.visible {
        opacity: 1;
    }

    .ts-modal {
        background: var(--bg-card-solid, #0C2E62);
        border: 1px solid var(--border, rgba(16, 191, 255, 0.2));
        border-radius: var(--radius-lg, 16px);
        box-shadow: 0 16px 64px rgba(0, 0, 0, 0.4), 0 0 40px rgba(16, 191, 255, 0.1);
        width: 100%;
        max-width: 420px;
        padding: 2rem;
        text-align: center;
        transform: scale(0.9) translateY(12px);
        transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .ts-modal-overlay.visible .ts-modal {
        transform: scale(1) translateY(0);
    }

    .ts-modal-icon {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1.25rem;
        font-size: 1.4rem;
    }

    .ts-modal-icon.confirm {
        background: var(--accent-light, rgba(16, 191, 255, 0.12));
        color: var(--accent, #10BFFF);
        border: 2px solid var(--accent, #10BFFF);
        box-shadow: 0 0 20px rgba(16, 191, 255, 0.2);
    }

    .ts-modal-icon.danger {
        background: var(--danger-light, rgba(255, 71, 87, 0.12));
        color: var(--danger, #ff4757);
        border: 2px solid var(--danger, #ff4757);
        box-shadow: 0 0 20px rgba(255, 71, 87, 0.15);
    }

    .ts-modal-icon.warning {
        background: var(--warning-light, rgba(255, 165, 2, 0.12));
        color: var(--warning, #ffa502);
        border: 2px solid var(--warning, #ffa502);
        box-shadow: 0 0 20px rgba(255, 165, 2, 0.15);
    }

    .ts-modal-icon.success {
        background: var(--success-light, rgba(0, 212, 170, 0.12));
        color: var(--success, #00d4aa);
        border: 2px solid var(--success, #00d4aa);
        box-shadow: 0 0 20px rgba(0, 212, 170, 0.15);
    }

    .ts-modal-icon.info {
        background: var(--accent-light, rgba(16, 191, 255, 0.12));
        color: var(--accent, #10BFFF);
        border: 2px solid var(--accent, #10BFFF);
        box-shadow: 0 0 20px rgba(16, 191, 255, 0.2);
    }

    .ts-modal-title {
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--text-primary, #fff);
        margin: 0 0 0.5rem;
        font-family: inherit;
    }

    .ts-modal-message {
        font-size: 0.85rem;
        color: var(--text-secondary, rgba(255, 255, 255, 0.8));
        line-height: 1.6;
        margin: 0 0 1.5rem;
    }

    .ts-modal-input-wrap {
        margin-bottom: 1.25rem;
    }

    .ts-modal-input {
        width: 100%;
        padding: 0.7rem 1rem;
        background: var(--bg-primary, #000);
        border: 2px solid var(--border, rgba(16, 191, 255, 0.2));
        border-radius: var(--radius-sm, 8px);
        color: var(--text-primary, #fff);
        font-family: inherit;
        font-size: 0.9rem;
        outline: none;
        transition: border-color 0.2s ease;
        text-align: center;
    }

    .ts-modal-input:focus {
        border-color: var(--accent, #10BFFF);
        box-shadow: 0 0 0 3px var(--accent-light, rgba(16, 191, 255, 0.12));
    }

    .ts-modal-input.error {
        border-color: var(--danger, #ff4757);
        animation: tsShake 0.4s ease;
    }

    .ts-modal-input-hint {
        font-size: 0.75rem;
        color: var(--text-muted, rgba(255, 255, 255, 0.5));
        margin-top: 0.4rem;
    }

    .ts-modal-input-hint .match-text {
        color: var(--danger, #ff4757);
        font-weight: 600;
    }

    @keyframes tsShake {
        0%, 100% { transform: translateX(0); }
        20% { transform: translateX(-6px); }
        40% { transform: translateX(6px); }
        60% { transform: translateX(-4px); }
        80% { transform: translateX(4px); }
    }

    .ts-modal-actions {
        display: flex;
        gap: 0.75rem;
        justify-content: center;
    }

    .ts-modal-btn {
        padding: 0.65rem 1.5rem;
        border-radius: var(--radius-md, 12px);
        font-size: 0.82rem;
        font-weight: 600;
        font-family: inherit;
        cursor: pointer;
        border: 2px solid transparent;
        transition: all 0.2s ease;
        min-width: 100px;
    }

    .ts-modal-btn:focus-visible {
        outline: 2px solid var(--accent, #10BFFF);
        outline-offset: 2px;
    }

    .ts-modal-btn.cancel {
        background: transparent;
        border-color: var(--border, rgba(16, 191, 255, 0.2));
        color: var(--text-secondary, rgba(255, 255, 255, 0.8));
    }

    .ts-modal-btn.cancel:hover {
        background: var(--bg-hover, rgba(12, 46, 98, 0.4));
        border-color: var(--text-muted, rgba(255, 255, 255, 0.5));
    }

    .ts-modal-btn.confirm-action {
        background: var(--accent, #10BFFF);
        color: #fff;
        border-color: var(--accent, #10BFFF);
        box-shadow: 0 4px 16px rgba(16, 191, 255, 0.3);
    }

    .ts-modal-btn.confirm-action:hover {
        background: var(--accent-hover, #0DA6E0);
        border-color: var(--accent-hover, #0DA6E0);
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(16, 191, 255, 0.35);
    }

    .ts-modal-btn.danger-action {
        background: var(--danger, #ff4757);
        color: #fff;
        border-color: var(--danger, #ff4757);
        box-shadow: 0 4px 16px rgba(255, 71, 87, 0.25);
    }

    .ts-modal-btn.danger-action:hover {
        background: #e8394a;
        border-color: #e8394a;
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(255, 71, 87, 0.35);
    }

    .ts-modal-btn.ok-action {
        background: var(--accent, #10BFFF);
        color: #fff;
        border-color: var(--accent, #10BFFF);
        box-shadow: 0 4px 16px rgba(16, 191, 255, 0.3);
    }

    .ts-modal-btn.ok-action:hover {
        background: var(--accent-hover, #0DA6E0);
        border-color: var(--accent-hover, #0DA6E0);
        transform: translateY(-1px);
    }

    @media (max-width: 480px) {
        .ts-modal { padding: 1.5rem; max-width: 340px; }
        .ts-modal-actions { flex-direction: column-reverse; }
        .ts-modal-btn { width: 100%; }
    }
</style>

<script>
/**
 * Tenseal Modal Dialog
 *
 * Usage:
 *   TensealModal.confirm({ title, message, type, confirmText, cancelText, onConfirm, onCancel })
 *   TensealModal.notice({ title, message, type, buttonText, onClose })
 *   TensealModal.danger({ title, message, confirmText, onConfirm })  // shortcut
 *
 *   Form/link integration (no JS needed):
 *     <form data-confirm="Are you sure?" data-confirm-type="danger" data-confirm-title="Delete Product">
 *     <a href="..." data-confirm="Open a dispute?" data-confirm-type="warning">
 *
 * Types: confirm (blue), danger (red), warning (amber), success (green), info (blue)
 */
window.TensealModal = (function() {
    const overlay = document.getElementById('tensealModal');
    const iconEl = document.getElementById('tsModalIcon');
    const titleEl = document.getElementById('tsModalTitle');
    const msgEl = document.getElementById('tsModalMessage');
    const actionsEl = document.getElementById('tsModalActions');
    const inputWrap = document.getElementById('tsModalInputWrap');
    const inputEl = document.getElementById('tsModalInput');
    const inputHint = document.getElementById('tsModalInputHint');

    const icons = {
        confirm: 'fa-solid fa-question',
        danger: 'fa-solid fa-trash-can',
        warning: 'fa-solid fa-triangle-exclamation',
        success: 'fa-solid fa-circle-check',
        info: 'fa-solid fa-circle-info',
    };

    function show() {
        overlay.style.display = 'flex';
        requestAnimationFrame(() => {
            requestAnimationFrame(() => overlay.classList.add('visible'));
        });
        // Focus first button
        const firstBtn = actionsEl.querySelector('button');
        if (firstBtn) setTimeout(() => firstBtn.focus(), 150);
    }

    function hide() {
        overlay.classList.remove('visible');
        setTimeout(() => { overlay.style.display = 'none'; }, 250);
    }

    function buildButton(text, className, handler) {
        const btn = document.createElement('button');
        btn.className = 'ts-modal-btn ' + className;
        btn.textContent = text;
        btn.type = 'button';
        btn.addEventListener('click', handler);
        return btn;
    }

    // Confirm dialog — two buttons
    function confirm(opts) {
        const type = opts.type || 'confirm';
        iconEl.className = 'ts-modal-icon ' + type;
        iconEl.innerHTML = '<i class="' + (icons[type] || icons.confirm) + '"></i>';
        titleEl.textContent = opts.title || 'Confirm Action';
        msgEl.textContent = opts.message || 'Are you sure you want to proceed?';
        actionsEl.innerHTML = '';
        inputWrap.style.display = 'none';
        inputEl.value = '';

        const actionClass = type === 'danger' ? 'danger-action' : 'confirm-action';

        actionsEl.appendChild(buildButton(opts.cancelText || 'Cancel', 'cancel', function() {
            hide();
            if (opts.onCancel) opts.onCancel();
        }));
        actionsEl.appendChild(buildButton(opts.confirmText || 'Confirm', actionClass, function() {
            hide();
            if (opts.onConfirm) opts.onConfirm();
        }));

        show();
    }

    // Prompt dialog — input field + two buttons, confirm disabled until match
    function prompt(opts) {
        const type = opts.type || 'danger';
        iconEl.className = 'ts-modal-icon ' + type;
        iconEl.innerHTML = '<i class="' + (icons[type] || icons.danger) + '"></i>';
        titleEl.textContent = opts.title || 'Confirm Action';
        msgEl.textContent = opts.message || '';
        actionsEl.innerHTML = '';

        // Show input
        inputWrap.style.display = 'block';
        inputEl.value = '';
        inputEl.placeholder = opts.placeholder || '';
        inputEl.classList.remove('error');
        inputHint.innerHTML = opts.hint || ('Type <span class="match-text">' + (opts.matchValue || '') + '</span> to confirm');

        const actionClass = type === 'danger' ? 'danger-action' : 'confirm-action';

        actionsEl.appendChild(buildButton(opts.cancelText || 'Cancel', 'cancel', function() {
            hide();
            inputWrap.style.display = 'none';
            inputEl.value = '';
            if (opts.onCancel) opts.onCancel();
        }));

        var confirmBtn = buildButton(opts.confirmText || 'Delete', actionClass, function() {
            if (opts.matchValue && inputEl.value.trim() !== opts.matchValue) {
                inputEl.classList.add('error');
                setTimeout(function() { inputEl.classList.remove('error'); }, 500);
                inputEl.focus();
                return;
            }
            hide();
            inputWrap.style.display = 'none';
            inputEl.value = '';
            if (opts.onConfirm) opts.onConfirm(inputEl.value.trim());
        });
        confirmBtn.style.opacity = '0.5';
        confirmBtn.style.pointerEvents = 'none';
        actionsEl.appendChild(confirmBtn);

        // Enable confirm button only when input matches
        inputEl.oninput = function() {
            if (opts.matchValue && inputEl.value.trim() === opts.matchValue) {
                confirmBtn.style.opacity = '1';
                confirmBtn.style.pointerEvents = 'auto';
            } else {
                confirmBtn.style.opacity = '0.5';
                confirmBtn.style.pointerEvents = 'none';
            }
        };

        // Enter key submits if valid
        inputEl.onkeydown = function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                confirmBtn.click();
            }
        };

        show();
        setTimeout(function() { inputEl.focus(); }, 200);
    }

    // Notice dialog — single OK button
    function notice(opts) {
        const type = opts.type || 'info';
        iconEl.className = 'ts-modal-icon ' + type;
        iconEl.innerHTML = '<i class="' + (icons[type] || icons.info) + '"></i>';
        titleEl.textContent = opts.title || 'Notice';
        msgEl.textContent = opts.message || '';
        actionsEl.innerHTML = '';
        inputWrap.style.display = 'none';
        inputEl.value = '';

        actionsEl.appendChild(buildButton(opts.buttonText || 'OK', 'ok-action', function() {
            hide();
            if (opts.onClose) opts.onClose();
        }));

        show();
    }

    // Danger shortcut
    function danger(opts) {
        return confirm(Object.assign({ type: 'danger', title: 'Are you sure?', confirmText: 'Delete' }, opts));
    }

    // Upgrade prompt — branded plan-gating modal with "Upgrade" + "Maybe later"
    function upgrade(opts) {
        iconEl.className = 'ts-modal-icon warning';
        iconEl.innerHTML = '<i class="fa-solid fa-crown"></i>';
        titleEl.textContent = opts.title || 'Upgrade Required';
        msgEl.textContent = opts.message || 'This feature is not available on your current plan.';
        actionsEl.innerHTML = '';
        inputWrap.style.display = 'none';
        inputEl.value = '';

        actionsEl.appendChild(buildButton(opts.cancelText || 'Maybe later', 'cancel', function() {
            hide();
            if (opts.onCancel) opts.onCancel();
        }));

        var upgradeBtn = buildButton(opts.confirmText || 'View Plans', 'confirm-action', function() {
            hide();
            if (opts.upgradeUrl) {
                window.location.href = opts.upgradeUrl;
            } else if (opts.onConfirm) {
                opts.onConfirm();
            }
        });
        actionsEl.appendChild(upgradeBtn);

        show();
    }

    // Close on overlay click
    overlay.addEventListener('click', function(e) {
        if (e.target === overlay) hide();
    });

    // Close on Escape
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && overlay.classList.contains('visible')) hide();
    });

    // Auto-bind forms and links with data-confirm attribute
    document.addEventListener('DOMContentLoaded', function() {
        document.body.addEventListener('submit', function(e) {
            var form = e.target.closest('[data-confirm]');
            if (!form || form.dataset.tsConfirmed === '1') return;

            e.preventDefault();

            var type = form.dataset.confirmType || 'danger';
            var title = form.dataset.confirmTitle || (type === 'danger' ? 'Are you sure?' : 'Confirm');
            var btnText = form.dataset.confirmButton || (type === 'danger' ? 'Yes, proceed' : 'Confirm');

            confirm({
                title: title,
                message: form.dataset.confirm,
                type: type,
                confirmText: btnText,
                onConfirm: function() {
                    form.dataset.tsConfirmed = '1';
                    form.submit();
                }
            });
        });

        document.body.addEventListener('click', function(e) {
            var el = e.target.closest('a[data-confirm], button[data-confirm]:not([type="submit"])');
            if (!el || el.dataset.tsConfirmed === '1') return;
            if (el.closest('form')) return; // form submits are handled above

            e.preventDefault();

            var type = el.dataset.confirmType || 'confirm';
            var title = el.dataset.confirmTitle || 'Confirm';
            var btnText = el.dataset.confirmButton || 'Continue';

            confirm({
                title: title,
                message: el.dataset.confirm,
                type: type,
                confirmText: btnText,
                onConfirm: function() {
                    if (el.tagName === 'A' && el.href) {
                        window.location.href = el.href;
                    }
                }
            });
        });
    });

    return { confirm: confirm, notice: notice, danger: danger, prompt: prompt, upgrade: upgrade, hide: hide };
})();
</script>