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

/**
 * Kitchen slip: shows only POS selected items (cart data).
 * Receives sales or draftSalesForPrint from PosRestaurant (details = selected products + qty).
 */
function Print3InchKitchen({ 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,
  };

  // Only selected POS data: details from sale or draft (cart)
  const items =
    sales?.details?.map((item) => ({
      name: formatItemName(item),
      quantity: item.qty ?? 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="w-[80mm] max-w-[80mm] mx-auto break-after-avoid-page hidden print:bg-white print:relative print:block print:w-[80mm]">
      <style>{`
                @media print {
                    @page { size: 80mm auto; margin: 0; padding: 0; }
                    body { margin: 0; padding: 0; }
                    .print-3inch { width: 80mm !important; max-width: 80mm !important; font-size: 12px !important; color: #000 !important; }
                    .print-3inch * { color: inherit !important; }
                    .print-3inch p, .print-3inch span, .print-3inch div { color: #000 !important; font-weight: 500 !important; }
                    .print-3inch .font-semibold, .print-3inch .font-bold { font-weight: 700 !important; }
                    .print-3inch .font-medium { font-weight: 600 !important; }
                }
            `}</style>

      {/* Header */}
      <div className="print-3inch text-center py-2 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-base font-bold uppercase tracking-wide leading-tight">
          {company.name}
        </h2>
        {company.slogan && (
          <p className="text-[10px] text-gray-600 italic mt-0.5">{company.slogan}</p>
        )}
      </div>

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

      {/* Selected POS items only — no prices */}
      <div className="print-3inch py-1">
        <p className="text-[10px] font-bold uppercase mb-1 border-b border-gray-400 pb-0.5">
          Selected items
        </p>
        <div className="text-[10px] 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-[10px] text-gray-500 py-2">No items selected</p>
        ) : (
          items.map((item, index) => (
            <div key={index} className="border-b border-gray-200 py-0.5 text-[10px]">
              <div className="grid grid-cols-12 gap-x-1 items-baseline">
                <div className="col-span-8 min-w-0">
                  <p className="font-medium leading-tight">{item.name}</p>
                  {item.note && (
                    <p className="text-[9px] 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-3inch text-center py-1.5 mt-1 border-t border-gray-400">
        <p className="text-[10px] font-bold text-gray-600">— KITCHEN COPY —</p>
      </div>
    </div>
  );
}

export default Print3InchKitchen;
