source: frontend/web3-eDnevnik_Frontend/src/pages/DirektorAdmin_Pages/addSubjectToClass/AddSubjectToClass.jsx

import React, { useState, useEffect } from "react";
import axios from "axios";
import { useNavigate, useParams, Link } from "react-router-dom";
import styles from "./AddSubjectToClassStyles.module.css";
import Navbar from "../../../components/nav/Navbar.jsx";

const AddSubjectToClass = () => {
  const navigate = useNavigate();
  const { classId } = useParams();

  const [predmeti, setPredmeti] = useState([]);
  const [adminId, setAdminId] = useState("");
  const [className, setClassName] = useState("");

  const [error, setError] = useState("");
  const [loading, setLoading] = useState(true);

  const [formData, setFormData] = useState({
    predmetId: "",
  });

  useEffect(() => {
    const fetchInitialData = async () => {
      try {
        setLoading(true);
        const [resPredmeti, resMe, resClass] = await Promise.all([
          axios.get("http://localhost:8080/api/predmeti", {
            withCredentials: true,
          }),
          axios.get("http://localhost:8080/api/auth/me", {
            withCredentials: true,
          }),
          axios.get(`http://localhost:8080/api/klas/${classId}`, {
            withCredentials: true,
          }),
        ]);

        setPredmeti(resPredmeti.data);
        setAdminId(resMe.data.id || resMe.data.userId);
        setClassName(`${resClass.data.oddelenie}-${resClass.data.paralelka}`);
      } catch (err) {
        console.error("Грешка при вчитување податоци:", err);
        setError("Грешка при вчитување на потребните информации.");
      } finally {
        setLoading(false);
      }
    };
    if (classId) fetchInitialData();
  }, [classId]);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prev) => ({ ...prev, [name]: value }));
  };

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

    const payload = {
      predmetId: formData.predmetId,
    };

    try {
      setLoading(true);
      const response = await axios.post(
        `http://localhost:8080/api/klas/${classId}/predmeti`,
        payload,
        {
          withCredentials: true,
          headers: { "Content-Type": "application/json" },
        }
      );

      if (response.status === 200 || response.status === 201) {
        alert(
          "Предметот е успешно доделен на класот, притиснете OK за редирекција!"
        );
        navigate("/adminDashboard/classes");
      }
    } catch (err) {
      setError(err.response?.data?.message || "Грешка при зачувување.");
      console.log(err);
    }
  };

  if (loading)
    return <div className={styles.loading}>Вчитување на формата...</div>;

  return (
    <div className={styles.adminWrapper}>
      <Navbar />
      <div
        className="d-flex flex-row justify-content-center align-items-center p-2"
        style={{ backgroundColor: "#147176" }}
      >
        <Link
          to="/adminDashboard/users"
          className="mx-3 text-white text-decoration-none fs-6 opacity-100-hover"
        >
          Корисници
        </Link>

        <Link
          to="/adminDashboard/classes"
          className="mx-3 text-white text-decoration-none fs-6"
        >
          Класови
        </Link>

        <Link
          to="/adminDashboard/subjects"
          className="mx-3 text-white text-decoration-none fs-6"
        >
          Предмети
        </Link>

        <Link
          to="/adminDashboard/schedules"
          className="mx-3 text-white text-decoration-none fs-6"
        >
          Распореди
        </Link>

        <Link
          to="/adminDashboard/weeklyPlans"
          className="mx-3 text-white text-decoration-none fs-6"
        >
          Неделни планови
        </Link>
      </div>
      <div className="text-center">
        <h2 className={styles.title}>
          Додади / Измени предмет што го слуша класот: {className}
        </h2>

        <form onSubmit={handleSubmit} className="mx-auto">
          <div className="form-control w-25 mx-auto">
            <label>Избери Предмет</label>
            <select
              name="predmetId"
              value={formData.predmetId}
              required
              onChange={handleChange}
              className="form-control"
            >
              <option value="">-- Избери предмет --</option>
              {predmeti.map((n) => (
                <option key={n.id} value={n.id}>
                  {n.ime} {n.fond_casovi}
                </option>
              ))}
            </select>
          </div>

          <button type="submit" className="btn btn-primary">
            Зачувај промени
          </button>
        </form>
      </div>
    </div>
  );
};

export default AddSubjectToClass;