"use client";

import type { QueuedSale } from "@/lib/offlineQueue";

interface Props {
  sale: QueuedSale;
  businessName?: string | null;
  branchName?: string | null;
  cashierName: string;
  synced: boolean;
}

/** A printable sale receipt. Printing hides everything but `.print-receipt` (see globals.css). */
export default function Receipt({ sale, businessName, branchName, cashierName, synced }: Props) {
  const when = new Date(sale.clientSubmittedAt);
  const reference = sale.clientUuid.slice(0, 8).toUpperCase();

  return (
    <div className="print-receipt rounded-xl2 border border-depth-200/60 bg-white p-5 font-mono text-sm text-depth-900 shadow-soft">
      <div className="text-center">
        <p className="font-display text-base font-bold">{businessName ?? "Receipt"}</p>
        {branchName && <p className="text-xs text-depth-500">{branchName}</p>}
        <p className="mt-1 text-xs text-depth-500">
          {when.toLocaleDateString("en-KE")} {when.toLocaleTimeString("en-KE", { hour: "2-digit", minute: "2-digit" })}
        </p>
        <p className="text-xs text-depth-500">Ref {reference}</p>
      </div>

      <table className="mt-4 w-full">
        <tbody>
          {sale.lines.map((l) => (
            <tr key={l.productId} className="align-top">
              <td className="py-0.5 pr-2">
                {l.quantity} x {l.label}
                <span className="block text-xs text-depth-500">@ KES {l.unitPrice.toLocaleString()}</span>
              </td>
              <td className="py-0.5 text-right">{(l.quantity * l.unitPrice).toLocaleString()}</td>
            </tr>
          ))}
        </tbody>
      </table>

      <div className="mt-3 flex justify-between border-t border-dashed border-depth-300 pt-2 font-bold">
        <span>TOTAL (KES)</span>
        <span>{sale.total.toLocaleString()}</span>
      </div>
      <p className="mt-1 text-xs">Paid: Cash</p>
      {sale.customerName && <p className="text-xs">Customer: {sale.customerName}</p>}
      <p className="text-xs">Served by: {cashierName}</p>

      <p className="no-print mt-3 text-center text-xs text-depth-500">
        {synced ? "Synced to head office" : "Saved on this phone - will sync automatically"}
      </p>
    </div>
  );
}