gastro-admin/src/features/plans/ui/PalanTable.tsx

"use client";

import { plans_api } from "@/features/plans/lib/api";
import type { Product } from "@/features/plans/lib/data";
import { API_URLS } from "@/shared/config/api/URLs";
import formatPrice from "@/shared/lib/formatPrice";
import { Button } from "@/shared/ui/button";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/shared/ui/select";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/shared/ui/table";
import { useQuery } from "@tanstack/react-query";
import clsx from "clsx";
import { Edit, Eye, Loader2, Trash } from "lucide-react";
import type { Dispatch, SetStateAction } from "react";

interface Props {
  products: Product[] | [];
  isLoading: boolean;
  isFetching: boolean;
  isError: boolean;
  setEditingProduct: Dispatch<SetStateAction<Product | null>>;
  setDetailOpen: Dispatch<SetStateAction<boolean>>;
  setDialogOpen: Dispatch<SetStateAction<boolean>>;
  handleDelete: (product: Product) => void;
}

const ProductTable = ({
  products,
  isLoading,
  isFetching,
  isError,
  setEditingProduct,
  setDetailOpen,
  setDialogOpen,
  handleDelete,
}: Props) => {
  const { data } = useQuery({
    queryKey: ["categories"],
    queryFn: () => {
      return plans_api.categories({ page: 1, page_size: 1000 });
    },
    select(data) {
      return data.data.results;
    },
  });

  const { data: unityData } = useQuery({
    queryKey: ["unity"],
    queryFn: () => {
      return plans_api.unity({ page: 1, page_size: 1000 });
    },
    select(data) {
      return data.data.results;
    },
  });

  if (isLoading || isFetching) {
    return (
      <div className="flex h-full items-center justify-center">
        <Loader2 className="h-6 w-6 animate-spin" />
      </div>
    );
  }

  if (isError) {
    return (
      <div className="flex h-full items-center justify-center text-red-600">
        Maʼlumotlarni yuklashda xatolik yuz berdi
      </div>
    );
  }

  return (
    <div className="overflow-auto">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>ID</TableHead>
            <TableHead>Rasmi</TableHead>
            <TableHead>Nomi (UZ)</TableHead>
            <TableHead>Nomi (RU)</TableHead>
            <TableHead>Tavsif (UZ)</TableHead>
            <TableHead>Tavsif (RU)</TableHead>
            <TableHead>Kategoriya</TableHead>
            <TableHead>Birligi</TableHead>
            <TableHead>Brendi</TableHead>
            <TableHead>Narx</TableHead>
            <TableHead>Status</TableHead>
            <TableHead className="text-right">Harakatlar</TableHead>
          </TableRow>
        </TableHeader>

        <TableBody>
          {products.map((product, index) => {
            const cat = data?.find((c) => c.id === product.category);
            const unity = unityData?.find((u) => u.id === product.unity);

            return (
              <TableRow key={product.id}>
                <TableCell>{index + 1}</TableCell>
                <TableCell>
                  <img
                    src={API_URLS.BASE_URL + product.image}
                    alt={product.name_uz}
                    className="w-16 h-16 object-cover rounded"
                  />
                </TableCell>
                <TableCell>{product.name_uz}</TableCell>
                <TableCell>{product.name_ru}</TableCell>
                <TableCell>{product.description_uz.slice(0, 15)}...</TableCell>
                <TableCell>{product.description_ru.slice(0, 15)}...</TableCell>
                <TableCell>{cat?.name_uz}</TableCell>
                <TableCell>{unity?.name_uz}</TableCell>
                <TableCell>{product.brand}</TableCell>
                <TableCell>{formatPrice(product.price, true)}</TableCell>
                <TableCell
                  className={clsx(
                    product.is_active ? "text-green-600" : "text-red-600",
                  )}
                >
                  <Select value={product.is_active ? "true" : "false"}>
                    <SelectTrigger className="w-[180px]">
                      <SelectValue placeholder="Holati" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="true">Faol</SelectItem>
                      <SelectItem value="false">Nofaol</SelectItem>
                    </SelectContent>
                  </Select>
                </TableCell>

                <TableCell className="space-x-2 text-right">
                  <Button
                    size="sm"
                    variant="outline"
                    onClick={() => {
                      setEditingProduct(product);
                      setDetailOpen(true);
                    }}
                  >
                    <Eye className="h-4 w-4" />
                  </Button>

                  <Button
                    size="sm"
                    className="bg-blue-500 text-white hover:bg-blue-600"
                    onClick={() => {
                      setEditingProduct(product);
                      setDialogOpen(true);
                    }}
                  >
                    <Edit className="h-4 w-4" />
                  </Button>

                  <Button
                    size="sm"
                    variant="destructive"
                    onClick={() => handleDelete(product)}
                  >
                    <Trash className="h-4 w-4" />
                  </Button>
                </TableCell>
              </TableRow>
            );
          })}

          {products.length === 0 && (
            <TableRow>
              <TableCell colSpan={8} className="text-center text-gray-500">
                Mahsulotlar topilmadi
              </TableCell>
            </TableRow>
          )}
        </TableBody>
      </Table>
    </div>
  );
};

export default ProductTable;