star-erp/resources/js/Components/Product/ProductTable.tsx

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/Components/ui/table";
import { Button } from "@/Components/ui/button";
import { Badge } from "@/Components/ui/badge";
import { Pencil, Trash2, ArrowUpDown, ArrowUp, ArrowDown } from "lucide-react";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/Components/ui/alert-dialog";
import type { Product } from "@/Pages/Product/Index";
// import BarcodeViewDialog from "@/Components/Product/BarcodeViewDialog";

interface ProductTableProps {
  products: Product[];
  onEdit: (product: Product) => void;
  onDelete: (id: number) => void;

  startIndex: number;
  sortField: string | null;
  sortDirection: "asc" | "desc" | null;
  onSort: (field: string) => void;
}

export default function ProductTable({
  products,
  onEdit,
  onDelete,
  startIndex,
  sortField,
  sortDirection,
  onSort,
}: ProductTableProps) {
  // const [barcodeDialogOpen, setBarcodeDialogOpen] = useState(false);
  // const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);

  const SortIcon = ({ field }: { field: string }) => {
    if (sortField !== field) {
      return <ArrowUpDown className="h-4 w-4 text-muted-foreground ml-1" />;
    }
    if (sortDirection === "asc") {
      return <ArrowUp className="h-4 w-4 text-primary ml-1" />;
    }
    if (sortDirection === "desc") {
      return <ArrowDown className="h-4 w-4 text-primary ml-1" />;
    }
    return <ArrowUpDown className="h-4 w-4 text-muted-foreground ml-1" />;
  };

  // 查看條碼
  /*
  const handleViewBarcode = (product: Product) => {
    setSelectedProduct(product);
    setBarcodeDialogOpen(true);
  };
  */

  return (
    <>
      <div className="bg-white rounded-lg shadow-sm border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead className="w-[50px] text-center">#</TableHead>
              <TableHead>
                <button onClick={() => onSort("code")} className="flex items-center hover:text-gray-900 font-semibold">
                  商品編號 <SortIcon field="code" />
                </button>
              </TableHead>
              <TableHead>
                <button onClick={() => onSort("name")} className="flex items-center hover:text-gray-900 font-semibold">
                  商品名稱 <SortIcon field="name" />
                </button>
              </TableHead>
              <TableHead>
                <button onClick={() => onSort("category_id")} className="flex items-center hover:text-gray-900 font-semibold">
                  分類 <SortIcon field="category_id" />
                </button>
              </TableHead>
              <TableHead>基本單位</TableHead>
              <TableHead>換算率</TableHead>
              <TableHead className="text-center">操作</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {products.length === 0 ? (
              <TableRow>
                <TableCell colSpan={7} className="text-center py-8 text-gray-500">
                  無符合條件的商品資料
                </TableCell>
              </TableRow>
            ) : (
              products.map((product, index) => (
                <TableRow key={product.id}>
                  <TableCell className="text-gray-500 font-medium text-center">
                    {startIndex + index}
                  </TableCell>
                  <TableCell className="font-mono text-sm text-gray-700">
                    {product.code}
                  </TableCell>
                  <TableCell>
                    <div className="flex flex-col">
                      <span className="font-medium">{product.name}</span>
                      {product.brand && <span className="text-xs text-gray-400">{product.brand}</span>}
                    </div>
                  </TableCell>
                  <TableCell>
                    <Badge variant="outline">
                      {product.category?.name || '-'}
                    </Badge>
                  </TableCell>
                  <TableCell>{product.base_unit}</TableCell>
                  <TableCell>
                    {product.large_unit ? (
                      <span className="text-sm text-gray-500">
                        1 {product.large_unit} = {Number(product.conversion_rate)} {product.base_unit}
                      </span>
                    ) : (
                      '-'
                    )}
                  </TableCell>
                  <TableCell className="text-center">
                    <div className="flex justify-center gap-2">
                      {/*
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={() => handleViewBarcode(product)}
                        className="h-8 px-2 text-primary hover:text-primary-dark hover:bg-primary-lightest"
                      >
                        <Eye className="h-4 w-4" />
                      </Button>
                      */}
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => onEdit(product)}
                        className="button-outlined-primary"
                      >
                        <Pencil className="h-4 w-4" />
                      </Button>
                      <AlertDialog>
                        <AlertDialogTrigger asChild>
                          <Button variant="outline" size="sm" className="button-outlined-error">
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </AlertDialogTrigger>
                        <AlertDialogContent>
                          <AlertDialogHeader>
                            <AlertDialogTitle>確認刪除</AlertDialogTitle>
                            <AlertDialogDescription>
                              確定要刪除「{product.name}」嗎？此操作無法復原。
                            </AlertDialogDescription>
                          </AlertDialogHeader>
                          <AlertDialogFooter>
                            <AlertDialogCancel>取消</AlertDialogCancel>
                            <AlertDialogAction
                              onClick={() => onDelete(product.id)}
                              className="bg-red-600 hover:bg-red-700"
                            >
                              刪除
                            </AlertDialogAction>
                          </AlertDialogFooter>
                        </AlertDialogContent>
                      </AlertDialog>
                    </div>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>

      {/* 條碼查看對話框 - Temporarily disabled */}
      {/*
      {selectedProduct && (
        <BarcodeViewDialog
          open={barcodeDialogOpen}
          onOpenChange={setBarcodeDialogOpen}
          productName={selectedProduct.name}
          productCode={selectedProduct.code}
          barcodeValue={selectedProduct.code}
        />
      )}
      */}
    </>
  );
}