import React from "react";
import { SHOP_INFO } from "@/Utils/constants";

// 3 inch (80mm) purchase order slip for POS – compact table with Carton/Box and Qty
export default function PurchaseMakerPrint3Inch({ list, info }) {
  if (!list || Object.keys(list).length === 0) return null;

  const formatDate = (dateString) => {
    if (!dateString) return "N/A";
    const date = new Date(dateString);
    return date.toLocaleDateString("en-US", {
      day: "2-digit",
      month: "2-digit",
      year: "numeric",
    });
  };

  const details = Array.isArray(list.details) ? list.details : [];

  const getProductAttribute = (item) =>
    item.product_attribute || item.productAttribute || null;

  const getAttrValue = (attr, key) => {
    if (!attr) return null;
    const altKey = key.replace(/_([a-z])/g, (_, c) => c.toUpperCase());
    const rel = attr[key] || attr[altKey];
    return rel?.name ?? null;
  };

  return (
    <div className="hidden print:block">
      <style>{`
        @media print {
          @page { size: 80mm auto; margin: 0; padding: 0; }
          body { margin: 0; padding: 0; }
          .purchase-3inch-root {
            width: 80mm !important;
            max-width: 80mm !important;
            margin: 0 auto !important;
            font-size: 11px !important;
            color: #000 !important;
          }
          .purchase-3inch-root * { color: inherit !important; }
          .purchase-3inch-root p, .purchase-3inch-root span, .purchase-3inch-root div { color: #000 !important; font-weight: 500 !important; }
          .purchase-3inch-root .font-semibold, .purchase-3inch-root .font-bold { font-weight: 700 !important; }
          .purchase-3inch-root .font-medium { font-weight: 600 !important; }
        }
      `}</style>

      <div className="purchase-3inch-root bg-white px-2 py-1.5 text-[10px] text-gray-900">
        {/* Header */}
        <div className="text-center border-b border-gray-400 pb-1 mb-1">
          <h2 className="text-[12px] font-bold uppercase tracking-wide">
            {SHOP_INFO.name}
          </h2>
          {SHOP_INFO.address && (
            <p className="text-[9px] font-semibold text-gray-900 leading-tight">{SHOP_INFO.address}</p>
          )}
          <p className="text-[9px] font-semibold text-gray-900">
            {SHOP_INFO.phone && <>Ph: {SHOP_INFO.phone}</>}{" "}
            {SHOP_INFO.email && <>| {SHOP_INFO.email}</>}
          </p>
          <p className="text-[10px] font-semibold mt-0.5">
            PURCHASE ORDER
          </p>
          <div className="flex justify-between text-[9px] font-semibold mt-0.5">
            <span>PO: {list.po_no || "N/A"}</span>
            <span>{formatDate(list.po_date)}</span>
          </div>
          {list.supplier?.name && (
            <p className="mt-0.5 text-[9px] font-semibold text-gray-900">
              Supplier: {list.supplier.name}
            </p>
          )}
        </div>

        {/* Supplier block */}
        {list.supplier && (
          <div className="border-b border-dashed border-gray-300 pb-1 mb-1 text-[9px]">
            <p className="font-semibold">
              Supplier: {list.supplier?.name || "N/A"}
            </p>
            {list.supplier?.address && (
              <p className="text-[9px] font-semibold text-gray-900">{list.supplier.address}</p>
            )}
            {list.supplier?.number && (
              <p className="text-[9px] font-semibold text-gray-900">
                Ph: {list.supplier.number}
              </p>
            )}
          </div>
        )}

        {/* Items – Carton/Box & Qty focus */}
        <div className="border-b border-gray-400 pb-1 mb-1">
          <div className="grid grid-cols-12 text-[9px] font-semibold mb-0.5">
            <div className="col-span-6">Item</div>
            <div className="col-span-3 text-right">CARTON/BOX</div>
            <div className="col-span-3 text-right">QTY</div>
          </div>
          {details.map((item, idx) => (
            <div
              key={idx}
              className="grid grid-cols-12 items-baseline text-[13px] py-0.5 border-t border-dashed border-gray-200"
            >
              <div className="col-span-6 pr-1">
                <p className="font-semibold leading-tight text-[13px]">
                  {item.product_info?.name || "N/A"}
                </p>
                {(() => {
                  const attr = getProductAttribute(item);
                  if (!attr) return null;

                  const productType =
                    getAttrValue(attr, "product_type") ||
                    getAttrValue(attr, "productType");
                  const size = getAttrValue(attr, "size");
                  const color = getAttrValue(attr, "color");
                  const model = getAttrValue(attr, "model");

                  const parts = [];
                  if (productType) parts.push(productType);
                  if (size) parts.push(size);
                  if (color) parts.push(color);
                  if (model) parts.push(model);

                  if (!parts.length && !attr.sku) return null;

                  return (
                    <div className="mt-0.5 text-[12px] font-semibold text-gray-900 leading-tight">
                      {attr.sku && (
                        <span className="block">
                          SKU: {attr.sku}
                        </span>
                      )}
                      {parts.length > 0 && (
                        <span>{parts.join(" • ")}</span>
                      )}
                    </div>
                  );
                })()}
              </div>
              <div className="col-span-3 text-right">
                {item.carton_box ?? ""}
              </div>
              <div className="col-span-3 text-right">
                {item.quantity || 0}
              </div>
            </div>
          ))}
        </div>

        {/* Signatures / footer */}
        <div className="mt-2 text-[9px] font-semibold text-gray-900">
          <div className="flex justify-between mt-4">
            <div className="text-left">
              <p className="mb-1">________________</p>
              <p>Authorized</p>
            </div>
            <div className="text-right">
              <p className="mb-1">________________</p>
              <p>Supplier</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

