import { Pencil, Trash2 } from "lucide-react";
import { Button } from "@/Components/ui/button";
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/Components/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="bg-white rounded-lg border shadow-sm">
            <Table>
                <TableHeader>
                    <TableRow>
                        <TableHead className="w-[50px] text-center">#</TableHead>
                        <TableHead>商品名稱</TableHead>
                        <TableHead>基本單位</TableHead>
                        <TableHead>轉換率</TableHead>
                        <TableHead className="text-right">
                            上次採購單價
                            <div className="text-xs font-normal text-muted-foreground">(以基本單位計算)</div>
                        </TableHead>
                        <TableHead className="text-center w-[150px]">操作</TableHead>
                    </TableRow>
                </TableHeader>
                <TableBody>
                    {products.length === 0 ? (
                        <TableRow>
                            <TableCell colSpan={6} className="text-center text-muted-foreground py-8">
                                尚無供貨商品，請點擊上方按鈕新增
                            </TableCell>
                        </TableRow>
                    ) : (
                        products.map((product, index) => (
                            <TableRow key={product.id}>
                                <TableCell className="text-gray-500 font-medium text-center">
                                    {index + 1}
                                </TableCell>
                                <TableCell>{product.productName}</TableCell>
                                <TableCell>
                                    {product.baseUnit || product.unit || "-"}
                                </TableCell>
                                <TableCell>
                                    {product.largeUnit && product.conversionRate ? (
                                        <span className="text-sm text-gray-500">
                                            1 {product.largeUnit} = {Number(product.conversionRate)} {product.baseUnit || product.unit}
                                        </span>
                                    ) : (
                                        "-"
                                    )}
                                </TableCell>
                                <TableCell className="text-right">
                                    {product.lastPrice ? (
                                        <span>
                                            ${product.lastPrice.toLocaleString()} / {product.baseUnit || product.unit || "單位"}
                                        </span>
                                    ) : (
                                        "-"
                                    )}
                                </TableCell>
                                <TableCell className="text-center">
                                    <div className="flex items-center justify-center gap-2">
                                        <Button
                                            variant="outline"
                                            size="sm"
                                            onClick={() => onEdit(product)}
                                            className="button-outlined-primary"
                                        >
                                            <Pencil className="h-4 w-4" />
                                        </Button>
                                        <Button
                                            variant="outline"
                                            size="sm"
                                            onClick={() => onRemove(product)}
                                            className="button-outlined-error"
                                        >
                                            <Trash2 className="h-4 w-4" />
                                        </Button>
                                    </div>
                                </TableCell>
                            </TableRow>
                        ))
                    )}
                </TableBody>
            </Table>
        </div>
    );
}
