source: frontend/web3-eDnevnik_Frontend/src/pages/dashboards/Klasen_RakovoditelDashboard/KlasenRakovoditelDashboardPage.jsx@ 81cdf2d

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

const KlasenRakovoditelDashboardViewPage = ({ teacherId }) => {
  const [classId, setClassId] = useState(null);
  const [classInfo, setClassInfo] = useState(null);
  const [klasen, setKlasen] = useState(null);
  const [students, setStudents] = useState([]);
  const [soopstenija, setSoopstenija] = useState([]);
  const [loading, setLoading] = useState(true);
  const [parents, setParents] = useState([]);

  useEffect(() => {
    const initializeDashboard = async () => {
      if (!teacherId) return;

      try {
        setLoading(true);

        const resClassInitial = await axios.get(
          `http://localhost:8080/api/users/nastavnici/klasniRakovoditeli/${teacherId}/klas`,
          { withCredentials: true }
        );

        const foundClass = resClassInitial.data;

        if (foundClass?.id) {
          const cId = foundClass.id;
          setClassId(cId);
          const resStudents = await axios.get(
            `http://localhost:8080/api/klas/${cId}/students`,
            {
              withCredentials: true,
            }
          );
          const studentsData = resStudents.data;
          setStudents(studentsData);

          const parentIds = [
            ...new Set(
              studentsData.map((s) => s.staratelId).filter((id) => id)
            ),
          ];

          const parentRequests = parentIds.map((id) =>
            axios.get(`http://localhost:8080/api/users/roditeli/${id}`, {
              withCredentials: true,
            })
          );

          const parentResponses = await Promise.all(parentRequests);
          const parentsData = parentResponses.map((res) => res.data);

          setParents(parentsData);

          const [resClass, resKlasen, resSoopstenija] = await Promise.all([
            axios.get(`http://localhost:8080/api/klas/${cId}`, {
              withCredentials: true,
            }),
            axios.get(
              `http://localhost:8080/api/klas/${cId}/klasenRakovoditel`,
              { withCredentials: true }
            ),

            axios.get(`http://localhost:8080/api/klas/${cId}/soopstenija`, {
              withCredentials: true,
            }),
          ]);

          setClassInfo(resClass.data);
          setKlasen(resKlasen.data);
          setStudents(resStudents.data);
          setSoopstenija(resSoopstenija.data);
        }
      } catch (err) {
        console.error("Грешка при иницијализација:", err);
      } finally {
        setLoading(false);
      }
    };

    initializeDashboard();
  }, [teacherId]);

  const formatDate = (dateString) => {
    if (!dateString) return "";
    return new Date(dateString).toLocaleDateString("mk-MK");
  };

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

  if (!classId) {
    return (
      <div className={styles.teacherWrapper}>
        <NavbarKlasen />
        <div className={styles.container}>
          <h2 className={styles.errorMessage}>
            Не сте доделени на активен клас.
          </h2>
        </div>
      </div>
    );
  }

  return (
    <div className={styles.container}>
      <NavbarKlasen />
      <div className="container mt-5 mh-100">
        <div className="row">
          <div className="col-8">
            <nav
              className="container text-white h-25 d-flex justify-content-center text-center p-3"
              style={{ backgroundColor: "#147176" }}
            >
              <Link
                className="text-white text-decoration-none m-2 fw-bold fs-md"
                to={"/dashboard"}
              >
                Соопштенија
              </Link>
              <Link
                to={`/klasenRakovoditelDashboard/${classId}/weeklyPlan`}
                className="text-white text-decoration-none m-2 fw-bold"
              >
                Види неделни активности
              </Link>
              <Link
                to={`/klasenRakovoditelDashboard/${classId}/raspored`}
                className="text-white text-decoration-none m-2 fw-bold"
              >
                Види распоред
              </Link>
              <Link
                to={`/klasenRakovoditelDashboard/${classId}/students`}
                className="text-white text-decoration-none m-2 fw-bold"
              >
                Студенти
              </Link>
              <Link
                to={`/klasenRakovoditelDashboard/${classId}/subjects`}
                className="text-white text-decoration-none m-2 fw-bold"
              >
                Види слушани предмети
              </Link>
            </nav>
            <div
              className="row"
              style={{ marginTop: 20, marginBottom: 10, marginRight: 0 }}
            >
              <div className="col-9 fs-4 fw-bold">
                Клас {classInfo?.oddelenie}-{classInfo?.paralelka} – Соопштенија
              </div>
              <div className="col p-0 m-0">
                <Link
                  to="/klasenRakovoditelDashboard/createSoopstenie"
                  className=" btn btn-primary  text-decoration-none"
                >
                  Креирај соопштение
                </Link>
              </div>
            </div>

            <div className="d-flex flex-column gap-3">
              {soopstenija.length > 0 ? (
                soopstenija.map((s) => (
                  <div key={s.id} className="card shadow-sm">
                    <div className="card-body">
                      <div className="d-flex align-items-center mb-3">
                        <div
                          className="rounded-circle bg-secondary me-3"
                          style={{
                            width: "50px",
                            height: "50px",
                            flexShrink: 0,
                          }}
                        />
                        <div>
                          <span className="fw-bold d-block">
                            {klasen?.ime} {klasen?.prezime}
                          </span>
                          <small className="text-muted">
                            {formatDate(s.kreiranoNa)}
                          </small>
                        </div>
                      </div>
                      <h5 className="card-title">{s.naslov}</h5>
                      <p className="card-text">{s.sodrzina}</p>
                      <span
                        className="fw-bold"
                        style={{ cursor: "pointer", color: "#147176" }}
                      >
                        Отстрани соопштение
                      </span>
                    </div>
                  </div>
                ))
              ) : (
                <p className="text-muted text-center">
                  Нема активни соопштенија.
                </p>
              )}
            </div>
          </div>

          <div className="col">
            <div className={styles.infoCard}>
              <h2 className="mt-0 fw-semibold">Информации за класот</h2>

              <div className={styles.infoSection}>
                <h4 className={styles.sectionLabel}>Класен раководител</h4>
                <p className={styles.teacherName}>
                  {klasen ? `${klasen.ime} ${klasen.prezime}` : "Не е назначен"}
                </p>
              </div>

              <div className={styles.infoSection}>
                <h4 className={styles.sectionLabel}>
                  Ученици ({students.length})
                </h4>
                <ul className={styles.participantList}>
                  {students.map((student) => (
                    <li key={student.id} className={styles.participantItem}>
                      {student.ime} {student.prezime}
                    </li>
                  ))}
                  {students.length === 0 && <li>Нема запишани ученици</li>}
                </ul>
              </div>
              <div className={styles.infoSection}>
                <h4 className={styles.sectionLabel}>
                  Родители ({parents.length})
                </h4>
                <ul className={styles.participantList}>
                  {parents.map((parent) => (
                    <li key={parent.id} className={styles.participantItem}>
                      {parent.ime} {parent.prezime}
                    </li>
                  ))}
                  {parents.length === 0 && <li>Нема податоци за родители</li>}
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default KlasenRakovoditelDashboardViewPage;