import React from "react";
import { useDeliverChallane } from "../../hooks/usePurchase";
import { SpinnerLoader } from "../common/Loader";
import { formatUTCToLocalTime } from "../../utils/dateUtils";
import { FileView } from "../Expenses/Filelist"; // Assuming FileView is the component showing the file icon/name
import { usePurchaseContext } from "../../pages/purchase/PurchasePage";
import { getIconByFileType } from "../../utils/appUtils";

// Assuming you have an Error component imported somewhere else
// import Error from "../common/Error"; 

const DeliverChallanList = ({ purchaseId, viewDocuments }) => {
  const { setDocumentView } = usePurchaseContext();
  const { data, isLoading, isError, error } = useDeliverChallane(purchaseId);

  if (isLoading) {
    return (
      <div className="d-flex justify-content-center align-items-center text-center vh-50">
        <SpinnerLoader />
      </div>
    );
  }

  if (isError) {
    return (
      <div className="py-3">
        {/* Assuming Error component is used here */}
        <Error error={error} />
      </div>
    );
  }

  if (!isLoading && data.length === 0)
    return (
      <div className="d-flex justify-content-center align-items-center text-center vh-50">
        <p className="mb-0">Not Yet</p>
      </div>
    );

  return (
    <div className="list-group list-group-flush text-start">
      {data.map((item) => (
        <div
          key={item.id}
          className="list-group-item d-flex justify-content-between align-items-start flex-wrap px-3 w-full"
        >
          {/* LEFT SIDE */}
          <div className=" pe-3 text-break w-full">
            <div className="d-flex justify-content-between">
              <p className="mb-1 fw-semibold">{item.deliveryChallanNumber}</p>
              <small className="text-muted text-end">
                {formatUTCToLocalTime(item.deliveryChallanDate)}
              </small>
            </div>

            <div className="mb-1 small text-muted text-break">
              <span className="fw-semibold me-1">Invoice:</span>
              {item.purchaseInvoice?.title} (
              {item.purchaseInvoice?.purchaseInvoiceUId})
            </div>

            <p className="mb-1 text-break">
              <span className="fw-semibold">Description:</span>{" "}
              {item.description || "-"}
            </p>

            {/* Check if attachment exists and open document view on click */}
            {item.attachment?.preSignedUrl && (
              <div
                className="d-flex align-items-center cusor-pointer mt-2"
                onClick={() => {
                  setDocumentView({
                    IsOpen: true,
                    Images: [item.attachment],
                  });
                }}
              >
                {/* Replicating the display style used in ViewExpense for single file attachment */}
                <i
                  className={`bx ${getIconByFileType(item.attachment.contentType)}`}
                  style={{ fontSize: "30px" }}
                ></i>
                <small
                  className="text-start text-tiny text-truncate w-100 ms-1"
                  title={item.attachment.fileName}
                >
                  {item.attachment.fileName}
                </small>
              </div>
            )}
          </div>
        </div>
      ))}
    </div>
  );
};

export default DeliverChallanList;