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

const DataCard = ({
  title,
  columns,
  data,
  isLoading,
  type,
  onDelete,
  onRefresh,
}) => {
  const [localData, setLocalData] = useState(data);
  const navigate = useNavigate();
  const [filter, setFilter] = useState("all");

  useEffect(() => {
    if (filter === "active") {
      setLocalData(data.filter((item) => item.active === true));
    } else {
      setLocalData(data);
    }
  }, [filter, data]);

  const createLinks = {
    ucenik: "/korisnici/createUcenik",
    roditel: "/korisnici/createRoditel",
    blagajnik: "/korisnici/createBlagajnik",
    klasenRakovoditel: "/korisnici/nastavnici/createKlasenRakovoditel",
    predmetenNastavnik: "/korisnici/nastavnici/createPredmetenNastavnik",
    nastavnik: "/korisnici/nastavnici/createNastavnik",
  };
  const infoLinks = {
    ucenik: (id) => `/adminDashboard/students/${id}/info`,
    roditel: (id) => `/adminDashboard/parents/${id}/info`,
    blagajnik: (id) => `/adminDashboard/treasurers/${id}/info`,
    klasenRakovoditel: (id) => `/adminDashboard/classTeacher/${id}/info`,
    predmetenNastavnik: (id) => `/adminDashboard/teacher/${id}/info`,
  };

  const activationEndpoints = {
    ucenik: "ucenici",
    roditel: "roditeli",
    blagajnik: "blagajnici",
    nastavnik: "nastavnici",
    klasenRakovoditel: "nastavnici/klasniRakovoditeli",
    predmetenNastavnik: "nastavnici/predmetniNastavnici",
  };

  const toggleActivation = async (id) => {
    try {
      const endpoint = activationEndpoints[type];
      await axios.put(
        `http://localhost:8080/api/users/${endpoint}/${id}/toggleActivation`,
        {},
        { withCredentials: true }
      );
      onRefresh();
    } catch (err) {
      console.error(err);
      alert("Грешка при менување статус.");
    }
  };

  return (
    <div className={AdminPanelStyleSheet.card}>
      <div
        className={AdminPanelStyleSheet.cardHeader}
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          marginBottom: "15px",
        }}
      >
        <h3 className={AdminPanelStyleSheet.cardTitle} style={{ margin: 0 }}>
          {title}
        </h3>

        <div style={{ display: "flex", gap: "15px", alignItems: "center" }}>
          <div className={AdminPanelStyleSheet.selectWrapper}>
            <span className={AdminPanelStyleSheet.selectText}>Прикажи: </span>
            <select
              className={AdminPanelStyleSheet.selectElement}
              value={filter}
              onChange={(e) => setFilter(e.target.value)}
            >
              <option value="all">Сите</option>
              <option value="active">Активни</option>
            </select>
          </div>

          {createLinks[type] && (
            <Link
              to={createLinks[type]}
              className={AdminPanelStyleSheet.addLink}
            >
              + Додади
            </Link>
          )}
        </div>
      </div>

      <table className={AdminPanelStyleSheet.dataTable}>
        <thead>
          <tr>
            <th>Р.Бр</th>
            {columns.map((col, index) => (
              <th key={index}>{col}</th>
            ))}
            <th style={{ textAlign: "right" }}>Акции</th>
          </tr>
        </thead>

        <tbody>
          {isLoading ? (
            <tr>
              <td colSpan={columns.length + 2}>Вчитување...</td>
            </tr>
          ) : localData.length > 0 ? (
            localData.map((item, index) => (
              <tr key={item.id || index}>
                <td>{index + 1}</td>
                <td>
                  {item.ime} {item.prezime}
                </td>

                {type === "ucenik" && (
                  <>
                    <td>{item.e_posta}</td>
                    <td>{item.klasDisplay}</td>
                    <td>{item.roditelDisplay}</td>
                  </>
                )}

                {(type === "roditel" ||
                  type === "nastavnik" ||
                  type === "klasenRakovoditel" ||
                  type === "predmetenNastavnik") && (
                  <>
                    <td>{item.e_posta}</td>
                    <td>{item.pol}</td>
                  </>
                )}

                {type === "blagajnik" && (
                  <>
                    <td>{item.e_posta}</td>
                    <td style={{ fontSize: "0.8rem", fontFamily: "monospace" }}>
                      {item.metamusk_adresa}
                    </td>
                  </>
                )}

                <td>{item.active ? "Активен" : "Неактивен"}</td>

                <td style={{ textAlign: "right" }}>
                  <button
                    className={AdminPanelStyleSheet.toggleActivation}
                    onClick={() => toggleActivation(item.id)}
                  >
                    {item.active ? "Деактивирај" : "Активирај"}
                  </button>
                  <button
                    className={`${AdminPanelStyleSheet.actionBtn} ${AdminPanelStyleSheet.deleteBtn}`}
                    onClick={() => onDelete(type, item.id)}
                  >
                    Избриши
                  </button>
                  {type !== "nastavnik" && (
                    <button
                      className={`${AdminPanelStyleSheet.actionBtn} ${AdminPanelStyleSheet.deleteBtn}`}
                      onClick={() => navigate(infoLinks[type](item.id))}
                    >
                      Види повеќе информации
                    </button>
                  )}
                </td>
              </tr>
            ))
          ) : (
            <tr>
              <td colSpan={columns.length + 2}>Нема податоци...</td>
            </tr>
          )}
        </tbody>
      </table>
    </div>
  );
};

const AdminPanel = () => {
  const [ucenici, setUcenici] = useState([]);
  const [blagajnici, setBlagajnici] = useState([]);
  const [klasni, setKlasni] = useState([]);
  const [roditeli, setRoditeli] = useState([]);
  const [predmetni, setPredmetni] = useState([]);
  const [nastavnici, setNastavnici] = useState([]);
  const [loading, setLoading] = useState(true);

  const fetchData = async () => {
    try {
      setLoading(true);
      const [resU, resB, resK, resR, resP, resN] = await Promise.all([
        axios.get("http://localhost:8080/api/users/ucenici/all", {
          withCredentials: true,
        }),
        axios.get("http://localhost:8080/api/users/blagajnici/all", {
          withCredentials: true,
        }),
        axios.get(
          "http://localhost:8080/api/users/nastavnici/klasniRakovoditeli/all",
          { withCredentials: true }
        ),
        axios.get("http://localhost:8080/api/users/roditeli/all", {
          withCredentials: true,
        }),
        axios.get(
          "http://localhost:8080/api/users/nastavnici/predmetniNastavnici/all",
          { withCredentials: true }
        ),
        axios.get("http://localhost:8080/api/users/nastavnici/all", {
          withCredentials: true,
        }),
      ]);

      const extendedUcenici = await Promise.all(
        resU.data.map(async (u) => {
          try {
            const [kRes, rRes] = await Promise.all([
              u.uciVoKlasId != null
                ? axios.get(`http://localhost:8080/api/klas/${u.uciVoKlasId}`, {
                    withCredentials: true,
                  })
                : null,
              axios.get(
                `http://localhost:8080/api/users/roditeli/${u.staratelId}`,
                { withCredentials: true }
              ),
            ]);
            return {
              ...u,
              klasDisplay: kRes
                ? `${kRes.data.oddelenie}-${kRes.data.paralelka}`
                : "Нема клас",

              roditelDisplay: `${rRes.data.ime} ${rRes.data.prezime}`,
            };
          } catch {
            return { ...u, klasDisplay: "N/A", roditelDisplay: "N/A" };
          }
        })
      );

      setUcenici(extendedUcenici);
      setBlagajnici(resB.data);
      setKlasni(resK.data);
      setRoditeli(resR.data);
      setPredmetni(resP.data);
      setNastavnici(resN.data);
    } catch (err) {
      console.error("Грешка при вчитување:", err);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  const handleDelete = async (type, id) => {
    try {
      const endpoints = {
        ucenik: "ucenici",
        roditel: "roditeli",
        blagajnik: "blagajnici",
        nastavnik: "nastavnici",
        klasenRakovoditel: "nastavnici/klasniRakovoditeli",
        predmetenNastavnik: "nastavnici/predmetniNastavnici",
      };

      await axios.delete(
        `http://localhost:8080/api/users/${endpoints[type]}/${id}`,
        { withCredentials: true }
      );

      const filterData = (prev) => prev.filter((item) => item.id !== id);

      switch (type) {
        case "ucenik":
          setUcenici(filterData);
          break;
        case "roditel":
          setRoditeli(filterData);
          break;
        case "blagajnik":
          setBlagajnici(filterData);
          break;
        case "nastavnik":
          setNastavnici(filterData);
          break;
        case "klasenRakovoditel":
          setKlasni(filterData);
          break;
        case "predmetenNastavnik":
          setPredmetni(filterData);
          break;
        default:
          break;
      }
      <div class="alert alert-success" role="alert">
        Успешно избришано
      </div>;
    } catch (err) {
      console.error("Грешка при бришење:", err);
      <div class="alert alert-warning" role="alert">
        Успешно избришано
      </div>;
    }
  };

  return (
    <>
      <Navbar />
      <div className={AdminPanelStyleSheet.adminWrapper}>
        <h1 className={AdminPanelStyleSheet.headerTitle}>
          Админ контролен панел
        </h1>

        <div className={AdminPanelStyleSheet.inlineLinks}>
          <Link
            to="/adminDashboard/users"
            className={AdminPanelStyleSheet.inlineLink}
          >
            Корисници
          </Link>
          <Link
            to="/adminDashboard/classes"
            className={AdminPanelStyleSheet.inlineLink}
          >
            Класови
          </Link>
          <Link
            to="/adminDashboard/subjects"
            className={AdminPanelStyleSheet.inlineLink}
          >
            Предмети
          </Link>
          <Link
            to="/adminDashboard/schedules"
            className={AdminPanelStyleSheet.inlineLink}
          >
            Распореди
          </Link>
          <Link
            to="/adminDashboard/weeklyPlans"
            className={AdminPanelStyleSheet.inlineLink}
          >
            Неделни планови
          </Link>
          <Link
            to="/adminDashboard/paymentAnnoucements"
            className={AdminPanelStyleSheet.inlineLink}
          >
            Соопштенија за плаќање
          </Link>
          <Link
            to="/adminDashboard/statistics"
            className={AdminPanelStyleSheet.inlineLink}
          >
           Статистика
          </Link>
        </div>

        <div className={AdminPanelStyleSheet.dashboardGrid}>
          <DataCard
            title="Ученици"
            type="ucenik"
            data={ucenici}
            isLoading={loading}
            onDelete={handleDelete}
            onRefresh={fetchData}
            columns={["Име и презиме", "Е-пошта", "Клас", "Родител", "Статус"]}
          />
          <DataCard
            title="Родители"
            type="roditel"
            data={roditeli}
            isLoading={loading}
            onDelete={handleDelete}
            onRefresh={fetchData}
            columns={["Име и презиме", "Е-пошта", "Пол", "Статус"]}
          />
          <DataCard
            title="Благајници"
            type="blagajnik"
            data={blagajnici}
            isLoading={loading}
            onDelete={handleDelete}
            onRefresh={fetchData}
            columns={["Име и презиме", "Е-пошта", "Metamask Адреса", "Статус"]}
          />
          <DataCard
            title="Наставници"
            type="nastavnik"
            data={nastavnici}
            isLoading={loading}
            onDelete={handleDelete}
            onRefresh={fetchData}
            columns={["Име и презиме", "Е-пошта", "Пол", "Статус"]}
          />
          <DataCard
            title="Класни раководители"
            type="klasenRakovoditel"
            data={klasni}
            isLoading={loading}
            onDelete={handleDelete}
            onRefresh={fetchData}
            columns={["Име и презиме", "Е-пошта", "Пол", "Статус"]}
          />
          <DataCard
            title="Предметни наставници"
            type="predmetenNastavnik"
            data={predmetni}
            isLoading={loading}
            onDelete={handleDelete}
            onRefresh={fetchData}
            columns={["Име и презиме", "Е-пошта", "Пол", "Статус"]}
          />
        </div>
      </div>
    </>
  );
};

export default AdminPanel;