document.addEventListener("DOMContentLoaded", () => {
    const studentsList = document.getElementById("students-list");
    const statsContent = document.getElementById("stats-content");
    const criteriaContent = document.getElementById("criteria-content");
    const saveButton = document.getElementById("save-button");
    const studentsTab = document.getElementById("students-tab");
    const statsTab = document.getElementById("stats-tab");
    const criteriaTab = document.getElementById("criteria-tab");
    const addCriteriaForm = document.getElementById("add-criteria-form");
    const editCriteriaForm = document.getElementById("edit-criteria-form");
    const deleteCriteriaForm = document.getElementById("delete-criteria-form");
    const criteriaListDiv = document.getElementById("criteria-list");
    const editCriteriaNameSelect = document.getElementById("edit-criteria-name");
    const deleteCriteriaNameSelect = document.getElementById("delete-criteria-name");
    let uczniowie = [];
    let kryteria = [];
    let dane = {};

    // Ł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.uczniowie;
        kryteria = kryteriaData;
        dane = daneData;

        console.log("Uczniowie:", uczniowie);
        console.log("Kryteria:", kryteria);
        console.log("Dane:", dane);

        renderStudents();
        renderStats();
        renderCriteria();
    })
    .catch(error => console.error("Błąd ładowania danych:", error));

    // Renderuj uczniów
    function renderStudents() {
        studentsList.innerHTML = "";
        uczniowie.forEach(student => {
            const studentKey = `${student.imie}-${student.nazwisko}`;
            const details = document.createElement("details");
            const summary = document.createElement("summary");
            summary.textContent = `${student.imie} ${student.nazwisko} (${student.klasa})`;
            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";
                const savedStudent = dane[studentKey];
                input.value = savedStudent?.[criteria.nazwa] || 0;
                input.addEventListener("input", () => {
                    if (!savedStudent) {
                        dane[studentKey] = {};
                    }
                    dane[studentKey][criteria.nazwa] = parseInt(input.value) || 0;
                    renderStats();
                });
                criteriaItem.appendChild(label);
                criteriaItem.appendChild(pointsInfo);
                criteriaItem.appendChild(input);
                criteriaList.appendChild(criteriaItem);
            });
            details.appendChild(criteriaList);
            studentsList.appendChild(details);
        });
    }

    // Renderuj statystyki
    function renderStats() {
        statsContent.innerHTML = "";
        uczniowie.forEach(student => {
            const studentKey = `${student.imie}-${student.nazwisko}`;
            const savedStudent = dane[studentKey];
            let totalPoints = 0;
            if (savedStudent) {
                kryteria.forEach(criteria => {
                    const count = savedStudent[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} (${student.klasa})`;
            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);
        });
    }

    // Renderuj listę kryteriów
    function renderCriteria() {
        criteriaListDiv.innerHTML = "";
        editCriteriaNameSelect.innerHTML = "";
        deleteCriteriaNameSelect.innerHTML = "";

        if (!Array.isArray(kryteria) || kryteria.length === 0) {
            console.warn("Brak kryteriów do wyświetlenia.");
            const noCriteriaMessage = document.createElement("p");
            noCriteriaMessage.textContent = "Brak dostępnych kryteriów.";
            criteriaListDiv.appendChild(noCriteriaMessage);
            return;
        }

        kryteria.forEach(criteria => {
            // Wyświetl kryterium na liście
            const criteriaDiv = document.createElement("div");
            criteriaDiv.textContent = `${criteria.nazwa}: ${criteria.punkty} pkt`;
            criteriaListDiv.appendChild(criteriaDiv);

            // Dodaj opcję do edycji
            const editOption = document.createElement("option");
            editOption.value = criteria.nazwa;
            editOption.textContent = criteria.nazwa;
            editCriteriaNameSelect.appendChild(editOption);

            // Dodaj opcję do usunięcia
            const deleteOption = document.createElement("option");
            deleteOption.value = criteria.nazwa;
            deleteOption.textContent = criteria.nazwa;
            deleteCriteriaNameSelect.appendChild(deleteOption);
        });
    }

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

    statsTab.addEventListener("click", () => {
        studentsList.style.display = "none";
        statsContent.style.display = "block";
        criteriaContent.style.display = "none";
    });

    criteriaTab.addEventListener("click", () => {
        studentsList.style.display = "none";
        statsContent.style.display = "none";
        criteriaContent.style.display = "block"; // Pokaż zakładkę "Zarządzanie kryteriami"
        renderCriteria(); // Odśwież listę kryteriów
    });

    // Dodawanie nowego kryterium
    addCriteriaForm.addEventListener("submit", event => {
        event.preventDefault();
        const nazwa = document.getElementById("new-criteria-name").value.trim();
        const punkty = parseInt(document.getElementById("new-criteria-points").value);

        if (!nazwa || isNaN(punkty)) {
            alert("Wprowadź poprawne dane.");
            return;
        }

        fetch("http://localhost:4000/kryteria", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ nazwa, punkty })
        })
        .then(response => {
            if (!response.ok) throw new Error("Błąd dodawania kryterium.");
            return response.text();
        })
        .then(() => {
            alert("Kryterium dodane pomyślnie.");
            return fetch("http://localhost:4000/kryteria").then(response => response.json());
        })
        .then(kryteriaData => {
            kryteria = kryteriaData;
            renderCriteria();
        })
        .catch(error => console.error(error));
    });

    // Edycja istniejącego kryterium
    editCriteriaForm.addEventListener("submit", event => {
        event.preventDefault();
        const nazwa = editCriteriaNameSelect.value;
        const nowaNazwa = document.getElementById("edit-criteria-new-name").value.trim();
        const punkty = parseInt(document.getElementById("edit-criteria-points").value);

        if (!nowaNazwa || isNaN(punkty)) {
            alert("Wprowadź poprawne dane.");
            return;
        }

        fetch(`http://localhost:4000/kryteria/${encodeURIComponent(nazwa)}`, {
            method: "PUT",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ nowaNazwa, punkty })
        })
        .then(response => {
            if (!response.ok) throw new Error("Błąd edycji kryterium.");
            return response.text();
        })
        .then(() => {
            alert("Kryterium zaktualizowane pomyślnie.");
            return fetch("http://localhost:4000/kryteria").then(response => response.json());
        })
        .then(kryteriaData => {
            kryteria = kryteriaData;
            renderCriteria();
        })
        .catch(error => console.error(error));
    });

    // Usuwanie kryterium
    deleteCriteriaForm.addEventListener("submit", event => {
        event.preventDefault();
        const nazwa = deleteCriteriaNameSelect.value;

        fetch(`http://localhost:4000/kryteria/${encodeURIComponent(nazwa)}`, {
            method: "DELETE"
        })
        .then(response => {
            if (!response.ok) throw new Error("Błąd usuwania kryterium.");
            return response.text();
        })
        .then(() => {
            alert("Kryterium usunięte pomyślnie.");
            return fetch("http://localhost:4000/kryteria").then(response => response.json());
        })
        .then(kryteriaData => {
            kryteria = kryteriaData;
            renderCriteria();
        })
        .catch(error => console.error(error));
    });

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