RulesEditor

import { cn } from "cn"
import { createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, type ComponentProps, type ReactNode, type Ref } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select"
import { NUMERIC_CLASS } from "@/lib/format"
import {
  RULE_OPS,
  RULE_TONES,
  RULE_TONE_CLASS,
  columnName,
  compileCondition,
  compileFilter,
  opsFor,
  readColumnRule,
  readFilterRule,
  readSortRule,
  ruleProblem,
  ruleWords,
  type ColumnRule,
  type FilterRule,
  type ReadColumnRule,
  type ReadCondition,
  type ReadFilterRule,
  type ReadGridRules,
  type ReadSortRule,
  type RuleKind,
  type RuleOp,
  type RuleTone,
  type RuleValue,
  type RuleWords,
  type RuleWordsInput,
  type SortRule,
} from "@/lib/grid-rules"
import type { RowStore } from "@/lib/row-store"
import type { ColumnDef } from "@/components/ui/data-grid"

// An undefined word keeps its default, as DataGrid's labels do.
const defined = <W extends object>(words: W | undefined): Partial<W> => Object.fromEntries(Object.entries(words ?? {}).filter(([, word]) => word !== undefined)) as Partial<W>

// Callers own the sections and row markup. Items coordinate editing and reordering;
// the counts provider isolates feed updates from the editable fields.

export interface RulesEditorLabels {
  title: string
  highlights: string
  filters: string
  sort: string
  columns: string
  addHighlight: string
  addFilter: string
  addSort: string
  column: string
  condition: string
  value: string
  low: string
  high: string
  /** The one field for `in`: comma separated. */
  values: string
  tone: string
  /** What a highlight paints: the cell or the row. */
  paints: string
  cell: string
  row: string
  label: string
  direction: string
  asc: string
  desc: string
  remove: string
  moveUp: string
  moveDown: string
  /** The rows a highlight or filter matches: a template with `{n}`, or a function of the count, for a plural a template can't hold. */
  matches: string | ((n: number) => string)
  /** The rows the filters pass, `{n}`, of all `{m}`: a template, or a function of both counts. */
  shown: string | ((n: number, m: number) => string)
  noHighlights: string
  noFilters: string
  noSort: string
  dragHint: string
  /** An unnamed rule's name: `{kind}` the section's word, `{n}` its place. */
  itemName: string
  /** The comparisons', tones', and problems' words, as grid-rules writes them; a partial map keeps the rest. */
  ruleWords: RuleWordsInput
}

export const DEFAULT_RULES_EDITOR_LABELS: RulesEditorLabels = {
  title: "Rules",
  highlights: "Highlights",
  filters: "Filters",
  sort: "Sort",
  columns: "Columns",
  addHighlight: "Add highlight",
  addFilter: "Add filter",
  addSort: "Add sort key",
  column: "Column",
  condition: "Condition",
  value: "Value",
  low: "Low",
  high: "High",
  values: "Values, comma separated",
  tone: "Tone",
  paints: "Paints",
  cell: "the cell",
  row: "the row",
  label: "Label",
  direction: "Direction",
  asc: "ascending",
  desc: "descending",
  remove: "Remove",
  moveUp: "Move up",
  moveDown: "Move down",
  matches: (n) => `${n.toLocaleString()} ${n === 1 ? "row matches" : "rows match"}`,
  shown: (n, m) => `${n.toLocaleString()} of ${m.toLocaleString()} ${m === 1 ? "row" : "rows"} ${n === 1 ? "shows" : "show"}`,
  noHighlights: "No highlights. Add one to color a cell or a row when a value crosses a line.",
  noFilters: "No filters. Every row shows.",
  noSort: "No sort keys. Rows keep their arrival order, or the order a header sets.",
  dragHint: "Drag a rule, or hold Alt with an arrow key, to reorder. The first rule that applies wins.",
  itemName: "{kind} {n}",
  ruleWords: {},
}

export type RulesEditorKind = "highlights" | "filters" | "sort"

export interface RulesEditorProps<T> extends ComponentProps<"div"> {
  columns: ColumnDef<T>[]
  /** Rules as written, or read from saved data with `readRules`. */
  rules: ReadGridRules
  /** Each edit. An edit can leave a rule incomplete, as typing does, so it comes back in the read type the grid takes. */
  onRulesChange: (rules: ReadGridRules) => void
  /** Rows for independent match counts and the combined filter total. */
  store?: RowStore<T>
  labels?: Partial<RulesEditorLabels>
  children: ReactNode
}

const OPS_WITH_VALUE = new Set<RuleOp>(["eq", "ne", "gt", "gte", "lt", "lte", "contains", "startsWith"])

/** What a condition's op wants typed: one value, two (a range), many (a set), or nothing. */
export function valueShape(op: RuleOp | string | undefined): "one" | "two" | "many" | "none" {
  if (OPS_WITH_VALUE.has(op as RuleOp)) return "one"
  if (op === "between") return "two"
  if (op === "in") return "many"
  return "none"
}

/** A list of values from one field, comma separated, trimmed, empties dropped. */
export function parseValues(text: string): RuleValue[] {
  return text
    .split(",")
    .map((part) => part.trim())
    .filter((part) => part !== "")
}

/** The one field's text for a list of values. */
export function valuesText(values: readonly RuleValue[] | undefined): string {
  return (values ?? []).map((value) => (value === null ? "" : String(value))).join(", ")
}

/** The condition with a new op: the typed values are kept when the new op wants the same shape and dropped otherwise. */
export function withOp(condition: ReadCondition, op: RuleOp): ReadCondition & { op: RuleOp } {
  // An op no version knows says nothing about the value's shape: keep what was typed, for the new op to read.
  if (valueShape(condition.op) === valueShape(op) || !isKnownOp(condition.op)) return { ...condition, op }
  return { ...withoutValues(condition), op }
}

/** The condition for a new column: its op if the column offers it, else the column's first, and the values dropped either way when the op changed. */
export function withColumn<T>(condition: ReadCondition, column: ColumnDef<T> | undefined): ReadCondition & { op: RuleOp } {
  const ops = opsFor(column)
  return isKnownOp(condition.op) && ops.includes(condition.op) ? (condition as ReadCondition & { op: RuleOp }) : { ...withoutValues(condition), op: ops[0]! }
}

/** A list with one item moved to another's index, the rest shifting to make room. */
export function moveItem<X>(list: readonly X[], from: number, to: number): X[] {
  if (from === to || from < 0 || to < 0 || from >= list.length || to >= list.length) return [...list]
  const next = [...list]
  const [item] = next.splice(from, 1)
  next.splice(to, 0, item!)
  return next
}

let ruleCounter = 0
/** An id for a new highlight, unique on this page. */
export function newRuleId(): string {
  ruleCounter += 1
  return `rule-${Date.now().toString(36)}-${ruleCounter}`
}

/** A new highlight on the first column, its first op, in `up`. */
export function newHighlight<T>(columns: readonly ColumnDef<T>[]): ColumnRule {
  const column = columns[0]
  return { id: newRuleId(), column: column?.key ?? "", when: { op: opsFor(column)[0]! }, tone: "up" }
}

/** A new filter on the first column, its first op. */
export function newFilter<T>(columns: readonly ColumnDef<T>[]): FilterRule {
  const column = columns[0]
  return { column: column?.key ?? "", op: opsFor(column)[0]! }
}

// A rule list that is not a list reads as none; its entries are read through grid-rules' readers where they are used,
// so an entry that is not an object renders and counts nothing and keeps the source indices of the rest.
const listOf = <R,>(value: readonly R[] | undefined): readonly R[] => (Array.isArray(value) ? value : [])
const NO_CONDITION: ReadCondition = Object.freeze({})
// A tone this version paints with, as opposed to text saved by another or by hand.
const isKnownTone = (tone: string | undefined): tone is RuleTone => tone !== undefined && (RULE_TONES as readonly string[]).includes(tone)
// An op this version knows, as opposed to text saved by another or by hand.
const isKnownOp = (op: string | undefined): op is RuleOp => op !== undefined && (RULE_OPS as readonly string[]).includes(op)
// A condition without its typed values, every other field it carries kept.
function withoutValues(condition: ReadCondition): ReadCondition {
  const rest = { ...condition }
  delete rest.value
  delete rest.values
  return rest
}

/** A new sort key on the first column not yet in the list, ascending. */
export function newSort<T>(columns: readonly ColumnDef<T>[], existing: readonly ReadSortRule[] = []): SortRule {
  const used = new Set(listOf(existing).flatMap((entry) => { const rule = readSortRule(entry); return rule ? [rule.key] : [] }))
  const column = columns.find((c) => !used.has(c.key)) ?? columns[0]
  return { key: column?.key ?? "", dir: "asc" }
}

function fill(template: string, values: Record<string, number>): string {
  return template.replace(/\{(\w+)\}/g, (_, name: string) => (values[name] ?? 0).toLocaleString())
}

/** The store's version, at most once per `ms`, so a busy feed does not redraw the editor every frame. */
function useThrottledVersion<T>(store: RowStore<T> | undefined, ms: number): number {
  const [version, setVersion] = useState(() => store?.getMeta().version ?? 0)
  useEffect(() => {
    if (!store) return
    let timer: ReturnType<typeof setTimeout> | null = null
    const unsubscribe = store.subscribeMeta(() => {
      if (timer !== null) return
      timer = setTimeout(() => {
        timer = null
        setVersion(store.getMeta().version)
      }, ms)
    })
    return () => {
      unsubscribe()
      if (timer !== null) clearTimeout(timer)
    }
  }, [store, ms])
  return version
}

// One empty list per kind, so a rules object without a list does not hand the memos a fresh array every render.
const NO_RULES: ReadGridRules = {}
const NO_HIGHLIGHTS: ReadColumnRule[] = []
const NO_FILTERS: ReadFilterRule[] = []
// Any one entry of a rule list, as the editor reads it.
type AnyRule = ReadColumnRule | ReadFilterRule | ReadSortRule

function countMatching<T>(store: RowStore<T>, test: (row: T) => boolean): number {
  let n = 0
  for (const id of store.getIds()) {
    const row = store.getRow(id)
    if (row !== undefined && test(row)) n++
  }
  return n
}

export interface RulesEditorState {
  rules: ReadGridRules
  labels: RulesEditorLabels
  columns: { key: string; name: string; ops: readonly RuleOp[] }[]
  /** Why a rule cannot apply, judged as the kind of rule it is, or null. */
  problem: (rule: ReadColumnRule | ReadFilterRule, kind: RuleKind) => string | null
  change: (next: Partial<ReadGridRules>) => void
  add: (kind: RulesEditorKind) => void
  move: (kind: RulesEditorKind, from: number, to: number) => void
  remove: (kind: RulesEditorKind, index: number) => void
}

const EditorContext = createContext<RulesEditorState | null>(null)

/** Read the controlled rules and edit operations for custom lists and controls. */
export function useRulesEditor(): RulesEditorState {
  const value = useContext(EditorContext)
  if (!value) throw new Error("RulesEditor parts must be inside RulesEditor")
  return value
}

interface Counts {
  highlights: number[] | null
  filters: number[] | null
  shown: { n: number; m: number } | null
}
const CountsContext = createContext<Counts>({ highlights: null, filters: null, shown: null })

// A feed notification updates only count consumers, even when the fields are not memoized.
function CountsProvider<T>({ store, columns, rules, children }: Pick<RulesEditorProps<T>, "store" | "columns" | "children"> & { rules: ReadGridRules }) {
  const highlights = Array.isArray(rules.columns) ? rules.columns : NO_HIGHLIGHTS
  const filters = Array.isArray(rules.filter) ? rules.filter : NO_FILTERS
  const byKey = useMemo(() => new Map(columns.map((c) => [c.key, c])), [columns])
  const version = useThrottledVersion(store, 250)
  const highlightCounts = useMemo(() => {
    void version
    return store ? highlights.map((entry) => {
      const rule = readColumnRule(entry)
      const column = rule?.column === undefined ? undefined : byKey.get(rule.column)
      return rule && column ? countMatching(store, compileCondition(rule.when, column)) : 0
    }) : null
  }, [store, highlights, byKey, version])
  const filterCounts = useMemo(() => {
    void version
    return store ? filters.map((entry) => {
      const rule = readFilterRule(entry)
      const column = rule?.column === undefined ? undefined : byKey.get(rule.column)
      return rule && column ? countMatching(store, compileCondition(rule, column)) : 0
    }) : null
  }, [store, filters, byKey, version])
  const shown = useMemo(() => {
    void version
    return store ? { n: countMatching(store, compileFilter(filters, columns)), m: store.getIds().length } : null
  }, [store, filters, columns, version])
  return <CountsContext value={{ highlights: highlightCounts, filters: filterCounts, shown }}>{children}</CountsContext>
}

const LIST_KEY = { highlights: "columns", filters: "filter", sort: "sort" } as const

function isElement(target: EventTarget): target is Element {
  // Popouts can contain nodes created in either window, even after adoption back to the page.
  return "nodeType" in target && target.nodeType === 1
}

// Widget roles whose keyboard model uses the arrows, per the ARIA authoring practices, as the column chooser reads them.
const ARROW_OWNING_ROLES = new Set("application columnheader combobox grid gridcell listbox menu menubar menuitem menuitemcheckbox menuitemradio option radio radiogroup row rowheader scrollbar searchbox separator slider spinbutton tab tablist textbox toolbar tree treegrid treeitem".split(" "))

// Controls whose own keys matter: carets, selects, and ARIA widgets built on generic elements. A button owns no
// arrows. The walk checks the item itself last and stays inside it, so an item given an arrow-owning role keeps its keys.
// An item given an arrow-owning role keeps Alt with its arrows, so it names no keys for moving.
const roleOwnsArrows = (role: string | undefined) => Boolean(role && role.toLowerCase().split(/[\t\n\f\r ]+/).some((token) => ARROW_OWNING_ROLES.has(token)))

function arrowOwningTarget(target: EventTarget, item: HTMLElement) {
  if (!isElement(target)) return false
  for (let node: Element | null = target; node; node = node.parentElement) {
    if (node.matches('input:not([type="checkbox"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select, [contenteditable]:not([contenteditable="false"])')) return true
    const role = node.getAttribute("role")
    if (role && role.toLowerCase().split(/[\t\n\f\r ]+/).some((token) => ARROW_OWNING_ROLES.has(token))) return true
    if (node === item) break
  }
  return false
}

const DragContext = createContext<{ current: { kind: RulesEditorKind; index: number; list: readonly AnyRule[]; type: string; clear: () => void } | null }>({ current: null })

// Controlled callers may copy rules. Compare their data while dragging or awaiting focus
// restoration; property order and extra application fields do not matter.
function sameRuleList(left: readonly AnyRule[] | undefined, right: readonly AnyRule[]) {
  const fields = ["id", "column", "when", "op", "value", "values", "tone", "target", "label", "key", "dir"]
  if (left === right) return true
  // Data JSON cannot print (a bigint a caller put in a rule) is never the same list.
  try {
    return JSON.stringify(left, fields) === JSON.stringify(right, fields)
  } catch {
    return false
  }
}

function assignEditorRef<T>(ref: Ref<T> | undefined, node: T | null) {
  if (typeof ref === "function") return ref(node)
  if (ref) ref.current = node
}

function useEditorRef<T>(localRef: { current: T | null }, forwardedRef: Ref<T> | undefined) {
  return useCallback((node: T | null) => {
    localRef.current = node
    const cleanup = assignEditorRef(forwardedRef, node)
    return () => {
      localRef.current = null
      if (typeof cleanup === "function") cleanup()
      else assignEditorRef(forwardedRef, null)
    }
  }, [localRef, forwardedRef])
}

export function RulesEditor<T>({ columns, rules: given, onRulesChange, store, labels: labelsProp, children, className, ref, ...props }: RulesEditorProps<T>) {
  // Rules that are not an object (a null from storage) are no rules; read saved rules with readRules first.
  const rules: ReadGridRules = typeof given === "object" && given !== null ? given : NO_RULES
  const labels = { ...DEFAULT_RULES_EDITOR_LABELS, ...defined(labelsProp) }
  const root = useRef<HTMLDivElement>(null)
  const rootRef = useEditorRef(root, ref)
  const dragging = useRef<{ kind: RulesEditorKind; index: number; list: readonly AnyRule[]; type: string; clear: () => void } | null>(null)
  useLayoutEffect(() => {
    const drag = dragging.current
    if (!drag || sameRuleList(rules[LIST_KEY[drag.kind]], drag.list)) return
    drag.clear()
    dragging.current = null
  }, [rules])
  const focusAfter = useRef<{ rules: ReadGridRules; kind: RulesEditorKind; index: number; list: readonly AnyRule[]; active: Element; field?: string } | null>(null)
  useLayoutEffect(() => {
    const pending = focusAfter.current
    if (!pending || pending.rules === rules) return
    focusAfter.current = null
    const list = rules[LIST_KEY[pending.kind]]
    if (list === pending.rules[LIST_KEY[pending.kind]] || !sameRuleList(list, pending.list)) return
    const active = root.current?.ownerDocument.activeElement
    if (active !== pending.active && active !== root.current?.ownerDocument.body) return
    const item = root.current?.querySelector<HTMLElement>(`[data-rule-kind="${pending.kind}"][data-rule-row="${pending.index}"]`)
    const field = pending.field ? item?.querySelector<HTMLElement>(`[data-rule-field="${pending.field}"]`) : null
    const target = field && !field.matches(":disabled") ? field : item ?? root.current?.querySelector<HTMLElement>(`[data-rules-add="${pending.kind}"]`)
    target?.focus()
  }, [rules])
  const rememberFocus = (kind: RulesEditorKind, index: number, list: readonly AnyRule[]) => {
    const active = root.current?.ownerDocument.activeElement
    if (!active || !root.current?.contains(active)) return
    focusAfter.current = { rules, kind, index, list, active, field: active.getAttribute("data-rule-field") ?? undefined }
  }
  const change = (next: Partial<ReadGridRules>) => onRulesChange({ ...rules, ...next })
  const value: RulesEditorState = {
    rules,
    labels,
    columns: columns.map((column) => ({ key: column.key, name: columnName(column), ops: opsFor(column) })),
    problem: (rule, kind) => ruleProblem(rule, columns, kind, labels.ruleWords),
    change,
    add: (kind) => {
      if (kind === "highlights") change({ columns: [...listOf(rules.columns), newHighlight(columns)] })
      else if (kind === "filters") change({ filter: [...listOf(rules.filter), newFilter(columns)] })
      else change({ sort: [...listOf(rules.sort), newSort(columns, rules.sort)] })
    },
    move: (kind, from, to) => {
      const key = LIST_KEY[kind]
      const list = listOf<AnyRule>(rules[key])
      if (from === to || from < 0 || to < 0 || from >= list.length || to >= list.length) return
      const next = moveItem<AnyRule>(list, from, to)
      rememberFocus(kind, to, next)
      // The key and list originate from the same kind; spread preserves the other lists.
      change({ [key]: next })
    },
    remove: (kind, index) => {
      const key = LIST_KEY[kind]
      const list = listOf<AnyRule>(rules[key])
      if (index < 0 || index >= list.length) return
      const next = list.filter((_, i) => i !== index)
      rememberFocus(kind, Math.min(index, list.length - 2), next)
      change({ [key]: next })
    },
  }
  return (
    <EditorContext value={value}>
      <DragContext value={dragging}>
        <div role="region" aria-label={props["aria-labelledby"] ? undefined : labels.title} data-slot="tradecn-rules-editor" className={cn("flex min-w-0 flex-col gap-2 text-xs lining-nums tabular-nums", className)} {...props} ref={rootRef}>
          <CountsProvider store={store} columns={columns} rules={rules}>{children}</CountsProvider>
        </div>
      </DragContext>
    </EditorContext>
  )
}

type ActionProps = Omit<ComponentProps<typeof Button>, "children"> & { children: ReactNode }

export interface RulesEditorItemState {
  kind: RulesEditorKind
  index: number
  name: string
  columnKey: string
  /** The condition as read: its op can be missing, or text this version doesn't know. */
  condition: ReadCondition | null
  /** The highlight as read: any field can be missing. */
  highlight: ReadColumnRule | null
  /** The filter as read: any field can be missing. */
  filter: ReadFilterRule | null
  /** The sort key as read: its key can be missing. */
  sort: ReadSortRule | null
  problem: string | null
  /** The problem line's id, which the item and its fields point to while there's a problem. */
  problemId: string
  /** The editor's rule words, with yours over the defaults. */
  words: RuleWords
  setColumn: (key: string) => void
  setCondition: (condition: ReadCondition) => void
  updateHighlight: (patch: Partial<ReadColumnRule>) => void
  setDirection: (direction: "asc" | "desc") => void
}
const ItemContext = createContext<RulesEditorItemState | null>(null)
export function useRulesEditorItem(): RulesEditorItemState {
  const value = useContext(ItemContext)
  if (!value) throw new Error("Rule fields and actions must be inside RulesEditorItem")
  return value
}

export interface RulesEditorItemProps extends ComponentProps<"div"> {
  kind: RulesEditorKind
  index: number
  children: ReactNode
}
export function RulesEditorItem({ kind, index, className, onKeyDown, onDragStart, onDragOver, onDrop, onDragEnd, ...props }: RulesEditorItemProps) {
  const editor = useRulesEditor()
  const dragRef = useContext(DragContext)
  const dragType = `application/x-tradecn-rule-${useId()}`.toLowerCase()
  const [dragging, setDragging] = useState(false)
  useEffect(() => () => {
    if (dragRef.current?.type === dragType) dragRef.current = null
  }, [dragRef, dragType])
  // The entry as the grid reads it: names and words as text, and nothing for an entry that is not an object.
  const entry = listOf<unknown>(editor.rules[LIST_KEY[kind]])[index]
  const read = useMemo(() => (kind === "highlights" ? readColumnRule(entry) : kind === "filters" ? readFilterRule(entry) : readSortRule(entry)), [kind, entry])
  const highlight = kind === "highlights" ? (read as ReadColumnRule | null) : null
  const filter = kind === "filters" ? (read as ReadFilterRule | null) : null
  const sort = kind === "sort" ? (read as ReadSortRule | null) : null
  const rule = highlight ?? filter ?? sort
  const problemId = useId()
  if (!rule) return null
  let columnKey = highlight?.column ?? sort?.key ?? ""
  // A highlight whose condition is missing or not an object edits from a blank one, as a filter with no op does; an op
  // the column does not offer is shown as it is.
  let condition = highlight ? (highlight.when ?? NO_CONDITION) : null
  if (filter) {
    const { column, ...rest } = filter
    // A filter with no column edits from a blank one, so its select stays controlled.
    columnKey = column ?? ""
    condition = rest
  }
  const name = highlight?.label?.trim() || editor.labels.itemName.replace("{kind}", editor.labels[kind]).replace("{n}", (index + 1).toLocaleString())
  const words = ruleWords(editor.labels.ruleWords)
  const replace = (next: AnyRule) => {
    const key = LIST_KEY[kind]
    editor.change({ [key]: listOf<AnyRule>(editor.rules[key]).map((item, i) => i === index ? next : item) })
  }
  const state: RulesEditorItemState = {
    kind, index, name, columnKey, condition, highlight: highlight ?? null, filter: filter ?? null, sort: sort ?? null,
    problem: highlight ? editor.problem(highlight, "highlight") : filter ? editor.problem(filter, "filter") : sort && sort.key === undefined ? words.needsColumn : editor.columns.some((c) => c.key === columnKey) ? null : words.noColumn.replace("{name}", columnKey),
    problemId,
    words,
    setColumn: (key) => {
      if (sort) return replace({ ...sort, key })
      const ops = editor.columns.find((c) => c.key === key)?.ops ?? opsFor(undefined)
      const next = condition!.op !== undefined && (ops as readonly string[]).includes(condition!.op) ? condition! : { ...withoutValues(condition!), op: ops[0]! }
      replace(highlight ? { ...highlight, column: key, when: next } : { column: key, ...next })
    },
    setCondition: (next) => {
      if (highlight) replace({ ...highlight, when: next })
      // A filter with no column keeps none: the editor's blank is not a key.
      else if (filter) replace(filter.column === undefined ? { ...next } : { column: filter.column, ...next })
    },
    updateHighlight: (patch) => { if (highlight) replace({ ...highlight, ...patch }) },
    setDirection: (dir) => { if (sort) replace({ ...sort, dir }) },
  }
  return <ItemContext value={state}><div role="group" tabIndex={0} draggable aria-label={props["aria-labelledby"] ? undefined : name} aria-invalid={state.problem ? true : undefined} aria-describedby={state.problem ? state.problemId : undefined} aria-keyshortcuts={roleOwnsArrows(props.role) || (props.contentEditable !== undefined && props.contentEditable !== false && props.contentEditable !== "false") ? undefined : "Alt+ArrowUp Alt+ArrowDown"} data-rule-kind={kind} data-rule-row={index} data-rule-id={highlight?.id} data-filter-index={filter ? index : undefined} data-sort-index={sort ? index : undefined} data-dragging={dragging || undefined} className={cn("flex min-w-0 flex-wrap items-center gap-1.5 rounded-sm border border-border/60 p-1.5 outline-none focus-visible:border-foreground data-[dragging]:border-dashed data-[dragging]:border-foreground", className)} {...props}
    onKeyDown={(event) => {
      onKeyDown?.(event)
      // Plain Alt with an arrow, from this item's own elements: a portaled popover's controls bubble here through React
      // without being the item's, and a held Shift, Ctrl, or Meta makes another chord.
      if (event.defaultPrevented || event.nativeEvent.isComposing || !event.altKey || event.shiftKey || event.ctrlKey || event.metaKey || !["ArrowUp", "ArrowDown"].includes(event.key)) return
      if (!isElement(event.target) || !event.currentTarget.contains(event.target)) return
      // A select, a text field, or another control that uses the arrows keeps Alt with them: Alt+Down opens a select.
      if (arrowOwningTarget(event.target, event.currentTarget)) return
      event.preventDefault()
      event.stopPropagation()
      editor.move(kind, index, index + (event.key === "ArrowUp" ? -1 : 1))
    }}
    onDragStart={(event) => {
      onDragStart?.(event)
      if (event.defaultPrevented) return
      dragRef.current = { kind, index, list: listOf<AnyRule>(editor.rules[LIST_KEY[kind]]), type: dragType, clear: () => setDragging(false) }
      event.dataTransfer?.setData?.("text/plain", String(index))
      event.dataTransfer?.setData?.(dragType, "")
      if (event.dataTransfer) event.dataTransfer.effectAllowed = "move"
      setDragging(true)
    }}
    onDragOver={(event) => {
      onDragOver?.(event)
      if (event.defaultPrevented || dragRef.current?.kind !== kind || dragRef.current.index === index || !event.dataTransfer?.types.includes(dragRef.current.type)) return
      event.preventDefault()
      if (event.dataTransfer) event.dataTransfer.dropEffect = "move"
    }}
    onDrop={(event) => {
      onDrop?.(event)
      if (event.defaultPrevented || dragRef.current?.kind !== kind || !event.dataTransfer?.types.includes(dragRef.current.type)) return
      event.preventDefault()
      const from = dragRef.current.index
      dragRef.current.clear()
      dragRef.current = null
      editor.move(kind, from, index)
    }}
    onDragEnd={(event) => {
      onDragEnd?.(event)
      dragRef.current = null
      setDragging(false)
    }}
  /></ItemContext>
}

type SelectProps = Omit<ComponentProps<typeof NativeSelect>, "value" | "defaultValue" | "children">
// base-mira draws a small select at 10 px through `data-[size=sm]` on the select itself, which outranks a plain
// `[&_select]` on the wrapper. Naming the same attribute here outranks it back, so the fields hold the floor in every style.
const SELECT_SIZE = "[&_select[data-size=sm]]:text-xs"
export function RulesEditorColumn({ onChange, className, ...props }: SelectProps) {
  const { columns, labels } = useRulesEditor()
  const item = useRulesEditorItem()
  // A rule with no column shows a blank, first, so it is the one selected even beside a column keyed "", which the
  // grid would not use for it; a key no column has shows as it is.
  const missing = (item.highlight?.column ?? item.filter?.column ?? item.sort?.key) === undefined
  return <NativeSelect size="sm" aria-label={`${labels.column}: ${item.name}`} data-rule-field="column" className={cn(SELECT_SIZE, className)} {...props} value={item.columnKey} onChange={(event) => {
    onChange?.(event)
    if (!event.defaultPrevented) item.setColumn(event.target.value)
  }}>
    {(missing || !columns.some((c) => c.key === item.columnKey)) && <NativeSelectOption value={item.columnKey}>{item.columnKey}</NativeSelectOption>}
    {columns.map((c) => <NativeSelectOption key={c.key} value={c.key}>{c.name}</NativeSelectOption>)}
  </NativeSelect>
}

export function RulesEditorOperator({ onChange, className, ...props }: SelectProps) {
  const { columns, labels } = useRulesEditor()
  const item = useRulesEditorItem()
  const { words } = item
  if (!item.condition) return null
  const condition = item.condition
  const ops = columns.find((c) => c.key === item.columnKey)?.ops ?? opsFor(undefined)
  // A stored op the column does not offer (above on a text column, or one no version knows) stays the selected
  // option under its own word, so the select says what the grid applies.
  const current = condition.op ?? ""
  return <NativeSelect size="sm" aria-label={`${labels.condition}: ${item.name}`} data-rule-field="op" className={cn(SELECT_SIZE, className)} {...props} value={current} onChange={(event) => {
    onChange?.(event)
    if (!event.defaultPrevented) item.setCondition(withOp(condition, event.target.value as RuleOp))
  }}>
    {/* An op the column does not offer reads as its word; one no version knows reads quoted, apart from every word here. */}
    {!(ops as readonly string[]).includes(current) && <NativeSelectOption value={current}>{isKnownOp(current) ? words.ops[current] : current && `"${current}"`}</NativeSelectOption>}
    {ops.map((op) => <NativeSelectOption key={op} value={op}>{words.ops[op]}</NativeSelectOption>)}
  </NativeSelect>
}

type InputProps = Omit<ComponentProps<typeof Input>, "value" | "defaultValue">
export type RulesEditorValueProps = InputProps & { field?: "value" | "low" | "high" | "values" }
export function RulesEditorValue({ field = "value", ...props }: RulesEditorValueProps) {
  const { condition } = useRulesEditorItem()
  const shape = condition ? valueShape(condition.op) : "none"
  if (shape === "none" || (shape === "one" && field !== "value") || (shape === "two" && field !== "low" && field !== "high") || (shape === "many" && field !== "values")) return null
  return <ValueInput key={field} field={field} {...props} />
}

function ValueInput({ field, onChange, className, ...props }: InputProps & { field: NonNullable<RulesEditorValueProps["field"]> }) {
  const { labels } = useRulesEditor()
  const { condition, name, setCondition, problem, problemId } = useRulesEditorItem()
  const values = condition!.values
  // Keep a trailing comma under the hand, but accept a different controlled value immediately.
  const [draft, setDraft] = useState(() => valuesText(values))
  const [known, setKnown] = useState(values)
  if (values !== known) {
    setKnown(values)
    if (valuesText(parseValues(draft)) !== valuesText(values)) setDraft(valuesText(values))
  }
  const value = field === "values" ? draft : field === "value" ? condition!.value : values?.[field === "low" ? 0 : 1]
  return <Input aria-label={`${labels[field]}: ${name}`} aria-describedby={problem ? problemId : undefined} placeholder={labels[field]} spellCheck={false} autoComplete="off" data-rule-field={field} className={cn("h-6 px-1.5 text-xs md:text-xs", field === "values" ? "w-40" : field === "value" ? "w-28" : "w-24", className)} {...props} value={value == null ? "" : String(value)} onChange={(event) => {
    onChange?.(event)
    if (event.defaultPrevented) return
    const text = event.target.value
    if (field === "values") {
      setDraft(text)
      setCondition({ ...condition!, values: parseValues(text) })
    } else if (field === "value") setCondition({ ...condition!, value: text })
    else setCondition({ ...condition!, values: field === "low" ? [text, values?.[1] ?? ""] : [values?.[0] ?? "", text] })
  }} />
}

export function RulesEditorTone({ onChange, className, ...props }: SelectProps) {
  const { labels } = useRulesEditor()
  const { highlight, name, updateHighlight, words } = useRulesEditorItem()
  if (!highlight) return null
  const current = highlight.tone ?? ""
  return <NativeSelect size="sm" aria-label={`${labels.tone}: ${name}`} data-rule-field="tone" className={cn(SELECT_SIZE, className)} {...props} value={current} onChange={(event) => {
    onChange?.(event)
    if (!event.defaultPrevented) updateHighlight({ tone: event.target.value as RuleTone })
  }}>
    {!isKnownTone(current) && <NativeSelectOption value={current}>{current && `"${current}"`}</NativeSelectOption>}
    {RULE_TONES.map((tone) => <NativeSelectOption key={tone} value={tone}>{words.tones[tone]}</NativeSelectOption>)}
  </NativeSelect>
}

export function RulesEditorToneSwatch({ className, ...props }: ComponentProps<"span">) {
  const { highlight, words } = useRulesEditorItem()
  if (!highlight) return null
  return <span aria-hidden data-rule-swatch={highlight.tone} className={cn("rounded-sm px-1.5 py-0.5", isKnownTone(highlight.tone) && RULE_TONE_CLASS[highlight.tone], className)} {...props}>{isKnownTone(highlight.tone) ? words.tones[highlight.tone] : highlight.tone}</span>
}

export function RulesEditorTarget({ onChange, className, ...props }: SelectProps) {
  const { labels } = useRulesEditor()
  const { highlight, name, updateHighlight } = useRulesEditorItem()
  if (!highlight) return null
  return <NativeSelect size="sm" aria-label={`${labels.paints}: ${name}`} data-rule-field="target" className={cn(SELECT_SIZE, className)} {...props} value={highlight.target ?? "cell"} onChange={(event) => {
    onChange?.(event)
    if (!event.defaultPrevented) updateHighlight({ target: event.target.value === "row" ? "row" : "cell" })
  }}><NativeSelectOption value="cell">{labels.cell}</NativeSelectOption><NativeSelectOption value="row">{labels.row}</NativeSelectOption></NativeSelect>
}

export function RulesEditorLabel({ onChange, className, ...props }: InputProps) {
  const { labels } = useRulesEditor()
  const { highlight, name, updateHighlight } = useRulesEditorItem()
  if (!highlight) return null
  return <Input aria-label={`${labels.label}: ${name}`} placeholder={labels.label} spellCheck={false} autoComplete="off" data-rule-field="label" className={cn("h-6 w-36 px-1.5 text-xs md:text-xs", className)} {...props} value={highlight.label ?? ""} onChange={(event) => {
    onChange?.(event)
    if (!event.defaultPrevented) updateHighlight({ label: event.target.value })
  }} />
}

export function RulesEditorDirection({ onChange, className, ...props }: SelectProps) {
  const { labels } = useRulesEditor()
  const { sort, name, setDirection } = useRulesEditorItem()
  if (!sort) return null
  return <NativeSelect size="sm" aria-label={`${labels.direction}: ${name}`} data-rule-field="dir" className={cn(SELECT_SIZE, className)} {...props} value={sort.dir} onChange={(event) => {
    onChange?.(event)
    if (!event.defaultPrevented) setDirection(event.target.value === "desc" ? "desc" : "asc")
  }}><NativeSelectOption value="asc">{labels.asc}</NativeSelectOption><NativeSelectOption value="desc">{labels.desc}</NativeSelectOption></NativeSelect>
}

export function RulesEditorProblem({ className, ...props }: ComponentProps<"p">) {
  const { problem, problemId } = useRulesEditorItem()
  // The generated id comes last: the item and its fields point to it, so a caller's id can't take it away.
  return problem ? <p data-rule-problem className={cn("basis-full text-destructive", className)} {...props} id={problemId}>{problem}</p> : null
}

export function RulesEditorMatchCount({ className, ...props }: ComponentProps<"span">) {
  const { kind, index } = useRulesEditorItem()
  const { labels } = useRulesEditor()
  const counts = useContext(CountsContext)
  const n = kind === "sort" ? null : counts[kind]?.[index] ?? null
  return n === null ? null : <span data-rule-count={n} className={cn("text-muted-foreground", NUMERIC_CLASS, className)} {...props}>{typeof labels.matches === "function" ? labels.matches(n) : fill(labels.matches, { n })}</span>
}

export function RulesEditorFilterCount({ className, ...props }: ComponentProps<"span">) {
  const { labels } = useRulesEditor()
  const { shown } = useContext(CountsContext)
  return shown ? <span data-rules-shown={shown.n} className={cn("text-muted-foreground", NUMERIC_CLASS, className)} {...props}>{typeof labels.shown === "function" ? labels.shown(shown.n, shown.m) : fill(labels.shown, shown)}</span> : null
}

export function RulesEditorRuleCount({ kind, className, ...props }: ComponentProps<"span"> & { kind: RulesEditorKind }) {
  const { rules } = useRulesEditor()
  const n = listOf<unknown>(rules[LIST_KEY[kind]]).filter((entry) => typeof entry === "object" && entry !== null && !Array.isArray(entry)).length
  return n ? <span className={cn("text-muted-foreground", NUMERIC_CLASS, className)} {...props}>{n}</span> : null
}

export type RulesEditorAddProps = ActionProps & { kind: RulesEditorKind }
export function RulesEditorAdd({ kind, onClick, className, ...props }: RulesEditorAddProps) {
  const { add } = useRulesEditor()
  return <Button type="button" variant="outline" size="sm" data-rules-add={kind} className={cn("h-7 self-start px-2 text-xs", className)} {...props} onClick={(event) => {
    onClick?.(event)
    if (!event.defaultPrevented) add(kind)
  }} />
}

export type RulesEditorMoveProps = ActionProps & { direction: "up" | "down" }
export function RulesEditorMove({ direction, disabled, onClick, className, ...props }: RulesEditorMoveProps) {
  const { rules, labels, move } = useRulesEditor()
  const { kind, index, name } = useRulesEditorItem()
  const end = direction === "up" ? index === 0 : index === listOf<unknown>(rules[LIST_KEY[kind]]).length - 1
  return <Button type="button" variant="ghost" size="sm" aria-label={`${labels[direction === "up" ? "moveUp" : "moveDown"]}: ${name}`} data-rule-field={`move-${direction}`} className={cn("h-6 px-1.5 text-xs", className)} {...props} disabled={disabled || end} onClick={(event) => {
    onClick?.(event)
    if (!event.defaultPrevented) move(kind, index, index + (direction === "up" ? -1 : 1))
  }} />
}

export function RulesEditorRemove({ onClick, className, ...props }: ActionProps) {
  const { labels, remove } = useRulesEditor()
  const { kind, index, name } = useRulesEditorItem()
  return <Button type="button" variant="ghost" size="sm" aria-label={`${labels.remove}: ${name}`} data-rule-field="remove" className={cn("h-6 px-1.5 text-xs", className)} {...props} onClick={(event) => {
    onClick?.(event)
    if (!event.defaultPrevented) remove(kind, index)
  }} />
}

import { cn } from "cn"
import { createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, type ComponentProps, type DragEvent, type ReactNode, type Ref } from "react"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import { Input } from "@/components/ui/input"
import { NUMERIC_CLASS } from "@/lib/format"
import { RULE_TONES, RULE_TONE_CLASS, columnName, describeRule, readColumnRule, type ReadColumnRule, type RuleTone, type RuleWordsInput } from "@/lib/grid-rules"
import { EMPTY_COLUMN_STATE, type ColumnDef, type ColumnState } from "@/components/ui/data-grid"

// An undefined word keeps its default, as DataGrid's labels do.
const defined = <W extends object>(words: W | undefined): Partial<W> => Object.fromEntries(Object.entries(words ?? {}).filter(([, word]) => word !== undefined)) as Partial<W>

// The root coordinates controlled grid edits, search, drag ownership and focus.
// Callers own the collection, row contents and any surrounding dialog.

export interface ColumnChooserLabels {
  title: string
  description: string
  search: string
  /** Prefix of a checkbox's name: "Show Price". */
  show: string
  frozen: string
  /** A hidden item's spoken state. */
  hidden: string
  /** How many columns are hidden: a template with `{n}`, or a function of the count, for a plural a template can't hold. */
  hiddenCount: string | ((n: number) => string)
  /** Said before an item's width, which it shows in px. */
  width: string
  /** The rule badges' words, as grid-rules writes them; a partial map keeps the rest. */
  ruleWords: RuleWordsInput
  resetWidth: string
  moveUp: string
  moveDown: string
  resetAll: string
  empty: string
  dragHint: string
  /** Announcement templates accept {name}, and moves also accept {n} and {m}. */
  announceMove?: string
  announceReorder?: string
  announceShow?: string
  announceHide?: string
  announceResetWidth?: string
  announceReset?: string
}

export const DEFAULT_COLUMN_CHOOSER_LABELS: Required<ColumnChooserLabels> = {
  title: "Columns",
  description: "Show, hide, reorder, and size the columns of this grid.",
  search: "Find a column",
  show: "Show",
  frozen: "frozen",
  hidden: "hidden",
  hiddenCount: (n) => `${n.toLocaleString()} hidden`,
  width: "Width",
  ruleWords: {},
  resetWidth: "Reset width",
  moveUp: "Move up",
  moveDown: "Move down",
  resetAll: "Reset all",
  empty: "No column matches.",
  dragHint: "Up and Down move between columns, and Home and End jump to the ends. Drag a column, or hold Alt with an arrow key, to reorder; Alt+Home and Alt+End move to the edge. Space shows or hides a focused column, and Delete resets its width. Frozen columns stay first.",
  announceMove: "{name} moved to {n} of {m}.",
  announceReorder: "{name} reordered.",
  announceShow: "{name} shown.",
  announceHide: "{name} hidden.",
  announceResetWidth: "{name} width reset.",
  announceReset: "Column settings reset.",
}

export interface ColumnChooserProps<T> extends ComponentProps<"div"> {
  columns: ColumnDef<T>[]
  columnState: ColumnState
  onColumnStateChange: (state: ColumnState) => void
  /** The shared defaults restored by reset. Column state remains a complete snapshot. */
  baseState?: ColumnState
  /** Column keys in the collection's render order. Defaults to the search results. */
  presented?: readonly string[]
  /** Rules that name columns, said in words beside the columns they touch: written, or read from saved data. */
  rules?: readonly ReadColumnRule[]
  labels?: Partial<ColumnChooserLabels>
  children: ReactNode
}

/** One column as the chooser lists it. */
export interface ChooserRow<T> {
  column: ColumnDef<T>
  key: string
  name: string
  visible: boolean
  frozen: boolean
  /** The width in force: the state's, else the column's own. */
  width: number
  /** The state holds a width for it. */
  resized: boolean
  /** The rules on this column, each as the grid reads it. */
  rules: ReadColumnRule[]
}

/**
 * The columns in the order the grid shows them, frozen ones first, hidden ones in their place, with
 * the width in force and the rules that name each. A column hidden in its definition is not listed:
 * that is a decision in code, not one for this surface.
 */
export function chooserRows<T>(columns: ColumnDef<T>[], state: ColumnState, rules: readonly ReadColumnRule[] = []): ChooserRow<T>[] {
  const rank = new Map(state.order.map((key, index) => [key, index]))
  const hidden = new Set(state.hidden)
  const ordered = columns
    .filter((column) => !column.hidden)
    .map((column, index) => ({ column, rank: rank.get(column.key) ?? 1e6 + index }))
    .sort((a, b) => a.rank - b.rank)
    .map(({ column }) => column)
  const frozen = ordered.filter((column) => column.frozen === "left")
  const rest = ordered.filter((column) => column.frozen !== "left")
  // Each entry as the grid reads it, once: one that is not an object is no rule, and its names and words are text.
  const read = (Array.isArray(rules) ? rules : []).flatMap((entry) => {
    const rule = readColumnRule(entry)
    return rule ? [rule] : []
  })
  return [...frozen, ...rest].map((column) => ({
    column,
    key: column.key,
    name: columnName(column),
    visible: !hidden.has(column.key),
    frozen: column.frozen === "left",
    width: state.widths[column.key] ?? column.width,
    resized: column.key in state.widths,
    rules: read.filter((rule) => rule.column === column.key),
  }))
}

/** True when the state changes nothing: no order, no widths, nothing hidden. */
export function isDefaultColumnState(state: ColumnState): boolean {
  return state.order.length === 0 && Object.keys(state.widths).length === 0 && state.hidden.length === 0
}

/** The state with one column shown or hidden. */
export function setColumnVisible(state: ColumnState, key: string, visible: boolean): ColumnState {
  const hidden = state.hidden.filter((k) => k !== key)
  return { ...state, hidden: visible ? hidden : [...hidden, key] }
}

/** The state with one column's width forgotten, so the column's own width is in force again. */
export function resetColumnWidth(state: ColumnState, key: string): ColumnState {
  if (!(key in state.widths)) return state
  const widths = { ...state.widths }
  delete widths[key]
  return { ...state, widths }
}

/**
 * The state with one column moved to another's place, the rest shifting to make room. A column stays
 * on its own side of the frozen line: the grid leads with frozen columns whatever the order says, so a
 * move across the line would change nothing and is refused. The full order is written, hidden columns
 * in their places, so a column shown again comes back where it was.
 */
export function moveColumnTo<T>(rows: readonly ChooserRow<T>[], state: ColumnState, key: string, targetKey: string): ColumnState {
  if (key === targetKey) return state
  const from = rows.findIndex((row) => row.key === key)
  const to = rows.findIndex((row) => row.key === targetKey)
  if (from < 0 || to < 0 || rows[from]!.frozen !== rows[to]!.frozen) return state
  const keys = rows.map((row) => row.key)
  keys.splice(from, 1)
  keys.splice(to, 0, key)
  return { ...state, order: keys }
}

/** The state with one column moved one place up (-1) or down (1), on its own side of the frozen line. */
export function moveColumnBy<T>(rows: readonly ChooserRow<T>[], state: ColumnState, key: string, delta: -1 | 1): ColumnState {
  const index = rows.findIndex((row) => row.key === key)
  const target = rows[index + delta]
  if (index < 0 || !target) return state
  return moveColumnTo(rows, state, key, target.key)
}

/** Readings for a column, without accessors tied to the grid's row type. */
export interface ColumnChooserEntry extends Omit<ChooserRow<unknown>, "column" | "rules"> {
  /** The effective width differs from the root's reset baseline. */
  resized: boolean
  rules: { rule: ReadColumnRule; description: string }[]
}

export interface ColumnChooserState {
  rows: readonly ColumnChooserEntry[]
  shown: readonly ColumnChooserEntry[]
  presented: readonly ColumnChooserEntry[]
  query: string
  setQuery: (query: string) => void
  labels: ColumnChooserLabels
  hiddenCount: number
  isDefault: boolean
  reset: () => void
}

interface ChooserContextValue extends ColumnChooserState {
  announcements: ReturnType<typeof createAnnouncements>
  byKey: ReadonlyMap<string, ColumnChooserItemState>
  startDrag: (key: string, event: DragEvent<HTMLDivElement>) => void
  dragOver: (key: string, event: DragEvent<HTMLDivElement>) => void
  drop: (key: string, event: DragEvent<HTMLDivElement>) => void
  endDrag: (key?: string) => void
  focusFallback: () => void
  /** Each item subscribes for its own ownership, so focus moves re-render two items, not the list. */
  registrations: ChooserRegistrations
  registerItem: (key: string, node: HTMLElement | null, optedOut?: boolean, keylessItem?: boolean) => void
  focusStep: (from: string, step: -1 | 1 | "first" | "last") => void
}

interface ChooserRegistrations {
  nodes: Map<string, HTMLElement>
  optedOut: Set<string>
  /** Items that keep every native key: no roving stop, no arrow visits — they own a Tab stop. */
  keyless: Set<string>
  subscribe: (listener: () => void) => () => void
  /** The one presented, registered, coordinated key currently in the tab order. */
  owner: () => string | null
  set: (key: string, node: HTMLElement | null, opted: boolean, keylessItem: boolean) => void
  present: (keys: readonly string[]) => void
  focus: (key: string) => void
  /** Re-resolves against live availability; publishes only when the owner moves. */
  refresh: () => void
  /** The collection's root, the boundary for judging an item's own availability. */
  setRoot: (node: HTMLElement | null) => void
}

const ChooserContext = createContext<ChooserContextValue | null>(null)
const ItemContext = createContext<ColumnChooserItemState | null>(null)
const ControlsContext = createContext<((kind: "visibility" | "resetWidth", element: () => HTMLElement | null) => () => void) | null>(null)

const NO_CONTROL_ELEMENT = () => null

function useChooserContext() {
  const value = useContext(ChooserContext)
  if (!value) throw new Error("ColumnChooser parts must be inside ColumnChooser")
  return value
}

export function useColumnChooser(): ColumnChooserState {
  return useChooserContext()
}

export interface ColumnChooserItemState {
  row: ColumnChooserEntry
  canMoveUp: boolean
  canMoveDown: boolean
  dragging: boolean
  setVisible: (visible: boolean) => void
  move: (delta: -1 | 1) => void
  /** Move to the first or last presented place on the column's side of the frozen line. */
  moveToEdge: (edge: "start" | "end") => void
  resetWidth: () => void
}

export function useColumnChooserItem(): ColumnChooserItemState {
  const value = useContext(ItemContext)
  if (!value) throw new Error("Column readings and controls must be inside ColumnChooserItem")
  return value
}

function assignRef<T>(ref: Ref<T> | undefined, node: T | null) {
  if (typeof ref === "function") return ref(node)
  if (ref) ref.current = node
}

function useChooserRef<T>(localRef: { current: T | null }, forwarded: Ref<T> | undefined) {
  return useCallback((node: T | null) => {
    localRef.current = node
    const cleanup = assignRef(forwarded, node)
    return () => {
      localRef.current = null
      if (typeof cleanup === "function") cleanup()
      else assignRef(forwarded, null)
    }
  }, [localRef, forwarded])
}

/**
 * Unavailable for reasons of its own, judged no higher than the collection's root: a shared
 * ancestor mask hides every item equally and is not the item's fault. Display does not inherit,
 * so each step's own computed display is positional; visibility does inherit, so the item is
 * self-hidden only when the root itself still reads visible.
 */
function unavailableWithin(node: HTMLElement, root: HTMLElement | null) {
  if (!root || !root.contains(node)) return unavailable(node)
  if (node.matches(":disabled") || (node.matches("[aria-disabled=true]") && node.tabIndex < 0)) return true
  const mask = node.closest("[hidden], [aria-hidden=true], [inert]")
  if (mask && mask !== root && root.contains(mask)) return true
  const view = node.ownerDocument.defaultView
  const visibility = view?.getComputedStyle(node).visibility
  const rootVisibility = view?.getComputedStyle(root).visibility
  if ((visibility === "hidden" || visibility === "collapse") && rootVisibility !== visibility) return true
  for (let ancestor: HTMLElement | null = node; ancestor && ancestor !== root; ancestor = ancestor.parentElement) {
    const style = view?.getComputedStyle(ancestor)
    if (style?.display === "none" || style?.contentVisibility === "hidden") return true
  }
  // A closed details hides through the browser's own slotting, which no light ancestor's
  // attribute or style carries, so it is checked by element: content below the root inside a
  // closed details is the item's own fault, except the details' first summary, which stays
  // rendered.
  if (insideClosedDetails(node, root)) return true
  return false
}

/**
 * A disabled fieldset suspends a control unless the control lives in that fieldset's first
 * legend, which HTML leaves enabled; an outer disabled fieldset can still suspend it.
 */
function fieldsetSuspended(el: HTMLElement) {
  for (let fieldset = el.closest("fieldset[disabled]"); fieldset; fieldset = fieldset.parentElement ? fieldset.parentElement.closest("fieldset[disabled]") : null) {
    const legend = Array.prototype.find.call(fieldset.children, (child: Element) => child.tagName === "LEGEND") as Element | undefined
    if (!legend || !legend.contains(el)) return true
  }
  return false
}

function insideClosedDetails(node: HTMLElement, boundary: HTMLElement | null) {
  for (let details = node.closest("details:not([open])"); details && details !== boundary && (!boundary || boundary.contains(details)); details = details.parentElement ? details.parentElement.closest("details:not([open])") : null) {
    const summary = Array.prototype.find.call(details.children, (child: Element) => child.tagName === "SUMMARY") as Element | undefined
    if (!summary || !summary.contains(node)) return true
  }
  return false
}

function unavailable(node: HTMLElement) {
  if (!node.isConnected || node.matches(":disabled") || (node.matches("[aria-disabled=true]") && node.tabIndex < 0) || node.closest("[hidden], [aria-hidden=true], [inert]")) return true
  // Where the platform has it, checkVisibility also sees hiding no ancestor attribute carries,
  // a closed details element's slotted content among it.
  if (typeof node.checkVisibility === "function" && !node.checkVisibility()) return true
  const view = node.ownerDocument.defaultView
  const visibility = view?.getComputedStyle(node).visibility
  if (visibility === "hidden" || visibility === "collapse") return true
  for (let ancestor: HTMLElement | null = node; ancestor; ancestor = ancestor.parentElement) {
    const style = view?.getComputedStyle(ancestor)
    if (style?.display === "none" || style?.contentVisibility === "hidden") return true
  }
  return false
}

function sameSettings<T>(left: readonly ChooserRow<T>[], right: readonly ChooserRow<T>[]) {
  return left.length === right.length && left.every((row, index) => {
    const other = right[index]!
    return row.key === other.key && row.visible === other.visible && Object.is(row.width, other.width)
  })
}

function normalizeSettings<T>(rows: readonly ChooserRow<T>[], state: ColumnState, baseRows: readonly ChooserRow<T>[], baseState: ColumnState): ColumnState {
  const keys = new Set(rows.map((row) => row.key))
  const baseByKey = new Map(baseRows.map((row) => [row.key, row]))
  const order = rows.every((row, index) => row.key === baseRows[index]?.key)
    ? [...new Set([...baseState.order].reverse())].reverse().filter((key) => keys.has(key))
    : rows.map((row) => row.key)
  const hidden = rows.every((row) => row.visible === baseByKey.get(row.key)?.visible)
    ? [...new Set(baseState.hidden)].filter((key) => keys.has(key))
    : [...new Set(state.hidden)].filter((key) => keys.has(key))
  const widths = Object.fromEntries(rows.flatMap((row) => {
    const source = Object.is(row.width, baseByKey.get(row.key)?.width) ? baseState : state
    const width = source.widths[row.key]
    return width === undefined ? [] : [[row.key, width]]
  }))
  return { order, widths, hidden }
}

type ChooserEdit = { kind: "move" | "show" | "hide" | "width"; key: string } | { kind: "reset" }

function createAnnouncements() {
  const empty = { text: "", revision: 0 }
  let snapshot = empty
  const listeners = new Set<() => void>()
  return {
    getSnapshot: () => snapshot,
    getServerSnapshot: () => empty,
    subscribe: (listener: () => void) => {
      listeners.add(listener)
      return () => {
        listeners.delete(listener)
        if (!listeners.size) snapshot = empty
      }
    },
    publish: (text: string) => {
      if (!listeners.size) return
      snapshot = { text, revision: snapshot.revision + 1 }
      listeners.forEach((listener) => listener())
    },
  }
}

function editAnnouncement(edit: ChooserEdit, rows: readonly ColumnChooserEntry[], presented: readonly ColumnChooserEntry[], labels: ColumnChooserLabels) {
  if (edit.kind === "reset") return labels.announceReset ?? DEFAULT_COLUMN_CHOOSER_LABELS.announceReset
  const row = rows.find((row) => row.key === edit.key)
  if (!row) return ""
  const index = presented.findIndex((row) => row.key === edit.key)
  const label = edit.kind === "move" ? (index < 0 ? "announceReorder" : "announceMove") : edit.kind === "show" ? "announceShow" : edit.kind === "hide" ? "announceHide" : "announceResetWidth"
  const template = labels[label] ?? DEFAULT_COLUMN_CHOOSER_LABELS[label]
  return template.replace(/\{(name|n|m)\}/g, (_, token: string) => token === "name" ? row.name : String(token === "n" ? index + 1 : presented.length))
}

export function ColumnChooser<T>({ columns, columnState, onColumnStateChange, baseState = EMPTY_COLUMN_STATE, presented, rules, labels: labelsProp, children, className, ref, role = "group", tabIndex = -1, "aria-label": ariaLabel, onFocusCapture, onBlurCapture, ...props }: ColumnChooserProps<T>) {
  const labels = { ...DEFAULT_COLUMN_CHOOSER_LABELS, ...defined(labelsProp) }
  const ruleWords = labels.ruleWords
  // Definition-hidden columns keep their settings if application policy exposes them later.
  const knownColumns = useMemo(() => columns.map((column) => column.hidden ? { ...column, hidden: false } : column), [columns])
  const stateRows = useMemo(() => chooserRows(knownColumns, columnState, rules), [knownColumns, columnState, rules])
  const baseRows = useMemo(() => chooserRows(knownColumns, baseState), [knownColumns, baseState])
  const rows = useMemo(() => {
    const editable = new Set(columns.filter((column) => !column.hidden).map((column) => column.key))
    const baseByKey = new Map(baseRows.map((row) => [row.key, row]))
    return stateRows.filter((row) => editable.has(row.key)).map(({ column, rules, ...row }) => ({ ...row, resized: !Object.is(row.width, baseByKey.get(row.key)?.width), rules: rules.map((rule) => ({ rule, description: describeRule(rule, [column], "highlight", ruleWords) })) }))
  }, [columns, stateRows, baseRows, ruleWords])
  const [query, setQuery] = useState("")
  const [dragging, setDragging] = useState<string | null>(null)
  const drag = useRef<{ key: string; frozen: boolean } | null>(null)
  const id = useId()
  const dragType = `application/x-tradecn-column-${id.replace(/[^a-z0-9]/gi, "").toLowerCase()}`
  const root = useRef<HTMLDivElement>(null)
  const rootRef = useChooserRef(root, ref)
  const focused = useRef<HTMLElement | null>(null)
  const q = query.trim().toLowerCase()
  const shown = q ? rows.filter((row) => row.name.toLowerCase().includes(q) || row.key.toLowerCase().includes(q)) : rows
  const rowByKey = new Map(rows.map((row) => [row.key, row]))
  const presentedRows = [...new Set(presented ?? shown.map((row) => row.key))].flatMap((key) => {
    const row = rowByKey.get(key)
    return row ? [row] : []
  })
  const neighbors = new Map<string, { up?: string; down?: string }>()
  for (const frozen of [true, false]) {
    const group = presentedRows.filter((row) => row.frozen === frozen)
    group.forEach((row, index) => neighbors.set(row.key, { up: group[index - 1]?.key, down: group[index + 1]?.key }))
  }
  const hiddenCount = rows.filter((row) => !row.visible).length
  const isDefault = sameSettings(stateRows, baseRows)
  // One presented item carries the tab stop; arrows move between items (roving focus). Items
  // register their nodes, and whether an explicit tabIndex opted them out, through a store each
  // item subscribes to for its own ownership alone, so registration, search, and focus moves
  // re-render the items they touch instead of the collection.
  const [registrations] = useState<ChooserRegistrations>(() => {
    const nodes = new Map<string, HTMLElement>()
    const optedOut = new Set<string>()
    const keyless = new Set<string>()
    const listeners = new Set<() => void>()
    let presented: readonly string[] = []
    let active: string | null = null
    let owner: string | null = null
    let rootEl: HTMLElement | null = null
    // The stop stays on the focused coordinated item while it is presented and registered, else
    // it falls to the first presented key with a usable registered item.
    const resolve = () => {
      const usable = (key: string) => {
        const node = nodes.get(key)
        return node !== undefined && !optedOut.has(key) && !unavailable(node)
      }
      // When nothing is usable — an ancestor masks every item — the stop falls back to an item
      // that is clean by its own fault, judged no higher than the collection's root: a standing
      // owner first, so a shared mask never moves the stop, then the focused item, then the
      // first presented one. Unreachable while hidden, tabbable the moment the mask lifts.
      const clean = (key: string) => {
        const node = nodes.get(key)
        return node !== undefined && !optedOut.has(key) && !unavailableWithin(node, rootEl)
      }
      // A registered coordinated item always leaves one stop standing: usable first, then clean
      // by its own fault, then — when a mask inside the root hides everything — any registered
      // item at all, the standing owner preferred at every tier.
      const registered = (key: string) => nodes.has(key) && !optedOut.has(key)
      const next = (active !== null && presented.includes(active) && usable(active) ? active : presented.find(usable))
        ?? (owner !== null && presented.includes(owner) && clean(owner) ? owner : undefined)
        ?? (active !== null && presented.includes(active) && clean(active) ? active : presented.find(clean))
        ?? (owner !== null && presented.includes(owner) && registered(owner) ? owner : undefined)
        ?? presented.find(registered)
        ?? null
      if (next === owner) return false
      owner = next
      return true
    }
    const publish = () => {
      for (const listener of listeners) listener()
    }
    return {
      nodes,
      optedOut,
      keyless,
      subscribe: (listener: () => void) => {
        listeners.add(listener)
        return () => void listeners.delete(listener)
      },
      owner: () => owner,
      set(key, node, opted, keylessItem) {
        if (node) {
          if (nodes.get(key) === node && optedOut.has(key) === opted && keyless.has(key) === keylessItem) return
          nodes.set(key, node)
          if (opted) optedOut.add(key)
          else optedOut.delete(key)
          if (keylessItem) keyless.add(key)
          else keyless.delete(key)
        } else {
          if (!nodes.has(key)) return
          nodes.delete(key)
          optedOut.delete(key)
          keyless.delete(key)
        }
        if (resolve()) publish()
      },
      present(keys) {
        presented = keys
        if (resolve()) publish()
      },
      focus(key) {
        active = key
        if (resolve()) publish()
      },
      refresh() {
        if (resolve()) publish()
      },
      setRoot(node) {
        rootEl = node
        if (resolve()) publish()
      },
    }
  })
  // The root is the boundary for judging an item's own availability.
  useLayoutEffect(() => {
    registrations.setRoot(root.current)
    return () => registrations.setRoot(null)
  }, [registrations])
  // A change inside the root can hide the owner without any commit — a collapsible kept
  // mounted, a class toggle, a details element. The root watches its own subtree and asks the
  // store to re-resolve; publish-on-change keeps it from looping, and the cost is scoped to
  // this collection's markup.
  useEffect(() => {
    const node = root.current
    if (!node) return
    const observer = new MutationObserver(() => registrations.refresh())
    observer.observe(node, { attributes: true, subtree: true, attributeFilter: ["hidden", "inert", "aria-hidden", "open", "class", "style"] })
    return () => observer.disconnect()
  }, [registrations])
  // Presentation order reaches the store after each commit; the owner moves only when it must.
  useLayoutEffect(() => {
    registrations.present(presentedRows.map((row) => row.key))
  })
  // Again after paint: a modal elsewhere can hold the page aria-hidden through the mount commit,
  // which reads every item as unusable; by now the transient is gone and the items subscribe.
  useEffect(() => {
    registrations.present(presentedRows.map((row) => row.key))
  })
  const registerItem = useCallback((key: string, node: HTMLElement | null, optedOut = false, keylessItem = false) => registrations.set(key, node, optedOut, keylessItem), [registrations])
  const focusStep = (from: string, step: -1 | 1 | "first" | "last") => {
    const keys = presentedRows.map((row) => row.key)
    const index = keys.indexOf(from)
    // Scan past unregistered or unavailable items: a hidden column between two live ones must
    // not wall off arrows, and Home and End walk inward from their edge to the first usable item.
    const usable = (key: string | undefined) => {
      if (key === undefined || registrations.keyless.has(key)) return null
      const node = registrations.nodes.get(key)
      return node && !unavailable(node) ? { key, node } : null
    }
    let found: { key: string; node: HTMLElement } | null = null
    if (step === "first" || step === "last") {
      for (const key of step === "first" ? keys : [...keys].reverse()) if ((found = usable(key))) break
    } else if (index >= 0) {
      for (let i = index + step; i >= 0 && i < keys.length; i += step) if ((found = usable(keys[i]))) break
    }
    if (!found || found.key === from) return
    // Navigation can visit an opted-out item, but the roving stop stays with a coordinated one.
    if (!registrations.optedOut.has(found.key)) registrations.focus(found.key)
    found.node.focus()
  }
  const [announcements] = useState(createAnnouncements)
  const committed = useRef({ state: columnState, rows: stateRows })
  const pending = useRef<{ state: ColumnState; before: ChooserRow<T>[]; rows: ChooserRow<T>[]; edit: ChooserEdit } | null>(null)
  useLayoutEffect(() => {
    const previous = committed.current
    committed.current = { state: columnState, rows: stateRows }
    if (sameSettings(previous.rows, stateRows)) return
    const proposed = pending.current
    // A child layout effect can submit the next edit before this root processes the current commit.
    if (proposed?.state === columnState && sameSettings(proposed.before, stateRows)) return
    pending.current = null
    if (previous.state !== columnState && proposed && sameSettings(proposed.rows, stateRows)) {
      const message = editAnnouncement(proposed.edit, rows, presentedRows, labels)
      if (message) announcements.publish(message)
    }
  })
  const focusFallback = useCallback(() => {
    const node = root.current
    if (!node?.isConnected) return
    const search = [...node.querySelectorAll<HTMLInputElement>("[data-column-search]:not(:disabled):not([hidden])")].find(input => input.closest("[data-slot=tradecn-column-chooser]") === node)
    const target = search && !unavailable(search) ? search : node
    target.focus()
  }, [])
  const endDrag = useCallback((key?: string) => {
    if (!drag.current || (key !== undefined && drag.current.key !== key)) return
    drag.current = null
    setDragging(null)
  }, [setDragging])
  useLayoutEffect(() => {
    const current = drag.current
    if (current && !rows.some((row) => row.key === current.key && row.frozen === current.frozen)) endDrag(current.key)
    const node = root.current
    const previous = focused.current
    if (node && previous && unavailable(previous) && (node.ownerDocument.activeElement === previous || node.ownerDocument.activeElement === node.ownerDocument.body)) focusFallback()
  })
  const change = (next: ColumnState, edit: ChooserEdit) => {
    if (next === columnState) return
    const nextRows = chooserRows(knownColumns, next)
    if (sameSettings(stateRows, nextRows)) return
    pending.current = { state: columnState, before: stateRows, rows: nextRows, edit }
    onColumnStateChange(normalizeSettings(nextRows, next, baseRows, baseState))
  }
  const byKey = new Map(rows.map((row): [string, ColumnChooserItemState] => [row.key, {
    row,
    canMoveUp: neighbors.get(row.key)?.up !== undefined,
    canMoveDown: neighbors.get(row.key)?.down !== undefined,
    dragging: dragging === row.key,
    setVisible: (visible) => change(setColumnVisible(columnState, row.key, visible), { kind: visible ? "show" : "hide", key: row.key }),
    move: (delta) => {
      const target = neighbors.get(row.key)?.[delta === -1 ? "up" : "down"]
      if (target !== undefined) change(moveColumnTo(stateRows, columnState, row.key, target), { kind: "move", key: row.key })
    },
    moveToEdge: (edge) => {
      if (!presentedRows.some((presentedRow) => presentedRow.key === row.key)) return
      const side = presentedRows.filter((presentedRow) => presentedRow.frozen === row.frozen)
      const target = edge === "start" ? side[0] : side[side.length - 1]
      if (target && target.key !== row.key) change(moveColumnTo(stateRows, columnState, row.key, target.key), { kind: "move", key: row.key })
    },
    resetWidth: () => {
      const width = baseState.widths[row.key]
      change(width === undefined ? resetColumnWidth(columnState, row.key) : { ...columnState, widths: { ...columnState.widths, [row.key]: width } }, { kind: "width", key: row.key })
    },
  }]))
  const accepts = (key: string, event: DragEvent<HTMLDivElement>) => {
    const current = drag.current
    const from = current && byKey.get(current.key)?.row
    const target = byKey.get(key)?.row
    return !!(current && from && target && current.key !== key && from.frozen === current.frozen && from.frozen === target.frozen && event.dataTransfer.types.includes(dragType))
  }
  return <ChooserContext value={{
    rows, shown, presented: presentedRows, query, setQuery, labels, hiddenCount, isDefault, byKey, focusFallback, endDrag, announcements,
    registrations, registerItem, focusStep,
    reset: () => change(baseState, { kind: "reset" }),
    startDrag: (key, event) => {
      const row = byKey.get(key)?.row
      if (!row) return
      event.dataTransfer.setData(dragType, key)
      event.dataTransfer.setData("text/plain", key)
      event.dataTransfer.effectAllowed = "move"
      drag.current = { key, frozen: row.frozen }
      setDragging(key)
    },
    dragOver: (key, event) => {
      if (!accepts(key, event)) return
      event.preventDefault()
      event.dataTransfer.dropEffect = "move"
    },
    drop: (key, event) => {
      const current = drag.current
      const accepted = accepts(key, event)
      if (current) endDrag(current.key)
      if (!accepted || !current) return
      event.preventDefault()
      change(moveColumnTo(stateRows, columnState, current.key, key), { kind: "move", key: current.key })
    },
  }}>
    <div role={role} tabIndex={tabIndex} aria-label={ariaLabel ?? (props["aria-labelledby"] ? undefined : labels.title)} data-hidden={hiddenCount} className={cn("flex min-w-0 flex-col gap-2 text-xs lining-nums tabular-nums", className)} {...props} data-slot="tradecn-column-chooser" ref={rootRef} onFocusCapture={(event) => {
      onFocusCapture?.(event)
      if (event.currentTarget.contains(event.target) && event.target.closest("[data-slot=tradecn-column-chooser]") === event.currentTarget) focused.current = event.target
    }} onBlurCapture={(event) => {
      onBlurCapture?.(event)
      if (!event.currentTarget.contains(event.relatedTarget) && (event.relatedTarget || !unavailable(event.target))) focused.current = null
    }}>{children}</div>
  </ChooserContext>
}

/** Mount once per chooser. Announces committed states matching pending edits; unrelated updates stay silent. */
export function ColumnChooserAnnouncer({ className, ...props }: Omit<ComponentProps<"span">, "children">) {
  const { announcements } = useChooserContext()
  const message = useSyncExternalStore(announcements.subscribe, announcements.getSnapshot, announcements.getServerSnapshot)
  return <span role="status" aria-live="polite" aria-atomic="true" className={cn("sr-only", className)} {...props}>{message.text && <span key={message.revision}>{message.text}</span>}</span>
}

export function ColumnChooserSearch({ onChange, className, "aria-label": ariaLabel, ...props }: Omit<ComponentProps<typeof Input>, "value" | "defaultValue">) {
  const { query, setQuery, labels } = useColumnChooser()
  return <Input aria-label={ariaLabel ?? (props["aria-labelledby"] ? undefined : labels.search)} placeholder={labels.search} spellCheck={false} autoComplete="off" data-column-search="" className={cn("h-7 max-w-56 text-xs md:text-xs", className)} {...props} value={query} onChange={(event) => {
    onChange?.(event)
    if (!event.defaultPrevented) setQuery(event.target.value)
  }} />
}

export function ColumnChooserHiddenCount({ className, ...props }: Omit<ComponentProps<"span">, "children">) {
  const { hiddenCount, labels } = useColumnChooser()
  return <span data-column-hidden-count={hiddenCount} className={cn("text-muted-foreground", NUMERIC_CLASS, className)} {...props}>{typeof labels.hiddenCount === "function" ? labels.hiddenCount(hiddenCount) : labels.hiddenCount.replace("{n}", hiddenCount.toLocaleString())}</span>
}

type ActionProps = Omit<ComponentProps<typeof Button>, "children"> & { children: ReactNode }

export function ColumnChooserResetAll({ type = "button", variant = "outline", size, disabled, onClick, className, ...props }: ActionProps) {
  const { isDefault, reset } = useColumnChooser()
  return <Button type={type} variant={variant} size={size === undefined ? "sm" : size} className={cn(size === undefined && "h-7 px-2 text-xs", className)} {...props} disabled={disabled || isDefault} onClick={(event) => {
    onClick?.(event)
    if (!event.defaultPrevented) reset()
  }} />
}

export interface ColumnChooserItemProps extends ComponentProps<"div"> {
  columnKey: string
  children: ReactNode
}

export function ColumnChooserItem({ columnKey, ...props }: ColumnChooserItemProps) {
  const { byKey } = useChooserContext()
  const item = byKey.get(columnKey)
  return item ? <ChooserItem key={columnKey} item={item} {...props} /> : null
}

function isElement(target: EventTarget): target is Element {
  // Popouts can contain nodes created in either window, even after adoption back to the page.
  return "nodeType" in target && target.nodeType === 1
}

function ownsItemEvent(event: { target: EventTarget; currentTarget: HTMLDivElement }) {
  return isElement(event.target) && event.currentTarget.contains(event.target) && event.target.closest("[data-slot=tradecn-column-chooser-item]") === event.currentTarget && event.target.closest("[data-slot=tradecn-column-chooser]") === event.currentTarget.closest("[data-slot=tradecn-column-chooser]")
}

// Widget roles whose keyboard model uses the arrows, per the ARIA authoring practices. A separator
// only receives keys when it is focusable, and a focusable separator is a splitter that owns them.
const ARROW_OWNING_ROLES = new Set("application columnheader combobox grid gridcell listbox menu menubar menuitem menuitemcheckbox menuitemradio option radio radiogroup row rowheader scrollbar searchbox separator slider spinbutton tab tablist textbox toolbar tree treegrid treeitem".split(" "))

// Controls whose own keys matter: carets, selects, radios, sliders, and ARIA widgets built on
// generic elements. Any recognized arrow-owning token counts, a conservative reading of fallback
// role lists. A checkbox or plain button owns no arrows. The walk checks the item itself last and
// stays inside it, so an editable item, or one given an arrow-owning role, keeps its own keys.
function arrowOwningTarget(target: EventTarget, item: HTMLElement) {
  if (!isElement(target)) return false
  for (let node: Element | null = target; node; node = node.parentElement) {
    if (node.matches('input:not([type="checkbox"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select, [contenteditable]:not([contenteditable="false"])')) return true
    const role = node.getAttribute("role")
    if (role && role.toLowerCase().split(/[\t\n\f\r ]+/).some((token) => ARROW_OWNING_ROLES.has(token))) return true
    if (node === item) break
  }
  return false
}

function ChooserItem({ item, className, ref, role = "group", tabIndex, draggable = true, "aria-label": ariaLabel, onKeyDown, onDragStart, onDragOver, onDrop, onDragEnd, onFocusCapture, onBlurCapture, ...props }: ComponentProps<"div"> & { item: ColumnChooserItemState }) {
  const { row, dragging, move, moveToEdge, setVisible, resetWidth } = item
  const { labels, focusFallback, startDrag, dragOver, drop, endDrag, registrations, registerItem, focusStep } = useChooserContext()
  const isOwner = useSyncExternalStore(registrations.subscribe, () => registrations.owner() === row.key, () => false)
  // An item made editable, or given an arrow-owning role of its own, keeps every native key:
  // the handler bows out, the metadata advertises nothing, the roving model opts it out, and
  // it owns a Tab stop of its own, since no arrow can reach it.
  const itemKeyless = (props.contentEditable !== undefined && props.contentEditable !== false && props.contentEditable !== "false") || (role ?? "").toLowerCase().split(/[\t\n\f\r ]+/).some((token) => ARROW_OWNING_ROLES.has(token))
  const [controls, setControls] = useState<{ visibility: { element: () => HTMLElement | null }[]; resetWidth: { element: () => HTMLElement | null }[] }>({ visibility: [], resetWidth: [] })
  const registerControl = useCallback((kind: "visibility" | "resetWidth", element: () => HTMLElement | null) => {
    // Each registration is its own token: two getter-less declarations share one element
    // function, and removing one must never remove the other.
    const token = { element }
    setControls((current) => ({ ...current, [kind]: [...current[kind], token] }))
    return () => setControls((current) => ({ ...current, [kind]: current[kind].filter((entry) => entry !== token) }))
  }, [])
  // Effectively enabled at press time: a declared control can still sit in a disabled fieldset,
  // where HTML leaves the first legend's controls enabled; a getter-less declaration counts as
  // live.
  const liveControl = (kind: "visibility" | "resetWidth") => controls[kind].some((entry) => {
    const el = entry.element()
    return !el || !(el.matches(":disabled") || fieldsetSuspended(el))
  })
  // The command runs through the live control itself when one is in the DOM: a click carries
  // every veto — onClick preventDefault, a checkbox's cancel, readOnly — exactly as a pointer
  // does. Only a getter-less public declaration falls back to the direct call.
  const runControl = (kind: "visibility" | "resetWidth", direct: () => void) => {
    for (const entry of controls[kind]) {
      const el = entry.element()
      if (el && !(el.matches(":disabled") || fieldsetSuspended(el))) {
        el.click()
        return
      }
    }
    direct()
  }
  const root = useRef<HTMLDivElement>(null)
  const rootRef = useChooserRef(root, ref)
  // Registration is a layout effect, not part of the ref: an inline caller ref changes identity
  // every render, and re-registering on each change would invalidate the provider's subscription
  // in a loop.
  useLayoutEffect(() => {
    registerItem(row.key, root.current, tabIndex !== undefined || itemKeyless, itemKeyless)
    return () => registerItem(row.key, null)
  }, [row.key, registerItem, tabIndex, itemKeyless])
  // Any commit of an item can change its availability — hidden, inert, aria-hidden, a class or
  // style that removes it — so every one re-resolves; the store publishes only when the owner
  // actually moves, which keeps re-renders from looping.
  useLayoutEffect(() => {
    registrations.refresh()
  })
  const focused = useRef<HTMLElement | null>(null)
  useLayoutEffect(() => {
    const node = root.current
    const previous = focused.current
    if (node && previous && unavailable(previous) && (node.ownerDocument.activeElement === previous || node.ownerDocument.activeElement === node.ownerDocument.body)) node.focus()
    // Keyed DOM moves can return focus to body without removing the focused control.
    else if (node && previous && node.contains(previous) && node.ownerDocument.activeElement === node.ownerDocument.body) previous.focus()
  })
  useLayoutEffect(() => {
    const node = root.current
    return () => {
      endDrag(row.key)
      if (node?.contains(node.ownerDocument.activeElement)) {
        const ownerDocument = node.ownerDocument
        queueMicrotask(() => {
          if (!node.isConnected && ownerDocument.activeElement === ownerDocument.body) focusFallback()
        })
      }
    }
  }, [row.key, endDrag, focusFallback])
  return <ItemContext value={item}><ControlsContext value={registerControl}><div role={role} tabIndex={tabIndex ?? (itemKeyless || isOwner ? 0 : -1)} draggable={draggable} aria-label={ariaLabel ?? (props["aria-labelledby"] ? undefined : row.name)} aria-description={row.visible ? undefined : labels.hidden} aria-keyshortcuts={itemKeyless ? undefined : `${controls.visibility.length ? "Space " : ""}Alt+ArrowUp Alt+ArrowDown Alt+Home Alt+End${controls.resetWidth.length ? " Delete Backspace" : ""}`} data-column={row.key} data-visible={row.visible ? "true" : "false"} data-frozen={row.frozen || undefined} data-dragging={dragging || undefined} className={cn("group flex min-w-0 items-center gap-2 rounded-sm border border-transparent px-1.5 py-1 outline-none focus-visible:border-foreground data-[dragging]:border-dashed data-[dragging]:border-foreground", !row.visible && "text-muted-foreground", className)} {...props} data-slot="tradecn-column-chooser-item" ref={rootRef} onFocusCapture={(event) => {
    onFocusCapture?.(event)
    if (ownsItemEvent(event)) {
      focused.current = event.target
      // An explicitly opted-out item never takes the roving stop, even by pointer focus.
      if (tabIndex === undefined && !itemKeyless) registrations.focus(row.key)
    }
  }} onBlurCapture={(event) => {
    onBlurCapture?.(event)
    if (!event.currentTarget.contains(event.relatedTarget) && (event.relatedTarget || !unavailable(event.target))) focused.current = null
  }} onKeyDown={(event) => {
    onKeyDown?.(event)
    if (!ownsItemEvent(event) || event.defaultPrevented || event.nativeEvent.isComposing || event.ctrlKey || event.metaKey) return
    // A control that owns its arrows keeps every arrow chord: word movement, combobox opening, slider steps.
    if (arrowOwningTarget(event.target, event.currentTarget)) return
    if (event.altKey) {
      if (event.shiftKey || (event.key !== "ArrowUp" && event.key !== "ArrowDown" && event.key !== "Home" && event.key !== "End")) return
      event.preventDefault()
      event.stopPropagation()
      if (event.key === "ArrowUp" || event.key === "ArrowDown") move(event.key === "ArrowUp" ? -1 : 1)
      else moveToEdge(event.key === "Home" ? "start" : "end")
      return
    }
    if (event.shiftKey) return
    if (event.key === "ArrowUp" || event.key === "ArrowDown" || event.key === "Home" || event.key === "End") {
      event.preventDefault()
      event.stopPropagation()
      focusStep(row.key, event.key === "ArrowUp" ? -1 : event.key === "ArrowDown" ? 1 : event.key === "Home" ? "first" : "last")
      return
    }
    if (event.target !== event.currentTarget) return
    // Space and Delete run only where the layout renders the matching control, so a visible-only
    // list cannot hide a column it offers no way to bring back, and a held key toggles once.
    if (event.key === " " && controls.visibility.length && liveControl("visibility")) {
      // Every handled Space cancels, or held repeats scroll the page; the toggle runs once.
      // A control that is effectively disabled where it stands never claims the key at all.
      event.preventDefault()
      event.stopPropagation()
      if (!event.repeat) runControl("visibility", () => setVisible(!row.visible))
    } else if ((event.key === "Delete" || event.key === "Backspace") && controls.resetWidth.length && !event.repeat && row.resized && liveControl("resetWidth")) {
      event.preventDefault()
      event.stopPropagation()
      runControl("resetWidth", resetWidth)
    }
  }} onDragStart={(event) => {
    onDragStart?.(event)
    if (ownsItemEvent(event) && !event.defaultPrevented) startDrag(row.key, event)
  }} onDragOver={(event) => {
    onDragOver?.(event)
    if (ownsItemEvent(event) && !event.defaultPrevented) dragOver(row.key, event)
  }} onDrop={(event) => {
    onDrop?.(event)
    if (!ownsItemEvent(event)) return
    if (!event.defaultPrevented) drop(row.key, event)
    else endDrag()
  }} onDragEnd={(event) => {
    onDragEnd?.(event)
    if (ownsItemEvent(event)) endDrag(row.key)
  }} /></ControlsContext></ItemContext>
}

/**
 * Declares that this item renders a control for one of the item-level keys, so Space or Delete
 * stays live where a caller-owned control covers the command. A disabled control declares
 * nothing. Pass `element` so a state only the DOM knows — a disabled enclosing fieldset —
 * suspends the key while the declaration stands; without one the command counts as enabled.
 */
export function useColumnChooserCommand(kind: "visibility" | "resetWidth", enabled = true, element?: () => HTMLElement | null) {
  const registerControl = useContext(ControlsContext)
  useLayoutEffect(() => (enabled ? registerControl?.(kind, element ?? NO_CONTROL_ELEMENT) : undefined), [registerControl, kind, enabled, element])
}

export function ColumnChooserVisibility({ onClick, onCheckedChange, tabIndex = -1, ref, "aria-label": ariaLabel, ...props }: Omit<ComponentProps<typeof Checkbox>, "checked" | "defaultChecked" | "indeterminate">) {
  const { row, setVisible } = useColumnChooserItem()
  const { labels } = useColumnChooser()
  const local = useRef<HTMLElement | null>(null)
  const mergedRef = useChooserRef(local, ref)
  const element = useCallback(() => local.current, [])
  // Presence tells the item Space has a rendered counterpart, so the key runs only here — a
  // read-only checkbox rejects changes from everywhere, the keyboard included. Read untyped:
  // one base's checkbox types carry readOnly and the other's do not.
  const readOnly = "readOnly" in props && Boolean((props as { readOnly?: unknown }).readOnly)
  useColumnChooserCommand("visibility", !props.disabled && !readOnly, element)
  return <Checkbox ref={mergedRef} tabIndex={tabIndex} aria-label={ariaLabel ?? (props["aria-labelledby"] ? undefined : `${labels.show} ${row.name}`)} {...props} checked={row.visible} onClick={(event) => {
    onClick?.(event)
    // Some built-ins separate browser cancellation from their own click handler.
    if (event.defaultPrevented && "preventBaseUIHandler" in event && typeof event.preventBaseUIHandler === "function") event.preventBaseUIHandler()
  }} onCheckedChange={(...args) => {
    onCheckedChange?.(...args)
    const details: unknown = args.slice(1)[0]
    if (details && typeof details === "object" && "isCanceled" in details && details.isCanceled) return
    setVisible(args[0] === true)
  }} />
}

export function ColumnChooserName({ className, ...props }: Omit<ComponentProps<"span">, "children">) {
  const { row } = useColumnChooserItem()
  return <span title={row.name} className={cn("min-w-20 flex-1 truncate font-medium", className)} {...props}>{row.name}</span>
}

export function ColumnChooserFrozen({ className, ...props }: Omit<ComponentProps<typeof Badge>, "children">) {
  const { row } = useColumnChooserItem()
  const { labels } = useColumnChooser()
  return row.frozen ? <Badge variant="outline" data-column-frozen className={cn("h-4 px-1.5 text-xs", className)} {...props}>{labels.frozen}</Badge> : null
}

export function ColumnChooserRule({ ruleIndex, className, ...props }: Omit<ComponentProps<typeof Badge>, "children"> & { ruleIndex: number }) {
  const { row } = useColumnChooserItem()
  const reading = row.rules[ruleIndex]
  if (!reading) return null
  const { rule, description } = reading
  return <Badge variant="outline" data-column-rule={rule.id} title={description} className={cn("h-4 min-w-0 shrink px-1.5 text-xs", (RULE_TONES as readonly string[]).includes(rule.tone ?? "") && RULE_TONE_CLASS[rule.tone as RuleTone], className)} {...props}><span className="min-w-0 truncate">{rule.label?.trim() || description}</span></Badge>
}

export function ColumnChooserWidth({ className, "aria-label": ariaLabel, ...props }: Omit<ComponentProps<"span">, "children">) {
  const { row } = useColumnChooserItem()
  const { labels } = useColumnChooser()
  // Words in the span rather than a label on it: a screen reader can pass over a label on an element with no role.
  return <span aria-label={ariaLabel} data-column-width={row.width} className={cn("w-14 shrink-0 text-right text-muted-foreground", NUMERIC_CLASS, className)} {...props}>{ariaLabel || props["aria-labelledby"] ? null : <span className="sr-only">{labels.width} </span>}{row.width} px</span>
}

export function ColumnChooserResetWidth({ type = "button", variant = "ghost", size, disabled, onClick, className, tabIndex = -1, ref, "aria-label": ariaLabel, ...props }: ActionProps) {
  const { row, resetWidth } = useColumnChooserItem()
  const { labels } = useColumnChooser()
  const local = useRef<HTMLElement | null>(null)
  const mergedRef = useChooserRef(local, ref)
  const element = useCallback(() => local.current, [])
  // Presence tells the item Delete has a rendered counterpart, so the key runs only here — and
  // the control renders disabled for an unresized column, so the declaration follows both.
  useColumnChooserCommand("resetWidth", !disabled && row.resized, element)
  return <Button ref={mergedRef} type={type} variant={variant} size={size === undefined ? "sm" : size} aria-label={ariaLabel ?? (props["aria-labelledby"] ? undefined : `${labels.resetWidth}: ${row.name}`)} aria-hidden={!row.resized || undefined} tabIndex={tabIndex} className={cn(size === undefined && "h-6 px-1.5 text-xs", !row.resized && "invisible", className)} {...props} disabled={disabled || !row.resized} onClick={(event) => {
    onClick?.(event)
    if (!event.defaultPrevented) resetWidth()
  }} />
}

export function ColumnChooserMove({ direction, type = "button", variant = "ghost", size, disabled, onClick, className, tabIndex = -1, "aria-label": ariaLabel, ...props }: ActionProps & { direction: "up" | "down" }) {
  const { row, canMoveUp, canMoveDown, move } = useColumnChooserItem()
  const { labels } = useColumnChooser()
  return <Button type={type} variant={variant} size={size === undefined ? "sm" : size} aria-label={ariaLabel ?? (props["aria-labelledby"] ? undefined : `${direction === "up" ? labels.moveUp : labels.moveDown}: ${row.name}`)} tabIndex={tabIndex} className={cn(size === undefined && "h-6 px-1.5 text-xs", className)} {...props} disabled={disabled || !(direction === "up" ? canMoveUp : canMoveDown)} onClick={(event) => {
    onClick?.(event)
    if (!event.defaultPrevented) move(direction === "up" ? -1 : 1)
  }} />
}