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

function prepareAgentNames(event) {
    const selected = Array.from(document.querySelectorAll('.agent-checkbox'))
        .filter(cb => cb.checked)
        .map(cb => cb.dataset.agentName);

    const hiddenInput = document.getElementById('agentNamesInput');

    if (selected.length > 0) {
        document.getElementById('agentName').removeAttribute('name');
        hiddenInput.value = selected.join(',');
    } else {
        document.getElementById('agentName').setAttribute('name', 'agentName');
        hiddenInput.value = '';
    }
}

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