import { Trash2 } from "lucide-react";
import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import { SearchableSelect } from "@/Components/ui/searchable-select";
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/Components/ui/table";
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
    AlertDialogTrigger,
} from "@/Components/ui/alert-dialog";
import type { SupplyProduct } from "@/types/vendor";

interface SupplyProductListProps {
    items: SupplyProduct[];
    allProducts: any[];
    onRemoveItem: (index: number) => void;
    onItemChange: (index: number, field: keyof SupplyProduct, value: string | number) => void;
}

export default function SupplyProductList({
    items,
    allProducts,
    onRemoveItem,
    onItemChange,
}: SupplyProductListProps) {
    return (
        <div className="bg-white rounded-lg border shadow-sm overflow-hidden">
            <Table>
                <TableHeader>
                    <TableRow className="bg-gray-50 hover:bg-gray-50 text-grey-0">
                        <TableHead className="w-[50px] text-center">#</TableHead>
                        <TableHead className="w-[40%] text-left">商品名稱</TableHead>
                        <TableHead className="w-[15%] text-left">基本單位</TableHead>
                        <TableHead className="w-[20%] text-left">
                            上次採購單價
                            <span className="text-[10px] font-normal text-muted-foreground block">(以基本單位計)</span>
                        </TableHead>
                        <TableHead className="text-center w-[80px]">操作</TableHead>
                    </TableRow>
                </TableHeader>
                <TableBody>
                    {items.length === 0 ? (
                        <TableRow>
                            <TableCell colSpan={5} className="text-center text-muted-foreground py-12 italic text-sm">
                                尚未新增任何供貨商品，點擊上方按鈕新增
                            </TableCell>
                        </TableRow>
                    ) : (
                        items.map((item, index) => (
                            <TableRow key={item.id}>
                                <TableCell className="text-gray-500 font-medium text-center">
                                    {index + 1}
                                </TableCell>

                                <TableCell>
                                    <SearchableSelect
                                        value={item.productId}
                                        onValueChange={(value) => onItemChange(index, "productId", value)}
                                        options={allProducts.map(p => ({
                                            label: p.name,
                                            value: String(p.id)
                                        }))}
                                        placeholder="選擇商品"
                                        searchPlaceholder="搜尋商品..."
                                        className="w-full h-10"
                                    />
                                </TableCell>

                                <TableCell>
                                    <div className="h-10 px-3 py-2 bg-gray-50/50 border border-border rounded-md text-gray-600 font-medium text-sm flex items-center">
                                        {item.baseUnit || "-"}
                                    </div>
                                </TableCell>

                                <TableCell>
                                    <div className="flex items-center gap-2">
                                        <div className="relative flex-1">
                                            <span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-xs">$</span>
                                            <Input
                                                type="number"
                                                min="0"
                                                step="any"
                                                value={item.lastPrice === undefined ? "" : item.lastPrice}
                                                onChange={(e) => onItemChange(index, "lastPrice", e.target.value === "" ? 0 : Number(e.target.value))}
                                                placeholder="0.00"
                                                className="pl-6 h-10 w-full text-right"
                                            />
                                        </div>
                                    </div>
                                </TableCell>

                                <TableCell className="text-center">
                                    <AlertDialog>
                                        <AlertDialogTrigger asChild>
                                            <Button
                                                variant="outline"
                                                size="sm"
                                                className="button-outlined-error h-10 w-10 p-0"
                                                title="移除項目"
                                            >
                                                <Trash2 className="h-4 w-4" />
                                            </Button>
                                        </AlertDialogTrigger>
                                        <AlertDialogContent>
                                            <AlertDialogHeader>
                                                <AlertDialogTitle>確定要移除此商品嗎？</AlertDialogTitle>
                                                <AlertDialogDescription>
                                                    此動作將從待更新清單中移除「{item.productName || "此商品"}」。需點擊下方的「更新供貨商品」才會正式生效。
                                                </AlertDialogDescription>
                                            </AlertDialogHeader>
                                            <AlertDialogFooter>
                                                <AlertDialogCancel className="button-outlined-primary">取消</AlertDialogCancel>
                                                <AlertDialogAction
                                                    onClick={() => onRemoveItem(index)}
                                                    className="bg-red-600 hover:bg-red-700 text-white"
                                                >
                                                    確定移除
                                                </AlertDialogAction>
                                            </AlertDialogFooter>
                                        </AlertDialogContent>
                                    </AlertDialog>
                                </TableCell>
                            </TableRow>
                        ))
                    )}
                </TableBody>
            </Table>
        </div>
    );
}
