(() => {
    'use strict';
    
    const $ = (sel, root=document) => root.querySelector(sel);
    const $$ = (sel, root=document) => Array.from(root.querySelectorAll(sel));
    
    // SSL fields
    const sslCheckbox = $('#ssl_checkbox');
    const sslFields = $('#ssl_fields');
    const toggle = (on, el) => el.classList.toggle('d-none', !on);
    
    sslCheckbox?.addEventListener('change', () => toggle(sslCheckbox.checked, sslFields));
    
    // DOS
    const dosCheckbox = $('#add_dos');
    const dosFields = $('#dos_fields');
    dosCheckbox?.addEventListener('change', () => toggle(dosCheckbox.checked, dosFields));
    
    // HTTP only groups
    const protocolSelect = $('#protocol');
    const httpGroups = $$('.http-only, #forbidden_acl_container');
    const httpToggles = [
        $('#sql_injection_check'),
        $('#xss_check'),
        $('#remote_uploads_check'),
        $('#webshells_check'),
        $('#forward_for_check'),
        $('#add_acl_path'),
        $('#add_path_based'),
    ];
    
    const forbiddenFields = $('#forbidden_fields');
    const pathFields = $('#base_redirect_fields');
    
    const onProtocolChange = () => {
        const isHttp = protocolSelect?.value === 'http';
        httpGroups.forEach(el => toggle(isHttp, el));
        
        if (!isHttp) {
            // hide optional groups if protocol != http
            [forbiddenFields, pathFields].forEach(el => el && toggle(false, el));
            httpToggles.forEach(input => {
                if (input) input.checked = false;
            });
        }
    };
    
    protocolSelect?.addEventListener('change', onProtocolChange);
    onProtocolChange();
    
    // ACL
    const aclCheckbox = $('#add_acl');
    const aclFields = $('#acl_fields');
    aclCheckbox?.addEventListener('change', () => toggle(aclCheckbox.checked, aclFields));
    
    // toggles that reveal their fields
    const bindToggle = (checkboxSel, targetSel) => {
        const cb = $(checkboxSel);
        const target = $(targetSel);
        cb?.addEventListener('change', () => toggle(cb.checked, target));
        // initial
        if (cb && target) toggle(cb.checked, target);
    };
    
    bindToggle('#add_path_based', '#base_redirect_fields');
    bindToggle('#add_acl_path', '#forbidden_fields');
    
    const lbMethodSelect = $('#lb_method');
    const backendServersContainer = $('#backend_servers_container');
    const addServerBtn = $('#add_backend_btn');
    
    const onLbMethodChange = () => {
        const isNoLb = lbMethodSelect?.value === 'no-lb';
        
        if (isNoLb) {
            if (addServerBtn) addServerBtn.classList.add('d-none');
            
            const serverRows = $$('.backend-server-row', backendServersContainer);
            serverRows.forEach((row, idx) => {
                if (idx > 0) row.remove();
            });
            
            if (!$('.no-lb-info')) {
                const info = document.createElement('div');
                info.className = 'alert alert-info alert-sm no-lb-info mt-2';
                info.innerHTML = '<i class="bi bi-info-circle me-2"></i><small>Tryb <strong>no-lb</strong>: frontend → backend → pojedynczy serwer. Możesz włączyć XSS, DOS, SQL injection protection itp.</small>';
                if (backendServersContainer?.parentElement) {
                    backendServersContainer.parentElement.appendChild(info);
                }
            }
        } else {
            if (addServerBtn) addServerBtn.classList.remove('d-none');
            
            const info = $('.no-lb-info');
            if (info) info.remove();
        }
    };
    
    lbMethodSelect?.addEventListener('change', onLbMethodChange);
    // Wywołaj na starcie
    if (lbMethodSelect) onLbMethodChange();
    
    // Backend rows
    let serverCount = 1;
    const container = $('#backend_servers_container');
    const addBtn = $('#add_backend_btn');
    
    const createRow = () => {
        serverCount++;
        const row = document.createElement('div');
        row.className = 'row g-3 backend-server-row mt-1';
        row.innerHTML = `
            <div class="col-md-3">
                <input type="text" class="form-control" name="backend_server_names[]" placeholder="server${serverCount}" required>
            </div>
            <div class="col-md-4">
                <input type="text" class="form-control" name="backend_server_ips[]" placeholder="192.168.1.${serverCount}" required>
            </div>
            <div class="col-md-2">
                <input type="number" class="form-control" name="backend_server_ports[]" placeholder="80" min="1" max="65535" required>
            </div>
            <div class="col-md-2">
                <input type="number" class="form-control" name="backend_server_maxconns[]" placeholder="100">
            </div>
            <div class="col-md-1">
                <button type="button" class="btn btn-danger btn-sm w-100 remove-server">
                    <i class="bi bi-trash"></i>
                </button>
            </div>
        `;
        
        const removeBtn = row.querySelector('.remove-server');
        removeBtn.addEventListener('click', () => row.remove());
        
        return row;
    };
    
    addBtn?.addEventListener('click', () => {
        if (container) {
            container.appendChild(createRow());
        }
    });
    
    // Remove button for dynamically added rows
    container?.addEventListener('click', (e) => {
        if (e.target.closest('.remove-server')) {
            e.target.closest('.backend-server-row').remove();
        }
    });
})();