'use client';

import type { TabOrder } from '@/lib/api/client';
import { formatCents } from '@/lib/utils';
import { useLang } from '@/lib/i18n';

/**
 * A tab's drinks per order, as the terminal shows them: "—— 12:32 today ——" above each, e.g. "2× Duvel · €4.00 each
 * · €8.00". Drinks taken off again show when the order lists them.
 */
export function TabOrders({ orders }: { orders: TabOrder[] | null | undefined }) {
  const { t, orderTime } = useLang();
  if (!orders) {
    return <p className="text-sm text-muted-foreground">{t('tabs.lines_unknown')}</p>;
  }
  if (orders.length === 0) {
    return <p className="text-sm text-muted-foreground">{t('tabs.lines_empty')}</p>;
  }
  return (
    <div className="space-y-2">
      {orders.map((order) => (
        <div key={order.orderId ?? order.startedAt}>
          <div className="flex items-center gap-2 text-xs font-semibold text-muted-foreground mb-1">
            <span className="h-px flex-1 bg-border" />
            <span>{orderTime(order.startedAt)}</span>
            <span className="h-px flex-1 bg-border" />
          </div>
          <ul className="space-y-1 text-sm">
            {order.items.map((item, i) => (
              <li key={i} className="flex justify-between gap-4">
                <span className={item.quantity === 0 ? 'text-muted-foreground line-through' : undefined}>
                  <span className="font-medium">{item.quantity}×</span> {item.productName}
                  <span className="text-muted-foreground"> · {formatCents(item.unitPriceInCents)} {t('tabs.each')}</span>
                  {(item.removed ?? 0) > 0 && (
                    <span className="text-destructive text-xs"> · {t('history.removed', { count: item.removed! })}</span>
                  )}
                </span>
                <span className="tabular-nums">{formatCents(item.quantity * item.unitPriceInCents)}</span>
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}