"use client";

import { useEffect, useState } from "react";
import { columns } from "@/components/admin/deliveryCost/deliveryCostColumns";
import { DataTable } from "./DataTable";
import Loader from "@/components/common/Loader";
import { Button } from "@/components/ui/button";
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select";

const DeliveryCostsClient = () => {
  const [loading, setLoading] = useState(true);
  const [deliveryCosts, setDeliveryCosts] = useState<DeliveryCostType[]>([]);
  const [page, setPage] = useState(1)
  const [limit, setLimit] = useState(10)
  const [total, setTotal] = useState(0)

  const totalPages = Math.ceil(total / limit)

  const getDeliveryCosts = async () => {
    try {
      const res = await fetch(`/api/admin/deliveryCost?page=${page}&limit=${limit}`, );

      const data = await res.json();
      setDeliveryCosts(data.deliveryCosts);
      setTotal(data.total);

    } catch (err) {
      console.error("[DeliveryCost_GET]", err);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    getDeliveryCosts();
  }, []);

  return loading ? (
    <Loader />
  ) : (
    <div className="space-y-6 pt-5 px-2">
      <div className="flex items-center justify-between">
        <h1 className="text-3xl font-bold tracking-tight">Delivery Costs</h1>
      </div>
      <DataTable
        columns={columns}
        data={deliveryCosts}
        searchKey="title"
      />

            {/* 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 DeliveryCostsClient