import React from "react";
import { usePurchase } from "../../hooks/usePurchase";
import { SpinnerLoader } from "../common/Loader";
import { formatUTCToLocalTime } from "../../utils/dateUtils";
import { getColorNameFromHex } from "../../utils/appUtils";

const ViewPurchase = ({ purchaseId }) => {
  const { data, isLoading, isError, error } = usePurchase(purchaseId);

  if (isLoading) return <SpinnerLoader />;
  if (isError) return <Error error={error} />;

  return (
    <div className="row g-3 px-3">
      <div className="col-12 mb-1">
        <h5 className="fw-semibold m-0">Purchase Invoice Details</h5>
      </div>

      <div className="col-12 text-start">
        <div className="row">
          <div className="fs-6 col-md-10 d-flex align-items-center fw-semibold">
            <p className="mb-0 me-1">Purchase No:</p>
            <p className="mb-0">{data?.purchaseInvoiceUId}</p>
          </div>

          <div className="col-md-2 d-flex align-items-center">
            <p className="fw-light me-2 mb-0"></p>
            <span className={`badge rounded-pill bg-label-${getColorNameFromHex(data?.status?.color)}`}>
              {data?.status?.displayName || "NA"}
            </span>
          </div>

        </div>
      </div>

      <div className="col-12 text-start border-bottom">
        <div className=" ">
          <p className="fw-semibold mb-3">Purchase Details</p>
          <div className="row mb-3">
            <div className="col-md-6">
              <p className="text-secondary mb-0"><i class='bx bx-captions bx-sm me-1'></i>Title:</p>
              <p className="fw-light mb-1">{data?.title}</p>
            </div>
            <div className="col-md-6">
              <p className="text-secondary mb-0"><i class='bx bx-comment-detail bx-sm me-1'></i>Description:</p>
              <p className="fw-light mb-1 ">{data?.description}</p>
            </div>
          </div>
        </div>
      </div>

      <div className="col-12 border-bottom">
        <div className="text-start h-auto fw-semibold">
          <p className="text-muted mb-2">Project</p>
        </div>
        <div className="row text-start h-auto">
          {/* Project Name */}
          <div className="col-12 col-md-4 mb-3">
            <p className="text-secondary mb-0"><i class='bx bx-captions bx-sm me-1'></i>Project Name:</p>
            <p className="fw-light mb-0">{data?.project?.name}</p>
          </div>

          {/* Organization Name */}
          <div className="col-12 col-md-4 mb-3">
            <p className="text-secondary mb-0"><i class='bx bxs-component bx-sm me-1'></i>Organization:</p>
            <p className="fw-light mb-0">{data?.organization?.name}</p>
          </div>

          {/* Email */}
          <div className="col-12 col-md-4 mb-3">
            <p className="text-secondary mb-0"><i class='bx bx-envelope me-1 bx-sm'></i>Email:</p>
            <p className="fw-light mb-0">{data?.organization?.email}</p>
          </div>

          {/* Contact Number */}
          <div className="col-12 col-md-4 mb-3">
            <p className="text-secondary mb-0"><i class='bx bxs-contact bx-sm me-1' ></i>Contact:</p>
            <p className="fw-light mb-0">{data?.organization?.contactNumber}</p>
          </div>

          {/* Address */}
          <div className="col-12 mb-3">
            <p className="text-secondary mb-0"><i class='bx bx-message-square-detail bx-sm me-1'></i>Address:</p>
            <p className="fw-light mb-0">{data?.organization?.address}</p>
          </div>
        </div>
      </div>


      <div className="col-12 border-bottom">
        <div className="row text-start h-auto">
          <p className="text-muted mb-2 fw-semibold">Supplier</p>

          {/* Supplier Name */}
          <div className="col-12 col-md-4 mb-3">
            <p className="text-secondary mb-0"><i class='bx bx-captions bx-sm me-1'></i>Name:</p>
            <p className="fw-light mb-0">{data?.supplier?.name}</p>
          </div>

          {/* Contact Person */}
          <div className="col-12 col-md-4 mb-3">
            <p className="text-secondary mb-0"><i class='bx bx-support bx-sm me-1'></i>Contact Person:</p>
            <p className="fw-light mb-0">{data?.supplier?.contactPerson}</p>
          </div>

          {/* Email */}
          <div className="col-12 col-md-4 mb-3">
            <p className="text-secondary mb-0"><i class='bx bx-envelope me-1 bx-sm'></i>Email:</p>
            <p className="fw-light mb-0">{data?.supplier?.email}</p>
          </div>

          {/* Contact Number */}
          <div className="col-12 col-md-4 mb-3">
            <p className="text-secondary mb-0"><i class='bx bxs-contact bx-sm me-1' ></i>Contact:</p>
            <p className="fw-light mb-0">{data?.supplier?.contactNumber}</p>
          </div>

          {/* Address */}
          <div className="col-12 mb-3">
            <p className="text-secondary mb-0"><i class='bx bx-message-square-detail bx-sm me-1'></i>Address:</p>
            <p className="fw-light mb-0">{data?.supplier?.address}</p>
          </div>
        </div>
      </div>

      <div className="col-md-6">
        <div className="text-start h-auto">
          <p className="text-muted mb-2 fw-semibold">Invoice Details</p>

          <div className="row g-3">
            {/* Left column */}
            <div className="col-12 col-sm-6">
              <div>
                <p className="text-secondary mb-0">Invoice No:</p>
                <p className="fw-light mb-1">{data?.invoiceNumber}</p>
              </div>

              <div>
                <p className="text-secondary mb-0">Proforma No:</p>
                <p className="fw-light mb-1">{data?.proformaInvoiceNumber}</p>
              </div>

              <div>
                <p className="text-secondary mb-0">E-Way Bill:</p>
                <p className="fw-light mb-1">{data?.eWayBillNumber}</p>
              </div>

              <div>
                <p className="text-secondary mb-0">PO No:</p>
                <p className="fw-light mb-1">{data?.purchaseOrderNumber}</p>
              </div>
            </div>

            {/* Right column */}
            <div className="col-12 col-sm-6">
              <div>
                <p className="text-secondary mb-0 ">Invoice Date:</p>
                <p className="fw-light mb-1">
                  {formatUTCToLocalTime(data?.invoiceDate)}
                </p>
              </div>

              <div>
                <p className="text-secondary mb-0">Proforma Date:</p>
                <p className="fw-light mb-1">
                  {formatUTCToLocalTime(data?.proformaInvoiceDate)}
                </p>
              </div>

              <div>
                <p className="text-secondary mb-0">E-Way Date:</p>
                <p className="fw-light mb-1">
                  {formatUTCToLocalTime(data?.eWayBillDate)}
                </p>
              </div>

              <div>
                <p className="text-secondary mb-0">PO Date:</p>
                <p className="fw-light">
                  {formatUTCToLocalTime(data?.purchaseOrderDate)}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="col-md-6">
        <div className="text-start h-auto">
          <p className="text-muted mb-2 fw-semibold">Amount Summary</p>

          <div className="d-flex justify-content-between">
            <p className="text-secondary mb-0">Base Amount</p>
            <p className="fw-light mb-1">₹ {data?.baseAmount}</p>
          </div>

          <div className="d-flex justify-content-between">
            <p className="text-secondary mb-0">Tax</p>
            <p className="fw-light mb-1">₹ {data?.taxAmount}</p>
          </div>

          <div className="d-flex justify-content-between">
            <p className="text-secondary mb-0">Transport</p>
            <p className="fw-light mb-1">₹ {data?.transportCharges}</p>
          </div>

          <hr className="my-2" />

          <div className="d-flex justify-content-between fs-6 fs-medium">
            <span>Total</span>
            <span>₹ {data?.totalAmount}</span>
          </div>

          <div className="mt-2">
            <p className="text-secondary mb-0">Due Date:</p>
            <p className="fw-light mb-0">
              {formatUTCToLocalTime(data?.paymentDueDate)}
            </p>
          </div>
        </div>
      </div>

      <div className="row mt-3 text-start">
        <div className="col-md-6 mb-3 ms-n2">
          <div className="h-100">
            <p className="text-secondary mb-0">Billing Address</p>

            <p className="mb-0 fw-light">{data?.billingAddress || "-"}</p>
          </div>
        </div>

        <div className="col-md-6 mb-3 text-start">
          <div className="h-100">
            <p className="text-secondary mb-0">Shipping Address</p>
            <p className="mb-0 fw-light">{data?.shippingAddress || "-"}</p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ViewPurchase;