source: frontend/web3-eDnevnik_Frontend/src/pages/KlasenRakovoditel_Pages/Klasen_ViewStudentsInClass/Klasen_ViewStudentsInClass.jsx

import { useState, useEffect } from "react";
import styles from "./Klasen_ViewStudentsInClassStyles.module.css";
import { Link, useParams, useNavigate } from "react-router-dom";
import axios from "axios";
import NavbarKlasen from "../../../components/navbarKlasen/NavbarKlasen.jsx";

const Klasen_ViewStudentsInClass = () => {
  const { classId } = useParams();
  const navigate = useNavigate();
  const [students, setStudents] = useState([]);
  const [loading, setLoading] = useState(true);

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

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

        const studentsWithParents = await Promise.all(
          studentsData.map(async (student) => {
            if (student.staratelId) {
              try {
                const parentRes = await axios.get(
                  `http://localhost:8080/api/users/roditeli/${student.staratelId}`,
                  { withCredentials: true }
                );

                return { ...student, parentInfo: parentRes.data };
              } catch (err) {
                console.error(`Грешка за родител ${student.staratelId}:`, err);
                return { ...student, parentInfo: null };
              }
            }
            return { ...student, parentInfo: null };
          })
        );

        setStudents(studentsWithParents);
      } catch (err) {
        console.error("Грешка при вчитување податоци:", err);
      } finally {
        setLoading(false);
      }
    };

    if (classId) fetchStudentsAndParents();
  }, [classId]);

  if (loading)
    return (
      <div className={styles.wrapper}>
        <NavbarKlasen />
        <div className={styles.loader}>Вчитување на учениците...</div>
      </div>
    );

  return (
    <div className="container-fluid m-0 p-0">
      <div>
        <NavbarKlasen />
        <div className="container bg-success d-flex flex-row justify-content-flex-start">
          <Link
            to={`/dashboard`}
            className="text-white m-3 fs-5 text-decoration-none"
          >
            Соопштение
          </Link>
          <Link
            to={`/klasenRakovoditelDashboard/${classId}/weeklyPlan`}
            className="text-white m-3 fs-5 text-decoration-none"
          >
            Види неделни активности
          </Link>
          <Link
            to={`/klasenRakovoditelDashboard/${classId}/raspored`}
            className="text-white m-3 fs-5 text-decoration-none"
          >
            Види распоред
          </Link>
          <Link
            to={`/klasenRakovoditelDashboard/${classId}/students`}
            className="text-white m-3 fs-5 text-decoration-underline"
          >
            Студенти
          </Link>
        </div>

        <h1 className="m-3 text">Ученици</h1>

        <div className={styles.tableContainer}>
          <table className={styles.studentTable}>
            <thead>
              <tr>
                <th>Р. број</th>
                <th>Име</th>
                <th>Презиме</th>
                <th>Пол</th>
                <th>Старател</th>
                <th>Адреса</th>
                <th>Телефонски број</th>
                <th>Акции</th>
              </tr>
            </thead>
            <tbody>
              {students.map((student, index) => (
                <tr key={student.id}>
                  <td>{index + 1}.</td>
                  <td>{student.ime}</td>
                  <td>{student.prezime}</td>
                  <td>{student.pol === "Masko" ? "Машко" : "Женско"}</td>
                  <td>
                    {student.parentInfo
                      ? `${student.parentInfo.ime} ${student.parentInfo.prezime}`
                      : "Нема податок"}
                  </td>
                  <td>{student.adresa}</td>
                  <td>{student.mobilenTelefon}</td>
                  <td>
                    <button
                      className="btn btn-primary me-3"
                      onClick={() =>
                        navigate(
                          `/klasenRakovoditelDashboard/${classId}/student/${student.id}/grades`
                        )
                      }
                    >
                      види оценки
                    </button>
                    <button
                      className="btn btn-secondary"
                      onClick={() =>
                        navigate(
                          `/klasenRakovoditelDashboard/${classId}/student/${student.id}/attendance`
                        )
                      }
                    >
                      види присуства
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
          {students.length === 0 && (
            <p className={styles.noData}>Нема запишани ученици во овој клас.</p>
          )}
        </div>
      </div>
    </div>
  );
};

export default Klasen_ViewStudentsInClass;