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);
  const [isSubmitting, setIsSubmitting] = 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;
    setIsSubmitting(true);
    // 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 {
      await TasksRepository.assignTask(formattedData);
      setIsSubmitting( false );
      showToast("Task Assined Successfully.", "success");
      closedModel();
    } catch (error) {
      setIsSubmitting(false);
      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 "
                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;
