"use client";

import { useCallback, useState, useTransition } from "react";
import { usePathname, useRouter } from "next/navigation";
import { Loader2, RefreshCw } from "lucide-react";

import { Button } from "@/components/ui/button";

type DataTableRefreshButtonProps = {
  onRefresh?: () => void;
  isRefreshing?: boolean;
};

/**
 * Refresh clears URL filters (navigate to pathname) then reloads server data,
 * matching frontend module list Refresh behavior.
 */
export function DataTableRefreshButton({ isRefreshing, onRefresh }: DataTableRefreshButtonProps) {
  const router = useRouter();
  const pathname = usePathname();
  const [internalRefreshing, setInternalRefreshing] = useState(false);
  const [isPending, startTransition] = useTransition();

  const clearFiltersAndRefresh = useCallback(() => {
    setInternalRefreshing(true);
    startTransition(() => {
      router.replace(pathname, { scroll: false });
      router.refresh();
      setTimeout(() => setInternalRefreshing(false), 400);
    });
  }, [pathname, router]);

  const busy = isRefreshing ?? (internalRefreshing || isPending);

  return (
    <Button
      variant="outline"
      size="sm"
      className="gap-1.5"
      onClick={onRefresh ?? clearFiltersAndRefresh}
      disabled={busy}
    >
      {busy ? <Loader2 className="size-4 animate-spin" /> : <RefreshCw className="size-4" />}
      Refresh
    </Button>
  );
}