import React, { useState, useEffect, useCallback } from "react";
import {
  cacheData,
  clearCacheKey,
  getCachedData,
  getCachedProfileData,
} from "../../slices/apiDataManager";
import Breadcrumb from "../../components/common/Breadcrumb";
import AttendanceLog from "../../components/Activities/AttendcesLogs";
import Attendance from "../../components/Activities/Attendance";
import AttendanceModel from "../../components/Activities/AttendanceModel";
import showToast from "../../services/toastService";
import Regularization from "../../components/Activities/Regularization";
import { useAttendance } from "../../hooks/useAttendance";
import { useDispatch, useSelector } from "react-redux";
import { setProjectId } from "../../slices/localVariablesSlice";
import { markCurrentAttendance } from "../../slices/apiSlice/attendanceAllSlice";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { REGULARIZE_ATTENDANCE } from "../../utils/constants";
import eventBus from "../../services/eventBus";
import AttendanceRepository from "../../repositories/AttendanceRepository";
import { useProjectName } from "../../hooks/useProjects";

const AttendancePage = () => {
  const [activeTab, setActiveTab] = useState("all");
  const [showPending, setShowPending] = useState(false);
  const [searchQuery, setSearchQuery] = useState("");
  const loginUser = getCachedProfileData();
  const selectedProject = useSelector((store) => store.localVariables.projectId);
  const dispatch = useDispatch();
  const {
    attendance,
    loading: attLoading,
    recall: attrecall,
  } = useAttendance(selectedProject);
  const [attendances, setAttendances] = useState();
  const [empRoles, setEmpRoles] = useState(null);
  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
  const [modelConfig, setModelConfig] = useState(null); // Initialize as null
  const DoRegularized = useHasUserPermission(REGULARIZE_ATTENDANCE);
  const { projectNames, loading: projectLoading, fetchData } = useProjectName();

  const [formData, setFormData] = useState({
    markTime: "",
    description: "",
    date: new Date().toLocaleDateString(),
  });

  const handler = useCallback(
    (msg) => {
      if (selectedProject === msg.projectId) {
        const updatedAttendance = attendances
          ? attendances.map((item) =>
              item.employeeId === msg.response.employeeId
                ? { ...item, ...msg.response }
                : item
            )
          : [msg.response];

        cacheData("Attendance", {
          data: updatedAttendance,
          projectId: selectedProject,
        });
        setAttendances(updatedAttendance);
      }
    },
    [selectedProject, attendances]
  );

  const employeeHandler = useCallback(
    (msg) => {
      // This logic seems fine for refetching if an employee ID exists in current attendances
      if (attendances?.some((item) => item.employeeId === msg.employeeId)) {
        AttendanceRepository.getAttendance(selectedProject)
          .then((response) => {
            cacheData("Attendance", { data: response.data, selectedProject });
            setAttendances(response.data);
          })
          .catch((error) => {
            console.error(error);
          });
      }
    },
    [selectedProject, attendances]
  );

  const getRole = (roleId) => {
    if (!empRoles) return "Unassigned";
    if (!roleId) return "Unassigned";
    const role = empRoles.find((b) => b.id === roleId);
    return role ? role.role : "Unassigned";
  };

  // Simplified and moved modal opening logic
  const handleModalData = useCallback((employee) => {
    setModelConfig(employee);
    setIsCreateModalOpen(true); // Open the modal directly when data is set
  }, []);

  const closeModal = useCallback(() => {
    setModelConfig(null);
    setIsCreateModalOpen(false);
    // Directly manipulating the DOM is generally not recommended in React.
    // React handles modal visibility via state. If you must, ensure it's
    // for external libraries or for very specific, controlled reasons.
    // For a typical Bootstrap modal, just setting `isCreateModalOpen` to false
    // should be enough if the modal component itself handles the Bootstrap classes.
    const modalElement = document.getElementById("check-Out-modal");
    if (modalElement) {
      modalElement.classList.remove("show");
      modalElement.style.display = "none";
      document.body.classList.remove("modal-open");
      const modalBackdrop = document.querySelector(".modal-backdrop");
      if (modalBackdrop) {
        modalBackdrop.remove();
      }
    }
  }, []);

  const handleSubmit = useCallback((formData) => {
    dispatch(markCurrentAttendance(formData))
      .then((action) => {
        if (action.payload && action.payload.employeeId) {
          const updatedAttendance = attendances
            ? attendances.map((item) =>
                item.employeeId === action.payload.employeeId
                  ? { ...item, ...action.payload }
                  : item
              )
            : [action.payload];

          cacheData("Attendance", {
            data: updatedAttendance,
            projectId: selectedProject,
          });
          setAttendances(updatedAttendance);
          showToast("Attendance Marked Successfully", "success");
        } else {
          showToast("Failed to mark attendance: Invalid response", "error");
        }
      })
      .catch((error) => {
        showToast(error.message, "error");
      });
  }, [dispatch, attendances, selectedProject]);


  const handleToggle = (event) => {
    setShowPending(event.target.checked);
  };

  useEffect(() => {
    if (selectedProject === null && projectNames.length > 0) {
      dispatch(setProjectId(projectNames[0]?.id));
    }
  }, [selectedProject, projectNames, dispatch]);

  useEffect(() => {
    setAttendances(attendance);
  }, [attendance]);

  const filteredAndSearchedTodayAttendance = useCallback(() => {
    let currentData = attendances;

    if (showPending) {
      currentData = currentData?.filter(
        (att) => att?.checkInTime !== null && att?.checkOutTime === null
      );
    }

    if (searchQuery) {
      const lowerCaseSearchQuery = searchQuery.toLowerCase();
      currentData = currentData?.filter((att) => {
        const fullName = [att.firstName, att.middleName, att.lastName]
          .filter(Boolean)
          .join(" ")
          .toLowerCase();

        return (
          att.employeeName?.toLowerCase().includes(lowerCaseSearchQuery) ||
          att.employeeId?.toLowerCase().includes(lowerCaseSearchQuery) ||
          fullName.includes(lowerCaseSearchQuery)
        );
      });
    }
    return currentData;
  }, [attendances, showPending, searchQuery]);

  useEffect(() => {
    eventBus.on("attendance", handler);
    return () => eventBus.off("attendance", handler);
  }, [handler]);

  useEffect(() => {
    eventBus.on("employee", employeeHandler);
    return () => eventBus.off("employee", employeeHandler);
  }, [employeeHandler]);

  return (
    <>
      {isCreateModalOpen && modelConfig && (
        <div
          className="modal fade show"
          style={{ display: "block" }}
          id="check-Out-modal"
          tabIndex="-1"
          aria-hidden="true"
        >
          <AttendanceModel
            modelConfig={modelConfig}
            closeModal={closeModal}
            handleSubmitForm={handleSubmit}
          />
        </div>
      )}

      <div className="container-fluid">
        <Breadcrumb
          data={[
            { label: "Home", link: "/dashboard" },
            { label: "Attendance", link: null },
          ]}
        ></Breadcrumb>
        <div className="nav-align-top nav-tabs-shadow">
          <ul
            className="nav nav-tabs d-flex justify-content-between align-items-center"
            role="tablist"
          >
            <div className="d-flex">
              <li className="nav-item">
                <button
                  type="button"
                  className={`nav-link ${activeTab === "all" ? "active" : ""} fs-6`}
                  onClick={() => setActiveTab("all")}
                  data-bs-toggle="tab"
                  data-bs-target="#navs-top-home"
                >
                  Today's
                </button>
              </li>
              <li className="nav-item">
                <button
                  type="button"
                  className={`nav-link ${activeTab === "logs" ? "active" : ""} fs-6`}
                  onClick={() => setActiveTab("logs")}
                  data-bs-toggle="tab"
                  data-bs-target="#navs-top-profile"
                >
                  Logs
                </button>
              </li>
              <li className={`nav-item ${!DoRegularized && "d-none"}`}>
                <button
                  type="button"
                  className={`nav-link ${
                    activeTab === "regularization" ? "active" : ""
                  } fs-6`}
                  onClick={() => setActiveTab("regularization")}
                  data-bs-toggle="tab"
                  data-bs-target="#navs-top-messages"
                >
                  Regularization
                </button>
              </li>
            </div>
            <div className="p-2">
              <input
                type="text"
                className="form-control form-control-sm"
                placeholder="Search employee..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
            </div>
          </ul>
          <div className="tab-content attedanceTabs py-0 px-1 px-sm-3">
            {activeTab === "all" && (
              <>
                {!attLoading && (
                  <div className="tab-pane fade show active py-0">
                    <Attendance
                      attendance={filteredAndSearchedTodayAttendance()}
                      handleModalData={handleModalData}
                      getRole={getRole}
                      setshowOnlyCheckout={setShowPending}
                      showOnlyCheckout={showPending}
                      searchQuery={searchQuery}
                    />
                  </div>
                )}
                {!attLoading && filteredAndSearchedTodayAttendance()?.length === 0 && (
                  <p>
                    {" "}
                    {showPending
                      ? "No Pending Available"
                      : "No Employee assigned yet."}{" "}
                  </p>
                )}
              </>
            )}

            {activeTab === "logs" && (
              <div className="tab-pane fade show active py-0">
                <AttendanceLog
                  handleModalData={handleModalData}
                  projectId={selectedProject}
                  setshowOnlyCheckout={setShowPending}
                  showOnlyCheckout={showPending}
                  searchQuery={searchQuery}
                />
              </div>
            )}

            {activeTab === "regularization" && DoRegularized && (
              <div className="tab-pane fade show active py-0">
                <Regularization
                  handleRequest={handleSubmit}
                  searchQuery={searchQuery}
                />
              </div>
            )}

            {!attLoading && !attendances && <span>Not Found</span>}
          </div>
        </div>
      </div>
    </>
  );
};

export default AttendancePage;