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

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

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

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

socket.on("priority_data", function(data) {
    renderPriorityList(data.priorities || []);
    setStatus("", null);
    setRefreshEnabled(true);
});

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

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

function refreshPriorities() {
    setStatus("Loading ticket priorities...", null);
    setRefreshEnabled(false);
    socket.emit("get_ticket_priorities", {});
}

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

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

    setStatus("Saving...", null);
    socket.emit("save_ticket_priorities", { priorities: selected });
}

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

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

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

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

function renderPriorityList(priorities) {
    const container = document.getElementById("priorityList");

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

    container.innerHTML = priorities.map(p => `
        <div class="org-item" onclick="toggleCheckbox('priority_${p.id}_${escapeAttr(p.subType)}')">
            <input
                type="checkbox"
                class="priority-checkbox"
                id="priority_${p.id}_${escapeAttr(p.subType)}"
                data-id="${p.id}"
                data-subtype="${escapeAttr(p.subType)}"
                ${p.selected ? "checked" : ""}
                onclick="event.stopPropagation()"
            >
            <label for="priority_${p.id}_${escapeAttr(p.subType)}">${escapeHtml(p.subType)} / ${escapeHtml(p.reference)}</label>
        </div>
    `).join("");
}

function toggleCheckbox(id) {
    const cb = document.getElementById(id);
    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;");
}

function escapeAttr(str) {
    return String(str).replace(/[^a-zA-Z0-9_-]/g, "_");
}