/**
 * 廠商列表顯示元件
 */

import { Phone, Mail, Package, Pencil, Trash2, Calendar, Eye } from "lucide-react";
import { Button } from "@/Components/ui/button";
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/Components/ui/table";
import type { Supplier } from "@/types/vendor";

interface VendorListProps {
    suppliers: Supplier[];
    searchQuery: string;
    onViewDetails: (supplier: Supplier) => void;
    onEdit: (supplier: Supplier) => void;
    onDelete: (supplier: Supplier) => void;
}

export default function VendorList({
    suppliers,
    searchQuery,
    onViewDetails,
    onEdit,
    onDelete,
}: VendorListProps) {
    const isEmpty = suppliers.length === 0;
    const emptyMessage = searchQuery ? "未找到符合條件的廠商" : "尚無廠商資料";

    const formatDate = (dateString?: string) => {
        if (!dateString) return "-";
        const date = new Date(dateString);
        return date.toLocaleDateString("zh-TW", {
            year: "numeric",
            month: "2-digit",
            day: "2-digit",
        });
    };

    return (
        <div className="bg-card rounded-lg border border-border overflow-hidden">
            <Table>
                <TableHeader>
                    <TableRow>
                        <TableHead className="w-[200px]">廠商名稱</TableHead>
                        <TableHead className="w-[120px]">聯絡人</TableHead>
                        <TableHead className="w-[140px]">聯絡電話</TableHead>
                        <TableHead className="w-[180px]">Email</TableHead>
                        <TableHead className="w-[130px]">上次採購日</TableHead>
                        <TableHead className="w-[220px] text-right">操作</TableHead>
                    </TableRow>
                </TableHeader>
                <TableBody>
                    {isEmpty ? (
                        <TableRow>
                            <TableCell colSpan={6} className="text-center text-muted-foreground py-8">
                                {emptyMessage}
                            </TableCell>
                        </TableRow>
                    ) : (
                        suppliers.map((supplier) => (
                            <TableRow key={supplier.id}>
                                <TableCell>
                                    <div className="flex items-center gap-2">
                                        <Package className="h-4 w-4 text-muted-foreground" />
                                        <span>{supplier.name}</span>
                                    </div>
                                </TableCell>
                                <TableCell>{supplier.contact || "-"}</TableCell>
                                <TableCell>
                                    <div className="flex items-center gap-2 text-sm">
                                        <Phone className="h-3 w-3 text-muted-foreground" />
                                        {supplier.phone || "-"}
                                    </div>
                                </TableCell>
                                <TableCell>
                                    <div className="flex items-center gap-2 text-sm">
                                        <Mail className="h-3 w-3 text-muted-foreground" />
                                        {supplier.email || "-"}
                                    </div>
                                </TableCell>
                                <TableCell>
                                    <div className="flex items-center gap-2 text-sm">
                                        <Calendar className="h-3 w-3 text-muted-foreground" />
                                        {formatDate(supplier.lastPurchaseDate)}
                                    </div>
                                </TableCell>
                                <TableCell className="text-right">
                                    <div className="flex items-center justify-end gap-2">
                                        <Button
                                            variant="outline"
                                            size="sm"
                                            onClick={() => onViewDetails(supplier)}
                                            className="gap-1 button-outlined-primary"
                                        >
                                            <Eye className="h-3 w-3" />
                                            查看
                                        </Button>
                                        <Button
                                            variant="outline"
                                            size="sm"
                                            onClick={() => onEdit(supplier)}
                                            className="gap-1 button-outlined-primary"
                                        >
                                            <Pencil className="h-3 w-3" />
                                            編輯
                                        </Button>
                                        <Button
                                            size="sm"
                                            onClick={() => onDelete(supplier)}
                                            className="gap-1 button-filled-error"
                                        >
                                            <Trash2 className="h-3 w-3" />
                                            刪除
                                        </Button>
                                    </div>
                                </TableCell>
                            </TableRow>
                        ))
                    )}
                </TableBody>
            </Table>
        </div>
    );
}