import Link from "next/link";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { StatusBadge } from "@/components/shared/status-badge";
import { formatDateTime } from "@/lib/format";
import { ordersTexts } from "@/lib/i18n/orders";
import type { RefillRow } from "./types";

export function RefillTable({ rows }: { rows: RefillRow[] }) {
  return (
    <div className="overflow-x-auto">
      <Table className="min-w-[760px]">
        <TableHeader>
          <TableRow className="hover:bg-transparent">
            <TableHead className="w-[120px]">{ordersTexts.colId}</TableHead>
            <TableHead className="w-[160px]">{ordersTexts.colDate}</TableHead>
            <TableHead className="w-[110px]">{ordersTexts.colOrder}</TableHead>
            <TableHead className="min-w-[240px]">{ordersTexts.colService}</TableHead>
            <TableHead className="w-[150px]">{ordersTexts.colStatus}</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {rows.map((row) => (
            <TableRow key={row.id} className="align-top">
              <TableCell
                title={row.id}
                className="font-mono text-xs font-medium tracking-tight uppercase"
              >
                {row.shortId}
              </TableCell>
              <TableCell className="text-xs whitespace-nowrap text-muted-foreground">
                {formatDateTime(row.createdAt)}
              </TableCell>
              <TableCell className="font-mono text-xs tabular-nums">
                <Link
                  href={`/orders?q=${row.orderId}`}
                  className="underline-offset-4 transition-colors hover:text-primary hover:underline"
                >
                  {row.orderId}
                </Link>
              </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} />
                {row.reason ? (
                  <div className="mt-1 max-w-[16rem] text-[11px] text-muted-foreground">
                    {ordersTexts.refillReason}: {row.reason}
                  </div>
                ) : null}
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}

export default RefillTable;