document.addEventListener("DOMContentLoaded", () => {
    const studentsList = document.getElementById("students-list");
    const criteriaContent = document.getElementById("criteria-content");
    const saveButton = document.getElementById("save-button");
    const studentsTab = document.getElementById("students-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 = {};
    let progiOcen = [];

    // Ł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()),
        fetch("http://localhost:4000/oceny").then(response => response.json())
    ])
    .then(([uczniowieData, kryteriaData, daneData, ocenyData]) => {
        uczniowie = uczniowieData.uczniowie;
        kryteria = kryteriaData;
        dane = daneData;
        progiOcen = ocenyData.progi;
        console.log("Uczniowie:", uczniowie);
        console.log("Kryteria:", kryteria);
        console.log("Dane:", dane);
        console.log("Progi ocen:", progiOcen);
        renderStudents();
        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");
            details.style.position = "relative"; // Pozycjonowanie względne dla stats-section
            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";

            let totalPoints = 0;

            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 inputWrapper = document.createElement("div");
                inputWrapper.className = "input-wrapper"; // Nowy wrapper dla inputu
                const input = document.createElement("input");
                input.type = "number";
                input.min = "0";
                input.value = dane[studentKey]?.[criteria.nazwa] || 0;

                // Zapisz zmiany lokalnie w pamięci (bez natychmiastowego zapisu)
                input.addEventListener("input", () => {
                    if (!dane[studentKey]) {
                        dane[studentKey] = {};
                    }
                    dane[studentKey][criteria.nazwa] = parseInt(input.value) || 0;
                });

                inputWrapper.appendChild(input); // Dodaj input do wrappera
                criteriaItem.appendChild(label);
                criteriaItem.appendChild(pointsInfo);
                criteriaItem.appendChild(inputWrapper); // Dodaj wrapper z inputem
                criteriaList.appendChild(criteriaItem);

                // Oblicz sumę punktów
                const count = dane[studentKey]?.[criteria.nazwa] || 0;
                totalPoints += count * criteria.punkty;
            });

            // Wybierz ocenę na podstawie punktów
            const ocena = progiOcen.find(prog => totalPoints >= prog.min)?.ocena || 1;

            // Dodaj sekcję z punktami i oceną w prawym górnym rogu
            const statsSection = document.createElement("div");
            statsSection.className = "stats-section";

            const statsBox = document.createElement("div");
            statsBox.className = "stats-box";

            const totalPointsElement = document.createElement("div");
            totalPointsElement.className = "total-points";
            totalPointsElement.textContent = `Punkty: ${totalPoints}`;
            statsBox.appendChild(totalPointsElement);

            const gradeElement = document.createElement("div");
            gradeElement.className = "grade";
            gradeElement.textContent = `Ocena: ${ocena}`;
            statsBox.appendChild(gradeElement);

            statsSection.appendChild(statsBox);
            details.appendChild(statsSection); // Dodaj stats-section do details

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

    // 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";
        criteriaContent.style.display = "none";
    });

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

    // 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!");
                renderStudents(); // Odśwież listę uczniów
            } else {
                alert("Wystąpił błąd podczas zapisywania danych.");
            }
        })
        .catch(error => console.error("Błąd zapisywania danych:", error));
    });
});