"use client";
import { Separator } from "@radix-ui/react-separator";
import { Loader, Plus } from "lucide-react";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { columns } from "@/components/admin/variants/variantColumns";
import { DataTable } from "../../../customers/data-table";
import ToastMessage from "@/components/common/ToastMessage";
import { Button } from "@/components/ui/button";
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select";

const VariantsPage = ({ params }: { params: { productId: string } }) => {
  const router = useRouter();

  const [loading, setLoading] = useState(true);
  const [variants, setVariants] = useState([]);
  const [page, setPage] = useState(1);
  const [limit, setLimit] = useState(10);
  const [total, setTotal] = useState(0);

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

  useEffect(() => {
    const fetchVariants = async () => {
      const response = await fetch(
        `/api/admin/variants/product/${params.productId}?page=${page}&limit=${limit}`
      );
      if (response.status == 200) {
        const data = await response.json();

        setVariants(data.variants)
        setTotal(data.total)

      } else {
        ToastMessage("error", "Failed to fetch variants");
      }
    };
    fetchVariants();

    setLoading(false);
  }, [limit, page, params.productId]); // Added params.productId to dependency array

  return loading ? (
    <Loader />
  ) : (
    <div className="px-10 py-5">
      <div className="flex items-center justify-between">
        <p className="text-heading2-bold  text-grey-1 max-sm:text-heading4-bold">
          Variants of product #{params.productId}
        </p>
        <Button
          className="bg-blue-1 text-white max-sm:text-[12px] max-sm:w-[150px]"
          onClick={() => router.push("/admin/variants/new")}
        >
          <Plus className="h-4 w-4 mr-2 max-sm:h-3 max-sm:w-3" />
          Create Variant
        </Button>
      </div>
      <Separator className="bg-grey-1 my-4" />
      <DataTable columns={columns} data={variants} />

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