/**
 * 供貨商品列表元件
 */

import { Pencil, XCircle } from "lucide-react";
import { Button } from "../ui/button";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "../ui/table";
import type { SupplyProduct } from "../../types/vendor";

interface SupplyProductListProps {
  products: SupplyProduct[];
  onEdit: (product: SupplyProduct) => void;
  onRemove: (product: SupplyProduct) => void;
}

export default function SupplyProductList({
  products,
  onEdit,
  onRemove,
}: SupplyProductListProps) {
  return (
    <div className="border border-border rounded-lg overflow-hidden">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>商品名稱</TableHead>
            <TableHead>單位</TableHead>
            <TableHead className="text-right">上次採購單價</TableHead>
            <TableHead className="text-right w-[150px]">操作</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {products.length === 0 ? (
            <TableRow>
              <TableCell colSpan={4} className="text-center text-muted-foreground py-8">
                尚無供貨商品，請點擊上方按鈕新增
              </TableCell>
            </TableRow>
          ) : (
            products.map((product) => (
              <TableRow key={product.id}>
                <TableCell>{product.productName}</TableCell>
                <TableCell>{product.unit}</TableCell>
                <TableCell className="text-right">
                  {product.lastPrice ? `$${product.lastPrice.toLocaleString()}` : "-"}
                </TableCell>
                <TableCell className="text-right">
                  <div className="flex items-center justify-end gap-2">
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => onEdit(product)}
                      className="gap-1 button-outlined-primary"
                    >
                      <Pencil className="h-3 w-3" />
                      編輯
                    </Button>
                    <Button
                      size="sm"
                      onClick={() => onRemove(product)}
                      className="gap-1 button-filled-error"
                    >
                      <XCircle className="h-3 w-3" />
                      取消供貨
                    </Button>
                  </div>
                </TableCell>
              </TableRow>
            ))
          )}
        </TableBody>
      </Table>
    </div>
  );
}
