import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";
import { Columns2 } from "lucide-react";

export function ColumnVisibilityToggle({ table, label = "Columns" }) {
  const columns = table.getAllLeafColumns().filter(
    (col) => col.id !== "select" && col.id !== "actions"
  );

  const allVisible  = columns.every((col) => col.getIsVisible());
  
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="sm" className="h-8 text-xs gap-1.5">
          <Columns2 className="h-3.5 w-3.5" />
          {label}
        </Button>
      </DropdownMenuTrigger>

      <DropdownMenuContent align="end" className="w-52">
        <DropdownMenuLabel className="text-xs text-muted-foreground">
          Toggle visible columns
        </DropdownMenuLabel>
        <DropdownMenuSeparator />

        {/* ─── Show All ──────────────────────────────────────────────────── */}
        <DropdownMenuCheckboxItem
          checked={allVisible}
          onCheckedChange={(v) => table.toggleAllColumnsVisible(v)}
          className="text-xs font-medium"
        >
          Show All
        </DropdownMenuCheckboxItem>

        <DropdownMenuSeparator />

        {/* ─── Individual columns ────────────────────────────────────────── */}
        {columns.map((col) => {
          const headerLabel = typeof col.columnDef.header === "string"
            ? col.columnDef.header
            : col.id;

          return (
            <DropdownMenuCheckboxItem
              key={col.id}
              checked={col.getIsVisible()}
              onCheckedChange={(v) => col.toggleVisibility(v)}
              className="text-xs"
            >
              {headerLabel}
            </DropdownMenuCheckboxItem>
          );
        })}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}