source: frontend/web3-eDnevnik_Frontend/src/pages/PredmetenNastavnikPages/PredmetenNastavnik_CreateKrajnaOcenka/PredmetenNastavnik_CreateKrajnaOcenka.jsx

import { useState, useEffect } from "react";
import { useParams, Link, useNavigate } from "react-router-dom";
import NavbarKlasen from "../../../components/navbarKlasen/NavbarKlasen";

import axios from "axios";

const PredmetenNastavnik_CreateKrajnaOcenka = () => {
  const navigate = useNavigate();
  const { studentId } = useParams();
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(true);
  const [teacherId, setTeacherId] = useState("");
  const { classId } = useParams();
  const [studentInfo, setStudentInfo] = useState("");
  const [predmeti, setPredmeti] = useState([]);

  const [formData, setFormData] = useState({
    ocenka: "",
    datum: "",
    zabeleska: "",
    vnesena_Od: teacherId,
    dobienaZaUcenikot_Id: studentId,
    eZaPredmetot_Id: predmeti.id,

    tip: "",
  });

  useEffect(() => {
    const fetchInitialData = async () => {
      try {
        setLoading(true);

        const [resMe, resStudent] = await Promise.all([
          axios.get("http://localhost:8080/api/auth/me", {
            withCredentials: true,
          }),
          axios.get(`http://localhost:8080/api/users/ucenici/${studentId}`, {
            withCredentials: true,
          }),
        ]);

        const tId = resMe.data.id;

        setTeacherId(tId);
        setStudentInfo(resStudent.data);
        setFormData((prev) => ({
          ...prev,
          vnesena_Od: tId,
        }));

        const resPredmeti = await axios.get(
          `http://localhost:8080/api/klas/${classId}/predmeti`,
          { withCredentials: true }
        );

        setPredmeti(resPredmeti.data);
      } catch (err) {
        console.error("Грешка при вчитување на податоците:", err);
        setError(
          "Неуспешно вчитување на податоците за наставникот кој е логиран."
        );
      } finally {
        setLoading(false);
      }
    };
    fetchInitialData();
  }, []);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError("");

    try {
      const response = await axios.post(
        `http://localhost:8080/api/users/ucenici/${studentId}/enterKrajnaOcenka`,
        formData,
        {
          withCredentials: true,
          headers: { "Content-Type": "application/json" },
        }
      );

      if (response.status === 200 || response.status === 201) {
        alert("Успешно е креирана крајна оценка за ученикот ");
        navigate(
          `/predmetenNastavnikDashboard/klas/${classId}/student/${studentId}/grades`
        );
      }
    } catch (err) {
      console.error("Грешка при POST:", err.response?.data);
      const serverMsg = err.response?.data?.message || "Полињата се грешка";
      setError(serverMsg);
    }
  };

  if (loading)
    return (
      <div style={{ padding: "50px", textAlign: "center" }}>
        <NavbarKlasen />
        <h2>Вчитување на податоците...</h2>
      </div>
    );
  const handleChange = (e) => {
    const { name, value } = e.target;

    if (name === "predmetId") {
      setFormData((prev) => ({
        ...prev,
        eZaPredmetot_Id: value,
      }));
      return;
    }

    setFormData((prev) => ({
      ...prev,
      [name]: value,
    }));
  };
  const vidoviIsprasuvanje = [
    "USNA_OCENKA",
    "PISMENA_OCENKA",
    "POLUGODISNA_OCENKA",
    "GODISNA_OCENKA",
  ];

  return (
    <>
      <NavbarKlasen />
      <div className="container-fluid">
        <nav className="navbar navbar-expand-lg bg-dark  align-items-center">
          <div className="container-fluid ">
            <div className="navbar-nav mx-auto ">
              <Link
                className="nav-link text-white"
                to="/predmetenNastavnikDashboard"
              >
                Соопштенија
              </Link>

              <Link
                className="nav-link text-white"
                to={`/predmetenNastavnikDashboard/${classId}/weeklyPlan`}
              >
                Види неделни активности
              </Link>

              <Link
                className="nav-link text-white"
                to={`/predmetenNastavnikDashboard/${classId}/raspored`}
              >
                Види распоред
              </Link>

              <Link
                className="nav-link text-white"
                to={`/predmetenNastavnikDashboard/${classId}/students`}
              >
                Студенти
              </Link>
            </div>
          </div>
        </nav>

        <div className="w-75 m-3 bg-secondary mx-auto rounded">
          <h1 className="text-center text-white">
            Внеси крајна оценка за {studentInfo.ime} {studentInfo.prezime}
          </h1>

          <form onSubmit={handleSubmit}>
            <div className="row m-3 align-items-center">
              <label
                htmlFor="ocenka"
                className="col-form-label col-3 m-3 text-center text-white"
              >
                Внеси оценка од 1 до 5
              </label>
              <div className="col-8">
                <input
                  name="ocenka"
                  type="number"
                  required
                  className="form-control w-75 m-3 mx-auto"
                  placeholder="Оценката мора да биде од 1 до 5"
                  min="1"
                  max="5"
                  value={formData.ocenka}
                  onChange={handleChange}
                />
              </div>
            </div>
            <div className="row mb-3 align-items-center">
              <label
                htmlFor="datum"
                className="col-form-label col-3 m-3 text-center text-white"
              >
                Внеси датум на внесување на оценката
              </label>
              <div className="col-8">
                <input
                  name="datum"
                  type="date"
                  className="form-control w-75 m-3 mx-auto"
                  required
                  value={formData.datum}
                  onChange={handleChange}
                />
              </div>
            </div>
            <div className="row mb-3 align-items-center">
              <label
                htmlFor="zabeleska"
                className="col-3 col-form-label m-3 text-white"
              >
                забелешка
              </label>
              <textarea
                name="zabeleska"
                value={formData.zabeleska}
                required
                placeholder="Внесете забелешка за оценката доколку ја имате"
                onChange={handleChange}
                className="form-control w-75 mx-auto"
                style={{ minHeight: "200px", resize: "horizontal" }}
              />
            </div>
            <div className="row mb-3 align-items-center">
              <label className="form-label m-3 col-3 text-center text-white">
                Избери Предмет
              </label>
              <div className="col-8">
                <select
                  name="predmetId"
                  value={formData.eZaPredmetot_Id}
                  required
                  onChange={handleChange}
                  className="form-control w-75 mx-auto"
                >
                  <option value="">-- Избери предмет --</option>
                  {predmeti.map((n) => (
                    <option key={n.id} value={n.id}>
                      {n.ime} {n.fond_casovi}
                    </option>
                  ))}
                </select>
              </div>
            </div>

            <div className="row mb-3 align-items-center">
              <label
                htmlFor="tip"
                className="form-label col-3  p-3 text-center text-white"
              >
                Избери вид на крајна оценка
              </label>
              <div className="col-9">
                <select
                  name="tip"
                  value={formData.tip}
                  required
                  onChange={handleChange}
                  className="form-control m-3  w-75 mx-auto"
                >
                  <option value="">-- Избери вид на крајна оценка --</option>
                  {vidoviIsprasuvanje.map((n) => (
                    <option key={n} value={n}>
                      {n}
                    </option>
                  ))}
                </select>
              </div>
            </div>
            <div className="text-center">
              <button className="btn btn-primary m-3 " type="submit">
                Внеси крајна оценка
              </button>
              <a className="btn btn-danger m-3">Откажи</a>
            </div>
          </form>
        </div>
      </div>
    </>
  );
};

export default PredmetenNastavnik_CreateKrajnaOcenka;