// index.js — logika formularza FE/BE (bez jQuery)
(() => {
  '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');

  // 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">
        <label class="form-label" for="name${serverCount}">Nazwa serwera</label>
        <input type="text" id="name${serverCount}" class="form-control" name="backend_server_names[]" placeholder="server${serverCount}" required>
      </div>
      <div class="col-md-3">
        <label class="form-label" for="ip${serverCount}">IP</label>
        <input type="text" id="ip${serverCount}" class="form-control" name="backend_server_ips[]" required>
      </div>
      <div class="col-md-3">
        <label class="form-label" for="port${serverCount}">Port</label>
        <input type="number" id="port${serverCount}" class="form-control" name="backend_server_ports[]" required>
      </div>
      <div class="col-md-3">
        <label class="form-label" for="maxconn${serverCount}">MaxConn</label>
        <div class="d-flex gap-2">
          <input type="number" id="maxconn${serverCount}" class="form-control" name="backend_server_maxconns[]">
          <button type="button" class="btn btn-danger" title="Usuń">Usuń</button>
        </div>
      </div>`;
    row.querySelector('button.btn-danger')?.addEventListener('click', () => {
      const rows = $$('.backend-server-row');
      if (rows.length > 1) row.remove();
      else alert('Musi istnieć co najmniej jeden backend.');
    });
    return row;
  };
  addBtn?.addEventListener('click', () => container?.appendChild(createRow()));

  // auto dismiss alerts
  setTimeout(() => $$('.alert').forEach(a => {
    if (typeof bootstrap !== 'undefined') new bootstrap.Alert(a).close();
  }), 5000);
})();