"use client";
import * as React from "react";
import {
  flexRender,
  getCoreRowModel,
  useReactTable,
} from "@tanstack/react-table";
import { Button } from "@/app/components/ui/button";

import { Input } from "@/app/components/ui/input";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/app/components/ui/table";

import { SkeletonTable } from "@/app/components/tables/SkeletonTable";
import { useProductsForStocks } from "@/app/_features/products/useProducts";
import { columns } from "./_component/columns";
import {
  Select,
  SelectTrigger,
  SelectContent,
  SelectItem,
  SelectValue,
} from "@/app/components/ui/select";

const Stocks = () => {
  const [pagination, setPagination] = React.useState({
    pageIndex: 0,
    pageSize: 10,
  });

  const [columnFilters, setColumnFilters] = React.useState([]);
  const [columnVisibility, setColumnVisibility] = React.useState({});

  const [globalFilter, setGlobalFilter] = React.useState("");
  const [searchTerm, setSearchTerm] = React.useState(globalFilter);

  const { products, isLoading, isError, error } = useProductsForStocks({
    page: pagination.pageIndex + 1,
    limit: pagination.pageSize,
    search: globalFilter,
  });

  // Debouncing the search input
  React.useEffect(() => {
    const timeoutId = setTimeout(() => {
      setGlobalFilter(searchTerm);
    }, 500); // Debounce delay

    return () => clearTimeout(timeoutId);
  }, [searchTerm]);

  const table = useReactTable({
    data: products?.data?.data || [],
    columns: columns,
    onColumnFiltersChange: setColumnFilters,
    getCoreRowModel: getCoreRowModel(),
    manualFiltering: true,

    onGlobalFilterChange: setGlobalFilter,
    onPaginationChange: setPagination,
    manualPagination: true,
    rowCount: products?.data?.total,

    state: {
      globalFilter,
      pagination,
      columnFilters,
      columnVisibility,
    },
  });

  if (isLoading) {
    return <SkeletonTable />;
  }

  const totalProducts = products?.data?.total || 0;

  return (
    <div className="w-full mt-3">
      <div className="flex items-center py-4">
        <Input
          value={searchTerm}
          placeholder="Search product..."
          onChange={(event) => setSearchTerm(event.target.value || undefined)}
          className="max-w-sm"
        />
        <div className="hidden flex-1 sm:flex justify-end">
          <Select
            value={table.getState().pagination.pageSize}
            onValueChange={(value) => {
              table.setPageSize(Number(value));
            }}
            className="flex justify-end"
          >
            <SelectTrigger className="flex items-center justify-end w-fit gap-2">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              {[10, 20, 30, 40, 50].map((pageSize) => (
                <SelectItem key={pageSize} value={pageSize}>
                  Show {pageSize} Result
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
      </div>

      <Table>
        <TableHeader>
          {table.getHeaderGroups().map((headerGroup) => (
            <TableRow key={headerGroup.id}>
              {headerGroup.headers.map((header) => (
                <TableHead key={header.id}>
                  {header.isPlaceholder
                    ? null
                    : flexRender(
                        header.column.columnDef.header,
                        header.getContext()
                      )}
                </TableHead>
              ))}
            </TableRow>
          ))}
        </TableHeader>
        <TableBody>
          {table.getRowModel().rows?.length ? (
            table.getRowModel().rows.map((row) => (
              <TableRow
                key={row.id}
                data-state={row.getIsSelected() && "selected"}
              >
                {row.getVisibleCells().map((cell) => (
                  <TableCell key={cell.id}>
                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
                  </TableCell>
                ))}
              </TableRow>
            ))
          ) : (
            <TableRow>
              <TableCell colSpan={columns.length} className="h-24 text-center">
                No results.
              </TableCell>
            </TableRow>
          )}
        </TableBody>
      </Table>

      {/* Pagination Controls */}
      <div className="flex sm:justify-between flex-wrap items-center">
        <div className="text-center">Total Products: {totalProducts}</div>
        <div className="flex items-center justify-end space-x-2 py-4">
          <Button
            variant="outline"
            size="sm"
            onClick={() => table.previousPage()}
            disabled={!table.getCanPreviousPage()}
          >
            Previous
          </Button>
          <Button
            variant="outline"
            size="sm"
            onClick={() => table.nextPage()}
            disabled={!table.getCanNextPage()}
          >
            Next
          </Button>
        </div>
      </div>
    </div>
  );
};

export default Stocks;