// app_organizations.js
const socket = io();

// ── Socket events ─────────────────────────────────────────────────────────────

socket.on("connect", () => {
    console.log("Connected to server");
    refreshOrganizations();
});

socket.on("connect_error", (err) => {
    console.error("Connection error:", err);
    setStatus("Connection error. Please reload.", false);
});

socket.on("organizations_data", function(data) {
    renderOrganizations(data.organizations || []);
    setStatus("", null);
    setRefreshEnabled(true);
});

socket.on("organizations_response", function(data) {
    setStatus(data.message, data.success);
    setRefreshEnabled(true);
});

// ── Actions ───────────────────────────────────────────────────────────────────

function refreshOrganizations() {
    setStatus("Loading organizations...", null);
    setRefreshEnabled(false);
    socket.emit("get_organizations", {});
}

function saveSelection() {
    const checkboxes = document.querySelectorAll(".org-checkbox");
    const selected = Array.from(checkboxes).map(cb => ({
        id: parseInt(cb.dataset.id),
        selected: cb.checked ? 1 : 0
    }));

    if (selected.length === 0) {
        setStatus("No organizations to save.", false);
        return;
    }

    setStatus("Saving...", null);
    socket.emit("save_organizations", { organizations: selected });
}

function selectAll() {
    document.querySelectorAll(".org-checkbox").forEach(cb => cb.checked = true);
}

function selectNone() {
    document.querySelectorAll(".org-checkbox").forEach(cb => cb.checked = false);
}

function invertSelection() {
    document.querySelectorAll(".org-checkbox").forEach(cb => cb.checked = !cb.checked);
}

// ── Rendering ─────────────────────────────────────────────────────────────────

function renderOrganizations(orgs) {
    const container = document.getElementById("orgList");

    if (orgs.length === 0) {
        container.innerHTML = '<div class="org-list-empty">No active organizations found.</div>';
        return;
    }

    container.innerHTML = orgs.map(org => `
        <div class="org-item" onclick="toggleCheckbox(${org.id})">
            <input
                type="checkbox"
                class="org-checkbox"
                id="org_${org.id}"
                data-id="${org.id}"
                ${org.selected ? "checked" : ""}
                onclick="event.stopPropagation()"
            >
            <label for="org_${org.id}">${escapeHtml(org.name)}</label>
        </div>
    `).join("");
}

function toggleCheckbox(orgId) {
    const cb = document.getElementById(`org_${orgId}`);
    if (cb) cb.checked = !cb.checked;
}

// ── Helpers ───────────────────────────────────────────────────────────────────

function setStatus(message, success) {
    const el = document.getElementById("statusMessage");
    el.innerText = message;
    if (success === true)       el.style.color = "#4db6ac";
    else if (success === false) el.style.color = "#e57373";
    else                        el.style.color = "#bb86fc";
}

function setRefreshEnabled(enabled) {
    document.getElementById("btnRefresh").disabled = !enabled;
}

function escapeHtml(str) {
    return String(str)
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;");
}