(function() {
    if (window.location.pathname !== '/challenges') return;

    // LocalStorage to bypass server-side cache delays
    const getLocalSolves = () => JSON.parse(localStorage.getItem('temp_solves') || "[]");
    const addLocalSolve = (id) => {
        const solves = getLocalSolves();
        if (!solves.includes(id)) {
            solves.push(id);
            localStorage.setItem('temp_solves', JSON.stringify(solves));
        }
    };

    function injectBoxes(config) {
        // Highlight locally solved challenges
        getLocalSolves().forEach(id => {
            const el = document.querySelector(`[data-id="${id}"]`);
            if (el && !el.classList.contains('solved')) el.classList.add('solved');
        });

        const enabledCategories = config.categories || [];
        // We look for category headers
        document.querySelectorAll('.category-header').forEach(header => {
            const catName = header.textContent.trim();
            
            // Prevent duplicate injections
            if (enabledCategories.includes(catName) && !header.parentElement.querySelector('.cat-sub-container')) {
                
                const container = document.createElement('div');
                container.className = "cat-sub-container mb-4";
                // Style to match the alignment of the text exactly
                container.style.maxWidth = "700px";
                container.style.marginTop = "10px";

                container.innerHTML = `
                    <div class="input-group" style="display: flex; width: 100%;">
                        <input type="text" 
                               class="form-control bg-dark text-light" 
                               placeholder="Submit ${catName} flag..." 
                               id="in-${catName.replace(/\s+/g, '-')}" 
                               autocomplete="off"
                               style="border-color: #495057; border-top-right-radius: 0; border-bottom-right-radius: 0; height: 45px;">
                        <div class="input-group-append" style="margin-left: -1px;">
                            <button class="btn btn-success btn-sub" 
                                    type="button"
                                    style="border-top-left-radius: 0; border-bottom-left-radius: 0; height: 45px; font-weight: 600; padding: 0 25px;">
                                Submit
                            </button>
                        </div>
                    </div>
                    <div class="status-msg mt-2" style="min-height: 24px; font-size: 0.9rem; font-weight: 500;"></div>
                `;
                
                header.after(container);

                const input = container.querySelector('input');
                const btn = container.querySelector('button');
                const msg = container.querySelector('.status-msg');

                const submitFlag = () => {
                    const val = input.value.trim();
                    if (!val || btn.disabled) return;

                    btn.disabled = true;
                    msg.innerHTML = '<span class="text-info">Checking flag...</span>';
                    
                    const params = new URLSearchParams({ 
                        submission: val, 
                        category: catName, 
                        nonce: init.csrfNonce 
                    });

                    fetch('/category_submit', {
                        method: 'POST',
                        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                        body: params
                    })
                    .then(r => r.json())
                    .then(data => {
                        if (data.success) {
                            addLocalSolve(data.challenge_id);
                            msg.innerHTML = `<span class="text-success">✔ ${data.message}</span>`;
                            input.value = '';
                            
                            // Visual feedback on the challenge card
                            const card = document.querySelector(`[data-id="${data.challenge_id}"]`);
                            if (card) card.classList.add('solved');
                            
                            setTimeout(() => { window.location.reload(); }, 1200);
                        } else {
                            msg.innerHTML = `<span class="text-danger">✘ ${data.message}</span>`;
                            btn.disabled = false;
                        }
                    })
                    .catch(() => {
                        msg.innerHTML = '<span class="text-danger">Submission error</span>';
                        btn.disabled = false;
                    });
                };

                btn.onclick = submitFlag;
                input.onkeypress = (e) => { if (e.key === 'Enter') submitFlag(); };
            }
        });
    }

    fetch('/category_submit/config')
    .then(r => r.json())
    .then(config => {
        injectBoxes(config);
        const observer = new MutationObserver(() => {
            observer.disconnect();
            injectBoxes(config);
            observer.observe(document.body, { childList: true, subtree: true });
        });
        observer.observe(document.body, { childList: true, subtree: true });
    });
})();