import { Badge } from "../../../../../../src/components/ui/badge";
import { Button } from "../../../../../../src/components/ui/button";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "../../../../../../src/components/ui/table";
import { Tooltip } from "../../../../../../src/components/ui/tooltip";
import {
  ArrowDown,
  ArrowUp,
  ArrowUpDown,
  Edit,
  Eye,
  Trash2,
} from "lucide-react";
import React from "react";
import DefaultImage from "@/app/admin/_components/Defaultimage";
const CategoryTable = React.memo(
  ({
    categories,
    loading,
    pagination,
    sortField,
    sortOrder,
    handleSort,
    handleView,
    handleEdit,
    handleDelete,
    openPreview,
  }: any) => {
    console.log("Table Re-rendered......");
    return (
      <div className="rounded-md border">
        <Table>
          <TableHeader className="bg-gray-100 dark:bg-gray-800">
            <TableRow className="bg-white hover:bg-gray-50 dark:bg-gray-900 dark:hover:bg-gray-800">
              <TableHead
                className="w-[80px] cursor-pointer text-center hover:bg-gray-50"
                onClick={() => handleSort("createdAt")}
              >
                <div className="flex items-center justify-center gap-2">
                  ID
                  {sortField === "createdAt" ? (
                    sortOrder === "asc" ? (
                      <ArrowUp className="h-4 w-4" />
                    ) : (
                      <ArrowDown className="h-4 w-4" />
                    )
                  ) : (
                    <ArrowUpDown className="h-4 w-4 text-gray-400" />
                  )}
                </div>
              </TableHead>

              <TableHead
                className="w-[200px] cursor-pointer text-center hover:bg-gray-50"
                onClick={() => handleSort("name")}
              >
                <div className="flex items-center justify-center gap-2">
                  Name
                  {sortField === "name" ? (
                    sortOrder === "asc" ? (
                      <ArrowUp className="h-4 w-4" />
                    ) : (
                      <ArrowDown className="h-4 w-4" />
                    )
                  ) : (
                    <ArrowUpDown className="h-4 w-4 text-gray-400" />
                  )}
                </div>
              </TableHead>

              <TableHead className="w-[150px] text-center">Image</TableHead>
              {/* <TableHead className="w-[120px] text-center">Type</TableHead> */}
              <TableHead className="w-[150px] text-center">Status</TableHead>
              <TableHead className="text-center">Action</TableHead>
            </TableRow>
          </TableHeader>

          <TableBody className="dark:bg-[#1f2a37]">
            {categories.length === 0 ? (
              <TableRow className="bg-white dark:bg-gray-900">
                <TableCell colSpan={6} className="py-8 text-center">
                  {loading ? (
                    <div className="flex items-center justify-center">
                      <div className="h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
                      <span className="ml-2">Loading...</span>
                    </div>
                  ) : (
                    "No categories found"
                  )}
                </TableCell>
              </TableRow>
            ) : (
              categories.map((category: any, index: number) => (
                <TableRow
                  key={category._id}
                  className="bg-white dark:bg-gray-900"
                >
                  <TableCell className="text-center">
                    {sortField === "createdAt" && sortOrder === "desc"
                      ? (pagination.page - 1) * pagination.limit + index + 1
                      : pagination.total -
                        (pagination.page - 1) * pagination.limit -
                        index}
                  </TableCell>

                  <TableCell className="text-center font-medium">
                    {category.name}
                  </TableCell>

                  <TableCell className="text-center">
                    {category.image ? (
                      <img
                        loading="lazy"
                        decoding="async"
                        src={category.image}
                        alt={category.name}
                        onClick={() => openPreview(index)}
                        className="mx-auto h-10 w-10 cursor-pointer rounded object-cover"
                      />
                    ) : (
                      <div className="text-center">
                        <DefaultImage />
                      </div>
                    )}
                  </TableCell>

                  <TableCell className="d-flex flex text-center">
                    <Badge variant={category.isevent ? "default" : "secondary"}>
                      {category.isevent ? "Event" : ""}
                    </Badge>
                    <Badge
                      variant={category.isActive ? "default" : "secondary"}
                    >
                      {category.isActive ? "Active" : "Inactive"}
                    </Badge>
                  </TableCell>

                  <TableCell className="text-center">
                    <div className="flex justify-center gap-2">
                      <Tooltip text="View">
                        <Button
                          size="sm"
                          variant="outline"
                          onClick={() => handleView(category)}
                        >
                          <Eye className="h-4 w-4" />
                        </Button>
                      </Tooltip>
                      <Tooltip text="Edit">
                        <Button
                          size="sm"
                          variant="outline"
                          onClick={() => handleEdit(category)}
                        >
                          <Edit className="h-4 w-4" />
                        </Button>
                      </Tooltip>
                      <Tooltip text="Delete">
                        <Button
                          size="sm"
                          variant="outline"
                          onClick={() => handleDelete(category._id)}
                        >
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </Tooltip>
                    </div>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>
    );
  },
);

CategoryTable.displayName = "CategoryTable";

export default CategoryTable;
