import React from "react";
import { useCollectionContext } from "../../pages/collections/CollectionPage";
import { useCollection } from "../../hooks/useCollections";
import { formatUTCToLocalTime } from "../../utils/dateUtils";
import { formatFigure } from "../../utils/appUtils";
import Avatar from "../common/Avatar";

const ViewCollection = () => {
  const { viewCollection } = useCollectionContext();
  const { data, isLoading, isError, error } = useCollection(viewCollection);
  if (isLoading) return <div>isLoading...</div>;
  if (isError) return <div>{error.message}</div>;
  return (
    <div className="container p-3">
      <p className="fs-5 fw-semibold">Collection Details</p>
      <div className="text-start  ">
        <div className="mb-3">
          <p className="mb-1 fs-5">{data?.title}</p>
          <p className="mb-3">{data?.description}</p>
        </div>

        <div className="row mb-3">
          <div className="col-md-6">
            <strong>Invoice Number:</strong> {data?.invoiceNumber}
          </div>
          <div className="col-md-6">
            <strong>E-Invoice Number:</strong> {data?.eInvoiceNumber}
          </div>
        </div>

        <div className="row mb-3">
          <div className="col-md-6">
            <strong>Project:</strong> {data?.project?.name}
          </div>
          <div className="col-md-6">
            <strong>Status:</strong> {data?.isActive ? "Active" : "Inactive"}
          </div>
        </div>

        <div className="row mb-3">
          <div className="col-md-6">
            <strong>Invoice Date:</strong>{" "}
            {formatUTCToLocalTime(data?.invoiceDate)}
          </div>
          <div className="col-md-6">
            <strong>Client Submitted Date:</strong>{" "}
            {formatUTCToLocalTime(data?.clientSubmitedDate)}
          </div>
        </div>

        <div className="row mb-3">
          <div className="col-md-6">
            <strong>Expected Payment Date:</strong>{" "}
            {formatUTCToLocalTime(data?.exceptedPaymentDate)}
          </div>
          <div className="col-md-6">
            <strong>Mark as Completed:</strong>{" "}
            {data?.markAsCompleted ? "Yes" : "No"}
          </div>
        </div>

        <div className="row mb-3">
          <div className="col-md-6">
            <strong>Basic Amount:</strong>{" "}
            {formatFigure(data?.basicAmount, {
              type: "currency",
              currency: "INR",
            })}
          </div>
          <div className="col-md-6">
            <strong>Tax Amount:</strong>{" "}
            {formatFigure(data?.taxAmount, {
              type: "currency",
              currency: "INR",
            })}
          </div>
        </div>

        <div className="row mb-3">
          <div className="col-md-6">
            <strong>Balance Amount:</strong>{" "}
            {formatFigure(data?.balanceAmount, {
              type: "currency",
              currency: "INR",
            })}
          </div>
          <div className="col-md-6">
            <strong>Created At:</strong> {formatUTCToLocalTime(data?.createdAt)}
          </div>
        </div>

        <div className="row mb-3">
          <div className="col-md-6">
            <strong>Created By:</strong>{" "}
            <div className="d-flex align-items-center">
              <Avatar
                size="xs"
                firstName={data.createdBy?.firstName}
                lastName={data.createdBy?.lastName}
              />
              {data?.createdBy?.firstName} {data?.createdBy?.lastName} (
              {data?.createdBy?.jobRoleName})
            </div>{" "}
          </div>
          {/* <div className="col-md-6"><strong>Updated At:</strong> {data?.updatedAt ? formatUTCToLocalTime(data?.updatedAt) : "-"}</div> */}
        </div>

        {data?.receivedInvoicePayments?.length > 0 && (
          <div className="mt-4">
            <p className="fw-semibold fs-6">Received Payments</p>
            <table className="table table-bordered mt-2">
              <thead className="table-light">
                <tr>
                  <th className="">Sr,No</th>
                  <th>Transaction ID</th>
                  <th> Received Date</th>
                  <th>Amount</th>
                  <th>Received By</th>
                </tr>
              </thead>
              <tbody>
                {data.receivedInvoicePayments.map((payment, index) => (
                  <tr key={payment.id}>
                    <td>{index + 1}</td>
                    <td>{payment.transactionId}</td>
                    <td>{formatUTCToLocalTime(payment.paymentReceivedDate)}</td>
                    <td className="text-end">
                      {formatFigure(payment.amount, {
                        type: "currency",
                        currency: "INR",
                      })}
                    </td>
                    <td>
                      <div className="d-flex align-items-center">
                        <Avatar
                          size="xs"
                          firstName={payment.createdBy?.firstName}
                          lastName={payment.createdBy?.lastName}
                        />
                        {payment.createdBy?.firstName}{" "}
                        {payment.createdBy?.lastName}
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </div>
  );
};

export default ViewCollection;