import React, { useState } from "react";
import "../../../App.css";
import CardProfesor from "./CardProfesor";
import Guard from "../../../guards/route.guard";
import {
  useProfesores,
  useProfesoresActives,
} from "../../../services/teacher.services";
import { PrivateRoutes } from "../../../models/routes";

const Mapeo = ({ filters, edificios }) => {
  const [currentPage, setCurrentPage] = useState(1);
  const permissions = Guard();

  const { profesores: profesoresData, totalPages: totalDataPages, loading: loadingData, error: errorData } = useProfesores(currentPage, filters);
  const { profesores: profesoresActivesData, totalPages: totalActivePages, loading: loadingActives, error: errorActives } = useProfesoresActives(currentPage, filters);

  if (loadingData || loadingActives) {
    return <div className="perfil-profesor">Cargando datos del los profesores...</div>;
  }

  if (errorData || errorActives) {
    return <div className="perfil-profesor">Error al cargar los datos de los profesores: {errorData || errorActives}</div>;
  }

  if((totalDataPages || totalActivePages) === 0){
    return <div className="perfil-profesor">Profesor no registrado en la base de datos</div>;
  }

  const { profesores, totalPages } = permissions
    ? { profesores: profesoresData, totalPages: totalDataPages }
    : { profesores: profesoresActivesData, totalPages: totalActivePages };

  const handleNextPage = () => {
    if (currentPage < totalPages) {
      setCurrentPage((prevPage) => prevPage + 1);
    }
  };

  const handlePrevPage = () => {
    if (currentPage > 1) {
      setCurrentPage((prevPage) => prevPage - 1);
    }
  };

  const renderPageNumbers = () => {
    const pageNumbers = [];
    const maxPagesToShow = 5;
    let startPage = Math.max(1, currentPage - Math.floor(maxPagesToShow / 2));
    let endPage = Math.min(totalPages, startPage + maxPagesToShow - 1);

    if (endPage - startPage < maxPagesToShow - 1) {
      startPage = Math.max(1, endPage - maxPagesToShow + 1);
    }

    for (let i = startPage; i <= endPage; i++) {
      pageNumbers.push(
        <li
          key={i}
          className={`page-item ${currentPage === i ? "active" : ""}`}
        >
          <button
            className="page-link buttons"
            onClick={() => setCurrentPage(i)}
          >
            {i}
          </button>
        </li>
      );
    }

    return pageNumbers;
  };

  const handleCrear = () => {
    window.location.href = PrivateRoutes.CREARPROFESOR;
  };

  const handleRegresar = () => {
    window.location.href = PrivateRoutes.INTERFACE;
  };

  return (
    <div className="main-content">
      {permissions ? (
        <div className="containerButton">
          <button className="blueButton" onClick={handleRegresar}>
            Regresar
          </button>
          <button className="blueButton" onClick={handleCrear}>
            Crear Profesor
          </button>
        </div>
      ) : null}

      {profesores.map((profesor) => {
        const edificio = edificios.find(
          (e) => e.id_edificio === profesor.id_edificio
        );
        const edificioNombre = edificio ? edificio.edificio : "Desconocido";
        return (
          <CardProfesor
            key={profesor.id_profesor}
            profesor={profesor}
            edificioNombre={edificioNombre}
            permissions={permissions}
          />
        );
      })}

      <nav aria-label="Page navigation example">
        <ul className="pagination justify-content-center">
          <li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
            <button
              className="page-link prevButtons"
              onClick={handlePrevPage}
            >
              Anterior
            </button>
          </li>
          {renderPageNumbers()}
          <li
            className={`page-item ${
              currentPage === totalPages ? "disabled" : ""
            }`}
          >
            <button
              className="page-link nextButtons"
              onClick={handleNextPage}
            >
              Siguiente
            </button>
          </li>
        </ul>
      </nav>
    </div>
  );
};

export default Mapeo;