/*!
 * customizer-previews.js (multi-side)
 * Renders all previews from data.sides[*].preview_url (fallback to cropped/original when needed).
 * Replaces JSON inside `.definitionList .definitionList-value` with preview <img> elements.
 * UMD-compatible: <script>, ES modules, and CommonJS.
 */
window.customizerBaseUrl = 'https://customizer.theextensions.com/storefront/4ti9l0ea6w';
(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        define([], factory);
    } else if (typeof module === 'object' && module.exports) {
        module.exports = factory();
    } else {
        root.CustomizerPreviews = factory();
    }
})(typeof self !== 'undefined' ? self : this, function () {
    "use strict";

    var DEFAULT_SELECTOR = '.definitionList .definitionList-value, li.product-option[data-test="cart-item-product-option"], li.product-option';
    var STYLE_ID = 'customizer-previews-style';

    // Minimal styling for grid and preview figures
    var DEFAULT_CSS = [
        '.customizer-previews{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;align-items:start}',
        '.customizer-preview{display:flex;flex-direction:column;gap:.5rem;max-width:100%;margin:0}',
        '.customizer-preview img{width:100%;height:auto;border-radius:8px;display:block}',
        '.customizer-caption{font-size:12px;opacity:.75}',
        '.customizer-preview pre{max-height:320px;overflow:auto;background:#0b1020;color:#e7eefb;padding:.75rem;border-radius:6px;font-size:12px}'
    ].join('');

    // Injects a <style> tag once (idempotent)
    function injectStyles(css) {
        if (document.getElementById(STYLE_ID)) return;
        var style = document.createElement('style');
        style.id = STYLE_ID;
        style.textContent = css || DEFAULT_CSS;
        document.head.appendChild(style);
    }

    /**
     * Extract all preview URLs from data.sides.
     * Preference: side.preview_url → side.image.cropped_url → side.image.original_url.
     * Falls back to data.preview_url if no sides or no URLs found.
     * @param {object} data
     * @returns {Array<{sideId:string|null,url:string,type:string|null}>}
     */
    function extractAllPreviewUrls(data) {
        var res = [];
        if (!data || !data.sides) {
            if (data && data.preview_url) {
                res.push({ name: '', sideId: null, url: data.preview_url, type: null });
            }
            return res;
        }

        // Sort sides by numeric key (e.g., "3", "4", ...)
        var entries = Object.entries(data.sides).sort(function (a, b) {
            var ai = parseInt(a[0], 10), bi = parseInt(b[0], 10);
            if (isNaN(ai)) return 1;
            if (isNaN(bi)) return -1;
            return ai - bi;
        });

        for (var i = 0; i < entries.length; i++) {
            var sideId = entries[i][0];
            var side = entries[i][1] || {};
            var url = side.preview_url
                || (side.image && side.image.cropped_url)
                || (side.image && side.image.original_url)
                || null;

            if (url) {
                res.push({ sideId: sideId, url: url, type: side.type || null, name: side.name || '' });
            }
        }

        // Fallback if sides exist but none had a usable URL
        if (!res.length && data.preview_url) {
            res.push({ sideId: null, url: data.preview_url, type: null });
        }
        return res;
    }

    /**
     * Build a single <figure> with image + caption.
     * @param {{sideId:string|null,url:string,type:string|null}} item
     * @returns {HTMLElement}
     */
    function buildPreviewFigure(item) {
        var fig = document.createElement('figure');
        fig.className = 'customizer-preview';

        var img = document.createElement('img');
        img.src = item.url;
        img.alt = 'Customizer Preview ' + (item.name != null ? ('(Side ' + item.name + ')') : '');
        img.loading = 'lazy';
        img.decoding = 'async';

        var cap = document.createElement('figcaption');
        cap.className = 'customizer-caption';
        cap.textContent = item.name != null
            ? ('Side ' + item.name + (item.type ? (' • ' + item.type) : ''))
            : 'Preview';

        fig.appendChild(img);
        fig.appendChild(cap);
        return fig;
    }

    /**
     * Build a container for all previews.
     * If only one preview is present, return just that figure.
     * Otherwise, return a grid wrapper containing multiple figures.
     * @param {Array<{sideId:string|null,url:string,type:string|null}>} items
     * @returns {HTMLElement|null}
     */
    function buildPreviewGroup(items) {
        if (!items || !items.length) return null;
        if (items.length === 1) {
            return buildPreviewFigure(items[0]);
        }
        var wrapper = document.createElement('div');
        wrapper.className = 'customizer-previews';
        for (var i = 0; i < items.length; i++) {
            wrapper.appendChild(buildPreviewFigure(items[i]));
        }
        return wrapper;
    }

    // Safe JSON.parse wrapper
    function tryParseJSON(str) {
        try { return JSON.parse(str); } catch (_) { return null; }
    }

    /**
     * Process a container: find all targets and replace JSON with previews.
     * Uses a data-attribute flag to avoid double-processing.
     * @param {Element} container
     * @param {string} selector
     */
    function isSha1Hex(str) {
        return /^[a-f0-9]{40}$/i.test(str || '');
    }

    function fetchByHash(hash) {
        var base = (typeof window !== 'undefined' && window.customizerBaseUrl) ? window.customizerBaseUrl.replace(/\/$/, '') : '';
        var url = base + '/customizer-preview/' + encodeURIComponent(hash);
        return fetch(url, { credentials: 'same-origin' }).then(function (r) { return r.json(); });
    }

    function renderError(dd, message) {
        var small = document.createElement('small');
        small.style.color = '#b00';
        small.textContent = message || 'Failed to load preview';
        dd.appendChild(small);
    }

    function renderItemsInto(dd, items) {
        if (!items || !items.length) return false;
        dd.innerHTML = '';
        var groupEl = buildPreviewGroup(items);
        if (groupEl) dd.appendChild(groupEl);
        dd.dataset.customizerPreview = 'done';
        return true;
    }

    // Remove/disable the "Change" link for customized cart items within the same cart item block
    function removeChangeLinksNear(target) {
        if (!target || !(target instanceof Element)) return;
        // Try to limit the scope to the current cart row/title area
        var scope = (target.closest && target.closest('.cart-item, .cart-item-title')) || target;
        var links = scope.querySelectorAll ? scope.querySelectorAll('a[data-item-edit]') : [];
        for (var i = 0; i < links.length; i++) {
            var a = links[i];
            // Prefer removing entirely so it can't be reactivated via keyboard
            if (a && a.parentNode) {
                a.parentNode.removeChild(a);
            }
        }
    }

    function processContainer(container, selector) {
        if (!(container instanceof Element)) return;

        var isTarget = container.matches && container.matches(selector);
        var nodes = isTarget ? [container] : Array.prototype.slice.call(container.querySelectorAll(selector));

        for (var i = 0; i < nodes.length; i++) {
            var dd = nodes[i];
            if (dd.dataset.customizerPreview === 'done' || dd.dataset.customizerPreview === 'loading') continue;

            var raw = (dd.textContent || '').trim();
            if (!raw) continue;

            // 1) Hash anywhere in the text (e.g., "Customized <hash>")
            var m = raw.match(/([a-f0-9]{40})/i);
            if (m && m[1]) {
                (function(target, fullText, hash){
                    target.dataset.customizerPreview = 'loading';
                    var label = fullText.replace(hash, '').trim();
                    fetchByHash(hash).then(function(resp){
                        var items = [];
                        if (resp && resp.ok) {
                            if (Array.isArray(resp.preview_urls) && resp.preview_urls.length) {
                                items = resp.preview_urls;
                            } else if (resp.payload) {
                                items = extractAllPreviewUrls(resp.payload);
                            }
                        }
                        // Render
                        target.innerHTML = '';
                        if (label) {
                            var lbl = document.createElement('div');
                            lbl.className = 'customizer-caption';
                            lbl.textContent = label;
                            target.appendChild(lbl);
                        }
                        if (!renderItemsInto(target, items)) {
                            target.dataset.customizerPreview = '';
                            renderError(target, 'No previews');
                        } else {
                            // Successfully rendered previews -> remove edit link in this cart item
                            removeChangeLinksNear(target);
                        }
                    }).catch(function(){
                        target.dataset.customizerPreview = '';
                        renderError(target, 'Failed to load preview');
                    });
                })(dd, raw, m[1]);
                continue;
            }

            // 2) Legacy flow: the whole text is JSON payload
            if (raw.charAt(0) !== '{') continue;
            var data = tryParseJSON(raw);
            if (!data) continue;

            var items = extractAllPreviewUrls(data);
            if (!items.length) continue;

            dd.innerHTML = '';
            var groupEl = buildPreviewGroup(items);
            if (groupEl) dd.appendChild(groupEl);
            dd.dataset.customizerPreview = 'done';
            // Legacy flow also indicates a customized item → remove edit link nearby
            removeChangeLinksNear(dd);
        }
    }

    /**
     * Observe DOM mutations to handle dynamically inserted targets or text changes.
     * @param {string} selector
     * @returns {MutationObserver}
     */
    function watchDOM(selector) {
        var mo = new MutationObserver(function (mutations) {
            for (var i = 0; i < mutations.length; i++) {
                var m = mutations[i];

                // Scan newly added nodes
                for (var j = 0; j < m.addedNodes.length; j++) {
                    var n = m.addedNodes[j];
                    processContainer(n, selector);
                }

                // Also rescan parent if list/text changed
                if (m.type === 'childList' || m.type === 'characterData') {
                    if (m.target) processContainer(m.target.parentElement || document, selector);
                }
            }
        });

        mo.observe(document.documentElement, {
            childList: true,
            subtree: true,
            characterData: true
        });

        return mo;
    }

    var observerRef = null;
    var inited = false;

    /**
     * Initialize the previews script.
     * @param {{selector?:string, injectStyles?:boolean, css?:string}} [options]
     */
    function init(options) {
        if (inited) return;
        inited = true;

        var selector = (options && options.selector) || DEFAULT_SELECTOR;
        var inject = options && options.injectStyles !== undefined ? options.injectStyles : true;
        var css = options && options.css;

        if (inject) injectStyles(css);

        // Initial pass
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', function () {
                processContainer(document, selector);
            });
        } else {
            processContainer(document, selector);
        }

        // Observe subsequent DOM changes
        observerRef = watchDOM(selector);
    }

    // Disconnect the observer and mark as uninitialized
    function destroy() {
        inited = false;
        if (observerRef && observerRef.disconnect) observerRef.disconnect();
        observerRef = null;
    }

    // Auto-init unless disabled by host page
    if (typeof window !== 'undefined' && window.CustomizerPreviewsAutoInit !== false) {
        // Small defer to allow host page to set CustomizerPreviewsAutoInit=false before this runs
        setTimeout(function () { try { init(); } catch (e) {} }, 0);
        // (Errors are swallowed to avoid breaking the host page)
    }

    return { init: init, destroy: destroy };
});

// Hide a product option by its label text (e.g., "Customized"), regardless of option_id
(function () {
    var TARGET_LABEL = 'Customized:';
    var FORM_SELECTOR = 'form[data-cart-item-add]';
    var FIELD_SELECTOR = '.form-field[data-product-attribute="input-text"]';
    var MARK = 'hiddenByCustomizerScript';

    function normalize(s) {
        return (s || '')
            .replace(/\s+/g, ' ')         // collapse spaces/newlines
            .replace(/Optional/i, '')     // strip "Optional" that BC often appends
            .trim()
            .toLowerCase();
    }

    // Extract only the main label text (ignore <small>Optional</small>)
    function mainLabelText(labelEl) {
        if (!labelEl) return '';
        // take only text nodes (nodeType 3)
        var parts = [];
        for (var i = 0; i < labelEl.childNodes.length; i++) {
            var n = labelEl.childNodes[i];
            if (n.nodeType === 3) parts.push(n.nodeValue || '');
        }
        var fallback = parts.join(' ').trim();
        if (!fallback) {
            fallback = (labelEl.textContent || '').trim();
        }
        return normalize(fallback);
    }

    function hideCustomizerDataField(root) {
        root = root || document;
        var forms = root.querySelectorAll(FORM_SELECTOR);
        if (!forms.length) return;

        var targetNorm = normalize(TARGET_LABEL);

        forms.forEach(function (form) {
            var fields = form.querySelectorAll(FIELD_SELECTOR);

            fields.forEach(function (ff) {
                if (ff.dataset[MARK] === '1') return;

                var label = ff.querySelector('label');
                var textNorm = mainLabelText(label);

                if (textNorm === targetNorm) {
                    // Hide entire field
                    ff.style.display = 'none';

                    // Also set input type=hidden so value still posts (safety; display:none is fine too)
                    var input = ff.querySelector('input.form-input');
                    if (input) {
                        try { input.type = 'hidden'; } catch (_) {}
                    }

                    ff.dataset[MARK] = '1';
                }
            });
        });
    }

    // initial run
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', function () { hideCustomizerDataField(document); });
    } else {
        hideCustomizerDataField(document);
    }

    // watch for dynamic changes (theme may re-render options)
    var mo = new MutationObserver(function (mut) {
        for (var i = 0; i < mut.length; i++) {
            var m = mut[i];
            if (m.type === 'childList') {
                for (var j = 0; j < m.addedNodes.length; j++) {
                    var n = m.addedNodes[j];
                    if (n.nodeType === 1) hideCustomizerDataField(n);
                }
                if (m.target && m.target.nodeType === 1) hideCustomizerDataField(m.target);
            }
        }
    });
    mo.observe(document.documentElement, { childList: true, subtree: true });
})();