import React, { useState } from "react";
import { useParams } from "react-router-dom";
import { useServiceProject } from "../../hooks/useServiceProject";
import { formatUTCToLocalTime } from "../../utils/dateUtils";
import ManageServiceProject from "./ManageServiceProject";
import GlobalModel from "../common/GlobalModel";

const ServiceProjectProfile = () => {
  const { projectId } = useParams();
  const [IsOpenModal, setIsOpenModal] = useState(false);
  const { data, isLoading, isError, error } = useServiceProject(projectId);
  if (isLoading) {
    return <div className="">Loadng.</div>;
  }
  return (
    <>
      {IsOpenModal && (
        <GlobalModel isOpen={IsOpenModal} closeModal={() => setIsOpenModal(false)}>
          <ManageServiceProject
            serviceProjectId={projectId}
            onClose={() => setIsOpenModal(false)}
          />
        </GlobalModel>
      )}

      <div className="row py-2">
        <div className="col-md-6 col-lg-4 order-2 mb-6">
          <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 text-start">

                <li className="d-flex mb-3">
                  <div className="d-flex align-items-start" style={{ minWidth: "150px" }}>
                    <i className="bx bx-cog"></i>
                    <span className="fw-medium mx-2 text-nowrap">Name:</span>
                  </div>

                  {/* Content section that wraps nicely */}
                  <div className="flex-grow-1 text-start text-wrap">
                    {data.name}
                  </div>
                </li>
                <li className="d-flex mb-3">
                  <div className="d-flex align-items-center" style={{ width: '150px' }}>
                    <i className="bx bx-fingerprint"></i>
                    <span className="fw-medium mx-2">Nick Name:</span>
                  </div>
                  <span>{data.shortName}</span>
                </li>
                <li className="d-flex mb-3">
                  <div className="d-flex align-items-center" style={{ width: '150px' }}>
                    <i className="bx bx-check"></i>
                    <span className="fw-medium mx-2">Assign Date:</span>
                  </div>
                  <span>
                    {data.assignedDate ? formatUTCToLocalTime(data.assignedDate) : "NA"}
                  </span>
                </li>

                <li className="d-flex mb-3">
                  <div className="d-flex align-items-center" style={{ width: '150px' }}>
                    <i className="bx bx-trophy"></i>
                    <span className="fw-medium mx-2">Status:</span>
                  </div>
                  <span>{data?.status.status}</span>
                </li>
                <li className="d-flex mb-3">
                  <div className="d-flex align-items-center" style={{ width: '150px' }}>
                    <i className="bx bx-user"></i>
                    <span className="fw-medium mx-2">Contact:</span>
                  </div>
                  <span>{data.contactName}</span>
                </li>
                <li className="d-flex mb-3">
                  {/* Label section with icon */}
                  <div className="d-flex align-items-start" style={{ minWidth: "150px" }}>
                    <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">
                    {data.address}
                  </div>
                </li>



                <li className="d-flex justify-content-center mt-4"> {/* Added mt-4 for some top margin */}

                  <a className="d-flex justify-content-center mt-4"> {/* Added mt-4 for some top margin */}

                    <button
                      type="button"
                      className="btn btn-sm btn-primary"
                      data-bs-toggle="modal"
                      data-bs-target="#edit-project-modal"
                      onClick={() => setIsOpenModal(true)}
                    >
                      Modify Details
                    </button>

                  </a>
                </li>
              </ul>

            </div>
          </div>
        </div>


      </div>
    </>
  );
};

export default ServiceProjectProfile;
