"use client";
import { columns } from "./columns";
import { DataTable } from "./data-table";
import { useState, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select";

const InventoriesClient = () => {
  const [products, setProducts] = useState<ProductType[]>([]);
  const [page, setPage] = useState(1)
  const [limit, setLimit] = useState(10)
  const [total, setTotal] = useState(0)

  const totalPages = Math.ceil(total / limit);

  useEffect(() => {
    
    async function fetchProducts() {
      const response = await fetch(`/api/admin/products?page=${page}&limit=${limit}`)

      const data = await response.json();
      
      setProducts(data.products);
      setTotal(data.total)
    }
    fetchProducts();
  }, [page, limit]);

  return (
    <div className="space-y-6 pt-5 px-2">
      <h1 className="text-3xl font-bold tracking-tight">Inventory</h1>
      <DataTable columns={columns} data={products} />

      {/* Pagination Controls */}
      <div className="flex items-center justify-between mt-4 bg-white">
        {/* Rows per page */}
        <Select
          onValueChange={(val) => {
            setLimit(Number(val));
            setPage(1);
          }}
          defaultValue={String(limit)}
        >
          <SelectTrigger className="w-[120px] bg-cyan-50">
            <SelectValue placeholder="Rows per page" />
          </SelectTrigger>
          <SelectContent className="bg-cyan-50">
            <SelectItem value="5">5</SelectItem>
            <SelectItem value="10">10</SelectItem>
            <SelectItem value="20">20</SelectItem>
            <SelectItem value="50">50</SelectItem>
          </SelectContent>
        </Select>

        {/* Prev / Next */}
        <div className="flex items-center gap-2">
          <Button
            variant="outline"
            disabled={page === 1}
            onClick={() => setPage((p) => Math.max(1, p - 1))}
          >
            Previous
          </Button>
          <span className="text-sm">
            Page {page} of {totalPages}
          </span>
          <Button
            variant="outline"
            disabled={page === totalPages}
            onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
          >
            Next
          </Button>
        </div>
      </div>
    </div>
  );
};

export default InventoriesClient;