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

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

import { Link } from "react-router-dom";
const AdminPanelNedelniAktivnostiZaKlasPage = () => {
  const { classId } = useParams();
  const navigate = useNavigate();
  const [plan, setPlan] = useState(null);
  const [classDetails, setClassDetails] = useState(null);
  const [loading, setLoading] = useState(true);

  const daysMapping = [
    { label: "Понеделник", key: "Ponedelnik" },
    { label: "Вторник", key: "Vtornik" },
    { label: "Среда", key: "Sreda" },
    { label: "Четврток", key: "Cetvrtok" },
    { label: "Петок", key: "Petok" },
    { label: "Сабота", key: "Sabota" },
  ];

  const nastavniCasovi = [1, 2, 3, 4, 5, 6, 7, 8];

  useEffect(() => {
    const fetchAllData = async () => {
      try {
        setLoading(true);
        const [resPlan, resClass] = await Promise.all([
          axios.get(`http://localhost:8080/api/klas/${classId}/nedelenPlan`, {
            withCredentials: true,
          }),
          axios.get(`http://localhost:8080/api/klas/${classId}`, {
            withCredentials: true,
          }),
        ]);
        setPlan(resPlan.data);
        setClassDetails(resClass.data);
      } catch (err) {
        console.error("Грешка при вчитување податоци:", err);
      } finally {
        setLoading(false);
      }
    };
    if (classId) fetchAllData();
  }, [classId]);

  if (loading)
    return (
      <div className={styles.wrapper}>
        <Navbar />
        <div className={styles.loaderContainer}>
          <h2>Вчитување на неделниот план...</h2>
        </div>
      </div>
    );

  return (
    <div className={styles.wrapper}>
      <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={styles.contentContainer}>
        <h1 className={styles.title}>
          Клас {classDetails?.oddelenie}
          {classDetails?.paralelka} – Активности за тековната недела
        </h1>

        <p className={styles.dates}>
          {plan?.datumOd} – {plan?.datumDo}
        </p>

        <table className={styles.weeklyTable}>
          <thead>
            <tr>
              <th className={styles.hourCol}>Час</th>{" "}
              {daysMapping.map((day) => (
                <th key={day.key}>{day.label}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {nastavniCasovi.map((casBroj, rowIndex) => (
              <tr key={casBroj}>
                <td className={styles.hourCell}>{casBroj}</td>
                {daysMapping.map((day) => {
                  const aktivnostiZaDenot = plan?.timetable?.[day.key] || [];

                  const aktivnost = aktivnostiZaDenot[rowIndex];

                  return (
                    <td key={day.key} className={styles.tableCell}>
                      {aktivnost ? (
                        <div className={styles.activityBox}>
                          <span className={styles.activityTitle}>
                            <p>
                              <b>Име на предмет:</b>
                            </p>

                            {aktivnost.naslov}
                          </span>

                          <p className={styles.activityDescription}>
                            <br />
                            <p>
                              <b>Тема</b>
                            </p>
                            {aktivnost.opis}
                            <br />
                          </p>
                        </div>
                      ) : (
                        <div className={styles.emptyCell}></div>
                      )}
                    </td>
                  );
                })}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default AdminPanelNedelniAktivnostiZaKlasPage;