import React, { useState, useEffect, useRef, useCallback } from "react";
import { useDispatch, useSelector } from "react-redux";
import { changeMaster } from "../../slices/localVariablesSlice";
import useMaster from "../../hooks/masterHook/useMaster";
import { useForm, Controller } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { clearCacheKey, getCachedData } from "../../slices/apiDataManager";
import { useEmployeesAllOrByProjectId } from "../../hooks/useEmployees";
import { TasksRepository } from "../../repositories/ProjectRepository";
import showToast from "../../services/toastService";
import { useProjectDetails } from "../../hooks/useProjects";
import eventBus from "../../services/eventBus";
import { useCreateTask } from "../../hooks/useTasks";

const AssignTask = ({ assignData, onClose, setAssigned }) => {
  const maxPlanned =
    assignData?.workItem?.plannedWork - assignData?.workItem?.completedWork;
  const schema = z.object({
    selectedEmployees: z
      .array(z.string())
      .min(1, { message: "At least one employee must be selected" }),
    description: z.string().min(1, { message: "Description is required" }),
    plannedTask: z.preprocess(
      (val) => parseInt(val, 10),
      z
        .number({
          required_error: "Planned task is required",
          invalid_type_error: "Target for Today must be a number",
        })
        .int()
        .positive({ message: "Planned task must be a positive number" })
        .max(maxPlanned, {
          message: `Planned task cannot exceed ${maxPlanned}`,
        })
    ),
  });

  const [isHelpVisibleTarget, setIsHelpVisibleTarget] = useState(false);
  const helpPopupRefTarget = useRef(null);
  const [isHelpVisible, setIsHelpVisible] = useState(false);
  const { mutate: assignTask, isPending: isSubmitting } = useCreateTask({
    onSuccessCallback: () => {
      closedModel();
    },
  });

  const infoRef = useRef(null);
  const infoRef1 = useRef(null);

  // State for search term
  const [searchTerm, setSearchTerm] = useState("");

  useEffect(() => {
    if (typeof bootstrap !== "undefined") {
      if (infoRef.current) {
        new bootstrap.Popover(infoRef.current, {
          trigger: "focus",
          placement: "right",
          html: true,
          content: `<div>Total Pending tasks of the Activity</div>`,
        });
      }

      if (infoRef1.current) {
        new bootstrap.Popover(infoRef1.current, {
          trigger: "focus",
          placement: "right",
          html: true,
          content: `<div>Target task for today</div>`,
        });
      }
    } else {
      console.warn("Bootstrap is not available. Popovers might not function.");
    }
  }, []);
  const selectedProject = useSelector(
    (store) => store.localVariables.projectId
  );
  const {
    employees,
    loading: employeeLoading,
    recallEmployeeData,
  } = useEmployeesAllOrByProjectId(false, selectedProject, false);
  const dispatch = useDispatch();
  const { loading } = useMaster();
  const { data: jobRoleData } = useMaster();

  // Changed to an array to hold multiple selected roles
  const [selectedRoles, setSelectedRoles] = useState(["all"]);
  const [displayedSelection, setDisplayedSelection] = useState("");
  const {
    handleSubmit,
    control,
    setValue,
    watch,
    formState: { errors },
    reset,
    trigger,
  } = useForm({
    defaultValues: {
      selectedEmployees: [],
      description: "",
      plannedTask: "",
    },
    resolver: zodResolver(schema),
  });

  const handleCheckboxChange = (event, user) => {
    const isChecked = event.target.checked;
    let updatedSelectedEmployees = watch("selectedEmployees") || [];

    if (isChecked) {
      if (!updatedSelectedEmployees.includes(user.id)) {
        updatedSelectedEmployees = [...updatedSelectedEmployees, user.id];
      }
    } else {
      updatedSelectedEmployees = updatedSelectedEmployees?.filter(
        (id) => id !== user.id
      );
    }
    setValue("selectedEmployees", updatedSelectedEmployees);
    trigger("selectedEmployees");
  };

  useEffect(() => {
    dispatch(changeMaster("Job Role"));
    // Initial state should reflect "All Roles" selected
    setSelectedRoles(["all"]);
  }, [dispatch]);

  const handleRoleChange = (event) => {
    setSelectedRole(event.target.value);
  };

  const handleSearchChange = (event) => {
    setSearchTerm(event.target.value);
  };

  // Filter employees first by role, then by search term AND job role name
  const filteredEmployees = employees?.filter((emp) => {
    const matchesRole =
      selectedRole === "all" || String(emp.jobRoleId || "") === selectedRole;

    // Convert both first and last names and job role name to lowercase for case-insensitive matching
    const fullName = `${emp.firstName} ${emp.lastName}`.toLowerCase();
    const jobRoleName = jobRoleData?.find((role) => role.id === emp.jobRoleId)?.name?.toLowerCase() || "";
    const searchLower = searchTerm.toLowerCase();

    // Check if the full name OR job role name includes the search term
    const matchesSearch = fullName.includes(searchLower) || jobRoleName.includes(searchLower);

    return matchesRole && matchesSearch;
  });

  const onSubmit = (data) => {
    const selectedEmployeeIds = data.selectedEmployees;

    const taskTeamWithDetails = selectedEmployeeIds
      ?.map((empId) => empId)
      ?.filter(Boolean);
    const formattedData = {
      taskTeam: taskTeamWithDetails,
      plannedTask: data.plannedTask,
      description: data.description,
      assignmentDate: new Date().toISOString(),
      workItemId: assignData?.workItem.id,
    };
    assignTask({
      payload: formattedData,
      workAreaId: assignData?.workArea?.id,
    });
  };

  const closedModel = () => {
    reset();
    onClose();
  };

  return (
    <div className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">
      <p className="align-items-center flex-wrap m-0 ">Assign Task</p>
      <div className="container my-3">
        <div className="mb-1">
          <p className="mb-0">
            <span className="text-dark text-start d-flex align-items-center flex-wrap form-text">
              <span className="me-2 m-0 font-bold">Work Location :</span>
              {[
                assignData?.building?.buildingName,
                assignData?.floor?.floorName,
                assignData?.workArea?.areaName,
                assignData?.workItem?.activityMaster?.activityName,
              ]
                .filter(Boolean) // Filter out any undefined/null values
                .map((item, index, array) => (
                  <span key={index} className="d-flex align-items-center">
                    {item}
                    {index < array.length - 1 && (
                      <i className="bx bx-chevron-right mx-2"></i>
                    )}
                  </span>
                ))}
            </span>
          </p>

          <form onSubmit={handleSubmit(onSubmit)}>
            <div className="form-label text-start">
              <div className="row mb-1">
                <div className="col-12">
                  <div className="form-text text-start">
                    <div className="d-flex align-items-center form-text fs-7">
                      <span className="text-dark me-2">Select Team</span>
                      <div className="me-2">{displayedSelection}</div>
                      <a
                        className="dropdown-toggle hide-arrow cursor-pointer"
                        data-bs-toggle="dropdown"
                        aria-expanded="false"
                      >
                        <i className="bx bx-filter bx-lg text-primary"></i>
                      </a>

                      <ul className="dropdown-menu p-2 text-capitalize">
                        <li key="all">
                          <div className="form-check dropdown-item py-0">
                            <input
                              className="form-check-input"
                              type="checkbox"
                              id="checkboxAllRoles"
                              value="all"
                              checked={selectedRoles.includes("all")}
                              onChange={(e) =>
                                handleRoleChange(e, e.target.value)
                              }
                            />
                            <label
                              className="form-check-label ms-2"
                              htmlFor="checkboxAllRoles"
                            >
                              All Roles
                            </label>
                          </div>
                        </li>
                        {jobRolesForDropdown?.map((role) => (
                          <li key={role.id}>
                            <div className="form-check dropdown-item py-0">
                              <input
                                className="form-check-input"
                                type="checkbox"
                                id={`checkboxRole-${role.id}`}
                                value={role.id}
                                checked={selectedRoles.includes(String(role.id))}
                                onChange={(e) =>
                                  handleRoleChange(e, e.target.value)
                                }
                              />
                              <label
                                className="form-check-label ms-2"
                                htmlFor={`checkboxRole-${role.id}`}
                              >
                                {role.name}
                              </label>
                            </div>
                          </li>
                        ))}
                      </ul>
                      {/* Search Field for Employees - Moved inline and pushed to the right */}
                      <input
                        type="text"
                        className="form-control form-control-sm ms-auto mb-2 mt-2" // Changed ms-3 to ms-auto
                        placeholder="Search employees or roles..."
                        value={searchTerm}
                        onChange={handleSearchChange}
                        style={{ maxWidth: '200px' }} // Optional: Limit search input width
                      />
                    </div>
                  </div>
                </div>
              </div>
              <div
                className="col-12 mt-2"
                style={{ maxHeight: "280px", overflowY: "auto", overflowX: "hidden" }}
              >
                {selectedRoles?.length > 0 && (
                  <div className="row">
                    {employeeLoading ? (
                      <div className="col-12">
                        <p className="text-center">Loading employees...</p>
                      </div>
                    ) : filteredEmployees?.length > 0 ? (
                      filteredEmployees.map((emp) => {
                        const jobRole = jobRoleData?.find(
                          (role) => role?.id === emp?.jobRoleId
                        );

                          return (
                            <div
                              key={emp.id}
                              className="col-6 col-md-4 col-lg-3 mb-3"
                            >
                              <div className="form-check d-flex align-items-start">
                                <Controller
                                  name="selectedEmployees"
                                  control={control}
                                  render={({ field }) => (
                                    <input
                                      {...field}
                                      className="form-check-input me-1 mt-1"
                                      type="checkbox"
                                      id={`employee-${emp?.id}`}
                                      value={emp.id}
                                      checked={field.value?.includes(emp.id)}
                                      onChange={(e) => {
                                        handleCheckboxChange(e, emp);
                                      }}
                                    />
                                  )}
                                />
                                <div className="flex-grow-1">
                                  <p
                                    className="mb-0"
                                    style={{ fontSize: "13px" }}
                                  >
                                    {emp.firstName} {emp.lastName}
                                  </p>
                                  <small
                                    className="text-muted"
                                    style={{ fontSize: "11px" }}
                                  >
                                    {loading ? (
                                      <span className="placeholder-glow">
                                        <span className="placeholder col-6"></span>
                                      </span>
                                    ) : (
                                      jobRole?.name || "Unknown Role"
                                    )}
                                  </small>
                                </div>
                              </div>
                            </div>
                          );
                        })
                      ) : (
                        <div className="col-12">
                          <p className="text-center">
                            No employees found for the selected role or search term.
                          </p>
                        </div>
                      )}
                    </div>
                  )}
                </div>
              </div>

              <div
                className="col-12 h-25 overflow-auto"
                style={{ maxHeight: "200px" }}
              >
                {watch("selectedEmployees")?.length > 0 && (
                  <div className="mt-1">
                    <div className="text-start px-2">
                      {watch("selectedEmployees")?.map((empId) => {
                        const emp = employees.find((emp) => emp.id === empId);
                        return (
                          emp && (
                            <span
                              key={empId}
                              className="badge rounded-pill bg-label-primary d-inline-flex align-items-center me-1 mb-1"
                            >
                              {emp.firstName} {emp.lastName}
                              <p
                                type="button"
                                className=" btn-close-white p-0 m-0"
                                aria-label="Close"
                                onClick={() => {
                                  const updatedSelected = watch(
                                    "selectedEmployees"
                                  ).filter((id) => id !== empId);
                                  setValue(
                                    "selectedEmployees",
                                    updatedSelected
                                  );
                                  trigger("selectedEmployees");
                                }}
                              >
                                <i className="icon-base bx bx-x icon-md "></i>
                              </p>
                            </span>
                          )
                        );
                      })}
                    </div>
                  </div>
                )}
              </div>

              {!loading && errors.selectedEmployees && (
                <div className="danger-text mt-1">
                  <p>{errors.selectedEmployees.message}</p>{" "}
                </div>
              )}

              <div className="col-md text-start mx-0 px-0">
                <div className="form-check form-check-inline mt-3 px-1">
                  <label
                    className="form-text text-dark align-items-center d-flex"
                    htmlFor="inlineCheckbox1"
                  >
                    Pending Task of Activity :
                    <label
                      className="form-check-label fs-7 ms-4"
                      htmlFor="inlineCheckbox1"
                    >
                      <strong>
                        {assignData?.workItem?.plannedWork -
                          assignData?.workItem?.completedWork}
                      </strong>{" "}
                      <u>
                        {
                          assignData?.workItem?.activityMaster
                            ?.unitOfMeasurement
                        }
                      </u>
                    </label>
                    <div style={{ display: "flex", alignItems: "center" }}>
                      <div
                        ref={infoRef}
                        tabIndex="0"
                        className="d-flex align-items-center avatar-group justify-content-center ms-2"
                        data-bs-toggle="popover"
                        data-bs-trigger="focus"
                        data-bs-placement="right"
                        data-bs-html="true"
                        style={{ cursor: "pointer" }}
                      >
                        &nbsp;
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          width="13"
                          height="13"
                          fill="currentColor"
                          className="bi bi-info-circle"
                          viewBox="0 0 16 16"
                        >
                          <path d="M8 15A7 7 S1 8 1a7 7 0 0 1 0-14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
                          <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.547 1.11l1.91-2.011c.241-.256.384-.592.287-.984-.172-.439-.58-.827-1.13-.967a.664.664 0 0 1-.58-.309l-.15-.241-.002-.002zM8 4c-.535 0-.943.372-.943.836 0 .464.408.836.943.836.535 0 .943-.372.943-.836 0-.464-.408-.836-.943-.836z" />
                        </svg>
                      </div>
                    </div>
                  </label>
                </div>
              </div>

              {/* Target for Today input and validation */}
              <div className="col-md text-start mx-0 px-0">
                <div className="form-check form-check-inline mt-2 px-1 mb-2 text-start">
                  <label
                    className="text-dark text-start d-flex align-items-center flex-wrap form-text"
                    htmlFor="inlineCheckbox1"
                  >
                    <span>Target for Today</span>&nbsp;
                    <span style={{ marginLeft: "46px" }}>:</span>
                  </label>
                </div>
                <div
                  className="form-check form-check-inline col-sm-3 mt-2"
                  style={{ marginLeft: "-28px" }}
                >
                  <Controller
                    name="plannedTask"
                    control={control}
                    render={({ field }) => (
                      <div className="d-flex align-items-center gap-1 ">
                        <input
                          type="text"
                          className="form-control form-control-sm"
                          {...field}
                          id="defaultFormControlInput"
                          aria-describedby="defaultFormControlHelp"
                        />
                        <span style={{ paddingLeft: "6px", whiteSpace: "nowrap" }}>
                          <u>  {
                            assignData?.workItem?.activityMaster
                              ?.unitOfMeasurement
                          }</u>
                        </span>
                        <div
                          style={{
                            display: "flex",
                            alignItems: "center",
                          }}
                        >
                          <div
                            ref={infoRef1}
                            tabIndex="0"
                            className="d-flex align-items-center avatar-group justify-content-center ms-2"
                            data-bs-toggle="popover"
                            data-bs-trigger="focus"
                            data-bs-placement="right"
                            data-bs-html="true"
                            style={{ cursor: "pointer" }}
                          >
                            &nbsp;
                            <svg
                              xmlns="http://www.w3.org/2000/svg"
                              width="13"
                              height="13"
                              fill="currentColor"
                              className="bi bi-info-circle"
                              viewBox="0 0 16 16"
                            >
                              <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
                              <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.547 1.11l1.91-2.011c.241-.256.384-.592.287-.984-.172-.439-.58-.827-1.13-.967a.664.664 0 0 1-.58-.309l-.15-.241-.002-.002zM8 4c-.535 0-.943.372-.943.836 0 .464.408.836.943.836.535 0 .943-.372.943-.836 0-.464-.408-.836-.943-.836z" />
                            </svg>
                          </div>
                        </div>
                      </div>
                    )}
                  />
                </div>

                {errors.plannedTask && (
                  <div className="danger-text mt-1">
                    {errors.plannedTask.message}
                  </div>
                )}

                {isHelpVisible && (
                  <div
                    className="position-absolute bg-white border p-2 rounded shadow"
                    style={{ zIndex: 10, marginLeft: "10px" }}
                  >
                    <p className="mb-0">
                      Enter the target value for today's task.
                    </p>
                  </div>
                )}
              </div>

              <label
                className="form-text fs-7 m-1 text-lg text-dark"
                htmlFor="descriptionTextarea"
              >
                Description
              </label>
              <Controller
                name="description"
                control={control}
                render={({ field }) => (
                  <textarea
                    {...field}
                    className="form-control"
                    id="descriptionTextarea"
                    rows="2"
                  />
                )}
              />
              {errors.description && (
                <div className="danger-text">{errors.description.message}</div>
              )}
            </div>

            <div className="col-12 d-flex justify-content-center align-items-center gap-sm-6 gap-8 text-center mt-1">
              <button
                type="submit"
                className="btn btn-sm btn-primary "
                disabled={isSubmitting || loading}
              >
                {isSubmitting ? "Please Wait" : "Submit"}
              </button>
              <button
                type="reset"
                className="btn btn-sm btn-label-secondary"
                data-bs-dismiss="modal"
                aria-label="Close"
                onClick={closedModel}
                disabled={isSubmitting || loading}
              >
                Cancel
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
};

export default AssignTask;