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

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

const CreateUcenik = () => {
  const navigate = useNavigate();

  const [roditeli, setRoditeli] = useState([]);

  const [adminId, setAdminId] = useState("");

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

  const [formData, setFormData] = useState({
    e_posta: "",
    lozinka: "",
    ime: "",
    prezime: "",
    pol: "Masko",
    adresa: "",
    mestoNaRagjanje: "",
    mobilenTelefon: "",
    datumNaRagjanje: "",
    staratelId: "",
  });

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

        const [resRoditeli, resMe] = await Promise.all([
          axios.get("http://localhost:8080/api/users/roditeli", {
            withCredentials: true,
          }),

          axios.get("http://localhost:8080/api/auth/me", {
            withCredentials: true,
          }),
        ]);

        setRoditeli(resRoditeli.data);

        setAdminId(resMe.data.id || resMe.data.userId);
      } catch (err) {
        console.error("Грешка при вчитување податоци:", err);
        setError("Неуспешно вчитување на податоци");
      } finally {
        setLoading(false);
      }
    };
    fetchInitialData();
  }, []);

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

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

    const ucenikRequestDTO = {
      e_posta: formData.e_posta,
      lozinka: formData.lozinka,
      ime: formData.ime,
      prezime: formData.prezime,
      pol: formData.pol,
      adresa: formData.adresa,

      mestoNaRagjanje: formData.mestoNaRagjanje,
      mobilenTelefon: formData.mobilenTelefon,
      datumNaRagjanje: formData.datumNaRagjanje,

      staratelId: formData.staratelId,

      kreiranOdId: adminId,
    };

    try {
      const response = await axios.post(
        "http://localhost:8080/api/users/ucenici",
        ucenikRequestDTO,
        {
          withCredentials: true,
          headers: { "Content-Type": "application/json" },
        }
      );

      if (response.status === 200 || response.status === 201) {
        alert("Ученикот е успешно креиран!");
        navigate("/adminDashboard/users");
      }
    } catch (err) {
      console.error("Грешка при POST:", err.response?.data);
      const serverMsg =
        err.response?.data?.message ||
        "Грешка при валидација. Проверете ги сите полиња.";
      setError(serverMsg);
    }
  };

  if (loading)
    return (
      <div style={{ padding: "50px", textAlign: "center" }}>
        <Navbar />
        <h2>Вчитување на формата...</h2>
      </div>
    );

  return (
    <div style={{ backgroundColor: "#fdf8e1", minHeight: "100vh" }}>
      <Navbar />
      <div className={styles.container}>
        <h2 className={styles.title}>Додади нов ученик</h2>

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

        <form onSubmit={handleSubmit} className={styles.formGrid}>
          <div className={styles.inputGroup}>
            <label>Име *</label>
            <input
              type="text"
              name="ime"
              value={formData.ime}
              required
              onChange={handleChange}
              className={styles.inputField}
            />
          </div>

          <div className={styles.inputGroup}>
            <label>Презиме *</label>
            <input
              type="text"
              name="prezime"
              value={formData.prezime}
              required
              onChange={handleChange}
              className={styles.inputField}
            />
          </div>

          <div className={styles.inputGroup}>
            <label>Е-пошта *</label>
            <input
              type="email"
              name="e_posta"
              value={formData.e_posta}
              required
              onChange={handleChange}
              className={styles.inputField}
            />
          </div>

          <div className={styles.inputGroup}>
            <label>Лозинка * (мин. 6 карактери)</label>
            <input
              type="password"
              name="lozinka"
              value={formData.lozinka}
              required
              onChange={handleChange}
              className={styles.inputField}
            />
          </div>

          <div className={styles.inputGroup}>
            <label>Пол *</label>
            <select
              name="pol"
              value={formData.pol}
              onChange={handleChange}
              className={styles.inputField}
            >
              <option value="Masko">Машко</option>
              <option value="Zensko">Женско</option>
            </select>
          </div>

          <div className={styles.inputGroup}>
            <label>Датум на раѓање *</label>
            <input
              type="date"
              name="datumNaRagjanje"
              value={formData.datumNaRagjanje}
              required
              onChange={handleChange}
              className={styles.inputField}
            />
          </div>

          <div className={styles.inputGroup}>
            <label>Место на раѓање *</label>
            <input
              type="text"
              name="mestoNaRagjanje"
              value={formData.mestoNaRagjanje}
              required
              onChange={handleChange}
              className={styles.inputField}
            />
          </div>

          <div className={styles.inputGroup}>
            <label>Мобилен телефон *</label>
            <input
              type="text"
              name="mobilenTelefon"
              value={formData.mobilenTelefon}
              required
              onChange={handleChange}
              className={styles.inputField}
            />
          </div>

          <div className={styles.inputGroup + " " + styles.fullWidth}>
            <label>Адреса</label>
            <input
              type="text"
              name="adresa"
              value={formData.adresa}
              onChange={handleChange}
              className={styles.inputField}
            />
          </div>

          <div className={styles.inputGroup}>
            <label>Избери Родител *</label>
            <select
              name="staratelId"
              value={formData.staratelId}
              required
              onChange={handleChange}
              className={styles.inputField}
            >
              <option value="">-- Избери родител --</option>
              {roditeli.map((r) => (
                <option key={r.id} value={r.id}>
                  {r.ime} {r.prezime} ({r.e_posta})
                </option>
              ))}
            </select>
          </div>

          <div className={styles.fullWidth}>
            <button type="submit" className={styles.submitBtn}>
              Креирај Ученик
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};

export default CreateUcenik;