const checkboxState = new Map();

document.addEventListener('DOMContentLoaded', () => {

    document.body.addEventListener('htmx:beforeSwap', function(event) {
        if (event.target.id === "agentList") {
            saveCheckboxState();
        }
    });

    document.body.addEventListener('htmx:afterSwap', function(event) {
        if (event.target.id === "agentList") {
            restoreCheckboxState();
            updateAgentDropdown();
            bindRowClicks();
        }
    });

    bindRowClicks();
    restoreCheckboxState();

    themeToggle();
});

// function prepareAgentNames(event) {
//         // Determine which form was submitted
//     const form = event.target;

//     // Collect selected agent names
//     const selected = Array.from(document.querySelectorAll('.agent-checkbox'))
//         .filter(cb => cb.checked)
//         .map(cb => cb.dataset.agentName);

//     // Get the hidden input and select within the submitted form
//     const hiddenInput = form.querySelector('[name="agentNames"]');
//     const agentSelect = form.querySelector('select[name="agentName"], select#agentName, select#modalAgentName');

//     if (selected.length > 0) {
//         // Remove the name from the <select> so only agentNames is submitted
//         if (agentSelect) {
//             agentSelect.removeAttribute('name');
//         }
//         hiddenInput.value = selected.join(',');
//     } else {
//         // Re-enable <select> if no checkboxes selected
//         if (agentSelect) {
//             agentSelect.setAttribute('name', 'agentName');
//         }
//         hiddenInput.value = '';
//     }
// }

let cachedAgentNames = '';

function prepareAgentNames(event) {
    const form = event.target;

    // Only set agentNames if this is the navbar form
    const isNavbarForm = form.id === 'agentCommands';

    // If this is the first submission (navbar), calculate agentNames
    if (isNavbarForm) {
        const selected = Array.from(document.querySelectorAll('.agent-checkbox'))
            .filter(cb => cb.checked)
            .map(cb => cb.dataset.agentName);

        cachedAgentNames = selected.join(',');

        const hiddenInput = form.querySelector('[name="agentNames"]');
        const agentSelect = form.querySelector('select');

        if (selected.length > 0) {
            if (agentSelect) agentSelect.removeAttribute('name');
            hiddenInput.value = cachedAgentNames;
        } else {
            if (agentSelect) agentSelect.setAttribute('name', 'agentName');
            hiddenInput.value = '';
        }
    } else {
        // Use cached value for modal form
        const hiddenInput = form.querySelector('[name="agentNames"]');
        hiddenInput.value = cachedAgentNames;
    }
}

function toggleAllCheckboxes() {
    const checkboxes = document.querySelectorAll('input[name="agent-checkbox"]');
    const allChecked = Array.from(checkboxes).every(checkbox => checkbox.checked);

    checkboxes.forEach(checkbox => checkbox.checked = !allChecked);
    saveCheckboxState();

}

function saveCheckboxState() {
    document.querySelectorAll('.agent-checkbox').forEach((checkbox) => {
        checkboxState.set(checkbox.dataset.agentName, checkbox.checked);
    });
}

function restoreCheckboxState() {
    document.querySelectorAll('.agent-checkbox').forEach((checkbox) => {
        const state = checkboxState.get(checkbox.dataset.agentName);
        if (state !== undefined) {
            checkbox.checked = state;
        }
    });
}

function bindRowClicks() {
    const rows = document.querySelectorAll('#agentList tbody tr');
    rows.forEach(row => {
        const agentName = row.dataset.agentName || row.cells[1]?.textContent?.trim();
        row.dataset.agentName = agentName;

        row.addEventListener('click', (e) => {
            if (e.target.tagName === "BUTTON" || e.target.type === "checkbox") return;

            const checkbox = row.querySelector(`input.agent-checkbox[data-agent-name="${agentName}"]`);
            if (checkbox) {
                checkbox.checked = !checkbox.checked;
                saveCheckboxState();
            }
        });
    });
}

function updateAgentDropdown() {
    const select = document.getElementById("agentName");
    const optionValues = Array.from(select.options).map(opt => opt.value);
    const rows = document.querySelectorAll("#agentList tbody tr");

    rows.forEach(row => {
        const status = row.cells[4].textContent.trim();
        const name = row.cells[1].textContent.trim();

        if (status === "Connected") {
            row.cells[4].innerHTML = '<span class="badge bg-success">Connected</span>';
            const option = document.createElement("option");
            if (!(optionValues.includes(name))) {
                option.value = name;
                option.textContent = name;
                select.appendChild(option);
            }
        }

        if (status === "Disconnected") {
            row.cells[4].innerHTML = '<span class="badge bg-danger">Disconnected</span>';
            const option = Array.from(select.options).find(opt => opt.value === name);
            if(option) {
                select.removeChild(option);
            }
        }
    });
}

function themeToggle() {
  const body = document.body;
  const toggleBtn = document.getElementById('themeToggleButton');

  function applyTheme(theme) {
    body.setAttribute('data-bs-theme', theme);
    body.classList.remove('bg-light', 'text-dark', 'bg-dark', 'text-light');
    if (theme === 'dark') {
      body.classList.add('bg-dark', 'text-light');
      toggleBtn.innerHTML = '<i class="bi bi-moon"></i>';
    } else {
      body.classList.add('bg-light', 'text-dark');
      toggleBtn.innerHTML = '<i class="bi bi-sun"></i>';
    }
  }

  const savedTheme = localStorage.getItem('theme') || 'light';
  applyTheme(savedTheme);

  toggleBtn.addEventListener('click', () => {
    const currentTheme = body.getAttribute('data-bs-theme');
    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
    applyTheme(newTheme);
  });
}