import React from "react";
import defaultLogo from "../../../../public/defualt/defualtLogo.jpg";
import { SHOP_INFO } from "@/Utils/constants";

/**
 * 2 inch (58mm) Kitchen slip – page setup for 2 inch thermal.
 */
function Print2InchKitchen({ sales, auth }) {
  const formatItemName = (item) => {
    return (
      item?.product?.name ??
      item?.attribute?.product?.name ??
      item?.arribute?.product?.name ??
      item?.name ??
      item?.product_name ??
      "—"
    );
  };

  const company = {
    name: SHOP_INFO.name,
    address: SHOP_INFO.address,
    phone: SHOP_INFO.phone,
    slogan: SHOP_INFO.slogan,
  };

  const details = sales && typeof sales === "object" && Array.isArray(sales.details) ? sales.details : [];
  const items = details.map((item) => ({
    name: formatItemName(item),
    quantity: Number(item.qty ?? item.quantity ?? 1) || 1,
    note: item.note ?? item.remark ?? "",
  }));

  const date = sales?.created_at
    ? new Date(sales.created_at).toLocaleDateString("en-GB", {
      day: "2-digit",
      month: "2-digit",
      year: "numeric",
      hour: "2-digit",
      minute: "2-digit",
      timeZone: "UTC",
    })
    : "";

  const tableName =
    sales?.table?.name ??
    sales?.table?.label ??
    sales?.table_name ??
    sales?.order_type ??
    "";
  const orderSlot = sales?.order_slot ?? null;
  const tableOrderKey =
    sales?.table_order_key ??
    (tableName && orderSlot ? `${tableName} #${orderSlot}` : null);

  return (
    <div className="print-2inch mx-auto break-after-avoid-page hidden print:!block print:bg-white print:relative" style={{ width: "58mm", maxWidth: "58mm" }}>
      <style>{`
        @media print {
          @page { size: 58mm auto; margin: 0; padding: 0; }
          body { margin: 0; padding: 0; }
          .print-2inch { width: 220px !important; max-width: 220px !important; min-width: 220px !important; font-size: 13px !important; overflow: visible !important; color: #000 !important; }
          .print-2inch * { overflow: visible !important; color: inherit !important; }
          .print-2inch p, .print-2inch span, .print-2inch div { color: #000 !important; font-weight: 500 !important; }
          .print-2inch .font-semibold, .print-2inch .font-bold { font-weight: 700 !important; }
          .print-2inch .font-medium { font-weight: 600 !important; }
        }
        @media print and (max-width: 768px) {
          .print-2inch { width: 220px !important; max-width: 220px !important; min-width: 220px !important; box-sizing: border-box !important; }
        }
      `}</style>

      <div className="print-2inch text-center py-1.5 border-b-2 border-gray-800">
        {SHOP_INFO.companyLogo && (
          <img src={SHOP_INFO.companyLogo || defaultLogo} alt="Logo" className="w-10 h-10 mx-auto mb-1 object-contain" />
        )}
        <h2 className="text-[14px] font-bold uppercase tracking-wide leading-tight">{company.name}</h2>
        {company.slogan && <p className="text-[13px] text-gray-600 italic mt-0.5">{company.slogan}</p>}
      </div>

      <div className="print-2inch text-center py-1.5 border-b-2 border-amber-600 bg-amber-50/80">
        <h3 className="text-[13px] font-bold uppercase tracking-wider text-amber-900">KITCHEN ORDER</h3>
        <div className="text-[13px] mt-0.5 space-y-0.5 text-gray-700">
          {sales?.invoice_no ? <p><span className="font-semibold">Inv#:</span> {sales.invoice_no}</p> : null}
          <p><span className="font-semibold">Date:</span> {date}</p>
          {/* {tableName && <p><span className="font-semibold">Table:</span> {tableName}</p>} */}
          {tableOrderKey && (
            <p><span className="font-semibold">Slot No.:</span> {tableOrderKey}</p>
          )}
        </div>
      </div>

      <div className="print-2inch py-1">
        <p className="text-[12px] font-bold uppercase mb-0.5 border-b border-gray-400 pb-0.5">Items</p>
        <div className="text-[13px] font-semibold grid grid-cols-12 gap-0.5 py-0.5 border-b border-gray-400">
          <div className="col-span-8">Item</div>
          <div className="col-span-4 text-center">Qty</div>
        </div>

        {items.length === 0 ? (
          <p className="text-[12px] text-gray-500 py-1">No items</p>
        ) : (
          items.map((item, index) => (
            <div key={index} className="border-b border-gray-200 py-0.5 text-[12px]">
              <div className="grid grid-cols-12 gap-x-0.5 items-baseline">
                <div className="col-span-8 min-w-0 overflow-visible">
                  <p className="font-medium leading-tight break-words">{item.name}</p>
                  {item.note && <p className="text-[10px] text-amber-700 italic">Note: {item.note}</p>}
                </div>
                <div className="col-span-4 text-center font-bold">{item.quantity}</div>
              </div>
            </div>
          ))
        )}
      </div>

      <div className="print-2inch text-center py-1.5 mt-1 border-t border-gray-400">
        <p className="text-[13px] font-bold text-gray-600">— KITCHEN COPY —</p>
      </div>
    </div>
  );
}

export default Print2InchKitchen;
