/* Copyright 2026 Marimo. All rights reserved. */
"use no memo";

// tanstack/table is not compatible with React compiler
// https://github.com/TanStack/table/issues/5567

import type { Table } from "@tanstack/react-table";
import { Columns3Icon, EyeIcon, EyeOffIcon, ScanEyeIcon } from "lucide-react";
import React, { useMemo } from "react";
import { ColumnName } from "@/components/datasources/components";
import { Button } from "@/components/ui/button";
import {
  Command,
  CommandEmpty,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
} from "@/components/ui/command";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { type BulkAction, useSelectList } from "@/components/ui/select-core";
import type { DataType } from "@/core/kernel/messages";
import { cn } from "@/utils/cn";
import { Events } from "@/utils/events";
import { smartMatchFilter } from "@/utils/smartMatch";
import { NAMELESS_COLUMN_PREFIX } from "./columns";
import {
  applyShowOnlyColumns,
  isShowingOnlyColumns,
} from "./hooks/use-column-visibility";
import { ShowOnlyColumnButton } from "./show-only-column-button";
import { INDEX_COLUMN_NAME, SELECT_COLUMN_ID } from "./types";

function getUserColumns<TData>(table: Table<TData>) {
  return table
    .getAllLeafColumns()
    .filter(
      (column) =>
        column.id !== SELECT_COLUMN_ID &&
        column.id !== INDEX_COLUMN_NAME &&
        !column.id.startsWith(NAMELESS_COLUMN_PREFIX),
    );
}

export const ColumnVisibilityDropdown = <TData,>({
  table,
}: {
  table: Table<TData>;
}) => {
  const userColumns = getUserColumns(table);
  const options = userColumns.map((column) => ({
    value: column.id,
    label: column.id,
    disabled: !column.getCanHide(),
    data: { dataType: column.columnDef.meta?.dataType },
  }));
  // Modeled as a select list over hidden columns: "selected" means hidden, so
  // the hook's pinning floats hidden columns to the top and freezes that order
  // while the menu is open.
  const hiddenIds = userColumns
    .filter((column) => !column.getIsVisible())
    .map((column) => column.id);
  const hideableIds = userColumns
    .filter((column) => column.getCanHide())
    .map((column) => column.id);
  const visibleHideableCount = hideableIds.filter(
    (id) => !hiddenIds.includes(id),
  ).length;

  const applyHidden = (next: string[] | string | null) => {
    const hidden = new Set(Array.isArray(next) ? next : []);
    table.setColumnVisibility((previous) => ({
      ...previous,
      ...Object.fromEntries(
        userColumns.map((column) => [column.id, !hidden.has(column.id)]),
      ),
    }));
  };

  const list = useSelectList<string>({
    options,
    value: hiddenIds,
    onChange: applyHidden,
    multiple: true,
    filterFn: smartMatchFilter,
    pinSelected: true,
  });
  // With selection modeling hidden columns, select-matching hides the visible
  // matches and deselect-matching shows the hidden ones.
  const matchingActions = list.bulkActions.filter(
    (
      action,
    ): action is Extract<
      BulkAction<string>,
      { kind: "select-matching" | "deselect-matching" }
    > =>
      action.kind === "select-matching" || action.kind === "deselect-matching",
  );
  const showOnlyMatchIds =
    list.searchQuery !== ""
      ? list.visibleOptions
          .filter((option) => !option.disabled)
          .map((option) => option.value)
      : [];
  const showOnlyColumnState = useMemo(
    () => ({
      visibleHideableColumnIds: hideableIds.filter(
        (id) => !hiddenIds.includes(id),
      ),
      hideableColumnIdSet: new Set(hideableIds),
    }),
    [hideableIds, hiddenIds],
  );
  const hasSearchBulkActions =
    showOnlyMatchIds.length > 0 || matchingActions.length > 0;

  return (
    <Popover open={list.open} onOpenChange={list.setOpen}>
      <PopoverTrigger asChild={true}>
        <Button
          variant="text"
          size="xs"
          data-testid="column-visibility-trigger"
          onMouseDown={Events.preventFocus}
          className={cn(
            "print:hidden text-xs gap-1",
            list.open ? "text-primary" : "text-muted-foreground",
          )}
        >
          <Columns3Icon className="w-3.5 h-3.5" />
          Columns
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-64 p-0" align="end">
        <Command shouldFilter={false}>
          <CommandInput
            placeholder="Search columns..."
            value={list.searchQuery}
            onValueChange={list.setSearchQuery}
          />
          <CommandList>
            <CommandEmpty>No results.</CommandEmpty>
            {list.searchQuery === "" ? (
              <>
                <CommandItem
                  value="__show_all__"
                  disabled={hiddenIds.length === 0}
                  onSelect={() => applyHidden([])}
                  className="cursor-pointer"
                >
                  <EyeIcon className="w-3 h-3 mr-1.5" />
                  Show all
                </CommandItem>
                <CommandItem
                  value="__hide_all__"
                  disabled={visibleHideableCount === 0}
                  onSelect={() => applyHidden(hideableIds)}
                  className="cursor-pointer"
                >
                  <EyeOffIcon className="w-3 h-3 mr-1.5" />
                  Hide all
                </CommandItem>
                <CommandSeparator />
              </>
            ) : (
              hasSearchBulkActions && (
                <>
                  <CommandItem
                    value="__show_only_matching__"
                    disabled={
                      showOnlyMatchIds.length === 0 ||
                      isShowingOnlyColumns(
                        showOnlyColumnState,
                        showOnlyMatchIds,
                      )
                    }
                    onSelect={() => {
                      applyShowOnlyColumns(table, showOnlyMatchIds);
                    }}
                    className="cursor-pointer"
                  >
                    <ScanEyeIcon className="w-3 h-3 mr-1.5" />
                    Show only {showOnlyMatchIds.length} matching
                  </CommandItem>
                  {matchingActions.map((action) => (
                    <CommandItem
                      key={action.kind}
                      value={`__bulk_${action.kind}`}
                      onSelect={action.run}
                      className="cursor-pointer"
                    >
                      {action.kind === "select-matching" ? (
                        <EyeOffIcon className="w-3 h-3 mr-1.5" />
                      ) : (
                        <EyeIcon className="w-3 h-3 mr-1.5" />
                      )}
                      {action.kind === "select-matching" ? "Hide" : "Show"}{" "}
                      {action.items.length} matching
                    </CommandItem>
                  ))}
                  <CommandSeparator />
                </>
              )
            )}
            {list.visibleOptions.map((option, index) => {
              const hidden = list.isChecked(option.value);
              const { dataType } = option.data as {
                dataType: DataType | undefined;
              };
              const isSectionBoundary =
                index === list.pinnedCount &&
                list.pinnedCount > 0 &&
                list.pinnedCount < list.visibleOptions.length;
              const label = (
                <span className="truncate" title={option.label}>
                  {option.label}
                </span>
              );
              return (
                <React.Fragment key={option.value}>
                  {isSectionBoundary && <CommandSeparator />}
                  <CommandItem
                    value={option.value}
                    disabled={option.disabled}
                    onSelect={() => list.toggle(option.value)}
                    className="flex items-center gap-1.5 cursor-pointer"
                  >
                    {dataType === undefined ? (
                      label
                    ) : (
                      <ColumnName
                        className="min-w-0"
                        columnName={label}
                        dataType={dataType}
                      />
                    )}
                    {!option.disabled && (
                      <span className="ml-auto flex shrink-0 items-center gap-0.5">
                        <ShowOnlyColumnButton
                          table={table}
                          columnIds={[option.value]}
                          disabled={isShowingOnlyColumns(showOnlyColumnState, [
                            option.value,
                          ])}
                          iconClassName="w-3 h-3"
                        />
                        <span
                          className={cn(
                            hidden ? "text-primary" : "text-muted-foreground",
                          )}
                        >
                          {hidden ? (
                            <EyeOffIcon className="w-3 h-3" />
                          ) : (
                            <EyeIcon className="w-3 h-3" />
                          )}
                        </span>
                      </span>
                    )}
                  </CommandItem>
                </React.Fragment>
              );
            })}
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  );
};