import React, { useState, useEffect } from "react";
import AssignRoleModel from "../AssignRole";
import { useParams } from "react-router-dom";
import EditActivityModal from "./EditActivityModal";
import { useHasUserPermission } from "../../../hooks/useHasUserPermission";
import { MANAGE_PROJECT_INFRA, MANAGE_TASK } from "../../../utils/constants";

import ConfirmModal from "../../common/ConfirmModal";
import ProjectRepository from "../../../repositories/ProjectRepository";
import { useProjectDetails } from "../../../hooks/useProjects";
import showToast from "../../../services/toastService";
import { cacheData, getCachedData } from "../../../slices/apiDataManager";
import { useDispatch } from "react-redux";
import { refreshData } from "../../../slices/localVariablesSlice";

const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
  const { projectId } = useParams();
  const [itemName, setItemName] = useState("");
  const [NewWorkItem, setNewWorkItem] = useState();
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [showModal, setShowModal] = useState(false);
  const [showModal2, setShowModal2] = useState(false);
  const ManageTasks = useHasUserPermission(MANAGE_TASK);
  const ManageInfra = useHasUserPermission(MANAGE_PROJECT_INFRA);
  const [loadingDelete, setLoadingDelete] = useState(false);
  const project = getCachedData("projectInfo");
  const dispatch = useDispatch();

  const { projects_Details } = useProjectDetails(
    projectId || project?.projectId
  );

  const openModal = () => setIsModalOpen(true);
  const closeModal = () => setIsModalOpen(false);
  const getProgress = (planned, completed) => {
    return (completed * 100) / planned + "%";
  };

  const handleAssignTask = () => {
    setItemName("");
  };

  useEffect(() => {
    setNewWorkItem(workItem);
  }, [workItem]);

  let assigndata = {
    building: forBuilding,
    floor: forFloor,
    workArea: forWorkArea,
    workItem,
  };

  const hasWorkItem = NewWorkItem && NewWorkItem;
  useEffect(() => {
    const tooltipTriggerList = Array.from(
      document.querySelectorAll('[data-bs-toggle="tooltip"]')
    );
    tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
  }, []);

  const showModal1 = () => setShowModal(true);
  const closeModal1 = () => setShowModal(false);
  const showModalDelete = () => setShowModal2(true);
  const closeModalDelete = () => setShowModal2(false);

  const handleSubmit = async () => {
    setLoadingDelete(true);
    try
    {
      const updatedProject = { ...projects_Details };
      const response = await ProjectRepository.deleteProjectTask( workItem.workItemId || workItem.id);
      const newProject = {
        ...updatedProject,
        buildings: updatedProject.buildings.map((building) =>
          building.id === forBuilding?.id
            ? {
                ...building,
                floors: building.floors.map((floor) =>
                  floor.id === forFloor?.id
                    ? {
                        ...floor,
                        workAreas: floor.workAreas.map((workArea) =>
                          workArea.id === forWorkArea?.id
                            ? {
                                ...workArea,
                                workItems: workArea.workItems.filter(
                                  (item) =>
                                    String(item?.workItem?.id ?? item?.id) !==
                                    String(workItem.workItemId)
                                ),
                              }
                            : workArea
                        ),
                      }
                    : floor
                ),
              }
            : building
        ),
      };

      cacheData("projectInfo", {
        projectId: newProject.id,
        data: newProject,
      });

      dispatch(refreshData(true));
      closeModalDelete();
      setLoadingDelete(false);
      showToast("Activity Deleted Successfully", "success");
    } catch (error) {
      setLoadingDelete(false);
      closeModalDelete();
      const message =
        error.response?.data?.message ||
        error.message ||
        "An unexpected error occurred";
      showToast(message, "error");
    }
  };

  const PlannedWork = NewWorkItem?.workItem?.plannedWork || workItem?.plannedWork;
  const CompletedWork = NewWorkItem?.workItem?.completedWork ?? workItem?.completedWork;
  return (
    <>
      {isModalOpen && (
        <div
          className={`modal fade ${isModalOpen ? "show" : ""}`}
          tabIndex="-1"
          role="dialog"
          style={{ display: isModalOpen ? "block" : "none" }}
          aria-hidden={!isModalOpen}
        >
          <AssignRoleModel assignData={assigndata} onClose={closeModal} />
        </div>
      )}

      {showModal && (
        <div
          className={`modal fade ${showModal ? "show" : ""}`}
          tabIndex="-1"
          role="dialog"
          style={{ display: showModal ? "block" : "none" }}
          aria-hidden={!showModal}
        >
          <EditActivityModal
            workItem={workItem}
            workArea={forWorkArea}
            building={forBuilding}
            floor={forFloor}
            onClose={closeModal1}
          />
        </div>
      )}

      {showModal2 && (
        <div
          className={`modal fade  ${showModal2 ? "show" : ""}`}
          tabIndex="-1"
          role="dialog"
          style={{
            display: showModal2 ? "block" : "none",
            backgroundColor: showModal2 ? "rgba(0,0,0,0.5)" : "transparent",
          }}
          aria-hidden="false"
        >
          <ConfirmModal
            type={"delete"}
            header={"Delete Activity"}
            message={"Are you sure you want delete?"}
            onSubmit={handleSubmit}
            onClose={closeModalDelete}
            loading={loadingDelete}
          />
        </div>
      )}

      <tr>
        <td className="text-start table-cell-small">
          <i className="bx bx-right-arrow-alt"></i>
          <span className="fw-light">
            {hasWorkItem
              ? NewWorkItem?.workItem?.activityMaster?.activityName ||
                workItem.activityMaster?.activityName
              : "NA"}
          </span>
        </td>
        {/* for mobile view */}
        <td className="text-center d-sm-none d-sm-table-cell">
          {hasWorkItem
            ? NewWorkItem?.workItem?.completedWork ??
              workItem?.completedWork ??
              "NA"
            : "NA"}
          /{" "}
          {hasWorkItem
            ? NewWorkItem?.workItem?.plannedWork || workItem?.plannedWork
            : "NA"}
        </td>
        {/* for greather than mobile view ************* */}
        <td className="text-center d-none d-md-table-cell">
          {hasWorkItem
            ? NewWorkItem?.workItem?.plannedWork ??
              workItem?.plannedWork ??
              "NA"
            : "NA"}
        </td>
        <td className="text-center d-none d-md-table-cell">
          {hasWorkItem
            ? NewWorkItem?.workItem?.completedWork ??
              workItem?.completedWork ??
              "NA"
            : "NA"}
        </td>
        <td className="text-center" style={{ width: "15%" }}>
          <div className="progress p-0">
            <div
              className="progress-bar"
              role="progressbar"
              style={{
                width: getProgress(
                  NewWorkItem?.workItem?.plannedWork || workItem?.plannedWork,
                  NewWorkItem?.workItem?.completedWork ||
                    workItem?.completedWork
                ),
                height: "5px",
              }}
              aria-valuenow={NewWorkItem?.workItem?.completedWor}
              aria-valuemin="0"
              aria-valuemax={
                hasWorkItem
                  ? NewWorkItem?.workItem?.plannedWork || workItem?.plannedWork
                  : 0
              }
            ></div>
          </div>
        </td>
 <td className="text-end align-middle">
  <div className="dropdown w-auto d-inline-flex align-items-center gap-1">
    {/* Reserve space for Assign button */}
    <div style={{ width: 'auto', minWidth: '60px' }}>
      {(!projectId && ManageTasks) && (PlannedWork !== CompletedWork) ? (
        <button
          aria-label="Modify"
          type="button"
          className="btn p-0"
          data-bs-toggle="modal"
          data-bs-target="#project-modal"
          onClick={openModal}
        >
          <span className="badge badge-md bg-label-primary me-1">Assign</span>
        </button>
      ) : (
        // Hidden placeholder to preserve layout
        <span className="invisible">
          <span className="badge badge-md bg-label-primary me-1">Assign</span>
        </span>
      )}
    </div>

    {/* Edit and Delete buttons */}
    {ManageInfra && (
      <>
        <button
          aria-label="Modify"
          type="button"
          className="btn p-0"
          onClick={showModal1}
        >
          <i
            className="bx bxs-edit me-2 text-primary"
            data-bs-toggle="tooltip"
            data-bs-placement="top"
            title="Edit Activity"
          ></i>
        </button>
        <button
          aria-label="Delete"
          type="button"
          className="btn p-0"
          onClick={showModalDelete}
        >
          <i
            className="bx bx-trash me-1 text-danger"
            data-bs-toggle="tooltip"
            data-bs-placement="top"
            title="Delete Activity"
          ></i>
        </button>
      </>
    )}
  </div>
</td>



      </tr>
    </>
  );
};

export default WorkItem;