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

const AdminCustomerClient = () => {
  const [users, setUsers] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [page, setPage] = useState(1);
  const [limit, setLimit] = useState(10);
  const [total, setTotal] = useState(0);

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

  async function getAllUserData() {
    setLoading(true);
    const res = await fetch(`/api/admin/customers?page=${page}&limit=${limit}`, { cache: "no-store" });

    if (res.status === 200) {
      const data = await res.json();
      console.log(data); // debugging
      setUsers(data.users);
      setTotal(data.total);
    }
    setLoading(false);
  }

  useEffect(() => {
    getAllUserData();
  }, [limit, page]);

  if (loading) {
    return <Loader2 className="h-8 w-8 animate-spin text-gray-500" />;
  }

  return (
    <div className="space-y-4 px-2 py-3">
      <h1 className="text-3xl font-bold tracking-tight">Customers</h1>

      <DataTable columns={columns} data={users} />

      {/* Pagination Controls */}
      <div className="flex items-center justify-between mt-4">
        {/* Rows per page */}
        <Select
          onValueChange={(val) => {
            setLimit(Number(val));
            setPage(1); // reset page when limit changes
          }}
          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 buttons */}
        <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 AdminCustomerClient;