import React, { useState, useEffect, useCallback } from "react";
import ProjectCard from "../../components/Project/ProjectCard";
import ManageProjectInfo from "../../components/Project/ManageProjectInfo";
import Breadcrumb from "../../components/common/Breadcrumb";
import ProjectRepository from "../../repositories/ProjectRepository";
import { useProjects, useCreateProject } from "../../hooks/useProjects";
import showToast from "../../services/toastService";
// import {
//   getCachedData,
//   cacheData,
//   clearCacheKey,
// } from "../../slices/apiDataManager";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { useProfile } from "../../hooks/useProfile";
import { ITEMS_PER_PAGE, MANAGE_PROJECT } from "../../utils/constants";
import ProjectListView from "./ProjectListView";
import eventBus from "../../services/eventBus";
import { clearApiCacheKey } from "../../slices/apiCacheSlice";
import { defaultCheckBoxAppearanceProvider } from "pdf-lib";
import { useMutation } from "@tanstack/react-query";
import usePagination from "../../hooks/usePagination";
import GlobalModel from "../../components/common/GlobalModel";

const ProjectList = () => {
  const { profile: loginUser } = useProfile();
  const [listView, setListView] = useState(false);
  const [showModal, setShowModal] = useState(false);

  const { projects, loading, error, refetch } = useProjects();
  const [projectList, setProjectList] = useState([]);

  const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT);
  const [HasManageProject, setHasManageProject] = useState(HasManageProjectPermission);

  const { mutate: createProject,isPending } = useCreateProject({
    onSuccessCallback: () => {
      setShowModal(false);
    },
  });

  const [searchTerm, setSearchTerm] = useState("");
  const [selectedStatuses, setSelectedStatuses] = useState([
    "b74da4c2-d07e-46f2-9919-e75e49b12731",
    "603e994b-a27f-4e5d-a251-f3d69b0498ba",
    "ef1c356e-0fe0-42df-a5d3-8daee355492d",
    "cdad86aa-8a56-4ff4-b633-9c629057dfef",
    "33deaef9-9af1-4f2a-b443-681ea0d04f81",
  ]);

  const handleShow = () => setShowModal(true);
  const handleClose = () => setShowModal(false);

  const sortingProject = (projects) => {
    if (!loading && Array.isArray(projects)) {
      const grouped = {};
      projects.forEach((project) => {
        const statusId = project.projectStatusId;
        if (!grouped[statusId]) grouped[statusId] = [];
        grouped[statusId].push(project);
      });

      const sortedGrouped = selectedStatuses
        .filter((statusId) => grouped[statusId])
        .flatMap((statusId) =>
          grouped[statusId].sort((a, b) =>
            a.name.toLowerCase().localeCompare(b.name.toLowerCase())
          )
        );

      setProjectList((prev) => {
        const isSame = JSON.stringify(prev) === JSON.stringify(sortedGrouped);
        return isSame ? prev : sortedGrouped;
      });
    }
  };

  useEffect(() => {
    if (!loading && projects) {
      sortingProject(projects);
    }
  }, [projects, loading, selectedStatuses]); 

  useEffect(() => {
    setHasManageProject(loginUser ? HasManageProjectPermission : false);
  }, [loginUser, HasManageProjectPermission]);

  const handleSubmitForm = (newProject) => {
    createProject(newProject);
  };

  const handleStatusChange = (statusId) => {
    setCurrentPage(1);
    setSelectedStatuses((prev) =>
      prev.includes(statusId)
        ? prev.filter((id) => id !== statusId)
        : [...prev, statusId]
    );
  };

  const handleStatusFilterFromChild = (statusesFromChild) => {
    setSelectedStatuses(statusesFromChild);
  };

  const filteredProjects = projectList.filter((project) => {
    const matchesStatus = selectedStatuses.includes(project.projectStatusId);
    const matchesSearch = project.name
      .toLowerCase()
      .includes(searchTerm.toLowerCase());
    return matchesStatus && matchesSearch;
  });

  const totalPages = Math.ceil(filteredProjects.length / ITEMS_PER_PAGE);

  const {
    currentItems,
    currentPage,
    paginate,
    setCurrentPage,
  } = usePagination(filteredProjects, ITEMS_PER_PAGE);

  useEffect(() => {
    const tooltipTriggerList = Array.from(
      document.querySelectorAll('[data-bs-toggle="tooltip"]')
    );
    tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
  }, []);

  return (
    <>
    
      {showModal && (
         <GlobalModel isOpen={showModal} closeModal={handleClose}>
         <ManageProjectInfo
          project={null}
          handleSubmitForm={handleSubmitForm}
          onClose={handleClose}
          isPending={isPending}
        />
      </GlobalModel>
     )}

      <div className="container-fluid">
        <Breadcrumb
          data={[
            { label: "Home", link: "/dashboard" },
            { label: "Projects", link: null },
          ]}
        />
        <div className="card cursor-pointer mb-5">
          <div className="card-body p-2 pb-1">
            <div className="d-flex flex-wrap justify-content-between align-items-start">
              <div className="d-flex flex-wrap align-items-start">
                <div className="flex-grow-1 me-2 mb-2">
                  <input
                    type="search"
                    className="form-control form-control-sm"
                    placeholder="Search projects..."
                    value={searchTerm}
                    onChange={(e) => {
                      setSearchTerm(e.target.value);
                      setCurrentPage(1);
                    }}
                  />
                </div>

                <div className="d-flex gap-2 mb-2">
                  <button
                    type="button"
                    className={`btn  btn-sm p-1 ${
                      !listView ? "btn-primary" : "btn-outline-primary"
                    }`}
                    onClick={() => setListView(false)}
                    data-bs-toggle="tooltip"
                    data-bs-custom-class="tooltip"
                    title="Card View"
                  >
                    <i className="bx bx-grid-alt fs-5"></i>
                  </button>
                  <button
                    type="button"
                    className={`btn btn-sm p-1  ${
                      listView ? "btn-primary" : "btn-outline-primary"
                    }`}
                    onClick={() => setListView(true)}
                    data-bs-toggle="tooltip"
                    data-bs-custom-class="tooltip"
                    title="List View"
                  >
                    <i className="bx bx-list-ul fs-5"></i>
                  </button>
                </div>

                <div className="dropdown ms-3 mt-1">
                  <a
                    className="dropdown-toggle hide-arrow cursor-pointer p-1 mt-3 "
                    data-bs-toggle="dropdown"
                    aria-expanded="false"
                    data-bs-custom-class="tooltip"
                    title="Filter"
                  >
                    <i className="fa-solid fa-filter fs-4"></i>
                  </a>
                  <ul className="dropdown-menu p-2 text-capitalize">
                    {[
                      {
                        id: "b74da4c2-d07e-46f2-9919-e75e49b12731",
                        label: "Active",
                      },
                      {
                        id: "cdad86aa-8a56-4ff4-b633-9c629057dfef",
                        label:"In Progress"
                      },
                      {
                        id: "603e994b-a27f-4e5d-a251-f3d69b0498ba",
                        label: "On Hold",
                      },
                      {
                        id: "ef1c356e-0fe0-42df-a5d3-8daee355492d",
                        label: "Inactive",
                      },
                      {
                        id: "33deaef9-9af1-4f2a-b443-681ea0d04f81",
                        label: "Completed",
                      },
                    ].map(({ id, label }) => (
                      <li key={id}>
                        <div className="form-check">
                          <input
                            className="form-check-input  "
                            type="checkbox"
                            checked={selectedStatuses.includes(id)}
                            onChange={() => handleStatusChange(id)}
                          />
                          <label className="form-check-label">{label}</label>
                        </div>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>

              <div>
                <button
                  type="button"
                  data-bs-toggle="tooltip"
                  data-bs-offset="0,8"
                  data-bs-placement="top"
                  data-bs-custom-class="tooltip"
                  title="Add New Project"
                  className={`p-1 me-2 bg-primary rounded-circle ${
                    !HasManageProject && "d-none"
                  }`}
                  onClick={handleShow}
                >
                  <i className="bx bx-plus fs-4 text-white"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
        {loading && <p className="text-center">Loading...</p>}
        {!loading && filteredProjects.length === 0 && !listView && (
          <p className="text-center text-muted">No projects found.</p>
        )}

       {listView ? (
  <div className="card cursor-pointer">
    <div className="card-body p-2" style={{ minHeight: "200px" }}>
      <div className="table-responsive text-nowrap py-2">
        <table className="table m-3">
          <thead>
            <tr>
              <th className="text-start" colSpan={5}>
                Project Name
              </th>
              <th className="mx-2 text-start">Contact Person</th>
              <th className="mx-2">START DATE</th>
              <th className="mx-2">DEADLINE</th>
              <th className="mx-2">Task</th>
              <th className="mx-2">Progress</th>
              <th className="mx-2">
                <div className="dropdown">
                  <a
                    className="dropdown-toggle hide-arrow cursor-pointer"
                    data-bs-toggle="dropdown"
                    aria-expanded="false"
                  >
                    Status <i className="bx bx-filter bx-sm"></i>
                  </a>
                  <ul className="dropdown-menu p-2 text-capitalize">
                    {[
                      {
                        id: "b74da4c2-d07e-46f2-9919-e75e49b12731",
                        label: "Active",
                      },
                      {
                        id: "603e994b-a27f-4e5d-a251-f3d69b0498ba",
                        label: "On Hold",
                      },
                      {
                        id: "ef1c356e-0fe0-42df-a5d3-8daee355492d",
                        label: "Inactive",
                      },
                      {
                        id: "33deaef9-9af1-4f2a-b443-681ea0d04f81",
                        label: "Completed",
                      },
                    ].map(({ id, label }) => (
                      <li key={id}>
                        <div className="form-check">
                          <input
                            className="form-check-input"
                            type="checkbox"
                            checked={selectedStatuses.includes(id)}
                            onChange={() => handleStatusChange(id)}
                          />
                          <label className="form-check-label">{label}</label>
                        </div>
                      </li>
                    ))}
                  </ul>
                </div>
              </th>
              <th
                className={`mx-2 ${
                  HasManageProject ? "d-sm-table-cell" : "d-none"
                }`}
              >
                Action
              </th>
            </tr>
          </thead>
          <tbody className="table-border-bottom-0" style={{ height: "200px" }}>
            {currentItems.length === 0 ? (
              <tr>
                <td
                  colSpan="12"
                  className="text-center"
                  style={{
                    verticalAlign: "middle",
                    height: "200px",
                    paddingTop: 0,
                    paddingBottom: 0,
                  }}
                >
                  <div className="d-flex flex-column justify-content-center align-items-center h-100">
                    <p className="mb-0">No projects found</p>
                  </div>
                </td>
              </tr>
            ) : (
              currentItems.map((project) => (
                <ProjectListView
                  key={project.id}
                  projectData={project}
                  recall={sortingProject}
                />
              ))
            )}
          </tbody>
        </table>
      </div>
    </div>
  </div>
) : (
  <div className="row">
    {currentItems.map((project) => (
      <ProjectCard
        key={project.id}
        projectData={project}
        recall={sortingProject}
      />
    ))}
  </div>
)}

{!loading && totalPages > 1 && (
  <nav>
    <ul className="pagination pagination-sm justify-content-end py-2">
      <li className={`page-item ${currentPage === 1 && "disabled"}`}>
        <button
          className="page-link"
          onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
        >
          &laquo;
        </button>
      </li>
      {[...Array(totalPages)].map((_, i) => (
        <li
          key={i}
          className={`page-item ${currentPage === i + 1 && "active"}`}
        >
          <button
            className="page-link"
            onClick={() => setCurrentPage(i + 1)}
          >
            {i + 1}
          </button>
        </li>
      ))}
      <li className={`page-item ${currentPage === totalPages && "disabled"}`}>
        <button
          className="page-link"
          onClick={() =>
            setCurrentPage((p) => Math.min(totalPages, p + 1))
          }
        >
          &raquo;
        </button>
      </li>
    </ul>
  </nav>
)}

{!loading && totalPages > 1 && (
  <nav>
    <ul className="pagination pagination-sm justify-content-end py-2">
      <li className={`page-item ${currentPage === 1 && "disabled"}`}>
        <button
          className="page-link"
          onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
        >
          &laquo;
        </button>
      </li>
      {[...Array(totalPages)].map((_, i) => (
        <li
          key={i}
          className={`page-item ${currentPage === i + 1 && "active"}`}
        >
          <button
            className="page-link"
            onClick={() => setCurrentPage(i + 1)}
          >
            {i + 1}
          </button>
        </li>
      ))}
      <li className={`page-item ${currentPage === totalPages && "disabled"}`}>
        <button
          className="page-link"
          onClick={() =>
            setCurrentPage((p) => Math.min(totalPages, p + 1))
          }
        >
          &raquo;
        </button>
      </li>
    </ul>
  </nav>
)}

      </div>
    </>
  );
};

export default ProjectList;