import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { StatusBadge } from "@/components/shared/status-badge";
import { formatDateTime, formatNumber } from "@/lib/format";
import { ordersTexts } from "@/lib/i18n/orders";
import { LinkCell } from "./link-cell";
import { OrderRowActions } from "./order-row-actions";
import type { OrderRow } from "./types";

export function OrdersTable({ rows }: { rows: OrderRow[] }) {
  return (
    <div className="overflow-x-auto">
      <Table className="min-w-[1040px]">
        <TableHeader>
          <TableRow className="hover:bg-transparent">
            <TableHead className="w-[92px]">{ordersTexts.colId}</TableHead>
            <TableHead className="w-[150px]">{ordersTexts.colDate}</TableHead>
            <TableHead>{ordersTexts.colLink}</TableHead>
            <TableHead className="w-[104px] text-right">{ordersTexts.colCharge}</TableHead>
            <TableHead className="w-[104px] text-right">{ordersTexts.colStartCount}</TableHead>
            <TableHead className="w-[104px] text-right">{ordersTexts.colQuantity}</TableHead>
            <TableHead className="min-w-[220px]">{ordersTexts.colService}</TableHead>
            <TableHead className="w-[130px]">{ordersTexts.colStatus}</TableHead>
            <TableHead className="w-[92px] text-right">{ordersTexts.colRemains}</TableHead>
            <TableHead className="w-[170px] text-right" />
          </TableRow>
        </TableHeader>
        <TableBody>
          {rows.map((row) => (
            <TableRow key={row.id} className="align-top">
              <TableCell className="font-mono text-xs font-medium tabular-nums">
                {row.id}
              </TableCell>
              <TableCell className="text-xs whitespace-nowrap text-muted-foreground">
                {formatDateTime(row.createdAt)}
              </TableCell>
              <TableCell className="max-w-[18rem] text-sm">
                <LinkCell link={row.link} />
              </TableCell>
              <TableCell className="text-right font-mono text-xs tabular-nums">
                {row.charge}
              </TableCell>
              <TableCell className="text-right font-mono text-xs tabular-nums text-muted-foreground">
                {row.startCount === null ? "—" : formatNumber(row.startCount, 0)}
              </TableCell>
              <TableCell className="text-right font-mono text-xs tabular-nums">
                {formatNumber(row.quantity, 0)}
              </TableCell>
              <TableCell className="text-sm">
                <div className="leading-tight">{row.serviceName}</div>
                <div className="mt-0.5 font-mono text-[11px] text-muted-foreground">
                  {ordersTexts.serviceIdPrefix} {row.serviceId}
                </div>
              </TableCell>
              <TableCell>
                <StatusBadge status={row.status} />
              </TableCell>
              <TableCell className="text-right font-mono text-xs tabular-nums text-muted-foreground">
                {formatNumber(row.remains, 0)}
              </TableCell>
              <TableCell className="text-right">
                <OrderRowActions
                  orderId={row.id}
                  canRefill={row.canRefill}
                  canCancel={row.canCancel}
                  refillPending={row.refillPending}
                  cancelPending={row.cancelPending}
                />
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}

export default OrdersTable;