import { Package } from "lucide-react";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { DetailCard } from "./detail-card";
import { formatCurrency } from "../../lib/format-utils";
import type { Order } from "../../types";

interface OrderItemsCardProps {
  order: Order;
}

/**
 * Line-item breakdown for a single order. Scrolls horizontally on
 * small screens so every column stays readable.
 */
export function OrderItemsCard({ order }: OrderItemsCardProps) {
  return (
    <DetailCard title={`Items (${order.items.length})`} icon={<Package className="h-4 w-4 text-muted-foreground" />}>
      <div className="overflow-x-auto -mx-5 px-5">
        <Table className="w-full min-w-[560px]">
          <TableHeader>
            <TableRow>
              <TableHead>Product</TableHead>
              <TableHead className="text-right">Qty</TableHead>
              <TableHead className="text-right">Shipped</TableHead>
              <TableHead className="text-right">Price</TableHead>
              <TableHead className="text-right">Subtotal</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {order.items.map((item) => (
              <TableRow key={item.id}>
                <TableCell>
                  <div className="flex items-center gap-3">
                    <img
                      src={item.image}
                      alt=""
                      className="size-11 shrink-0 rounded-md border bg-muted object-cover"
                    />
                    <div className="min-w-0">
                      <p className="truncate text-sm font-medium">{item.name}</p>
                      <p className="truncate text-xs text-muted-foreground">
                        {item.variant} · {item.sku}
                      </p>
                    </div>
                  </div>
                </TableCell>
                <TableCell className="text-right font-mono">
                  {item.quantity}
                </TableCell>
                <TableCell className="text-right">
                  <span className="font-mono text-sm">
                    {item.shippedQuantity}
                  </span>
                  {item.shippedQuantity < item.quantity && (
                    <span className="ml-1 text-xs text-muted-foreground">
                      ({item.quantity - item.shippedQuantity} to ship)
                    </span>
                  )}
                </TableCell>
                <TableCell className="text-right font-mono">
                  {formatCurrency(item.unitPrice)}
                </TableCell>
                <TableCell className="text-right font-mono font-medium">
                  {formatCurrency(item.unitPrice * item.quantity)}
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    </DetailCard>
  );
}