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

const OrderPage = () => {
  const [orders, setOrders] = useState<OrdersType[]>([]);
  const [isLoading, setIsLoading] = useState<boolean>(true);
  const [page, setPage] = useState(1);
  const [limit, setLimit] = useState(10);
  const [total, setTotal] = useState(0);

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

  const fetchOrders = async () => {
    setIsLoading(true);
    const response = await fetch(`/api/admin/orders?page=${page}&limit=${limit}`, { cache: "no-store" });

    if (response.status === 200) {
      const data = await response.json();
      console.log(data);

      setOrders(data.orders);
      setTotal(data.total);
    }

    setIsLoading(false);
  };

  useEffect(() => {
    fetchOrders();
  }, [page, limit]); // ✅ re-fetch on page/limit change

  if (isLoading) {
    return <Loader2 className="animate-spin h-10 w-10 text-indigo-600 mx-auto mt-20" />;
  }

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

      {/* 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 OrderPage;