import type { OrderDetail } from "@/lib/api/orders";
import {
  formatOrderDateTime,
  formatOrderNumber,
  formatOrderType,
  formatRupiah,
} from "@/lib/orders/format";
import { MaterialIcon } from "../icons/nav-icons";

type DetailPesananSummaryProps = {
  order: OrderDetail;
};

function SummaryRow({ label, value }: { label: string; value: string }) {
  return (
    <div className="flex items-start justify-between gap-3">
      <span className="text-m-regular shrink-0 text-neutral-80">{label}</span>
      <span className="text-m-regular text-right text-neutral-100">{value}</span>
    </div>
  );
}

export function DetailPesananSummary({ order }: DetailPesananSummaryProps) {
  const tableLabel =
    order.tableNumber !== "-"
      ? order.tableCategoryName !== "-"
        ? `${order.tableNumber} (${order.tableCategoryName})`
        : order.tableNumber
      : "-";

  const remainingAmount = order.remainingAmount ?? order.grandTotal;

  return (
    <aside className="flex w-full flex-col gap-5 lg:max-w-[295px] lg:shrink-0">
      <div className="rounded-[10px] border border-neutral-40 bg-neutral-10 p-5">
        <div className="flex flex-col gap-1">
          <p className="text-m-regular text-neutral-80">Sisa Tagihan</p>
          <p className="heading-s text-neutral-100">
            {formatRupiah(remainingAmount)}
          </p>
        </div>
        <div className="mt-4 flex items-center gap-2 text-neutral-80">
          <MaterialIcon name="receipt_long" size={18} />
          <p className="text-s-regular">
            Total Tagihan {formatRupiah(order.grandTotal)}
          </p>
        </div>
      </div>

      <div className="flex flex-col gap-3 rounded-[10px] border border-neutral-40 bg-neutral-10 p-5">
        <SummaryRow label="No Meja" value={tableLabel} />
        <SummaryRow label="Tipe" value={formatOrderType(order.type)} />
        <SummaryRow label="Customer" value={order.customerName} />
        <SummaryRow
          label="Waktu Pesanan"
          value={formatOrderDateTime(order.createdAt)}
        />
        <SummaryRow
          label="No Pesanan"
          value={formatOrderNumber(order.orderNumber)}
        />
        <SummaryRow label="Cabang" value={order.branchName} />
        <SummaryRow label="Admin Pesanan" value={order.orderAdminName} />
        <SummaryRow label="Kasir" value={order.cashierName} />
      </div>
    </aside>
  );
}