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

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

const ClassCard = ({ klas }) => {
  const navigate = useNavigate();
  const [studentsInClass, setStudentsInClass] = useState([]);
  const [students, setStudents] = useState([]);
  const [rakovoditel, setRakovoditel] = useState(null);
  const [loading, setLoading] = useState(true);
  const [showAddStudentToClassModal, setShowAddStudentToClassModal] =
    useState(false);

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

        const [resStudentsInClass, resRakovoditel, resAllStudents] =
          await Promise.all([
            axios.get(`http://localhost:8080/api/klas/${klas.id}/students`, {
              withCredentials: true,
            }),
            axios.get(
              `http://localhost:8080/api/klas/${klas.id}/klasenRakovoditel`,
              { withCredentials: true }
            ),
            axios.get("http://localhost:8080/api/users/ucenici", {
              withCredentials: true,
            }),
          ]);

        setStudentsInClass(resStudentsInClass.data);
        setRakovoditel(resRakovoditel.data);
        setStudents(resAllStudents.data);
      } catch (err) {
        console.error("Грешка при вчитување клас:", err);
      } finally {
        setLoading(false);
      }
    };

    if (klas.id) fetchData();
  }, [klas.id]);

  const handleViewWeeklyPlan = () => {
    navigate(`/adminDashboard/classes/${klas.id}/weeklyPlan`);
  };

  const handleAddingStudentToClass = () => {
    setShowAddStudentToClassModal(true);
  };

  const handleRasporedChangeView = () => {
    navigate(`/adminDashboard/classes/${klas.id}/schedule`);
  };
  const handleSubmitAddStudentToClass = async (e) => {
    e.preventDefault();
    try {
      await axios.post(
        `http://localhost:8080/api/klas/${klas.id}/addStudent`,
        addStudentToClassForm,
        {
          withCredentials: true,
        }
      );
      setShowAddStudentToClassModal(false);
      setAddStudentToClassForm({
        ucenikId: "",
      });
    } catch (err) {
      console.log(err);
    }
  };
  const handleAssignTeacher = () => {
    navigate(`/adminDashboard/classes/${klas.id}/addKlasenRakovoditel`);
  };
  const handleAssignSubjects = () => {
    navigate(`/adminDashboard/classes/${klas.id}/addSubjects`);
  };

  const [addStudentToClassForm, setAddStudentToClassForm] = useState({
    ucenikId: "",
  });
  const handleSoopstenijaViewPageChange = () => {
    navigate(`/adminDashboard/classes/${klas.id}/soopstenija`);
  };

  const handleViewSubjects = () => {
    navigate(`/adminDashboard/classes/${klas.id}/viewSubjects`);
  };

  if (loading)
    return (
      <div className={styles.classCard}>Вчитување податоци за класот...</div>
    );

  return (
    <div className={styles.classCard}>
      <div className={styles.classHeader}>
        <div className={styles.classInfo}>
          <span>
            <strong>Клас:</strong> {klas.oddelenie}-{klas.paralelka}
          </span>
          <span>
            <strong>Година/Одделение:</strong> {klas.oddelenie}-то одд.
          </span>
        </div>

        <div className={styles.linkGroup}>
          <span onClick={handleViewWeeklyPlan} style={{ cursor: "pointer" }}>
            Види неделен план
          </span>

          <span
            onClick={handleRasporedChangeView}
            style={{ cursor: "pointer" }}
          >
            Види распоред
          </span>

          <span
            onClick={handleSoopstenijaViewPageChange}
            style={{ cursor: "pointer" }}
          >
            Види соопштенија
          </span>
          <span onClick={handleViewSubjects} style={{ cursor: "pointer" }}>
            Види предмети
          </span>
          <span onClick={handleAddingStudentToClass}>
            Додади ученик во клас
          </span>
        </div>
      </div>
      {showAddStudentToClassModal && (
        <div
          className="modal d-block"
          tabIndex="-1"
          role="dialog"
          style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
        >
          <div className="modal-dialog modal-dialog-centered" role="document">
            <div className="modal-content">
              <div className="modal-header">
                <h5 className="modal-title">Додади ученик во клас</h5>
                <button
                  type="button"
                  className="btn-close"
                  onClick={() => setShowAddStudentToClassModal(false)}
                />
              </div>
              <div className="modal-body">
                <form onSubmit={handleSubmitAddStudentToClass}>
                  <div className="mb-3">
                    <label className="form-label">Одберете студент</label>
                    <select
                      className="form-select"
                      name="ucenikId"
                      value={addStudentToClassForm.ucenikId}
                      required
                      onChange={(e) =>
                        setAddStudentToClassForm({
                          ...addStudentToClassForm,
                          ucenikId: e.target.value,
                        })
                      }
                    >
                      <option value="">-- Изберете ученик --</option>
                      {students.map((u) => (
                        <option key={u.id} value={u.id}>
                          {u.ime} {u.prezime} ({u.e_posta})
                        </option>
                      ))}
                    </select>
                  </div>
                  <div className="modal-footer px-0 pb-0">
                    <button
                      type="button"
                      className="btn btn-secondary"
                      onClick={() => setShowAddStudentToClassModal(false)}
                    >
                      Откажи
                    </button>
                    <button
                      type="submit"
                      className="btn text-white"
                      style={{ backgroundColor: "#147176" }}
                    >
                      Додај
                    </button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      )}
      <div className={styles.sectionTitle}>
        Класен раководител:{" "}
        {rakovoditel
          ? `${rakovoditel.ime} ${rakovoditel.prezime}`
          : "Не е доделен"}
      </div>

      {rakovoditel ? (
        <div className={styles.infoGrid}>
          <div className={styles.gridHeader}>Име</div>
          <div className={styles.gridHeader}>Презиме</div>
          <div className={styles.gridHeader}>Е-пошта</div>
          <div className={styles.buttons}>
            <div
              className={styles.changeTeacherBtn}
              onClick={handleAssignTeacher}
              style={{ cursor: "pointer" }}
            >
              Промени Класен Раководител
            </div>
            <div
              className={styles.addSubjects}
              onClick={handleAssignSubjects}
              style={{ cursor: "pointer" }}
            >
              Додели предмет
            </div>
          </div>

          <p>{rakovoditel.ime}</p>
          <p>{rakovoditel.prezime}</p>
          <p>{rakovoditel.e_posta}</p>
        </div>
      ) : (
        <div className={styles.infoGrid}>
          <div
            style={{ gridColumn: "span 6", color: "#666", fontStyle: "italic" }}
          >
            Нема доделено раководител за овој клас.
            <span
              className={styles.changeTeacherBtn}
              onClick={handleAssignTeacher}
              style={{
                marginLeft: "15px",
                cursor: "pointer",
                textDecoration: "underline",
              }}
            >
              Додади сега
            </span>
          </div>
        </div>
      )}

      <div className={styles.sectionTitle}>Ученици</div>

      <div className={styles.infoGrid}>
        <div className={styles.gridHeader}>Име</div>
        <div className={styles.gridHeader}>Презиме</div>
        <div className={styles.gridHeader}>Е-пошта</div>
        <div className={styles.gridHeader}>Пол</div>
        <div className={styles.gridHeader}>Телефон</div>
        <div className={styles.gridHeader}>Адреса</div>
        <div className={styles.gridHeader}>Акции</div>
      </div>

      {studentsInClass.length > 0 ? (
        studentsInClass.map((u) => (
          <div key={u.id} className={styles.infoGrid}>
            <div>{u.ime}</div>
            <div>{u.prezime}</div>
            <div>{u.e_posta}</div>
            <div>{u.pol}</div>
            <div>{u.mobilenTelefon}</div>
            <div>{u.adresa || "N/A"}</div>
            <div>
              <Link
                to={`/adminDashboard/classes/${klas.id}/students/${u.id}/attendancies`}
              >
                Види присуства
              </Link>
            </div>
            <div>
              <Link
                to={`/adminDashboard/classes/${klas.id}/students/${u.id}/info`}
              >
                Види повеќе информации
              </Link>
            </div>
          </div>
        ))
      ) : (
        <div className={styles.noData}>Нема додадено ученици во овој клас.</div>
      )}
    </div>
  );
};

const AdminPanelClassPage = () => {
  const [klasovi, setKlasovi] = useState([]);
  const [loading, setLoading] = useState(true);
  const [showCreateClassModal, setShowCreateClassModal] = useState(false);

  const [klasniRakovoditeli, setKlasniRakovoditeli] = useState([]);

  const [createClassForm, setCreateClassForm] = useState({
    godinaNaSlusanje: "",
    paralelka: "",
    oddelenie: "",
    klasenRakovoditelId: "",
  });

  const fetchKlasovi = async () => {
    try {
      const [resKlasovi, resKlasniRakovoditeli] = await Promise.all([
        axios.get("http://localhost:8080/api/klas", {
          withCredentials: true,
        }),

        axios.get(
          "http://localhost:8080/api/users/nastavnici/klasniRakovoditeli",
          { withCredentials: true }
        ),
      ]);

      setKlasovi(resKlasovi.data);
      setKlasniRakovoditeli(resKlasniRakovoditeli.data);
    } catch (err) {
      console.error("Грешка при вчитување класови", err);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchKlasovi();
  }, []);

  const handleCreateClass = () => {
    setShowCreateClassModal(true);
  };

  const handleSubmitClass = async (e) => {
    e.preventDefault();

    try {
      await axios.post("http://localhost:8080/api/klas", createClassForm, {
        withCredentials: true,
      });

      setShowCreateClassModal(false);

      setCreateClassForm({
        godinaNaSlusanje: "",
        paralelka: "",
        oddelenie: "",
        klasenRakovoditelId: "",
      });

      fetchKlasovi();
      alert("Klasot e uspesno kreiran");
    } catch (err) {
      alert("Грешка при креирање клас.");
    }
  };

  return (
    <div className={styles.adminWrapper}>
      <Navbar />

      <h1 className={styles.headerTitle}>Директор админ - Класови</h1>

      <div className={styles.wrapper}>
        <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>
          <Link
            to="/adminDashboard/paymentAnnoucements"
            className="mx-3 text-white text-decoration-none fs-6"
          >
            Соопштенија за плаќање
          </Link>
        </div>

        {showCreateClassModal && (
          <div
            className="modal d-block"
            tabIndex="-1"
            role="dialog"
            style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
          >
            <div className="modal-dialog modal-dialog-centered" role="document">
              <div className="modal-content">
                <div className="modal-header">
                  <h5 className="modal-title">Креирај нов клас</h5>
                  <button
                    type="button"
                    className="btn-close"
                    onClick={() => setShowCreateClassModal(false)}
                  />
                </div>

                <div className="modal-body">
                  <form onSubmit={handleSubmitClass}>
                    <div className="mb-3">
                      <label className="form-label">
                        Одбери година на слушање
                      </label>
                      <select
                        className="form-select"
                        name="godinaNaSlusanje"
                        value={createClassForm.godinaNaSlusanje}
                        onChange={(e) =>
                          setCreateClassForm({
                            ...createClassForm,
                            godinaNaSlusanje: e.target.value,
                          })
                        }
                      >
                        <option value="2019/2020">2019/2020</option>
                        <option value="2020/2021">2020/2021</option>
                        <option value="2021/2022">2021/2022</option>
                        <option value="2022/2023">2022/2023</option>
                        <option value="2023/2024">2023/2024</option>
                        <option value="2024/2025">2024/2025</option>
                        <option value="2025/2026">2025/2026</option>
                      </select>
                    </div>

                    <div className="mb-3">
                      <label className="form-label">Одбери паралелка</label>
                      <select
                        className="form-select"
                        name="paralelka"
                        value={createClassForm.paralelka}
                        onChange={(e) =>
                          setCreateClassForm({
                            ...createClassForm,
                            paralelka: e.target.value,
                          })
                        }
                      >
                        <option value="А">А</option>
                        <option value="Б">Б</option>
                        <option value="В">В</option>
                        <option value="Г">Г</option>
                        <option value="Д">Д</option>
                        <option value="Ѓ">Ѓ</option>
                        <option value="Е">Е</option>
                      </select>
                    </div>

                    <div className="mb-3">
                      <label className="form-label">Одбери одделение</label>
                      <select
                        className="form-select"
                        name="oddelenie"
                        value={createClassForm.oddelenie}
                        onChange={(e) =>
                          setCreateClassForm({
                            ...createClassForm,
                            oddelenie: e.target.value,
                          })
                        }
                      >
                        {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((n) => (
                          <option key={n} value={n}>
                            {n}
                          </option>
                        ))}
                      </select>
                    </div>

                    <div className="mb-3">
                      <label className="form-label">
                        Одбери Класен раководител
                      </label>
                      <select
                        className="form-select"
                        name="klasenRakovoditelId"
                        value={createClassForm.klasenRakovoditelId}
                        required
                        onChange={(e) =>
                          setCreateClassForm({
                            ...createClassForm,
                            klasenRakovoditelId: e.target.value,
                          })
                        }
                      >
                        <option value="">
                          -- Избери класен раководител --
                        </option>
                        {klasniRakovoditeli.map((n) => (
                          <option key={n.id} value={n.id}>
                            {n.ime} {n.prezime} ({n.e_posta})
                          </option>
                        ))}
                      </select>
                    </div>

                    <div className="modal-footer px-0 pb-0">
                      <button
                        type="button"
                        className="btn btn-secondary"
                        onClick={() => setShowCreateClassModal(false)}
                      >
                        Откажи
                      </button>
                      <button
                        type="submit"
                        className="btn text-white"
                        style={{ backgroundColor: "#147176" }}
                      >
                        Креирај
                      </button>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        )}
        <div className={styles.mainContainer}>
          <div className={styles.toolbar}>
            <div className={styles.actionButtons}>
              <button className={styles.mainBtn} onClick={handleCreateClass}>
                Креирај клас
              </button>
            </div>
          </div>

          {loading ? (
            <h2 style={{ textAlign: "center" }}>Вчитување на класовите...</h2>
          ) : (
            <div className={styles.classesList}>
              {klasovi.map((k) => (
                <ClassCard key={k.id} klas={k} />
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default AdminPanelClassPage;