"use client";

import Link from "next/link";
import { useCallback, useState, useTransition } from "react";
import { usePathname, useRouter } from "next/navigation";
import type { ReactNode } from "react";
import { Download, Loader2, Plus, RefreshCw } from "lucide-react";

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

type Props = {
  createHref?: string;
  createLabel?: string;
  onExport?: () => void;
  exportLabel?: string;
  isExporting?: boolean;
  onRefresh?: () => void;
  isRefreshing?: boolean;
  refreshLabel?: string;
  prefixActions?: ReactNode;
  middleActions?: ReactNode;
  suffixActions?: ReactNode;
};

export function DataTableHeaderActions({
  createHref,
  createLabel = "Create new",
  onExport,
  exportLabel = "Export",
  isExporting,
  onRefresh,
  isRefreshing,
  refreshLabel = "Refresh",
  prefixActions,
  middleActions,
  suffixActions,
}: Props) {
  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 handleRefresh = onRefresh ?? clearFiltersAndRefresh;
  const busy = isRefreshing ?? (internalRefreshing || isPending);

  return (
    <div className="flex flex-wrap items-center gap-2">
      {prefixActions}
      {createHref ? (
        <Button size="sm" className="gap-1.5" asChild>
          <Link href={createHref}>
            <Plus className="size-4" />
            {createLabel}
          </Link>
        </Button>
      ) : null}
      {onExport ? (
        <Button
          variant="outline"
          size="sm"
          className="gap-1.5 border-sky-600 text-sky-700 hover:bg-sky-50"
          onClick={onExport}
          disabled={isExporting}
        >
          <Download className="size-4" />
          {exportLabel}
        </Button>
      ) : null}
      {middleActions}
      <Button
        variant="outline"
        size="sm"
        className="gap-1.5"
        onClick={handleRefresh}
        disabled={busy}
      >
        {busy ? <Loader2 className="size-4 animate-spin" /> : <RefreshCw className="size-4" />}
        {refreshLabel}
      </Button>
      {suffixActions}
    </div>
  );
}