import React, { useState, useEffect } from "react";
import axios from "axios";
import { Link } from "react-router-dom";
import NavbarRoditel from "../../../components/NavbarRoditel/NavbarRoditel";
import styles from "../Klasen_RakovoditelDashboard/KlasenRakovoditelDashboardPageStyles.module.css";
import RoditelSettings from "../../../components/RoditelSettings/RoditelSettings";
import Roditel_PaymentAnnoucements from "../../RoditelPages/Roditel_PaymentAnnoucements/Roditel_PaymentAnnoucements";

const RoditelDashboardViewPage = ({ parentId }) => {
  const [ucenici, setUcenici] = useState([]);
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(true);
  const [connectedWallet, setConnectedWallet] = useState(null);
  const [roditelId, setRoditelId] = useState(null);

  useEffect(() => {
    const fetchRoditelId = async () => {
      try {
        const response = await fetch("http://localhost:8080/api/auth/me", {
          credentials: "include",
        });
        const data = await response.json();
        setRoditelId(data.id);
      } catch (err) {
        console.error("Error fetching roditel ID:", err);
      }
    };

    fetchRoditelId();
  }, []);

  useEffect(() => {
    const initializeDashboard = async () => {
      if (!parentId) return;
      try {
        setLoading(true);
        const resUcenici = await axios.get(
          `http://localhost:8080/api/users/ucenici/by-parent/${parentId}`,
          { withCredentials: true }
        );
        setUcenici(resUcenici.data);
      } catch (err) {
        console.log(err);
      } finally {
        setLoading(false);
      }
    };
    initializeDashboard();
  }, [parentId]);

  if (loading)
    return (
      <div className={styles.loader}>
        Вчитување на податоци за вашето дете...
      </div>
    );

  return (
    <>
      <div>
        <NavbarRoditel />
        <div className="container mt-5 mh-100">
          <div className="row">
            <div className="col-12">
              <nav
                className="text-white d-flex flex-row gap-3 p-3"
                style={{ backgroundColor: "#147176" }}
              >
                <div className="dropdown">
                  <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>
                    ) : ucenici.length > 0 ? (
                      ucenici.map((k) => (
                        <Link
                          key={k.id}
                          className="dropdown-item"
                          to={`/roditelDashboard/ucenik/${k.id}/soopstenija`}
                        >
                          {k.ime} {k.prezime}
                        </Link>
                      ))
                    ) : (
                      <div className="dropdown-item">Нема Ученици</div>
                    )}
                  </div>
                </div>
                <Link
                  className="btn btn-secondary"
                  to="/roditelDashboard/paymentAnnoucements"
                >
                  Соопштенија за плаќање{" "}
                </Link>
                <Link
                  className="btn btn-secondary"
                  to="/roditelDashboard/myPayments"
                >
                  Мои плаќања
                </Link>
              </nav>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default RoditelDashboardViewPage;