source: frontend/web3-eDnevnik_Frontend/src/pages/RoditelPages/Roditel_ViewPrisustva/Roditel_ViewPrisustva.jsx

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

const Roditel_ViewPrisustva = () => {
  const [studentData, setStudentData] = useState(null);
  const { studentId } = useParams();
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

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

        const res = await axios.get(
          `http://localhost:8080/api/users/ucenici/${studentId}/prisustva`,
          { withCredentials: true }
        );

        setStudentData(res.data);
      } catch (err) {
        setError("Грешка при вчитување");
        console.error(err);
      } finally {
        setLoading(false);
      }
    };

    if (studentId) fetchData();
  }, [studentId]);

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

  if (error) return <div>{error}</div>;

  return (
    <div className={styles.Klasen_ViewPrisustvaZaUcenik}>
      <NavbarRoditel />
      <div className="container m-3 mx-auto bg-success text-white d-flex flex-row justify-content-between">
        <span className="fs-4 text-white text-decoration-underline p-3">
          Соопштенија
        </span>
        <Link
          className="fs-4 text-white text-decoration-none  p-3"
          to={`/roditelDashboard/${studentData.classId}/weeklyPlan`}
        >
          Неделен план
        </Link>
        <Link
          className="fs-4 text-white text-decoration-none  p-3"
          to={`/roditelDashboard/${studentData.classId}/raspored`}
        >
          Распоред
        </Link>

        <Link
          className="fs-4 text-white text-decoration-none  p-3"
          to={`/roditelDashboard/student/${studentData?.id}/grades`}
        >
          Оценки
        </Link>
        <Link
          className="fs-4 text-white text-decoration-none  p-3"
          to={`/roditelDashboard/student/${studentData?.id}/prisustva`}
        >
          Присуства
        </Link>
      </div>

      <main className={styles.contentWrapper}>
        <header className={styles.pageHeader}>
          <h1>
            Преглед на присуства за {studentData.ime} {studentData.prezime}
          </h1>
        </header>

        <div className={styles.tableContainer}>
          <table className="table table-stripped">
            <thead>
              <tr>
                <th>Датум</th>
                <th>Статус</th>
                <th>Забелешка</th>
                <th>Евидентирано од</th>
                <th>За часот</th>
              </tr>
            </thead>

            <tbody>
              {studentData.prisustva?.length > 0 ? (
                studentData.prisustva.map((p) => (
                  <tr key={p.id}>
                    <td>{new Date(p.datum).toLocaleDateString("mk-MK")}</td>

                    <td>
                      <span className={styles.statusPill}>{p.status}</span>
                    </td>

                    <td className={styles.noteCell}>{p.zabeleska || "—"}</td>

                    <td>
                      {p.nastavnik.ime} {p.nastavnik.prezime}
                    </td>

                    <td>
                      {p.cas.ime} во {p.cas.denVo_Nedelata} со реден час{" "}
                      {p.cas.reden_cas}
                    </td>
                  </tr>
                ))
              ) : (
                <tr>
                  <td colSpan="5" className={styles.emptyMessage}>
                    Нема евидентирано присуства.
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </main>
    </div>
  );
};

export default Roditel_ViewPrisustva;