let uczniowie = {};
let kryteria = [];
let dane = {};

document.addEventListener("DOMContentLoaded", () => {
    const classSelect = document.getElementById("class-select");
    const studentsList = document.getElementById("students-list");
    const saveButton = document.getElementById("save-button");
    const statsTab = document.getElementById("stats-tab");
    const statsContent = document.getElementById("stats-content");

    // Ładowanie danych z serwera
    Promise.all([
        fetch("http://localhost:4000/uczniowie").then(response => response.json()),
        fetch("http://localhost:4000/kryteria").then(response => response.json()),
        fetch("http://localhost:4000/dane").then(response => response.json())
    ])
        .then(([uczniowieData, kryteriaData, daneData]) => {
            uczniowie = uczniowieData.klasy;
            kryteria = kryteriaData;
            dane = daneData;

            populateClassSelect();
            renderStats(); // Renderuj statystyki przy ładowaniu
        })
        .catch(error => console.error("Błąd ładowania danych:", error));

    // Wypełnij listę klas
    function populateClassSelect() {
        Object.keys(uczniowie).forEach(klasa => {
            const option = document.createElement("option");
            option.value = klasa;
            option.textContent = klasa;
            classSelect.appendChild(option);
        });

        // Wyświetl pierwszą klasę domyślnie
        if (classSelect.options.length > 0) {
            classSelect.value = classSelect.options[0].value;
            renderStudents(classSelect.value);
        }
    }

    // Aktualizuj listę uczniów po wyborze klasy
    classSelect.addEventListener("change", () => {
        const selectedClass = classSelect.value;
        renderStudents(selectedClass);
        renderStats(); // Aktualizuj statystyki po zmianie klasy
    });

    // Renderuj uczniów
    function renderStudents(className) {
        studentsList.innerHTML = "";
        const students = uczniowie[className];

        students.forEach(student => {
            const studentKey = `${className}-${student.imie}-${student.nazwisko}`;
            const details = document.createElement("details");
            const summary = document.createElement("summary");

            summary.textContent = `${student.imie} ${student.nazwisko}`;
            details.appendChild(summary);

            const criteriaList = document.createElement("div");
            criteriaList.className = "criteria-list";

            kryteria.forEach(criteria => {
                const criteriaItem = document.createElement("div");
                criteriaItem.className = "criteria-item";

                const label = document.createElement("span");
                label.textContent = criteria.nazwa;

                const pointsInfo = document.createElement("span");
                pointsInfo.className = "points-info";
                pointsInfo.textContent = `(${criteria.punkty} pkt)`;

                const input = document.createElement("input");
                input.type = "number";
                input.min = "0";

                // Wyszukaj dane ucznia w pliku `dane.json`
                const savedStudent = dane[className]?.find(s => s.uczen.imie === student.imie && s.uczen.nazwisko === student.nazwisko);
                input.value = savedStudent?.uczen[criteria.nazwa] || 0;

                input.addEventListener("input", () => {
                    if (!savedStudent) {
                        dane[className] = dane[className] || [];
                        dane[className].push({
                            uczen: {
                                imie: student.imie,
                                nazwisko: student.nazwisko
                            }
                        });
                    }

                    const currentStudent = dane[className].find(s => s.uczen.imie === student.imie && s.uczen.nazwisko === student.nazwisko);
                    currentStudent.uczen[criteria.nazwa] = parseInt(input.value) || 0;

                    renderStats(); // Aktualizuj statystyki po edycji danych
                });

                criteriaItem.appendChild(label);
                criteriaItem.appendChild(pointsInfo);
                criteriaItem.appendChild(input);
                criteriaList.appendChild(criteriaItem);
            });

            details.appendChild(criteriaList);
            studentsList.appendChild(details);
        });
    }

    // Zapisz dane na zewnętrznym serwerze
    saveButton.addEventListener("click", () => {
        fetch("http://localhost:4000/dane", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify(dane)
        })
            .then(response => {
                if (response.ok) {
                    alert("Dane zostały zapisane!");
                } else {
                    alert("Wystąpił błąd podczas zapisywania danych.");
                }
            })
            .catch(error => console.error("Błąd zapisywania danych:", error));
    });

    // Renderuj statystyki
    function renderStats() {
        statsContent.innerHTML = "";

        const selectedClass = classSelect.value;
        const students = uczniowie[selectedClass];

        if (!students) return;

        students.forEach(student => {
            const savedStudent = dane[selectedClass]?.find(s => s.uczen.imie === student.imie && s.uczen.nazwisko === student.nazwisko);

            let totalPoints = 0;
            if (savedStudent) {
                kryteria.forEach(criteria => {
                    const count = savedStudent.uczen[criteria.nazwa] || 0;
                    totalPoints += count * criteria.punkty;
                });
            }

            const studentDiv = document.createElement("div");
            studentDiv.className = "stat-item";

            const name = document.createElement("strong");
            name.textContent = `${student.imie} ${student.nazwisko}`;

            const points = document.createElement("span");
            points.className = "points";
            points.textContent = `${totalPoints} pkt`;
            if (totalPoints > 0) {
                points.classList.add("positive");
            } else if (totalPoints < 0) {
                points.classList.add("negative");
            }

            studentDiv.appendChild(name);
            studentDiv.appendChild(points);
            statsContent.appendChild(studentDiv);
        });
    }

    // Przełączanie między zakładkami
    statsTab.addEventListener("click", () => {
        studentsList.style.display = "none";
        statsContent.style.display = "block";
    });

    const studentsTab = document.getElementById("students-tab");
    studentsTab.addEventListener("click", () => {
        studentsList.style.display = "block";
        statsContent.style.display = "none";
    });
});