(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();
            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="form-row">
                            <div class="col-9">
                                <input type="text" 
                                       class="form-control form-control-lg bg-dark text-light border-secondary" 
                                       placeholder="Submit a flag for ${catName}..." 
                                       id="in-${catName.replace(/\s+/g, '-')}" 
                                       autocomplete="off">
                            </div>
                            <div class="col-3">
                                <button class="btn btn-success btn-lg btn-block" data-cat="${catName}">Submit</button>
                            </div>
                        </div>
                        <div class="status-msg mt-2" style="min-height: 24px; font-weight: bold;"></div>
                    </div>
                `;
                header.after(row);

                row.querySelector('button').onclick = function() {
                    const btn = this;
                    const container = row.querySelector('.col-md-10');
                    const input = container.querySelector('input');
                    const msg = container.querySelector('.status-msg');
                    const val = input.value.trim();
                    if (!val) 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 = '';
                            // Delay reload slightly so the user sees the success message
                            setTimeout(() => { window.location.reload(); }, 1200);
                        } else {
                            msg.innerHTML = `<span class="text-danger">✘ ${data.message}</span>`;
                            btn.disabled = false;
                        }
                    });
                };
            }
        });
    }

    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 });
    });
})();