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

// Criticity levels mapping
const CRITICITY_LEVELS = [
    { value: 0, label: "0 - (undefined)"  },
    { value: 1, label: "1 - VERY_HIGH"    },
    { value: 2, label: "2 - HIGH"         },
    { value: 3, label: "3 - MEDIUM"       },
    { value: 4, label: "4 - LOW"          },
    { value: 5, label: "5 - INFORMATION"  }
];

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

socket.on("connect", () => {
    console.log("Connected to server");
    setStatus("Loading ticket priorities...", null);
    socket.emit("get_ticket_criticity", {});
});

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

socket.on("criticity_data", function(data) {
    renderCriticityList(data.priorities || []);
    setStatus("", null);
});

socket.on("criticity_response", function(data) {
    setStatus(data.message, data.success);
});

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

function saveCriticity() {
    const selects = document.querySelectorAll(".criticity-select");
    const priorities = Array.from(selects).map(sel => ({
        id:       parseInt(sel.dataset.id),
        subType:  sel.dataset.subtype,
        criticity: parseInt(sel.value)
    }));

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

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

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

function renderCriticityList(priorities) {
    const container = document.getElementById("criticityList");

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

    container.innerHTML = priorities.map(p => {
        const selectId = `criticity_${p.id}_${escapeAttr(p.subType)}`;
        const options = CRITICITY_LEVELS.map(level =>
            `<option value="${level.value}" ${p.criticity === level.value ? "selected" : ""}>${escapeHtml(level.label)}</option>`
        ).join("");

        return `
        <div class="criticity-item">
            <label for="${selectId}">${escapeHtml(p.subType)} / ${escapeHtml(p.reference)}</label>
            <select
                class="criticity-select"
                id="${selectId}"
                data-id="${p.id}"
                data-subtype="${escapeAttr(p.subType)}"
                data-value="${p.criticity}"
                onchange="updateSelectColor(this)"
            >${options}</select>
        </div>
        `;
    }).join("");

    // Apply colors on initial render
    document.querySelectorAll(".criticity-select").forEach(updateSelectColor);
}

function updateSelectColor(sel) {
    sel.dataset.value = sel.value;
}

// ── 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 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, "_");
}