const initialize = (inputSelector) => {
    const textInput = document.querySelector(inputSelector);
    if (!textInput) return;
    textInput.oninput = () => textInput.classList.remove("is-invalid");
};

const bindPaletteWheel = () => {
    document.querySelectorAll('.palette-scroll').forEach(el => {
        el.addEventListener('wheel', (e) => {
            e.preventDefault();
            el.scrollLeft += e.deltaY;
        }, { passive: false });
    });
};

// ── Palette swatch preview + commit ──────────────────────────────────────────

const bindPaletteSwatches = () => {
    const portal = document.getElementById('id_tooltip_portal');
    let activePreview = null;
    let originalPalette = null;
    let dismissTimer = null;

    function currentBodyPalette() {
        return [...document.body.classList].find(c => c.startsWith('palette-'));
    }

    function swapPalette(paletteName) {
        const old = currentBodyPalette();
        if (old) document.body.classList.remove(old);
        document.body.classList.add(paletteName);
    }

    function showTooltip(swatch) {
        if (!portal) return;
        const label       = swatch.dataset.label || '';
        const locked      = swatch.dataset.locked === 'true';
        const description = swatch.dataset.description || '';
        const unlockedDate = swatch.dataset.unlockedDate || '';
        const lockIcon    = locked ? 'fa-lock' : 'fa-lock-open';
        const lockText    = locked ? 'Locked' : 'Unlocked';

        let dateLine = '';
        if (unlockedDate) {
            const dt       = new Date(unlockedDate);
            const dateStr  = dt.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
            const timeStr  = dt.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
            dateLine = `<p class="tt-date">${dateStr} · ${timeStr}</p>`;
        }

        portal.innerHTML = `
            <h4 class="tt-title">${label}</h4>
            ${description ? `<p class="tt-description"><em>${description}</em></p>` : ''}
            <p class="tt-lock"><i class="fa-solid ${lockIcon}"></i> ${lockText}</p>
            ${dateLine}`;

        const rect = swatch.getBoundingClientRect();
        portal.style.display = 'block';
        portal.style.position = 'fixed';
        portal.style.top  = `${rect.bottom + 8}px`;
        portal.style.zIndex = '9999';
        const margin = 8;
        const ttW = portal.offsetWidth;
        portal.style.left = `${Math.max(margin, Math.min(rect.left, window.innerWidth - ttW - margin))}px`;
    }

    function hideTooltip() {
        if (!portal) return;
        portal.style.display = 'none';
        portal.innerHTML = '';
    }

    function dismiss() {
        if (!activePreview) return;
        clearTimeout(dismissTimer);
        const paletteName = activePreview.dataset.palette;
        activePreview.classList.remove('previewing');
        activePreview.querySelector('.palette-ok').style.display = '';
        document.body.classList.remove(paletteName);
        if (originalPalette) document.body.classList.add(originalPalette);
        activePreview = null;
        originalPalette = null;
        hideTooltip();
    }

    async function commitPalette(swatch, paletteName) {
        // Silent commit — no animation, wipe already happened on preview
        const old = originalPalette;
        swatch.classList.remove('previewing');
        swatch.querySelector('.palette-ok').style.display = '';
        hideTooltip();
        activePreview = null;
        originalPalette = null;
        clearTimeout(dismissTimer);

        // Remove old palette, keep new one (already on body from preview)
        if (old && old !== paletteName) {
            document.body.classList.remove(old);
        }

        // Update active indicator
        document.querySelectorAll('.swatch').forEach(sw => {
            sw.classList.toggle('active', sw.classList.contains(paletteName));
        });

        // POST to server
        const csrf = document.cookie.match(/csrftoken=([^;]+)/)?.[1] || '';
        await fetch('/dashboard/set_palette', {
            method: 'POST',
            headers: { 'Accept': 'application/json', 'X-CSRFToken': csrf },
            body: new URLSearchParams({ palette: paletteName }),
        });
    }

    document.querySelectorAll('.palette-item .swatch').forEach(swatch => {
        swatch.addEventListener('click', async (e) => {
            e.stopPropagation();
            if (swatch.classList.contains('previewing')) return;

            dismiss();  // clear any existing preview

            originalPalette = currentBodyPalette();
            activePreview = swatch;

            swatch.classList.add('previewing');
            showTooltip(swatch);
            swapPalette(swatch.dataset.palette);
            swatch.querySelector('.palette-ok').style.display = 'flex';

            // Auto-dismiss after 10s
            dismissTimer = setTimeout(dismiss, 10000);
        });

        const okBtn = swatch.querySelector('.btn-confirm.palette-ok');
        if (okBtn) {
            okBtn.addEventListener('click', async (e) => {
                e.stopPropagation();
                await commitPalette(swatch, swatch.dataset.palette);
            });
        }
    });

    document.addEventListener('click', () => dismiss());
};

const bindPaletteForms = () => {
    document.querySelectorAll('form[action*="set_palette"]').forEach(form => {
        form.addEventListener("submit", async (e) => {
            e.preventDefault();
            const resp = await fetch(form.action, {
                method: "POST",
                headers: { "Accept": "application/json" },
                body: new FormData(form, e.submitter),
            });
            if (!resp.ok) return;
            const { palette } = await resp.json();
            [...document.body.classList]
                .filter(c => c.startsWith("palette-"))
                .forEach(c => document.body.classList.remove(c));
            document.body.classList.add(palette);
            document.querySelectorAll(".swatch").forEach(sw => {
                sw.classList.toggle("active", sw.classList.contains(palette));
            });
        });
    });
};
