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

    function injectSubmissionBoxes(config) {
        const enabledCategories = config.categories || [];
        const headers = document.querySelectorAll('.category-header');
        
        headers.forEach(header => {
            const catName = header.textContent.trim();
            const alreadyInjected = header.nextElementSibling && 
                                   header.nextElementSibling.classList.contains('cat-sub-row');

            if (enabledCategories.includes(catName) && !alreadyInjected) {
                // Create a row container to match CTFd's grid layout
                const row = document.createElement('div');
                row.className = "cat-sub-row row mb-4 justify-content-center"; 
                
                // Use col-md-8 or 10 to keep the box from being too wide
                row.innerHTML = `
                    <div class="col-md-10">
                        <div class="input-group custom-sub-group">
                            <input type="text" 
                                   class="form-control form-control-lg border-secondary bg-dark text-light" 
                                   placeholder="Found a flag for ${catName}?" 
                                   id="in-${catName.replace(/\s+/g, '-')}" 
                                   autocomplete="off"
                                   style="border-color: rgba(255,255,255,0.1) !important;">
                            <div class="input-group-append">
                                <button class="btn btn-success btn-lg px-4 btn-sub" data-cat="${catName}">Submit</button>
                            </div>
                        </div>
                    </div>
                `;
                
                header.after(row);

                row.querySelector('button').onclick = function() {
                    const btn = this;
                    const input = document.getElementById(`in-${catName.replace(/\s+/g, '-')}`);
                    const val = input.value.trim();
                    if (!val) return;

                    btn.disabled = true;
                    
                    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 => {
                        alert(data.message);
                        if (data.success) location.reload();
                        btn.disabled = false;
                    })
                    .catch(() => {
                        alert("Error submitting flag.");
                        btn.disabled = false;
                    });
                };
            }
        });
    }

    fetch('/category_submit/config')
        .then(r => r.json())
        .then(config => {
            injectSubmissionBoxes(config);
            let timeout;
            const observer = new MutationObserver(() => {
                clearTimeout(timeout);
                timeout = setTimeout(() => {
                    observer.disconnect();
                    injectSubmissionBoxes(config);
                    observer.observe(document.body, { childList: true, subtree: true });
                }, 200); 
            });
            observer.observe(document.body, { childList: true, subtree: true });
        })
        .catch(err => console.error("Could not load category submission config", err));
})();