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

    function injectBoxes(config) {
        const enabledCategories = config.categories || [];
        document.querySelectorAll('.category-header').forEach(header => {
            const catName = header.textContent.trim();
            
            // Check if already injected to prevent duplicates
            if (enabledCategories.includes(catName) && !header.nextElementSibling?.classList.contains('cat-sub-row')) {
                const row = document.createElement('div');
                row.className = "cat-sub-row row mb-4 justify-content-center"; 
                row.innerHTML = `
                    <div class="col-md-10">
                        <div class="input-group input-group-lg">
                            <input type="text" 
                                   class="form-control bg-dark text-light border-secondary" 
                                   placeholder="Submit ${catName} flag..." 
                                   id="in-${catName.replace(/\s+/g, '-')}" 
                                   autocomplete="off">
                            <div class="input-group-append">
                                <button class="btn btn-success px-4" type="button">Submit</button>
                            </div>
                        </div>
                        <div class="status-msg mt-2" style="min-height: 24px; font-weight: bold;"></div>
                    </div>
                `;
                header.after(row);

                const input = row.querySelector('input');
                const btn = row.querySelector('button');
                const msg = row.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...</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) {
                            msg.innerHTML = `<span class="text-success">✔ ${data.message}</span>`;
                            input.value = '';
                            setTimeout(() => { window.location.reload(); }, 1000);
                        } 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 });
    });
})();