import React, { useState, useEffect, useCallback } from "react";
import moment from "moment";
import Avatar from "../common/Avatar";
import { convertShortTime } from "../../utils/dateUtils";
import RenderAttendanceStatus from "./RenderAttendanceStatus";
import usePagination from "../../hooks/usePagination";
import { useNavigate } from "react-router-dom";
import { ITEMS_PER_PAGE } from "../../utils/constants";
import { useAttendance } from "../../hooks/useAttendance";
import { useSelector } from "react-redux";
import { useQueryClient } from "@tanstack/react-query";
import eventBus from "../../services/eventBus";

const Attendance = ({ getRole, handleModalData }) => {
  const queryClient = useQueryClient();
  const [loading, setLoading] = useState(false);
  const navigate = useNavigate();
  const [todayDate, setTodayDate] = useState(new Date());
  const [ShowPending, setShowPending] = useState(false);
  const selectedProject = useSelector(
    (store) => store.localVariables.projectId
  );
  const {
    attendance,
    loading: attLoading,
    recall: attrecall,
    isFetching
  } = useAttendance(selectedProject);
  const filteredAttendance = ShowPending
    ? attendance?.filter(
        (att) => att?.checkInTime !== null && att?.checkOutTime === null
      )
    : attendance;

  const attendanceList = Array.isArray(filteredAttendance)
    ? filteredAttendance
    : [];

  const sortByName = (a, b) => {
    const nameA = (a.firstName + a.lastName).toLowerCase();
    const nameB = (b.firstName + b.lastName).toLowerCase();
    return nameA?.localeCompare(nameB);
  };
  const group1 = attendanceList
    .filter((d) => d.activity === 1 || d.activity === 4)
    .sort(sortByName);
  const group2 = attendanceList
    .filter((d) => d.activity === 0)
    .sort(sortByName);

  const filteredData = [...group1, ...group2];
  const { currentPage, totalPages, currentItems, paginate } = usePagination(
    filteredData,
    ITEMS_PER_PAGE
  );

  const handler = useCallback(
    (msg) => {
      if (selectedProject == msg.projectId) {
        // const updatedAttendance = attendances.map((item) =>
        //   item.employeeId === msg.response.employeeId
        //     ? { ...item, ...msg.response }
        //     : item
        // );
        queryClient.setQueryData(["attendance", selectedProject], (oldData) => {
          if (!oldData) {
            queryClient.invalidateQueries({queryKey:["attendance"]})
          };
          return oldData.map((record) =>
            record.employeeId === msg.response.employeeId ? { ...record, ...msg.response } : record
          );
        });
      }
    },
    [selectedProject, attrecall]
  );

  const employeeHandler = useCallback(
    (msg) => {
      if (attendances.some((item) => item.employeeId == msg.employeeId)) {
        attrecall();
      }
    },
    [selectedProject, attendance]
  );
  useEffect(() => {
    eventBus.on("attendance", handler);
    return () => eventBus.off("attendance", handler);
  }, [handler]);

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

  return (
    <>
      <div className="table-responsive text-nowrap h-100" >
        <div className="d-flex text-start align-items-center py-2">
          <strong>Date : {todayDate.toLocaleDateString("en-GB")}</strong>
          <div className="form-check form-switch text-start m-0 ms-5">
            <input
              type="checkbox"
              className="form-check-input"
              role="switch"
              id="inactiveEmployeesCheckbox"
              disabled={isFetching}
              checked={ShowPending}
              onChange={(e) => setShowPending(e.target.checked)}
            />
            <label className="form-check-label ms-0">Show Pending</label>
          </div>
        </div>
        {Array.isArray(attendance) && attendance.length > 0 ? (
          <>
            <table className="table ">
              <thead>
                <tr className="border-top-1">
                  <th colSpan={2}>Name</th>
                  <th>Role</th>
                  <th>
                    <i className="bx bxs-down-arrow-alt text-success"></i>
                    Check-In
                  </th>
                  <th>
                    <i className="bx bxs-up-arrow-alt text-danger"></i>Check-Out
                  </th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody className="table-border-bottom-0 ">
                {currentItems &&
                  currentItems
                    .sort((a, b) => {
                      const checkInA = a?.checkInTime
                        ? new Date(a.checkInTime)
                        : new Date(0);
                      const checkInB = b?.checkInTime
                        ? new Date(b.checkInTime)
                        : new Date(0);
                      return checkInB - checkInA;
                    })
                    .map((item) => (
                      <tr key={item.employeeId}>
                        <td colSpan={2}>
                          <div className="d-flex justify-content-start align-items-center">
                            <Avatar
                              firstName={item.firstName}
                              lastName={item.lastName}
                            ></Avatar>
                            <div className="d-flex flex-column">
                              <a
                                onClick={(e) =>
                                  navigate(
                                    `/employee/${item.employeeId}?for=attendance`
                                  )
                                }
                                className="text-heading text-truncate cursor-pointer"
                              >
                                <span className="fw-normal">
                                  {item.firstName} {item.lastName}
                                </span>
                              </a>
                            </div>
                          </div>
                        </td>

                        <td>{item.jobRoleName}</td>
                        <td>
                          {item.checkInTime
                            ? convertShortTime(item.checkInTime)
                            : "--"}
                        </td>
                        <td>
                          {item.checkOutTime
                            ? convertShortTime(item.checkOutTime)
                            : "--"}
                        </td>

                        <td className="text-center">
                          <RenderAttendanceStatus
                            attendanceData={item}
                            handleModalData={handleModalData}
                            Tab={1}
                            currentDate={null}
                          />
                        </td>
                      </tr>
                    ))}
                {!attendance && (
                  <span className="text-secondary m-4">No employees assigned to the project!</span>
                )}
              </tbody>
            </table>

            {!loading && filteredData.length > 20 && (
              <nav aria-label="Page ">
                <ul className="pagination pagination-sm justify-content-end py-1">
                  <li
                    className={`page-item  ${
                      currentPage === 1 ? "disabled" : ""
                    }`}
                  >
                    <button
                      className="page-link btn-xs"
                      onClick={() => paginate(currentPage - 1)}
                    >
                      &laquo;
                    </button>
                  </li>
                  {[...Array(totalPages)].map((_, index) => (
                    <li
                      key={index}
                      className={`page-item ${
                        currentPage === index + 1 ? "active" : ""
                      }`}
                    >
                      <button
                        className="page-link "
                        onClick={() => paginate(index + 1)}
                      >
                        {index + 1}
                      </button>
                    </li>
                  ))}
                  <li
                    className={`page-item ${
                      currentPage === totalPages ? "disabled" : ""
                    }`}
                  >
                    <button
                      className="page-link "
                      onClick={() => paginate(currentPage + 1)}
                    >
                      &raquo;
                    </button>
                  </li>
                </ul>
              </nav>
            )}
          </>
        ) : attLoading ? (
          <div>Loading...</div>
        ) : (
          <div className="text-muted">
            {Array.isArray(attendance)
              ? "No employees assigned to the project"
              : "Attendance data unavailable"}
          </div>
        )}

        {currentItems?.length == 0 && attendance.length > 0 && (
          <div className="my-4"><span className="text-secondary">No Pending Record Available !</span></div>
        )}
      </div>
    </>
  );
};

export default Attendance;