import React from "react";
import VersionListSkeleton from "./VersionListSkeleton";
import { getDocuementsStatus } from "./Documents";
import Avatar from "../common/Avatar";
import { formatUTCToLocalTime } from "../../utils/dateUtils";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { DOWNLOAD_DOCUMENT, VERIFY_DOCUMENT } from "../../utils/constants";
import { FileIcon } from "../../utils/FileIcon";

const DocumentVersionList = ({
  versionLoding,
  versionList,
  isPending,
  setOpenDocument,
  VerifyDocument,
  RejectDocument,
  showVersions,
  latestDoc,
}) => {
  const canVerifyDocument = useHasUserPermission(VERIFY_DOCUMENT);
  const canDownloadDocument = useHasUserPermission(DOWNLOAD_DOCUMENT);

  const handleOpenDocument = () => {
    if (canDownloadDocument) {
      setOpenDocument(true);
    }
  };

  if (versionLoding) {
    return <VersionListSkeleton items={2} />;
  }

  const sortedVersions = versionList?.data
    ? [...versionList.data].sort((a, b) => b.version - a.version)
    : [];

  const currentDoc = sortedVersions.length ? sortedVersions[0] : latestDoc;

  if (!showVersions) {
    if (!currentDoc) {
      return <p className="text-muted">No documents available.</p>;
    }
    return (
      <>
        <div className="list-group list-group-flush" style={{ marginTop: "-4px",  marginLeft: "10px" }}>
          <div className="list-group-item list-group-item-action cursor-pointer" style={{ marginLeft: "-30px" }}>
            <div className="d-flex justify-content-between">
              {/* Left Side: Document Details */}
              <div className="d-flex align-items-start" onClick={handleOpenDocument}>
                <FileIcon
                  type={currentDoc.contentType}
                  size="fs-2"
                  className="me-2"
                />
                <div>
                  <div className="d-flex align-items-center mb-1">
                    <span className="fw-semibold" style={{ marginTop: "-6px" }}>
                      {currentDoc.name}
                    </span>
                  </div>
                  <div className="d-flex align-items-center mb-1">
                    {getDocuementsStatus(currentDoc.isVerified)}
                    <span className="text-secondary text-tiny ms-7 ">
                      File Size: {currentDoc.fileSize} Kb
                    </span>
                  </div>
                  <div className="d-flex align-items-center">
                    <small className="text-secondary fw-semibold me-2">
                      Uploaded by
                    </small>
                    <Avatar
                      size="xs"
                      classAvatar="m-0"
                      firstName={currentDoc.uploadedBy?.firstName}
                      lastName={currentDoc.uploadedBy?.lastName}
                    />
                    <span className="ms-3">
                      <small className="fw-normal" style={{ marginLeft: "-10px" }}>
                        {`${currentDoc.uploadedBy?.firstName ?? ""} ${currentDoc.uploadedBy?.lastName ?? ""}`.trim() || "N/A"}
                      </small>
                    </span>
                  </div>
                  <small className="ms-2" style={{ marginRight: "-113px" }}>
                    {formatUTCToLocalTime(currentDoc?.uploadedAt)}
                  </small>
                </div>
              </div>

               <div className="d-flex flex-column align-items-end" style={{ marginTop: "-8px", marginRight: "-540px" }}>
                <span className="badge bg-success-subtle text-success">
                  latest
                </span>
                
              </div>
              {/* Right Side: Status and Info */}
              <div className="d-flex flex-column align-items-end" style={{ marginTop: "31px", marginRight: "21px" }}>
                {/* <span className="badge bg-success-subtle text-success">
                  latest
                </span> */}
                <div className="d-flex align-items-center mt-1">
                  {currentDoc?.updatedBy && (
                    <>
                      <small className="text-secondary me-2 fw-semibold">Updated by</small>
                      <Avatar
                        size="xs"
                        classAvatar="m-0"
                        firstName={currentDoc.updatedBy?.firstName}
                        lastName={currentDoc.updatedBy?.lastName}
                      />
                      <span className="ms-1" style={{ marginRight: "-37px" }}>
                        <small className="fw-normal" style={{ marginLeft: "-10px" }}>
                          {`${currentDoc.updatedBy?.firstName ?? ""} ${currentDoc.updatedBy?.lastName ?? ""}`.trim() || "N/A"}
                        </small>
                      </span>
                    </>
                  )}
                </div>
                {/* Conditionally render updated date */}
                {currentDoc?.updatedAt && (
                  <small className="ms-2" style={{ marginRight: "-75px" }}>
                    {formatUTCToLocalTime(currentDoc?.updatedAt)}
                  </small>
                )}
              </div>
            </div>
          </div>
        </div>
        {/* Buttons Div - only for the latest pending document when showVersions is false */}
        {currentDoc.isVerified === null && canVerifyDocument && (
          <div className="d-flex justify-content-end mb-3 me-4">
            {isPending ? (
              <span className="text-muted">Please Wait...</span>
            ) : (
              <>
                <button
                  type="button"
                  onClick={RejectDocument}
                  className="btn btn-sm btn-danger me-2"
                >
                  Reject
                </button>
                <button
                  type="button"
                  onClick={VerifyDocument}
                  className="btn btn-sm btn-primary"
                >
                  Verify
                </button>
              </>
            )}
          </div>
        )}
      </>
    );
  }

  // If showVersions is true, display all versions
  if (!sortedVersions.length) {
    return <p className="text-muted">No documents available.</p>;
  }

  return (
    <div className="list-group list-group-flush">
            {sortedVersions.map((document, index) => (
              <div
                key={document.id}
                className="list-group-item list-group-item-action cursor-pointer" style={{ marginLeft: "-30px",marginTop:"5px" }}
              >
                <div className="d-flex justify-content-between">
                
                  <div className="d-flex align-items-start" onClick={handleOpenDocument}>
                    <FileIcon
                      type={document.contentType}
                      size="fs-2"
                      className="me-2"
                    />
                    <div>
                      <div className="d-flex align-items-center mb-1">
                        <span className="fw-semibold" style={{ marginTop: "-6px" }}>
                          {document.name}
                        </span>
                      </div>
                      <div className="d-flex align-items-center mb-1">
                        {getDocuementsStatus(document.isVerified)}
                        <span className="ms-7 ">
                          File Size: {document.fileSize} Kb
                        </span>
                      </div>
                      <div className="d-flex align-items-center">
                        <small className="text-secondary fw-semibold me-2">
                          Uploaded by
                        </small>
                        <Avatar
                          size="xs"
                          classAvatar="m-0"
                          firstName={document.uploadedBy?.firstName}
                          lastName={document.uploadedBy?.lastName}
                        />
                        <span className="ms-3">
                          <small className="fw-normal" style={{ marginLeft: "-10px" }}>
                            {`${document.uploadedBy?.firstName ?? ""} ${document.uploadedBy?.lastName ?? ""}`.trim() || "N/A"}
                          </small>
                        </span>
                      </div>
                      <small className="ms-2" style={{ marginRight: "-113px" }}>
                        {formatUTCToLocalTime(document?.uploadedAt)}
                      </small>
                      {document?.verifiedAt && (
                        <div className="d-flex align-items-center mt-1">
                          <small className="text-secondary me-2 fw-semibold">
                            {document.isVerified ? "Approved by" : "Rejected by"}
                          </small>
                          <Avatar
                            size="xs"
                            classAvatar="m-0"
                            firstName={document.verifiedBy?.firstName}
                            lastName={document.verifiedBy?.lastName}
                          />
                          <span className="ms-3">
                            <small className="fw-normal" style={{ marginLeft: "-10px" }}>
                              {`${document.verifiedBy?.firstName ?? ""} ${document.verifiedBy?.lastName ?? ""}`.trim() || "N/A"}
                            </small>
                          </span>
                        </div>
                      )}
                      {/* Conditionally render verified date */}
                      {document?.verifiedAt && (
                        <small className="ms-2" style={{ marginRight: "-103px" }}>
                          {formatUTCToLocalTime(document?.verifiedAt)}
                        </small>
                      )}
                    </div>
                  </div>
                  <div className="d-flex flex-column align-items-end" style={{ marginTop: "-13px", marginRight: "46px" }}>
                    <small className="badge rounded-pill bg-label-secondary mt-1" style={{ marginRight: "-336px" }}>
                      version {document.version}
                    </small>
                    {document.isLatest && (
                      <span className="badge bg-success-subtle text-success">
                        latest
                      </span>
                    )}
                  </div>
                  {/* Right Side: Status and Actions */}
                  <div className="d-flex flex-column align-items-end" style={{ marginTop: "16px", marginRight: "46px" }}>
                    {/* <small className="badge rounded-pill bg-label-secondary mt-1" style={{ marginRight: "-105px" }}>
                      version {document.version}
                    </small> */}
                    {document.isLatest && (
                      <span className="badge bg-success-subtle text-success">
                        latest
                      </span>
                    )}
                    <div className="d-flex align-items-center mt-1">
                      {document?.updatedBy && (
                        <>
                          <small className="text-secondary me-2 fw-semibold">Updated by</small>
                          <Avatar
                            size="xs"
                            classAvatar="m-0"
                            firstName={document.updatedBy?.firstName}
                            lastName={document.updatedBy?.lastName}
                          />
                          <span className="ms-1" style={{ marginRight: "-37px" }}>
                            <small className="fw-normal" style={{ marginLeft: "-10px" }}>
                              {`${document.updatedBy?.firstName ?? ""} ${document.updatedBy?.lastName ?? ""}`.trim() || "N/A"}
                            </small>
                          </span>
                        </>
                      )}
                    </div>
                    {/* Conditionally render updated date */}
                    {document?.updatedAt && (
                      <small className="ms-2" style={{ marginRight: "-75px" }}>
                        {formatUTCToLocalTime(document?.updatedAt)}
                      </small>
                    )}
                    
                  </div>
                </div>
              </div>
            ))}
          </div>
  );
};

export default DocumentVersionList;