import React, { useEffect, useState } from "react";
import moment from "moment";
import { getProjectStatusName } from "../../utils/projectStatus";
import { useProjectDetails, useUpdateProject } from "../../hooks/useProjects";
import { useSelector } from "react-redux"; // Import useSelector
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { MANAGE_PROJECT } from "../../utils/constants";
import GlobalModel from "../common/GlobalModel";
import ManageProjectInfo from "./ManageProjectInfo";
import { useQueryClient } from "@tanstack/react-query";
import { useSelectedProject } from "../../slices/apiDataManager";

const AboutProject = () => {
  const [IsOpenModal, setIsOpenModal] = useState(false);
  const { mutate: UpdateProjectDetails, isPending } = useUpdateProject({
    onSuccessCallback: () => {
      setIsOpenModal(false);
    }
  });
  const ClientQuery = useQueryClient();

  // *** MODIFIED LINE: Get projectId from Redux store using useSelector ***
  // const projectId = useSelector((store) => store.localVariables.projectId);
  const projectId = useSelectedProject();

  const manageProject = useHasUserPermission(MANAGE_PROJECT);
  const { projects_Details, isLoading, error, refetch } = useProjectDetails(projectId); // Pass projectId from useSelector

  const handleFormSubmit = (updatedProject) => {
    if (projects_Details?.id) {
      UpdateProjectDetails({ projectId: projects_Details?.id, updatedData: updatedProject });
      // The refetch here might be redundant or could be handled by react-query's invalidateQueries
      // if UpdateProjectDetails properly invalidates the 'projectDetails' query key.
      // If refetch is still needed, consider adding a delay or using onSuccess of UpdateProjectDetails.
      // For now, keeping it as is based on your original code.
      refetch();
    }
  };

  return (
    <>
      {IsOpenModal && (
        <GlobalModel isOpen={IsOpenModal} closeModal={() => setIsOpenModal(false)}>
          <ManageProjectInfo
            project={projects_Details}
            handleSubmitForm={handleFormSubmit}
            onClose={() => setIsOpenModal(false)}
            isPending={isPending}
          />
        </GlobalModel>
      )}
      {projects_Details && (
        <>
          <div className="card mb-4">
            <div className="card-header text-start">
              <h5 className="card-action-title mb-0 ps-1">
                {" "}
                <i className="fa fa-building rounded-circle text-primary"></i>
                <span className="ms-2 fw-bold">Project Profile</span>
              </h5>
            </div>
            <div className="card-body">
              <ul className="list-unstyled my-3 ps-0">
                <li className="d-flex mb-3">
                  <div className="d-flex align-items-center" style={{ width: '120px' }}> {/* Adjust width as needed for alignment */}
                    <i className="bx bx-cog"></i>
                    <span className="fw-medium mx-2">Name:</span>
                  </div>
                  <span>{projects_Details.name}</span>
                </li>
                <li className="d-flex mb-3">
                  <div className="d-flex align-items-center" style={{ width: '120px' }}>
                    <i className="bx bx-fingerprint"></i>
                    <span className="fw-medium mx-2">Nick Name:</span>
                  </div>
                  <span>{projects_Details.shortName}</span>
                </li>
                <li className="d-flex mb-3">
                  <div className="d-flex align-items-center" style={{ width: '120px' }}>
                    <i className="bx bx-check"></i>
                    <span className="fw-medium mx-2">Start Date:</span>
                  </div>
                  <span>
                    {projects_Details.startDate
                      ? moment(projects_Details.startDate).format("DD-MMM-YYYY")
                      : "N/A"}
                  </span>
                </li>
                <li className="d-flex mb-3">
                  <div className="d-flex align-items-center" style={{ width: '120px' }}>
                    <i className="bx bx-stop-circle"></i>
                    <span className="fw-medium mx-2">End Date:</span>
                  </div>
                  <span>
                    {projects_Details.endDate
                      ? moment(projects_Details.endDate).format("DD-MMM-YYYY")
                      : "N/A"}
                  </span>
                </li>
                <li className="d-flex mb-3">
                  <div className="d-flex align-items-center" style={{ width: '120px' }}>
                    <i className="bx bx-trophy"></i>
                    <span className="fw-medium mx-2">Status:</span>
                  </div>
                  <span>{projects_Details?.projectStatus?.status.replace(/\s/g, '')}</span>
                </li>
                <li className="d-flex mb-3">
                  <div className="d-flex align-items-center" style={{ width: '120px' }}>
                    <i className="bx bx-user"></i>
                    <span className="fw-medium mx-2">Contact:</span>
                  </div>
                  <span>{projects_Details.contactPerson}</span>
                </li>
                <li className="d-flex mb-3">
                  {/* Label section with icon */}
                  <div className="d-flex align-items-start" style={{ minWidth: "120px" }}>
                    <i className="bx bx-flag mt-1"></i>
                    <span className="fw-medium mx-2 text-nowrap">Address:</span>
                  </div>

                  {/* Content section that wraps nicely */}
                  <div className="flex-grow-1 text-start text-wrap">
                    {projects_Details.projectAddress}
                  </div>
                </li>



                <li className="d-flex justify-content-center mt-4"> {/* Added mt-4 for some top margin */}
                  {manageProject && (
                    <button
                      type="button"
                      className={`btn btn-sm btn-primary ${!manageProject && "d-none"
                        }`}
                      data-bs-toggle="modal"
                      data-bs-target="#edit-project-modal"
                      onClick={() => setIsOpenModal(true)}
                    >
                      Modify Details
                    </button>
                  )}
                </li>
              </ul>

            </div>
          </div>

        </>
      )}

      {isLoading && <span>loading...</span>}
    </>
  );
};

export default AboutProject;