/* Makenotwork — Core JavaScript */
'use strict';

/* ===========================================
   CSRF
   =========================================== */

function csrfHeaders() {
    var token = document.querySelector('meta[name="csrf-token"]')?.content;
    return token ? { 'X-CSRF-Token': token } : {};
}

document.addEventListener('DOMContentLoaded', function() {
    // Read the csrf-token meta LIVE on every HTMX request rather than
    // snapshotting it at load. The token rotates mid-session (e.g. the 2FA
    // cycle_id path re-issues it), so a closured value would go stale and 403
    // every HTMX mutation until a full reload. Always attach the listener too —
    // the token may only appear after an HTMX-driven login without a full reload.
    document.body.addEventListener('htmx:configRequest', function(evt) {
        var token = document.querySelector('meta[name="csrf-token"]')?.content;
        if (token) {
            evt.detail.headers['X-CSRF-Token'] = token;
        }
    });
});

/* ===========================================
   TOAST NOTIFICATIONS
   =========================================== */

// Maximum simultaneously-visible toasts. Anything beyond this drops the
// oldest first so a burst of HTMX errors can't bury the viewport.
var TOAST_MAX_VISIBLE = 5;

document.body.addEventListener('showToast', function(evt) {
    var container = document.getElementById('notifications');
    if (!container) return;
    // Cap the stack: drop the oldest toast immediately when at capacity.
    while (container.childElementCount >= TOAST_MAX_VISIBLE) {
        container.firstElementChild.remove();
    }
    var toast = document.createElement('div');
    toast.className = 'toast toast-' + (evt.detail.type || 'info');
    toast.textContent = evt.detail.message || 'Action completed';
    container.appendChild(toast);
    setTimeout(function() {
        toast.classList.add('fade-out');
        setTimeout(function() { toast.remove(); }, 300);
    }, 3000);
});

function showToast(message, type) {
    document.body.dispatchEvent(new CustomEvent('showToast', {
        detail: { message: message, type: type || 'error' }
    }));
}

/* ===========================================
   SAFE LOCALSTORAGE WRAPPERS
   =========================================== */

function safeStorageGet(key) {
    try { return localStorage.getItem(key); } catch(e) { return null; }
}
function safeStorageSet(key, value) {
    try { localStorage.setItem(key, value); } catch(e) { /* ignore */ }
}

/* ===========================================
   TAB NAVIGATION
   =========================================== */

function setActiveTab(btn) {
    var container = btn.closest('.tabs');
    if (!container) return;
    container.querySelectorAll('.tab').forEach(function(tab) {
        tab.classList.remove('is-selected');
        tab.setAttribute('aria-selected', 'false');
    });
    btn.classList.add('is-selected');
    btn.setAttribute('aria-selected', 'true');
    var panel = document.getElementById('tab-content');
    if (panel) panel.setAttribute('aria-labelledby', btn.id);
    if (btn.id) history.replaceState(null, '', '#' + btn.id);
    var menu = btn.closest('.tab-overflow-menu');
    if (menu) menu.style.display = 'none';
    tabOverflow.updateHighlight(container);
}

/* ===========================================
   TAB OVERFLOW
   Moves tabs that don't fit into a "More" dropdown.
   No wrapper divs — tabs are moved directly.
   =========================================== */

var tabOverflow = (function() {
    var containers = [];

    function init() {
        containers = Array.from(document.querySelectorAll('.tabs[role="tablist"]'));
        containers.forEach(setup);
        window.addEventListener('resize', debounce(reflowAll, 150));
    }

    function setup(tabsEl) {
        if (tabsEl.dataset.overflowInit) return;
        tabsEl.dataset.overflowInit = '1';

        var moreWrap = document.createElement('div');
        moreWrap.className = 'tab-more-wrap';
        moreWrap.style.display = 'none';

        var moreBtn = document.createElement('button');
        moreBtn.className = 'tab tab-more-btn';
        moreBtn.type = 'button';
        moreBtn.textContent = 'More';
        moreBtn.setAttribute('aria-haspopup', 'true');
        moreBtn.setAttribute('aria-expanded', 'false');
        moreBtn.addEventListener('click', function(e) {
            e.stopPropagation();
            var m = moreWrap.querySelector('.tab-overflow-menu');
            var open = m.style.display === 'block';
            m.style.display = open ? 'none' : 'block';
            moreBtn.setAttribute('aria-expanded', open ? 'false' : 'true');
        });

        var menu = document.createElement('div');
        menu.className = 'tab-overflow-menu';
        menu.style.display = 'none';

        moreWrap.appendChild(moreBtn);
        moreWrap.appendChild(menu);

        // Insert before spinner if present, otherwise append
        var spinner = tabsEl.querySelector('.htmx-indicator');
        if (spinner) {
            tabsEl.insertBefore(moreWrap, spinner);
        } else {
            tabsEl.appendChild(moreWrap);
        }

        reflow(tabsEl);
    }

    function reflow(tabsEl) {
        var moreWrap = tabsEl.querySelector('.tab-more-wrap');
        if (!moreWrap) return;
        var menu = moreWrap.querySelector('.tab-overflow-menu');

        // Move all tabs back from menu into the row (before moreWrap)
        Array.from(menu.children).forEach(function(t) {
            tabsEl.insertBefore(t, moreWrap);
        });
        moreWrap.style.display = 'none';

        // Collect all tab buttons (exclude the More button itself)
        var tabs = Array.from(tabsEl.querySelectorAll(':scope > .tab'));
        if (tabs.length === 0) return;

        // Check if everything fits without More
        var available = tabsEl.clientWidth;
        var totalWidth = 0;
        tabs.forEach(function(t) { totalWidth += t.offsetWidth; });
        if (totalWidth <= available) return;

        // Find the cutoff point (reserve space for More button)
        var moreBtnWidth = 90;
        var used = 0;
        var cutoff = tabs.length;

        for (var i = 0; i < tabs.length; i++) {
            used += tabs[i].offsetWidth;
            if (used + moreBtnWidth > available) {
                cutoff = i;
                break;
            }
        }

        // Ensure at least 1 tab stays visible
        if (cutoff < 1) cutoff = 1;

        // Move tabs from cutoff onward into the menu
        for (var j = cutoff; j < tabs.length; j++) {
            menu.appendChild(tabs[j]);
        }
        moreWrap.style.display = '';
        updateHighlight(tabsEl);
    }

    function reflowAll() {
        containers.forEach(reflow);
    }

    function updateHighlight(tabsEl) {
        var moreWrap = tabsEl.querySelector('.tab-more-wrap');
        if (!moreWrap) return;
        var moreBtn = moreWrap.querySelector('.tab-more-btn');
        var menu = moreWrap.querySelector('.tab-overflow-menu');
        if (!moreBtn || !menu) return;
        var hasActive = menu.querySelector('.tab.is-selected');
        moreBtn.classList.toggle('is-selected', !!hasActive);
    }

    function debounce(fn, ms) {
        var timer;
        return function() {
            clearTimeout(timer);
            timer = setTimeout(fn, ms);
        };
    }

    return { init: init, updateHighlight: updateHighlight };
})();

document.addEventListener('DOMContentLoaded', function() {
    // Tab preloading on hover
    document.querySelectorAll('.tab').forEach(function(btn) {
        btn.addEventListener('mouseenter', function() {
            if (this.dataset.preloaded) return;
            var url = this.getAttribute('hx-get');
            if (!url) return;
            this.dataset.preloaded = '1';
            fetch(url, { headers: { 'HX-Request': 'true' } }).catch(function() {});
        });
    });

    // Initialize tab overflow
    tabOverflow.init();

    // Restore hash-based tab selection (after overflow init so tabs are placed)
    var hash = location.hash.replace('#', '');
    if (hash) {
        var tab = document.getElementById(hash);
        if (tab && tab.classList.contains('tab')) {
            tab.click();
        }
    }

    // Close More dropdown on outside click
    document.addEventListener('click', function() {
        document.querySelectorAll('.tab-overflow-menu').forEach(function(m) {
            m.style.display = 'none';
        });
        document.querySelectorAll('.tab-more-btn').forEach(function(b) {
            b.setAttribute('aria-expanded', 'false');
        });
    });

    // Show cart link only if cart has items
    var cartLink = document.getElementById('nav-cart-link');
    if (cartLink) {
        fetch('/api/cart/count', { credentials: 'same-origin' })
            .then(function(r) { return r.ok ? r.json() : null; })
            .then(function(data) {
                if (data && data.count > 0) {
                    cartLink.classList.remove('hidden');
                    var badge = document.getElementById('cart-badge');
                    if (badge) badge.textContent = ' (' + data.count + ')';
                }
            })
            .catch(function() {});
    }
});

/* ===========================================
   HTMX ERROR HANDLING
   =========================================== */

document.body.addEventListener('htmx:responseError', function(evt) {
    var container = document.getElementById('notifications');
    if (!container) return;
    var toast = document.createElement('div');
    toast.className = 'toast toast-error';
    var msg = document.createElement('span');
    msg.textContent = 'An error occurred.';
    toast.appendChild(msg);
    var retryBtn = document.createElement('button');
    retryBtn.textContent = 'Retry';
    retryBtn.className = 'toast-retry-btn';
    retryBtn.onclick = function() {
        toast.remove();
        var elt = evt.detail.elt;
        if (elt) htmx.trigger(elt, htmx.closest(elt, '[hx-trigger]') ? 'htmx:trigger' : 'click');
    };
    toast.appendChild(retryBtn);
    var closeBtn = document.createElement('button');
    closeBtn.className = 'toast-dismiss';
    closeBtn.textContent = '\u00d7';
    closeBtn.setAttribute('aria-label', 'Dismiss');
    closeBtn.onclick = function() { toast.remove(); };
    toast.appendChild(closeBtn);
    container.appendChild(toast);
    setTimeout(function() {
        toast.classList.add('fade-out');
        setTimeout(function() { toast.remove(); }, 300);
    }, 6000);
});

/* ===========================================
   HTMX FORM STATE (loading buttons)
   =========================================== */

/**
 * Resolve the button that should reflect loading state for an htmx request.
 * Order of preference:
 *   1. The triggering element itself, if it's a <button>.
 *   2. The submit/primary button inside the closest <form>.
 * Returns null if no candidate is found.
 */
function resolveHtmxLoadingButton(elt) {
    if (elt && elt.tagName === 'BUTTON') return elt;
    var form = elt && elt.closest && elt.closest('form');
    if (form) return form.querySelector('button[type="submit"], .primary');
    return null;
}

document.body.addEventListener('htmx:beforeRequest', function(evt) {
    var btn = resolveHtmxLoadingButton(evt.detail.elt);
    if (btn && !btn.dataset.origText) {
        btn.dataset.origText = btn.textContent;
        btn.textContent = btn.dataset.loadingText || 'Saving...';
        btn.disabled = true;
    }
});

function restoreHtmxLoadingButton(evt) {
    var btn = resolveHtmxLoadingButton(evt.detail.elt);
    if (btn && btn.dataset.origText) {
        btn.textContent = btn.dataset.origText;
        btn.disabled = false;
        delete btn.dataset.origText;
    }
}

document.body.addEventListener('htmx:afterRequest', restoreHtmxLoadingButton);
// htmx fires `responseError` for non-2xx and `sendError` for network failures.
// Both bypass `afterRequest` in some configurations, leaving the button stuck.
document.body.addEventListener('htmx:responseError', restoreHtmxLoadingButton);
document.body.addEventListener('htmx:sendError', restoreHtmxLoadingButton);
document.body.addEventListener('htmx:timeout', restoreHtmxLoadingButton);

/**
 * Wrap an async operation with loading state on a button. The button is
 * disabled and shows `loadingText` while `fn` runs; on completion (success or
 * failure) the original text and enabled state are restored.
 *
 * Use this for plain `fetch()` flows that don't go through htmx, so error
 * paths don't leave the button stuck in a "Verbing..." state.
 *
 * @param {HTMLButtonElement} btn
 * @param {string} loadingText
 * @param {() => Promise<T>} fn
 * @returns {Promise<T>}
 */
/**
 * Read the server-supplied error message from a non-2xx fetch Response.
 * API routes return `{"error": "..."}` JSON via the `json_error_layer`
 * middleware. Use this in `.catch` / `if (!res.ok)` branches so users see the
 * actual reason ("This promo code has expired", "Item already in bundle", etc.)
 * instead of a generic "Failed".
 *
 * @param {Response} response
 * @param {string} [fallback]
 * @returns {Promise<string>}
 */
window.apiErrorMessage = function(response, fallback) {
    fallback = fallback || 'Request failed';
    if (!response || typeof response.json !== 'function') return Promise.resolve(fallback);
    return response.json()
        .then(function(d) { return (d && d.error) ? d.error : fallback; })
        .catch(function() { return fallback; });
};

window.withLoadingState = function(btn, loadingText, fn) {
    if (!btn) return fn();
    var origText = btn.textContent;
    var origDisabled = btn.disabled;
    btn.textContent = loadingText;
    btn.disabled = true;
    return Promise.resolve()
        .then(fn)
        .finally(function() {
            btn.textContent = origText;
            btn.disabled = origDisabled;
        });
};

/* ===========================================
   PLAIN FORM SUBMIT (navigating-away buttons)
   =========================================== */

// Forms that POST and navigate (e.g. /stripe/checkout/...) feel broken during
// the network round-trip — the page sits on the original URL while the server
// builds the Stripe session, then redirects. Buttons opt in by setting
// `data-loading-text` on the submit element; on submit we swap label so the
// user sees "Redirecting to Stripe…" instead of the unchanged "Continue to
// Payment" while the browser waits.
document.body.addEventListener('submit', function(evt) {
    if (evt.defaultPrevented) return;
    var form = evt.target;
    if (!form || form.tagName !== 'FORM') return;
    // htmx-driven forms are handled by the htmx:beforeRequest path above.
    if (form.hasAttribute('hx-post') || form.hasAttribute('hx-get') ||
        form.hasAttribute('hx-put') || form.hasAttribute('hx-delete') ||
        form.hasAttribute('hx-patch')) return;

    var btn = form.querySelector('[data-loading-text]');
    if (!btn || btn.dataset.origText) return;

    btn.dataset.origText = btn.textContent;
    btn.textContent = btn.dataset.loadingText;
    // Defer disabled to the next tick so the submit button's name/value (if
    // any) is still included in the form's entry list when the browser builds
    // the request body.
    setTimeout(function() { btn.disabled = true; }, 0);
}, true);

// bfcache restore: when the user navigates back to a page whose form was
// mid-submit, the DOM is restored from the bfcache with the button still in
// its "Redirecting…" state. Reset on pageshow so it's usable again.
window.addEventListener('pageshow', function(evt) {
    if (!evt.persisted) return;
    document.querySelectorAll('button[data-orig-text]').forEach(function(btn) {
        btn.textContent = btn.dataset.origText;
        btn.disabled = false;
        delete btn.dataset.origText;
    });
});

/* ===========================================
   HTMX SUCCESS STATE (opt-in checkmark)
   =========================================== */

// For htmx swaps that don't visibly confirm completion (e.g. a settings
// form where the server returns the same form back), buttons can opt in to a
// brief "Saved" flash via `data-success-text`. Shows for 1.2s after a
// successful swap, then restores.
document.body.addEventListener('htmx:afterRequest', function(evt) {
    if (!evt.detail.successful) return;
    var elt = evt.detail.elt;

    // `data-success-toast` on the form/element: show a toast on success. Use
    // this for `hx-swap="none"` flows (e.g. settings checkboxes) where the
    // page content doesn't visibly confirm the save.
    var toastEl = elt && elt.closest && elt.closest('[data-success-toast]');
    if (toastEl) {
        showToast(toastEl.dataset.successToast, 'info');
    }

    // `data-success-text` on a button: brief in-place flash for cases where
    // the swap doesn't visibly confirm completion.
    var btn = resolveHtmxLoadingButton(elt);
    if (!btn || !btn.dataset.successText) return;
    var successText = btn.dataset.successText;
    var restoreTo = btn.dataset.origText || btn.textContent;
    btn.textContent = successText;
    btn.disabled = true;
    delete btn.dataset.origText;
    setTimeout(function() {
        if (btn.textContent === successText) {
            btn.textContent = restoreTo;
            btn.disabled = false;
        }
    }, 1200);
});

/* ===========================================
   KEYBOARD SHORTCUTS
   =========================================== */

document.addEventListener('keydown', function(e) {
    // Skip shortcuts when typing in inputs
    var tag = document.activeElement?.tagName;
    var inInput = tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT';

    if (e.key === 'Escape') {
        var overlay = document.querySelector('.modal-overlay');
        if (overlay) overlay.remove();
    }
    if ((e.metaKey || e.ctrlKey) && e.key === 's') {
        e.preventDefault();
        var form = document.activeElement?.closest('form');
        if (form) { var btn = form.querySelector('button[type="submit"]'); if (btn) btn.click(); }
    }
    // Cmd+K / Ctrl+K — focus search (works even in inputs)
    if ((e.metaKey || e.ctrlKey) && (e.key === 'k' || e.key === 'K')) {
        e.preventDefault();
        var searchInput = document.getElementById('header-search-input');
        if (searchInput) { searchInput.focus(); searchInput.select(); }
    }
    // ? — show keyboard shortcuts help (not in inputs)
    if (e.key === '?' && !inInput && !e.metaKey && !e.ctrlKey) {
        e.preventDefault();
        toggleShortcutsHelp();
    }
});

function toggleShortcutsHelp() {
    var existing = document.getElementById('shortcuts-help');
    if (existing) { existing.remove(); return; }

    var overlay = document.createElement('div');
    overlay.id = 'shortcuts-help';
    overlay.className = 'modal-overlay';
    overlay.style.display = 'flex';
    overlay.onclick = function(e) { if (e.target === overlay) overlay.remove(); };

    overlay.innerHTML =
        '<div class="modal-content" style="max-width: 420px; padding: 2rem;">'
        + '<div class="modal-header" style="margin-bottom: 1rem;">'
        + '<h2>Keyboard Shortcuts</h2>'
        + '<button type="button" class="modal-close" onclick="document.getElementById(\'shortcuts-help\').remove()">&times;</button>'
        + '</div>'
        + '<table style="width: 100%; font-size: 0.9rem;">'
        + '<tr><td style="padding: 0.3rem 0;"><kbd>Cmd+K</kbd></td><td>Search</td></tr>'
        + '<tr><td style="padding: 0.3rem 0;"><kbd>?</kbd></td><td>Show this help</td></tr>'
        + '<tr><td style="padding: 0.3rem 0;"><kbd>Esc</kbd></td><td>Close modal / overlay</td></tr>'
        + '<tr><td style="padding: 0.3rem 0;"><kbd>Cmd+S</kbd></td><td>Save current form</td></tr>'
        + '</table>'
        + '</div>';

    document.body.appendChild(overlay);
}

/* ===========================================
   NAV TOGGLE
   =========================================== */

document.addEventListener('click', function(e) {
    var toggle = document.getElementById('nav-toggle');
    if (toggle && toggle.checked && e.target.closest('.nav-links a, .nav-links .btn--link')) {
        toggle.checked = false;
    }
});

/* ===========================================
   RESTART WARNING BANNER
   =========================================== */

(function() {
    var banner = null;
    var countdownInterval = null;
    var restartAt = null;

    function createBanner() {
        if (banner) return;
        banner = document.createElement('div');
        banner.id = 'restart-banner';
        banner.className = 'banner banner--warning';
        banner.setAttribute('role', 'alert');
        document.body.prepend(banner);
    }

    function removeBanner() {
        if (banner) {
            banner.remove();
            banner = null;
        }
        if (countdownInterval) {
            clearInterval(countdownInterval);
            countdownInterval = null;
        }
        restartAt = null;
    }

    function updateCountdown() {
        if (!banner || !restartAt) return;
        var remaining = Math.max(0, Math.round(restartAt - Date.now() / 1000));
        if (remaining > 0) {
            banner.textContent = 'Update deploying — restarting in ' + remaining + 's';
        } else {
            banner.textContent = 'Restarting now...';
            if (countdownInterval) {
                clearInterval(countdownInterval);
                countdownInterval = null;
            }
        }
    }

    function startCountdown(ts) {
        restartAt = ts;
        createBanner();
        updateCountdown();
        if (countdownInterval) clearInterval(countdownInterval);
        countdownInterval = setInterval(updateCountdown, 1000);
    }

    function poll() {
        fetch('/api/restart-status').then(function(r) {
            return r.json();
        }).then(function(data) {
            if (data.restart_at) {
                if (!restartAt || restartAt !== data.restart_at) {
                    startCountdown(data.restart_at);
                }
            } else {
                removeBanner();
            }
        }).catch(function() {
            // If we're already showing a countdown, show "restarting now" on fetch failure
            if (restartAt) {
                if (banner) banner.textContent = 'Restarting now...';
                if (countdownInterval) {
                    clearInterval(countdownInterval);
                    countdownInterval = null;
                }
            }
        });
    }

    // First poll at 2s after load, then every 10s
    setTimeout(poll, 2000);
    setInterval(poll, 10000);
})();

/* ===========================================
   COPY LINK — delegated handler
   =========================================== *

 * Replaces the inline `onclick="navigator.clipboard.writeText(...)..."`
 * snippets that were duplicated across ~8 templates. Each instance shipped
 * without a .catch() so the button silently did nothing in non-secure
 * contexts (plain HTTP, iframes, restrictive CSP). Run #8 audit MED fix.
 *
 * Usage in templates:
 *   <a href="{{ canonical_url }}" data-copy-link>Copy link</a>
 *   <a href="{{ url }}" data-copy-link data-copied-label="Link copied">Copy</a>
 *
 * `href` is the actual destination so middle-click / no-JS / share menus
 * still work; data-copy-link rewires left-click to copy instead of navigate.
 */
document.addEventListener('click', function(evt) {
    var el = evt.target.closest('[data-copy-link]');
    if (!el) return;
    evt.preventDefault();
    var url = el.dataset.url || el.getAttribute('href') || window.location.href;
    if (url.charAt(0) === '/') url = window.location.origin + url;
    var defaultLabel = el.dataset.defaultLabel || el.textContent;
    var copiedLabel = el.dataset.copiedLabel || 'Copied!';
    var resetMs = 1500;
    var reset = function() { el.textContent = defaultLabel; };
    if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(url).then(function() {
            el.textContent = copiedLabel;
            setTimeout(reset, resetMs);
        }).catch(function() {
            window.prompt('Copy this link:', url);
        });
    } else {
        // Non-secure context (plain HTTP, some iframes): fall back to a
        // prompt the user can copy from. Better than the silent-no-op the
        // inline snippets shipped with.
        window.prompt('Copy this link:', url);
    }
});