meezi/web/dashboard/src/components/pos/pos-slip-modal.tsx

"use client";

import { useTranslations, useLocale } from "next-intl";
import type { Order } from "@/lib/api/types";
import { formatCurrency } from "@/lib/format";
import { formatOrderNumber } from "@/lib/order-number";
import { Button } from "@/components/ui/button";
import "./pos-receipt-print.css";

export type KitchenSlipLine = {
  name: string;
  quantity: number;
  notes?: string;
};

type PosSlipModalProps = {
  variant: "kitchen" | "bill";
  cafeName: string;
  onClose: () => void;
  /** Full order for customer bill */
  order?: Order;
  /** Kitchen ticket lines (new items or full order) */
  kitchenLines?: KitchenSlipLine[];
  tableNumber?: string | number | null;
  orderId?: string;
  guestName?: string | null;
  createdAt?: string;
};

export function PosSlipModal({
  variant,
  cafeName,
  onClose,
  order,
  kitchenLines = [],
  tableNumber,
  orderId,
  guestName,
  createdAt,
}: PosSlipModalProps) {
  const t = useTranslations("receipt");
  const locale = useLocale();
  const numberLocale = locale === "en" ? "en-US" : "fa-IR";

  const dateSource = order?.createdAt ?? createdAt ?? new Date().toISOString();
  const formattedDate = new Intl.DateTimeFormat(
    locale === "en" ? "en-US" : "fa-IR",
    { dateStyle: "short", timeStyle: "short" }
  ).format(new Date(dateSource));

  const table =
    order?.tableNumber ?? tableNumber ?? "—";
  const orderNo = order ? formatOrderNumber(order) : orderId ? formatOrderNumber({ id: orderId }) : null;
  const guest = order?.guestName ?? guestName;
  const printId = "pos-slip-print-area";

  const paymentKey = (method: string) => {
    const m = method.toLowerCase();
    if (m === "cash") return t("payment.cash");
    if (m === "card") return t("payment.card");
    if (m === "credit") return t("payment.credit");
    return method;
  };

  const activeBillItems = order?.items.filter((i) => !i.isVoided) ?? [];

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
      <div className="w-full max-w-[340px] rounded-xl border border-border bg-background p-4 shadow-xl">
        <div
          id={printId}
          className="mb-4 rounded-md border border-dashed border-border p-3"
        >
          <div className="text-center text-base font-bold">{cafeName}</div>
          <div className="mb-1 text-center text-xs font-semibold">
            {variant === "kitchen" ? t("kitchenTitle") : t("billTitle")}
          </div>
          <div className="mb-2 text-center text-xs text-muted-foreground">
            {formattedDate}
          </div>
          <div className="text-xs">
            {t("table")}: {table}
            {orderNo ? (
              <>
                {" "}
                | {t("order")}: #{orderNo}
              </>
            ) : null}
          </div>
          {guest ? (
            <div className="text-xs">
              {t("guest")}: {guest}
            </div>
          ) : null}

          <div className="receipt-divider" />

          {variant === "kitchen"
            ? kitchenLines.map((line, idx) => (
                <div key={`${line.name}-${idx}`} className="receipt-row mb-1 text-xs">
                  <span>
                    {line.name} × {line.quantity}
                    {line.notes ? ` (${line.notes})` : ""}
                  </span>
                </div>
              ))
            : activeBillItems.map((item) => (
                <div key={item.id} className="receipt-row mb-1 text-xs">
                  <span>
                    {item.menuItemName} × {item.quantity}
                  </span>
                  <span>
                    {formatCurrency(item.unitPrice * item.quantity, numberLocale)}
                  </span>
                </div>
              ))}

          {variant === "bill" ? (
            <>
              <div className="receipt-divider" />
              <div className="receipt-row receipt-total">
                <span>{t("total")}</span>
                <span>{formatCurrency(order!.total, numberLocale)}</span>
              </div>
              {order!.payments?.map((p) => (
                <div key={p.id} className="receipt-row mt-1 text-xs">
                  <span>{paymentKey(p.method)}</span>
                  <span>{formatCurrency(p.amount, numberLocale)}</span>
                </div>
              ))}
              <div className="receipt-divider" />
              <div className="mt-2 text-center text-xs">{t("thankYou")}</div>
            </>
          ) : (
            <div className="mt-2 text-center text-[10px] text-muted-foreground">
              {t("kitchenFooter")}
            </div>
          )}
        </div>

        <div className="flex gap-2">
          <Button type="button" className="flex-1" onClick={() => window.print()}>
            {t("print")}
          </Button>
          <Button type="button" variant="outline" className="flex-1" onClick={onClose}>
            {t("close")}
          </Button>
        </div>
      </div>
    </div>
  );
}

/** @deprecated Use PosSlipModal variant="bill" */
export function PosReceiptModal({
  order,
  cafeName,
  onClose,
}: {
  order: Order;
  cafeName: string;
  onClose: () => void;
}) {
  return (
    <PosSlipModal variant="bill" order={order} cafeName={cafeName} onClose={onClose} />
  );
}