import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Edit, Trash } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Product } from "@/models/products";

interface ProductTableProps {
  products: Product[];
  loading: boolean;
  onEdit: (product: Product) => void;
  onDelete: (productId: string) => void; // Added onDelete prop
  getCategoryNameById: (categoryId: string) => string;
}

const ProductTable = ({
  products,
  loading,
  onEdit,
  onDelete,
  getCategoryNameById
}: ProductTableProps) => {

  const sortedProducts = [...products].sort((a, b) => {
    const categoryNameA = getCategoryNameById(a.category);
    const categoryNameB = getCategoryNameById(b.category);
    return categoryNameA.localeCompare(categoryNameB);
  });
  return (
    <div className="rounded-lg border dark:border-zinc-700 shadow-sm overflow-hidden">
      <Table className="relative">
        <TableHeader className="bg-gray-50 dark:bg-zinc-800/50">
          <TableRow className="hover:bg-transparent">
            <TableHead className="w-[200px]">Product</TableHead>
            <TableHead className="text-center">Category</TableHead>
            <TableHead className="text-center">Unit</TableHead>
            <TableHead className="text-right">Actions</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {loading ? (
            Array.from({ length: 1 }).map((_, index) => (
              <TableRow key={index}>
                <TableCell>Loading...</TableCell>
                <TableCell>Loading...</TableCell>
                <TableCell>Loading...</TableCell>
                <TableCell>Loading...</TableCell>
              </TableRow>
            ))
          ) : sortedProducts.length > 0 ? (
            sortedProducts.map((product) => (
              <TableRow key={product._id} className="transition-colors hover:bg-gray-50 dark:hover:bg-zinc-800/70">
                <TableCell className="font-medium">{product.name}</TableCell>
                <TableCell className="text-center">
                  {getCategoryNameById(product.category)} {/* Display category name */}
                </TableCell>
                <TableCell className="text-center uppercase text-sm">{product.unitType}</TableCell>
                <TableCell className="text-right">
                  <div className="flex justify-end space-x-2">
                    <Button size="sm" variant="ghost" onClick={() => onEdit(product)}>
                      <Edit className="h-4 w-4" />
                    </Button>
                    <Button size="sm" variant="ghost" className="text-red-600 hover:text-red-700 dark:text-red-400" onClick={() => onDelete(product._id ?? "")}>
                      <Trash className="h-4 w-4" />
                    </Button>
                  </div>
                </TableCell>
              </TableRow>
            ))
          ) : (
            <TableRow>
              <TableCell colSpan={4} className="h-24 text-center">
                No products found.
              </TableCell>
            </TableRow>
          )}
        </TableBody>
      </Table>
    </div>
  );
};

export default ProductTable;