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";

const AssignTask = ({ assignData, onClose, setAssigned }) => {
  const maxPlanned =
    assignData?.workItem?.workItem?.plannedWork -
    assignData?.workItem?.workItem?.completedWork;

  // Zod schema for form validation
  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);

  // Refs for Bootstrap Popovers
  const infoRef = useRef(null);
  const infoRef1 = useRef(null);

  // Initialize Bootstrap Popovers on component mount
  useEffect(() => {
    // Check if Bootstrap is available globally
    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.");
    }
  }, []); // Empty dependency array ensures this runs once on mount
  // Redux state and hooks
  const selectedProject = useSelector(
    (store) => store.localVariables.projectId
  );
  const {
    employees,
    loading: employeeLoading,
    recallEmployeeData,
  } = useEmployeesAllOrByProjectId(selectedProject, false);
  const dispatch = useDispatch();
  const { loading } = useMaster(); // Assuming this is for jobRoleData loading
  const jobRoleData = getCachedData("Job Role");

  // Local component states
  const [selectedRole, setSelectedRole] = useState("all");
  const [displayedSelection, setDisplayedSelection] = useState(""); // This state is not updated in the provided code, consider if it's still needed or how it should be updated

  // React Hook Form setup
  const {
    handleSubmit,
    control,
    setValue,
    watch,
    formState: { errors },
    reset,
    trigger, // <--- IMPORTANT: Destructure 'trigger' here
  } = useForm({
    defaultValues: {
      selectedEmployees: [],
      description: "",
      plannedTask: "",
    },
    resolver: zodResolver(schema), // Integrate Zod schema with react-hook-form
  });

  // Handler for employee checkbox changes
  const handleCheckboxChange = (event, user) => {
    const isChecked = event.target.checked;
    let updatedSelectedEmployees = watch("selectedEmployees") || []; // Get current selected employees from form state

    if (isChecked) {
      // Add employee if checked and not already in the list
      if (!updatedSelectedEmployees.includes(user.id)) {
        updatedSelectedEmployees = [...updatedSelectedEmployees, user.id];
      }
    } else {
      // Remove employee if unchecked
      updatedSelectedEmployees = updatedSelectedEmployees.filter(
        (id) => id !== user.id
      );
    }
    // Update the form state with the new list of selected employees
    setValue("selectedEmployees", updatedSelectedEmployees);
    trigger("selectedEmployees"); // <--- IMPORTANT: Trigger validation here
  };

  // Effect to dispatch action for Job Role master data
  useEffect(() => {
    dispatch(changeMaster("Job Role"));
    // Cleanup function to reset selected role when component unmounts or dispatch changes
    return () => setSelectedRole("all");
  }, [dispatch]);

  // Handler for role filter change
  const handleRoleChange = (event) => {
    setSelectedRole(event.target.value);
  };

  // Filter employees based on selected role
  const filteredEmployees =
    selectedRole === "all"
      ? employees
      : employees?.filter(
          (emp) => String(emp.jobRoleId || "") === selectedRole
        );

  // Form submission handler
  const onSubmit = async (data) => {
    const selectedEmployeeIds = data.selectedEmployees;

    // Prepare taskTeam data (only IDs are needed for the backend based on previous context)
    const taskTeamWithDetails = selectedEmployeeIds
      .map((empId) => {
        return empId; // Return just the ID as per previous discussions
      })
      .filter(Boolean); // Ensure no nulls if employee not found (though unlikely with current logic)

    // Format data for API call
    const formattedData = {
      taskTeam: taskTeamWithDetails,
      plannedTask: data.plannedTask,
      description: data.description,
      assignmentDate: new Date().toISOString(), // Current date/time
      workItemId: assignData?.workItem?.workItem.id,
    };

    try {
      // Call API to assign task
     // Close the modal
    } catch (error) {
      console.error("Error assigning task:", error); 
      showToast("Something went wrong. Please try again.", "error"); 
    }
  };

  // Handler to close the modal and reset form
  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?.name,
                      assignData?.floor?.floorName,
                      assignData?.workArea?.areaName,
                      assignData?.workItem?.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">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">
                                <button
                                  type="button"
                                  className="dropdown-item py-1"
                                  onClick={() =>
                                    handleRoleChange({
                                      target: { value: "all" },
                                    })
                                  }
                                >
                                  All Roles
                                </button>
                              </li>
                              {jobRoleData?.map((user) => (
                                <li key={user.id}>
                                  <button
                                    type="button"
                                    className="dropdown-item py-1"
                                    value={user.id}
                                    onClick={handleRoleChange}
                                  >
                                    {user.name}
                                  </button>
                                </li>
                              ))}
                            </ul>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div className="row">
                      <div className="col-12 h-sm-25 overflow-auto mt-2">
                        {selectedRole !== "" && (
                          <div className="row">
                            {loading ? ( // Assuming 'loading' here refers to master data loading
                              <div className="col-12">
                                <p className="text-center">Loading roles...</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.
                                </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"); // <--- IMPORTANT: Trigger validation on removing badge
                                      }}
                                    >
                                      <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>{" "}
                        {/* Use message from Zod schema */}
                      </div>
                    )}

                    {/* Pending Task of Activity section */}
                    <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?.workItem?.plannedWork -
                                assignData?.workItem?.workItem?.completedWork}
                            </strong>{" "}
                            <u>
                              {
                                assignData?.workItem?.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 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>
                        </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" }}>
                                {
                                  assignData?.workItem?.workItem?.activityMaster
                                    ?.unitOfMeasurement
                                }
                              </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" }}
                        >
                          {/* Add your help content here */}
                          <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" // Changed htmlFor for better accessibility
                    >
                      Description
                    </label>
                    <Controller
                      name="description"
                      control={control}
                      render={({ field }) => (
                        <textarea
                          {...field}
                          className="form-control"
                          id="descriptionTextarea" // Changed id for better accessibility
                          rows="2"
                        />
                      )}
                    />
                    {errors.description && (
                      <div className="danger-text">
                        {errors.description.message}
                      </div>
                    )}
                  </div>

                  {/* Submit and Cancel buttons */}
                  <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 ">
                      Submit
                    </button>
                    <button
                      type="reset"
                      className="btn btn-sm btn-label-secondary"
                      data-bs-dismiss="modal"
                      aria-label="Close"
                      onClick={closedModel}
                    >
                      Cancel
                    </button>
                  </div>
                </form>
              </div>
            </div>
          </div>
  
  );
};

export default AssignTask;
