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

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

const AddKlasenRakovoditelToClass = () => {
  const navigate = useNavigate();
  const { classId } = useParams();

  const [klasniRakovoditeli, setKlasniRakovoditeli] = useState([]);
  const [adminId, setAdminId] = useState("");
  const [className, setClassName] = useState("");

  const [error, setError] = useState("");
  const [loading, setLoading] = useState(true);

  const [formData, setFormData] = useState({
    klasenRakovoditelId: "",
  });

  useEffect(() => {
    const fetchInitialData = async () => {
      try {
        setLoading(true);
        const [resKlasniRakovoditeli, resMe, resClass] = await Promise.all([
          axios.get(
            "http://localhost:8080/api/users/nastavnici/klasniRakovoditeli",
            { withCredentials: true }
          ),
          axios.get("http://localhost:8080/api/auth/me", {
            withCredentials: true,
          }),
          axios.get(`http://localhost:8080/api/klas/${classId}`, {
            withCredentials: true,
          }),
        ]);

        setKlasniRakovoditeli(resKlasniRakovoditeli.data);
        setAdminId(resMe.data.id || resMe.data.userId);
        setClassName(`${resClass.data.oddelenie}-${resClass.data.paralelka}`);
      } catch (err) {
        console.error("Грешка при вчитување податоци:", err);
        setError("Грешка при вчитување на потребните информации.");
      } finally {
        setLoading(false);
      }
    };
    if (classId) fetchInitialData();
  }, [classId]);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prev) => ({ ...prev, [name]: value }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError("");

    const payload = {
      klasenRakovoditelId: formData.klasenRakovoditelId,
      kreiranOdId: adminId,
    };

    try {
      const response = await axios.post(
        `http://localhost:8080/api/klas/${classId}/klasenRakovoditel`,
        payload,
        {
          withCredentials: true,
          headers: { "Content-Type": "application/json" },
        }
      );

      if (response.status === 200 || response.status === 201) {
        alert("Класниот раководител е успешно додаден!");
        navigate("/adminDashboard/classes");
      }
    } catch (err) {
      setError(err.response?.data?.message || "Грешка при зачувување.");
    }
  };

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

  return (
    <div className={styles.adminWrapper}>
      <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.mainContainer}>
        <h2 className={styles.title}>
          Додади / Измени класен раководител за класот: {className}
        </h2>

        {error && <div className={styles.errorBanner}>{error}</div>}

        <form onSubmit={handleSubmit} className={styles.formContent}>
          <div className={styles.inputGroup}>
            <label>Избери класен раководител *</label>
            <select
              name="klasenRakovoditelId"
              value={formData.klasenRakovoditelId}
              required
              onChange={handleChange}
              className={styles.selectField}
            >
              <option value="">-- Избери класен раководител --</option>
              {klasniRakovoditeli.map((n) => (
                <option key={n.id} value={n.id}>
                  {n.ime} {n.prezime} ({n.e_posta})
                </option>
              ))}
            </select>
          </div>

          <button type="submit" className={styles.submitBtn}>
            Зачувај промени
          </button>
        </form>
      </div>
    </div>
  );
};

export default AddKlasenRakovoditelToClass;