ColumnManager

"use client";

import { Popover } from "@base-ui-components/react/popover";
import * as React from "react";
import { cn } from "@/lib/ledger/cn";
import { EllipsisVerticalIcon, ViewColumnsIcon } from "@/components/ledger/icons";

export type ManagedColumn = { id: string; label: string; visible: boolean; locked?: boolean };

export interface ColumnManagerProps {
  className?: string;
  columns: ManagedColumn[];
  onChange: (columns: ManagedColumn[]) => void;
}

/**
 * Show / hide / reorder. Persisted per user per table. Keyboard reorder via
 * Cmd+arrows, because drag alone is not an accessible reorder.
 */
export function ColumnManager({ columns, onChange, className }: ColumnManagerProps) {
  const [dragIndex, setDragIndex] = React.useState<number | null>(null);

  const move = (from: number, to: number) => {
    if (to < 0 || to >= columns.length) return;
    const next = [...columns];
    const [item] = next.splice(from, 1);
    next.splice(to, 0, item);
    onChange(next);
  };

  return (
    <Popover.Root>
      <Popover.Trigger
        className={cn(
          "inline-flex h-8 items-center gap-2 rounded-sm border border-border bg-surface px-3 text-label font-medium",
          "transition-colors duration-1 ease-standard hover:bg-surface-hover",
          className,
        )}
      >
        <ViewColumnsIcon aria-hidden="true" className="size-3.5" />
        Columns
      </Popover.Trigger>
      <Popover.Portal>
        <Popover.Positioner align="end" className="z-dropdown" sideOffset={8}>
          <Popover.Popup
            className="w-[260px] rounded-md border border-border bg-surface-raised p-2 shadow-elevation-3"
            style={{ transformOrigin: "var(--transform-origin)" }}
          >
            <ul>
              {columns.map((col, i) => (
                <li
                  className="flex items-center gap-2 rounded-xs px-2 py-1.5 hover:bg-surface-hover"
                  draggable={!col.locked}
                  key={col.id}
                  onDragOver={(e) => e.preventDefault()}
                  onDragStart={() => setDragIndex(i)}
                  onDrop={() => {
                    if (dragIndex !== null) move(dragIndex, i);
                    setDragIndex(null);
                  }}
                >
                  <EllipsisVerticalIcon
                    aria-hidden="true"
                    className={cn("size-3.5 text-text-tertiary", col.locked && "opacity-30")}
                  />
                  <label className="flex flex-1 items-center gap-2 text-body">
                    <input
                      checked={col.visible}
                      className="size-4 accent-[var(--accent)]"
                      disabled={col.locked}
                      onChange={() =>
                        onChange(columns.map((c) => (c.id === col.id ? { ...c, visible: !c.visible } : c)))
                      }
                      type="checkbox"
                    />
                    {col.label}
                  </label>
                  <button
                    aria-label={`Move ${col.label} up`}
                    className="text-caption text-text-tertiary hover:text-text-primary"
                    onClick={() => move(i, i - 1)}
                    onKeyDown={(e) => {
                      if (e.metaKey && e.key === "ArrowUp") move(i, i - 1);
                      if (e.metaKey && e.key === "ArrowDown") move(i, i + 1);
                    }}
                    type="button"
                  >
                    ↑
                  </button>
                  <button
                    aria-label={`Move ${col.label} down`}
                    className="text-caption text-text-tertiary hover:text-text-primary"
                    onClick={() => move(i, i + 1)}
                    type="button"
                  >
                    ↓
                  </button>
                </li>
              ))}
            </ul>
          </Popover.Popup>
        </Popover.Positioner>
      </Popover.Portal>
    </Popover.Root>
  );
}