import React, { useState, useEffect } from "react";
import axios from "axios";

import NavbarKlasen from "../../../components/navbarKlasen/NavbarKlasen.jsx";
import { Link, useParams } from "react-router-dom";

const PredmetenNastavnikSoopstenijaView = () => {
  const [klasovi, setKlasovi] = useState([]);
  const [roditeli, setRoditeli] = useState([]);
  const [klasen, setKlasen] = useState(null);
  const [students, setStudents] = useState([]);
  const [soopstenija, setSoopstenija] = useState([]);
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);
  const [classInfo, setClassInfo] = useState(null);
  const { klasId } = useParams();
  const [predmetenNastavnik, setPredmetenNastavnik] = useState(null);

  useEffect(() => {
    axios
      .get("http://localhost:8080/api/auth/me", { withCredentials: true })
      .then((res) => setPredmetenNastavnik(res.data))
      .catch((err) => console.log(err));
  }, []);

  useEffect(() => {
    if (!predmetenNastavnik?.id) return;

    const fetchData = async () => {
      try {
        setLoading(true);
        const [resKlasovi] = await Promise.all([
          axios.get(
            `http://localhost:8080/api/users/nastavnici/predmetniNastavnici/${predmetenNastavnik.id}/classes`,
            { withCredentials: true }
          ),
        ]);
        setKlasovi(resKlasovi.data);
        const resStudents = await axios.get(
          `http://localhost:8080/api/klas/${klasId}/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);

        setRoditeli(parentsData);

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

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

        setClassInfo(resClass.data);
        setKlasen(resKlasen.data);
        setStudents(resStudents.data);
        setSoopstenija(resSoopstenija.data);
      } catch (err) {
        console.log(err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [predmetenNastavnik?.id, klasId]);
  const formatDate = (dateString) => {
    if (!dateString) return "";
    const date = new Date(dateString);
    return date.toLocaleDateString("mk-MK", {
      day: "2-digit",
      month: "2-digit",
      year: "numeric",
    });
  };
  return (
    <>
      <div>
        <NavbarKlasen />
        <div className=" mh-100 ">
          <div className="container-fluid">
            <div className="row ">
              <div className="d-flex flex-row m-3 align-items-left gap-3">
                <h1>
                  Клас: {classInfo?.oddelenie} {classInfo?.paralelka}
                </h1>
                <div className="dropdown mt-2">
                  <button
                    className="btn btn-secondary dropdown-toggle"
                    type="button"
                    id="dropdownMenuButton"
                    data-bs-toggle="dropdown"
                    aria-haspopup="true"
                    aria-expanded="false"
                  >
                    Мои класови
                  </button>
                  <div
                    className="dropdown-menu"
                    aria-labelledby="dropdownMenuButton"
                  >
                    {loading ? (
                      <div className="dropdown-item">Вчитување...</div>
                    ) : klasovi.length > 0 ? (
                      klasovi.map((k) => (
                        <Link
                          key={k.id}
                          className="dropdown-item"
                          to={`/predmetenNastavnikDashboard/klas/${k.id}/soopstenija`}
                        >
                          {k.oddelenie}-{k.paralelka}
                        </Link>
                      ))
                    ) : (
                      <div className="dropdown-item">Нема класови</div>
                    )}
                  </div>
                </div>
              </div>
              <div className="navbar navbar-expand-lg bg-secondary justify-content-start ">
                <ul className="navbar-nav">
                  <li className="nav-item active">
                    <Link className="nav-link text-white fs-4">
                      {" "}
                      Соопштенија за класот{" "}
                    </Link>
                  </li>

                  <li className="nav-item">
                    <Link
                      className="nav-link text-white fs-4"
                      to={`/predmetenNastavnikDashboard/klas/${klasId}/weeklyPlan`}
                    >
                      {" "}
                      Неделни активности
                    </Link>
                  </li>
                  <li className="nav-item">
                    <Link
                      className="nav-link text-white fs-4"
                      to={`/predmetenNastavnikDashboard/klas/${klasId}/schedule`}
                    >
                      {" "}
                      Распоред
                    </Link>
                  </li>
                  <li className="nav-item">
                    <Link
                      className="nav-link text-white fs-4"
                      to={`/predmetenNastavnikDashboard/klas/${klasId}/students`}
                    >
                      {" "}
                      Студенти
                    </Link>
                  </li>
                  <li className="nav-item">
                    <Link
                      className="nav-link text-white fs-4"
                      to={`/predmetenNastavnikDashboard/klas/${klasId}/subjects`}
                    >
                      {" "}
                      Види слушани предмети
                    </Link>
                  </li>
                </ul>
              </div>
            </div>
          </div>

          <div className="row container-fluid w-100 m-3">
            <div className="col-8">
              <div className="d-flex flex-column gap-3">
                {console.log(soopstenija)}
                {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>
                      </div>
                    </div>
                  ))
                ) : (
                  <p className="text-muted text-center">
                    Нема активни соопштенија.
                  </p>
                )}
              </div>
            </div>
            <div className="col-4">
              <div>
                <h2 className="mt-0 fw-semibold">Информации за класот</h2>

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

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

export default PredmetenNastavnikSoopstenijaView;