import { Column } from "@tanstack/react-table";
import { ArrowDown, ArrowUp, ChevronsUpDown, EyeOff } from "lucide-react";
import { useEffect } from "react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

import { useSearchParams, usePathname, useRouter } from "next/navigation";

interface DataTableColumnHeaderProps<TData, TValue>
  extends React.HTMLAttributes<HTMLDivElement> {
  column: Column<TData, TValue>;
  title: string;
  ascPlaceholder?: string;
  descPlaceholder?: string;
  hidePlaceholder?: string;
}

export function DataTableColumnHeader<TData, TValue>({
  column,
  title,
  className,
  ascPlaceholder = "Asc",
  descPlaceholder = "Desc",
  hidePlaceholder = "Hide",
}: DataTableColumnHeaderProps<TData, TValue>) {
  const searchParams = useSearchParams();
  const pathname = usePathname();
  const { replace } = useRouter();

  // Monitor search params for changes and reset sorting when they're cleared
  useEffect(() => {
    // If sort parameters were removed (like after clicking reset filters)
    const sortParam = searchParams.get("sort");

    // If this column is sorted but there's no sort param in URL,
    // or if another column is now sorted, reset this column's sort
    if (column.getIsSorted() && (!sortParam || sortParam !== column.id)) {
      column.clearSorting();
    }
  }, [searchParams, column]);

  const handleSort = (desc: boolean) => {
    const params = new URLSearchParams(searchParams);
    params.set("sort", column.id);
    params.set("order", desc ? "desc" : "asc");
    replace(`${pathname}?${params.toString()}`);
    column.toggleSorting(desc);
  };

  if (!column.getCanSort()) {
    return <div className={cn(className)}>{title}</div>;
  }

  return (
    <div className={cn("flex items-center space-x-2", className)}>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button
            variant="ghost"
            size="sm"
            className="-ml-3 h-8 data-[state=open]:bg-accent"
          >
            <span>{title}</span>
            {column.getIsSorted() === "desc" ? (
              <ArrowDown />
            ) : column.getIsSorted() === "asc" ? (
              <ArrowUp />
            ) : (
              <ChevronsUpDown />
            )}
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="start">
          <DropdownMenuItem onClick={() => handleSort(false)}>
            <ArrowUp className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
            {ascPlaceholder}
          </DropdownMenuItem>
          <DropdownMenuItem onClick={() => handleSort(true)}>
            <ArrowDown className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
            {descPlaceholder}
          </DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
            <EyeOff className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
            {hidePlaceholder}
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
}