"use client"
import * as React from "react"
import { cn } from "../../lib/utils"
import type { DataListViewType } from "../../lib/data-list-view"
import { DATA_LIST_VIEW_TILES, dataListViewLabel } from "../../lib/data-list-view"
import { dataListViewTilesForHub } from "../../lib/data-list-view-registry"
import type { RowHeight } from "../../lib/row-height"
import { ROW_HEIGHT_TILES } from "../../lib/row-height"
import { Input } from "../ui/input"
import { FilterByFieldDropdownContent } from "../data-table/filter-by-field-dropdown"
import { SelectionTileGrid } from "../ui/selection-tile-grid"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "../ui/dropdown-menu"
import {
  FloatingSheetPanel,
  FloatingSheetPanelBody,
  FloatingSheetPanelContent,
  FloatingSheetPanelHeader,
  FloatingSheetPanelToolbar,
  FloatingSheetPanelWorkflowFooter,
} from "../ui/floating-sheet-panel"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "../ui/select"
import {
  DEFAULT_DATA_LIST_DISPLAY_OPTIONS,
  type DataListDisplayOptions,
} from "../../lib/data-list-display-options"
import { Tip } from "../ui/tip"
import { ToggleSwitch } from "../ui/toggle-switch"
import { Button } from "../ui/button"
import { DrawerFilterCard } from "./filter-card"
import { DrawerSortCard } from "./sort-card"
import { ColumnRow } from "./column-row"
import { useDraggableList } from "./draggable-list"
import {
  type ActiveFilter,
  type SortRule,
  type ConditionalRule,
  type FilterFieldDef,
  RULE_COLORS,
} from "../../lib/table-properties-types"
import { createConditionalRuleId } from "../../lib/conditional-rule-id"
import { PROPERTIES_SHEET_PORTAL_Z, PROPERTIES_SHEET_TOOLTIP_Z, PROPERTIES_SHEET_TOOLTIP_Z_INDEX } from "./sheet-portal-z"

const EMPTY_ACTIVE_FILTERS: ActiveFilter[] = []
const EMPTY_SORT_RULES: SortRule[] = []
const EMPTY_CONDITIONAL_RULES: ConditionalRule[] = []
const EMPTY_COL_ORDER: string[] = []
const EMPTY_FILTER_FIELDS: FilterFieldDef[] = []
const EMPTY_FIELD_DEFINITIONS: { key: string; label: string; sortable?: boolean }[] = []
const EMPTY_STRING_SET = new Set<string>()
const NOOP = () => {}

export interface TablePropertiesDrawerProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  /**
   * Optional deep-link target. When set (and `open` is true), the drawer
   * focuses this panel instead of "main" — e.g. the column header's
   * **Add Conditional Rule** menu item passes `"conditional-rules"` to jump
   * straight to the conditional-formatting panel. Drawer resets to "main"
   * automatically when it closes.
   */
  initialPanel?: string | null
  // Display
  showGridlines?: boolean
  onShowGridlinesChange?: (v: boolean) => void
  rowHeight?: RowHeight
  onRowHeightChange?: (v: RowHeight) => void
  pagination?: boolean
  onPaginationChange?: (v: boolean) => void
  // Filters
  activeFilters?: ActiveFilter[]
  onAddFilter?: (fieldKey: string) => void
  onUpdateFilter?: (id: string, patch: Partial<ActiveFilter>) => void
  onRemoveFilter?: (id: string) => void
  /** How the filter after `leftFilterId` combines with the one above (default "and"). */
  getFilterConnector?: (leftFilterId: string) => "and" | "or"
  onToggleFilterConnector?: (leftFilterId: string) => void
  filterBarVisible?: boolean
  onFilterBarVisibleChange?: (v: boolean) => void
  drawerExpandedFilters?: Set<string>
  onDrawerExpandedFiltersChange?: React.Dispatch<React.SetStateAction<Set<string>>>
  totalRows?: number
  filteredRows?: number
  // Sort
  sortRules?: SortRule[]
  onSortRulesChange?: (rules: SortRule[]) => void
  onAddSortRule?: (fieldKey: string) => void
  onRemoveSortRule?: (id: string) => void
  onToggleSortDir?: (id: string) => void
  // Columns
  colOrder?: string[]
  onColOrderChange?: (order: string[]) => void
  hiddenCols?: Set<string>
  onToggleColVisibility?: (key: string) => void
  onMoveCol?: (key: string, dir: "up" | "down") => void
  // Group
  groupBy?: string | null
  onGroupByChange?: (key: string | null) => void
  // Sort key for display in main panel
  primarySortKey?: string
  // Conditional formatting
  conditionalRules?: ConditionalRule[]
  onAddConditionalRule?: (rule: Omit<ConditionalRule, "id">, id?: string) => void
  onRemoveConditionalRule?: (id: string) => void
  onUpdateConditionalRule?: (id: string, patch: Partial<ConditionalRule>) => void
  /**
   * Filter field defs for drawer + conditional rules. Required — every list-hub
   * consumer derives this from its column definitions (`columnsToFilterFields`)
   * and passes it through `drawerToolbarProps` from `HubTable`. There is no
   * product-specific default in the package.
   */
  filterFields?: FilterFieldDef[]
  // View type
  currentView?: DataListViewType
  onViewChange?: (view: DataListViewType) => void
  /**
   * Subset of view types this hub actually implements; when set, the view-type tile grid is
   * filtered so users cannot switch to an unsupported view from Properties. Defaults to all
   * registered view types (`DATA_LIST_VIEW_TILES`).
   */
  supportedViewTypes?: readonly DataListViewType[]
  /** Lifecycle context (e.g. tab filter) — shown in the drawer header */
  lifecycleTabLabel?: string
  /**
   * Column metadata for the Sort / Group / Columns panels. Required — every
   * list-hub consumer derives this from its column definitions
   * (`columnsToFieldDefinitions`) and passes it through `drawerToolbarProps`
   * from `HubTable`. The drawer never falls back to a default column list.
   */
  fieldDefinitions?: { key: string; label: string; sortable?: boolean }[]
  resolveColumnLabel?: (key: string) => string
  /** Shared display options (table + board); persisted at page level. */
  displayOptions?: DataListDisplayOptions
  onDisplayOptionsChange?: (patch: Partial<DataListDisplayOptions>) => void
  /**
   * When the active view is Board and more than one entry is provided, shows a control to pick
   * which field defines swimlane columns (`displayOptions.boardGroupByColumnKey`).
   */
  boardGroupByColumnOptions?: { key: string; label: string }[]
  /** Optional custom option renderer for filter values (e.g. status chips). */
  renderFilterOptionValue?: (fieldKey: string, value: string) => React.ReactNode
  /** Runtime filter bounds/options derived from hub rows (person lists, numeric ranges). */
  filterFieldContext?: Record<string, import("../../lib/column-filter-context").FilterFieldRuntimeContext>

  /** Creation mode for the new 2-step "Add view" flow */
  isCreatingNewView?: boolean
  newViewName?: string
  onNewViewNameChange?: (name: string) => void
  onCreateNewView?: () => void
  /**
   * Fired when the user dismisses the creation drawer (Cancel button, Esc).
   * In creation mode this is the cancellation channel — the drawer's
   * `onOpenChange(false)` also routes here so callers get a single hook for
   * "creation aborted". When omitted, dismissal falls back to
   * `onOpenChange(false)`.
   */
  onCancelNewView?: () => void
  creatingViewTypeLabel?: string

  /**
   * Edit-mode rename support — when `onViewNameChange` is set and the drawer is
   * NOT in creation mode (`!isCreatingNewView`), the main panel renders the same
   * "Name" input shape as creation mode, bound to `(viewName, onViewNameChange)`.
   * The drawer just emits; the consumer decides whether to commit on every
   * keystroke or onBlur. Omit both props to keep the existing read-only header.
   */
  viewName?: string
  onViewNameChange?: (name: string) => void

  /** Hub-level counts toggle (global) */
  showViewCounts?: boolean
  onShowViewCountsChange?: (show: boolean) => void
}

type SheetPanel = "main" | "table-display" | "filter" | "sort" | "group" | "columns" | "conditional-rules"

export function TablePropertiesDrawer({
  open,
  onOpenChange,
  initialPanel,
  // Non-creation props — provide safe defaults when using the 2-step "Create view" surface
  showGridlines = true,
  onShowGridlinesChange = NOOP,
  pagination = true,
  onPaginationChange = NOOP,
  activeFilters = EMPTY_ACTIVE_FILTERS,
  onAddFilter = NOOP,
  onUpdateFilter = NOOP,
  onRemoveFilter = NOOP,
  getFilterConnector = () => "and",
  onToggleFilterConnector = NOOP,
  filterBarVisible = true,
  onFilterBarVisibleChange = NOOP,
  drawerExpandedFilters = EMPTY_STRING_SET,
  onDrawerExpandedFiltersChange = NOOP,
  totalRows = 0,
  filteredRows = 0,
  sortRules = EMPTY_SORT_RULES,
  onSortRulesChange = NOOP,
  onAddSortRule = NOOP,
  onRemoveSortRule = NOOP,
  onToggleSortDir = NOOP,
  colOrder = EMPTY_COL_ORDER,
  onColOrderChange = NOOP,
  hiddenCols = EMPTY_STRING_SET,
  onToggleColVisibility = NOOP,
  onMoveCol = NOOP,
  groupBy = null,
  onGroupByChange = NOOP,
  primarySortKey,
  conditionalRules = EMPTY_CONDITIONAL_RULES,
  onAddConditionalRule = NOOP,
  onRemoveConditionalRule = NOOP,
  onUpdateConditionalRule = NOOP,
  filterFields = EMPTY_FILTER_FIELDS,
  currentView,
  onViewChange,
  supportedViewTypes,
  lifecycleTabLabel,
  fieldDefinitions = EMPTY_FIELD_DEFINITIONS,
  resolveColumnLabel: resolveColumnLabelProp,
  displayOptions = DEFAULT_DATA_LIST_DISPLAY_OPTIONS,
  onDisplayOptionsChange = NOOP,
  boardGroupByColumnOptions,
  renderFilterOptionValue,
  filterFieldContext,
  rowHeight = "default",
  onRowHeightChange = NOOP,

  isCreatingNewView,
  newViewName,
  onNewViewNameChange,
  onCreateNewView,
  onCancelNewView,
  creatingViewTypeLabel,
  viewName,
  onViewNameChange,
  showViewCounts,
  onShowViewCountsChange,
}: TablePropertiesDrawerProps) {
  const [navPanel, setNavPanel] = React.useState<SheetPanel>("main")
  const sheetPanel: SheetPanel = !open
    ? "main"
    : initialPanel
      ? (initialPanel as SheetPanel)
      : navPanel

  const resolveColumnLabel = React.useCallback(
    (key: string) =>
      resolveColumnLabelProp?.(key)
      ?? fieldDefinitions.find(f => f.key === key)?.label
      ?? key,
    [resolveColumnLabelProp, fieldDefinitions],
  )

  const sortFieldList = React.useMemo(
    () =>
      fieldDefinitions.filter(
        f => f.sortable !== false && f.key !== "select" && f.key !== "actions",
      ),
    [fieldDefinitions],
  )

  const groupFieldList = React.useMemo(
    () =>
      fieldDefinitions.filter(f => f.key !== "select" && f.key !== "actions"),
    [fieldDefinitions],
  )

  const addableSortFields = React.useMemo(() => {
    const taken = new Set(sortRules.map(r => r.fieldKey))
    return sortFieldList.filter(f => !taken.has(f.key))
  }, [sortFieldList, sortRules])

  const viewSurface = currentView ?? "table"
  const isBoardView = viewSurface === "board"
  const boardGroupByLabel =
    boardGroupByColumnOptions?.find(o => o.key === displayOptions.boardGroupByColumnKey)?.label
  const viewDisplayLabel = dataListViewLabel(viewSurface)
  const viewDisplayDesc = (() => {
    if (viewSurface === "board") {
      return [
        boardGroupByLabel ? `By ${boardGroupByLabel}` : null,
        `${displayOptions.boardLineCount}-line`,
        displayOptions.showColumnLabels ? "Column labels" : "No labels",
      ]
        .filter(Boolean)
        .join(" · ")
    }
    if (viewSurface === "list") {
      return [
        displayOptions.showColumnLabels ? "Column labels" : "No labels",
        displayOptions.showToolbarSearch ? "Toolbar search" : "No search",
      ].join(" · ")
    }
    if (viewSurface === "dashboard") {
      return "Charts · KPI metrics"
    }
    return [showGridlines ? "Gridlines" : null, pagination ? "Paginated" : null].filter(Boolean).join(" · ") || "Default"
  })()
  const viewDisplayIcon =
    DATA_LIST_VIEW_TILES.find(t => t.value === viewSurface)?.icon ?? "fa-table"

  // ── Sort drag-and-drop ────────────────────────────────────────────────────
  const sortDrag = useDraggableList(sortRules, r => r.id, onSortRulesChange)

  // ── Columns drag-and-drop ─────────────────────────────────────────────────
  const orderable = colOrder.filter(k => k !== "select" && k !== "actions")
  const colDrag = useDraggableList(
    orderable,
    k => k,
    newOrder => onColOrderChange(["select", ...newOrder, "actions"]),
  )

  // Current primary sort label for display in main panel
  const primarySortLabel = primarySortKey
    ? resolveColumnLabel(primarySortKey)
    : sortRules[0]?.fieldKey
      ? resolveColumnLabel(sortRules[0].fieldKey)
      : null

  const viewTypeTileOptions = React.useMemo(
    () =>
      supportedViewTypes && supportedViewTypes.length > 0
        ? dataListViewTilesForHub(supportedViewTypes).map(t => ({
            value: t.type,
            label: t.label,
            icon: t.icon,
          }))
        : DATA_LIST_VIEW_TILES,
    [supportedViewTypes],
  )

  // In creation mode, dismissal (Esc, Cancel) must route through
  // `onCancelNewView` so the parent resets the ephemeral creation state.
  // Falls back to `onOpenChange(false)` when no explicit cancel hook is wired.
  const handleSheetOpenChange = React.useCallback(
    (next: boolean) => {
      if (!next) {
        setNavPanel("main")
        if (isCreatingNewView && onCancelNewView) {
          onCancelNewView()
          return
        }
      }
      onOpenChange(next)
    },
    [isCreatingNewView, onCancelNewView, onOpenChange],
  )

  return (
    <FloatingSheetPanel open={open} onOpenChange={handleSheetOpenChange} modal={false}>
      <FloatingSheetPanelContent
        contentSlot="table-properties-drawer"
        onOpenAutoFocus={event => {
          // Non-modal Properties sheet must not scroll the hub behind it when
          // Radix moves focus into the panel — but keyboard users still need
          // focus inside the sheet (column-header filter deep-link).
          event.preventDefault()
          const root = event.currentTarget as HTMLElement
          requestAnimationFrame(() => {
            const focusHost =
              root.querySelector<HTMLElement>("[data-properties-initial-focus]") ??
              root
            const target =
              focusHost.querySelector<HTMLElement>(
                "input:not([disabled]), textarea:not([disabled]), select:not([disabled]), button:not([disabled])",
              ) ?? focusHost.querySelector<HTMLElement>("button:not([disabled])")
            target?.focus()
          })
        }}
      >
        <FloatingSheetPanelToolbar
          onBack={sheetPanel === "main" ? undefined : () => setNavPanel("main")}
          backLabel="Back to Properties"
          tipClassName={PROPERTIES_SHEET_TOOLTIP_Z}
          tipZIndex={PROPERTIES_SHEET_TOOLTIP_Z_INDEX}
        />

        {sheetPanel === "main" ? (
          <>
            {(() => {
              const showEditNameInput = !isCreatingNewView && onViewNameChange !== undefined
              const subtitle =
                lifecycleTabLabel && !(showEditNameInput && lifecycleTabLabel === (viewName ?? ""))
                  ? lifecycleTabLabel
                  : null
              return (
                <FloatingSheetPanelHeader
                  title={
                    isCreatingNewView
                      ? `Create new ${creatingViewTypeLabel || "view"}`
                      : "Properties"
                  }
                  subtitle={subtitle}
                />
              )
            })()}

            <FloatingSheetPanelBody className="pb-2">
            {/* Name field — shared shape across creation and edit modes.
                Creation: bound to `(newViewName, onNewViewNameChange)`, `autoFocus` so the
                  user lands on the input ready to type.
                Edit: bound to `(viewName, onViewNameChange)`, NO `autoFocus` (the user
                  opened Properties to look around — stealing focus would be hostile).
                If neither pair is supplied this block does not render. */}
            {isCreatingNewView && onNewViewNameChange ? (
              <div className="px-4 pt-0 pb-3 space-y-4">
                <div>
                  <label className="text-xs font-medium text-muted-foreground" htmlFor="new-view-name">
                    Name
                  </label>
                  <Input
                    id="new-view-name"
                    value={newViewName ?? ""}
                    onChange={e => onNewViewNameChange(e.target.value)}
                    className="mt-1.5 h-9"
                    placeholder="View name"
                    autoFocus
                  />
                </div>
                {onViewChange && currentView ? (
                  <SelectionTileGrid<DataListViewType>
                    sectionLabel="View type"
                    options={viewTypeTileOptions}
                    columns={4}
                    inlineVisibleCount={4}
                    overflowMenuClassName={PROPERTIES_SHEET_PORTAL_Z}
                    density="compact"
                    value={currentView}
                    onValueChange={onViewChange}
                    interaction="button"
                    idPrefix="props-view"
                    labelPlacement="below"
                  />
                ) : null}
              </div>
            ) : !isCreatingNewView && onViewNameChange ? (
              <div className="px-4 pt-0 pb-3 space-y-4">
                <div>
                  <label className="text-xs font-medium text-muted-foreground" htmlFor="edit-view-name">
                    Name
                  </label>
                  <Input
                    id="edit-view-name"
                    value={viewName ?? ""}
                    onChange={e => onViewNameChange(e.target.value)}
                    className="mt-1.5 h-9"
                    placeholder="View name"
                  />
                </div>
                {onViewChange && currentView ? (
                  <SelectionTileGrid<DataListViewType>
                    sectionLabel="View type"
                    options={viewTypeTileOptions}
                    columns={4}
                    inlineVisibleCount={4}
                    overflowMenuClassName={PROPERTIES_SHEET_PORTAL_Z}
                    density="compact"
                    value={currentView}
                    onValueChange={onViewChange}
                    interaction="button"
                    idPrefix="props-view"
                    labelPlacement="below"
                  />
                ) : null}
              </div>
            ) : onViewChange && currentView ? (
              <div className="px-4 pb-3">
                <SelectionTileGrid<DataListViewType>
                  sectionLabel="View type"
                  options={viewTypeTileOptions}
                  columns={4}
                  inlineVisibleCount={4}
                  overflowMenuClassName={PROPERTIES_SHEET_PORTAL_Z}
                  density="compact"
                  value={currentView}
                  onValueChange={onViewChange}
                  interaction="button"
                  idPrefix="props-view"
                  labelPlacement="below"
                />
              </div>
            ) : null}

            {/* Option list — inset rows + rounded hover (not edge-to-edge) */}
            <div className="py-2 px-3 space-y-1">
              {([
                {
                  id: "table-display" as SheetPanel,
                  icon: viewDisplayIcon,
                  label: viewDisplayLabel,
                  desc: viewDisplayDesc,
                },
                {
                  id: "filter" as SheetPanel,
                  icon: "fa-filter",
                  label: "Filter",
                  desc: activeFilters.length === 0
                    ? `Showing all ${filteredRows} rows.`
                    : `${activeFilters.length} filter${activeFilters.length !== 1 ? "s" : ""} active · ${filteredRows} rows.`,
                },
                {
                  id: "sort" as SheetPanel,
                  icon: "fa-arrow-up-arrow-down",
                  label: "Sort",
                  desc: primarySortLabel ? `Sorted by ${primarySortLabel}.` : "Not sorted.",
                },
                {
                  id: "group" as SheetPanel,
                  icon: "fa-layer-group",
                  label: "Group",
                  desc: groupBy
                    ? `Grouped by ${resolveColumnLabel(groupBy)}.`
                    : "No grouping.",
                },
                {
                  id: "columns" as SheetPanel,
                  icon: "fa-table-columns",
                  label: "Columns",
                  desc: hiddenCols.size === 0
                    ? "All columns visible."
                    : `${hiddenCols.size} column${hiddenCols.size !== 1 ? "s" : ""} hidden.`,
                },
                {
                  id: "conditional-rules" as SheetPanel,
                  icon: "fa-palette",
                  label: "Conditional rules",
                  desc: conditionalRules.length === 0
                    ? "No rules applied."
                    : `${conditionalRules.length} rule${conditionalRules.length !== 1 ? "s" : ""} active.`,
                },
              ] as { id: SheetPanel; icon: string; label: string; desc: string }[]).map(item => (
                <Button
                  key={item.id}
                  type="button"
                  variant="ghost"
                  onClick={() => setNavPanel(item.id)}
                  className={cn(
                    "w-full h-auto justify-start gap-3 p-3 rounded-2xl font-normal border border-transparent",
                    "hover:bg-muted/60 hover:text-foreground",
                    "focus-visible:bg-muted/60 focus-visible:text-foreground",
                  )}
                >
                  <span className="inline-flex items-center justify-center size-9 rounded-lg bg-secondary border border-border shrink-0">
                    <i className={`fa-light ${item.icon} text-md text-secondary-foreground`} aria-hidden="true" />
                  </span>
                  <span className="flex-1 min-w-0 text-start">
                    <span className="block text-sm font-medium text-foreground">{item.label}</span>
                    <span className="block text-xs text-muted-foreground mt-0.5">{item.desc}</span>
                  </span>
                  <i className="fa-light fa-chevron-right rtl:rotate-180 text-xs text-muted-foreground shrink-0" aria-hidden="true" />
                </Button>
              ))}
            </div>
            </FloatingSheetPanelBody>
          </>
        ) : (
          <>
            <FloatingSheetPanelHeader
              closeTipClassName={PROPERTIES_SHEET_TOOLTIP_Z}
              closeTipZIndex={PROPERTIES_SHEET_TOOLTIP_Z_INDEX}
              titleClassName="flex items-center gap-1.5 text-foreground"
              title={
                <>
                  {{
                    "table-display":     viewDisplayLabel,
                    filter:              "Filter",
                    sort:                "Sort",
                    group:               "Group",
                    columns:             "Columns",
                    "conditional-rules": "Conditional rules",
                    main:                "",
                  }[sheetPanel]}
                  {sheetPanel === "filter" && (
                    <i className="fa-light fa-circle-question text-xs text-muted-foreground" aria-hidden="true" />
                  )}
                </>
              }
              subtitle={
                sheetPanel === "filter" ? (
                  <span aria-live="polite" aria-atomic="true">
                    {activeFilters.length === 0
                      ? `Showing all ${filteredRows} rows`
                      : `${filteredRows} of ${totalRows} rows match · ${activeFilters.length} filter${activeFilters.length !== 1 ? "s" : ""} active`}
                  </span>
                ) : null
              }
            />

            <FloatingSheetPanelBody>

              {/* ── Table / Board display ── */}
              {sheetPanel === "table-display" && (
                <div className="p-4 space-y-5">
                  {isBoardView ? (
                    <p className="text-xs text-muted-foreground leading-relaxed">
                      {dataListViewLabel("board")} groups rows into columns. Sort, filter, and column settings apply to the same dataset as other views (e.g. Table).
                    </p>
                  ) : null}

                  {isBoardView && boardGroupByColumnOptions && boardGroupByColumnOptions.length > 1 ? (
                    <div className="flex items-center justify-between gap-3 py-2">
                      <div className="flex items-center gap-2.5 min-w-0 flex-1">
                        <span className="inline-flex items-center justify-center size-9 rounded-lg bg-secondary border border-border shrink-0">
                          <i className="fa-light fa-table-columns text-md text-secondary-foreground" aria-hidden="true" />
                        </span>
                        <div className="min-w-0">
                          <p className="text-sm font-medium text-foreground leading-tight">Board columns</p>
                          <p className="text-xs text-muted-foreground mt-0.5">Choose which field splits the board into swimlanes.</p>
                        </div>
                      </div>
                      <Select
                        value={
                          boardGroupByColumnOptions.some(o => o.key === displayOptions.boardGroupByColumnKey)
                            ? displayOptions.boardGroupByColumnKey
                            : boardGroupByColumnOptions[0]!.key
                        }
                        onValueChange={v => onDisplayOptionsChange({ boardGroupByColumnKey: v })}
                      >
                        <SelectTrigger
                          size="sm"
                          className="w-[9.5rem] shrink-0"
                          id="board-group-by-field"
                          aria-label="Field for board columns"
                        >
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent align="end" className={PROPERTIES_SHEET_PORTAL_Z}>
                          {boardGroupByColumnOptions.map(o => (
                            <SelectItem key={o.key} value={o.key}>
                              {o.label}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>
                  ) : null}

                  {viewSurface === "table" ? (
                    <>
                      <div>
                        <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-3">Appearance</p>
                        <div className="space-y-1">
                          {([
                            { id: "gridlines",   icon: "fa-border-all",      label: "Gridlines",  checked: showGridlines, onChange: onShowGridlinesChange },
                            { id: "pagination",  icon: "fa-table-list",      label: "Pagination", checked: pagination,    onChange: onPaginationChange    },
                          ] as { id: string; icon: string; label: string; checked: boolean; onChange: (v: boolean) => void }[]).map(row => (
                            <div key={row.id} className="flex items-center justify-between py-2">
                              <div className="flex items-center gap-2.5 text-sm">
                                <i className={`fa-light ${row.icon} text-muted-foreground w-4 text-center`} aria-hidden="true" />
                                <label htmlFor={`toggle-${row.id}`} className="cursor-pointer select-none">{row.label}</label>
                              </div>
                              <ToggleSwitch id={`toggle-${row.id}`} checked={row.checked} onChange={row.onChange} />
                            </div>
                          ))}
                        </div>
                      </div>

                      <div className="border-t border-border pt-4">
                        <SelectionTileGrid<RowHeight>
                          sectionLabel="Row height"
                          options={ROW_HEIGHT_TILES}
                          columns={3}
                          value={rowHeight}
                          onValueChange={onRowHeightChange}
                          interaction="button"
                          idPrefix="row-height"
                        />
                      </div>
                    </>
                  ) : null}

                  <div
                    className={cn(
                      "space-y-3",
                      (viewSurface === "board" || viewSurface === "table") && "border-t border-border pt-4",
                    )}
                  >
                    <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Display options</p>
                    <div className="space-y-1">
                      {isBoardView && (
                        <div className="flex items-center justify-between gap-2 py-2">
                          <div className="flex items-center gap-2.5 min-w-0 flex-1">
                            <span className="inline-flex items-center justify-center size-9 rounded-lg bg-secondary border border-border shrink-0">
                              <i className="fa-light fa-file-lines text-md text-secondary-foreground" aria-hidden="true" />
                            </span>
                            <div className="min-w-0">
                              <p className="text-sm font-medium text-foreground leading-tight">Line count</p>
                            </div>
                          </div>
                          <Select
                            value={String(displayOptions.boardLineCount)}
                            onValueChange={v =>
                              onDisplayOptionsChange({ boardLineCount: Number(v) as 1 | 2 | 3 })}
                          >
                            <SelectTrigger size="sm" className="w-[6.5rem] shrink-0" id="board-line-count" aria-label="Line count">
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent align="end" className={PROPERTIES_SHEET_PORTAL_Z}>
                              <SelectItem value="1">1 line</SelectItem>
                              <SelectItem value="2">2 lines</SelectItem>
                              <SelectItem value="3">3 lines</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                      )}

                      {viewSurface === "table" && (
                        <div className="flex items-center justify-between gap-2 py-2">
                          <div className="flex items-center gap-2.5 min-w-0 flex-1">
                            <span className="inline-flex items-center justify-center size-9 rounded-lg bg-secondary border border-border shrink-0">
                              <i className="fa-light fa-font text-md text-secondary-foreground" aria-hidden="true" />
                            </span>
                            <div className="min-w-0">
                              <p className="text-sm font-medium text-foreground leading-tight">Table title</p>
                              <p className="text-xs text-muted-foreground mt-0.5">Show the page heading and subtitle.</p>
                            </div>
                          </div>
                          <ToggleSwitch
                            id="toggle-view-title"
                            checked={displayOptions.showViewTitle}
                            onChange={v => onDisplayOptionsChange({ showViewTitle: v })}
                          />
                        </div>
                      )}

                      <div className="flex items-center justify-between gap-2 py-2">
                        <div className="flex items-center gap-2.5 min-w-0 flex-1">
                          <span className="inline-flex items-center justify-center size-9 rounded-lg bg-secondary border border-border shrink-0">
                            <i className="fa-light fa-table-columns text-md text-secondary-foreground" aria-hidden="true" />
                          </span>
                          <div className="min-w-0">
                            <p className="text-sm font-medium text-foreground leading-tight">Column labels</p>
                            {viewSurface === "table" ? (
                              <p className="text-xs text-muted-foreground mt-0.5">Column headers in the table.</p>
                            ) : viewSurface === "list" ? (
                              <p className="text-xs text-muted-foreground mt-0.5">Column headers in the list.</p>
                            ) : null}
                          </div>
                        </div>
                        <ToggleSwitch
                          id="toggle-column-labels"
                          checked={displayOptions.showColumnLabels}
                          onChange={v => onDisplayOptionsChange({ showColumnLabels: v })}
                        />
                      </div>

                      {isBoardView && (
                        <>
                          <div className="flex items-center justify-between gap-2 py-2">
                            <div className="flex items-center gap-2.5 min-w-0 flex-1">
                              <span className="inline-flex items-center justify-center size-9 rounded-lg bg-secondary border border-border shrink-0">
                                <i className="fa-light fa-hashtag text-md text-secondary-foreground" aria-hidden="true" />
                              </span>
                              <div className="min-w-0">
                                <p className="text-sm font-medium text-foreground leading-tight">Column counts</p>
                              </div>
                            </div>
                            <ToggleSwitch
                              id="toggle-board-counts"
                              checked={displayOptions.showBoardColumnCounts}
                              onChange={v => onDisplayOptionsChange({ showBoardColumnCounts: v })}
                            />
                          </div>

                          <div className="flex items-center justify-between gap-2 py-2">
                            <div className="flex items-center gap-2.5 min-w-0 flex-1">
                              <span className="inline-flex items-center justify-center size-9 rounded-lg bg-secondary border border-border shrink-0">
                                <i className="fa-light fa-square-plus text-md text-secondary-foreground" aria-hidden="true" />
                              </span>
                              <div className="min-w-0">
                                <p className="text-sm font-medium text-foreground leading-tight">Above new card button</p>
                              </div>
                            </div>
                            <ToggleSwitch
                              id="toggle-new-card-above"
                              checked={displayOptions.boardNewCardAbove}
                              onChange={v => onDisplayOptionsChange({ boardNewCardAbove: v })}
                            />
                          </div>
                        </>
                      )}

                      {(viewSurface === "table" || viewSurface === "list") && (
                        <div className="flex items-center justify-between gap-2 py-2">
                          <div className="flex items-center gap-2.5 min-w-0 flex-1">
                            <span className="inline-flex items-center justify-center size-9 rounded-lg bg-secondary border border-border shrink-0">
                              <i className="fa-light fa-magnifying-glass text-md text-secondary-foreground" aria-hidden="true" />
                            </span>
                            <div className="min-w-0">
                              <p className="text-sm font-medium text-foreground leading-tight">Search</p>
                              <p className="text-xs text-muted-foreground mt-0.5">Toolbar search for this view.</p>
                            </div>
                          </div>
                          <ToggleSwitch
                            id="toggle-toolbar-search"
                            checked={displayOptions.showToolbarSearch}
                            onChange={v => onDisplayOptionsChange({ showToolbarSearch: v })}
                          />
                        </div>
                      )}

                      {showViewCounts !== undefined && onShowViewCountsChange && (
                        <div className="flex items-center justify-between gap-2 py-2">
                          <div className="flex items-center gap-2.5 min-w-0 flex-1">
                            <span className="inline-flex items-center justify-center size-9 rounded-lg bg-secondary border border-border shrink-0">
                              <i className="fa-light fa-hashtag text-md text-secondary-foreground" aria-hidden="true" />
                            </span>
                            <div className="min-w-0">
                              <p className="text-sm font-medium text-foreground leading-tight">Tab bar counts</p>
                              <p className="text-xs text-muted-foreground mt-0.5">Show record counts on each view tab.</p>
                            </div>
                          </div>
                          <ToggleSwitch
                            id="toggle-view-counts"
                            checked={!!showViewCounts}
                            onChange={v => onShowViewCountsChange(v)}
                          />
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              )}

              {/* ── Filter ── */}
              {sheetPanel === "filter" && (
                <div className="p-4 space-y-2">
                  {activeFilters.length === 0 ? (
                    <div className="rounded-xl border border-border bg-muted/40 p-4 space-y-3">
                      <div className="flex items-center gap-2">
                        <span className="inline-flex items-center justify-center size-7 rounded-lg bg-background border border-border shrink-0">
                          <i className="fa-light fa-filter text-muted-foreground text-xs" aria-hidden="true" />
                        </span>
                        <p className="text-sm font-medium text-foreground">No filters yet</p>
                      </div>
                      <p className="text-xs text-muted-foreground leading-relaxed">
                        Use filters to show only the rows you need. With multiple filters, use <span className="font-medium text-foreground/80">and</span> or <span className="font-medium text-foreground/80">or</span> between them to control how they combine.
                      </p>
                      <div className="space-y-1.5">
                        {[
                          { icon: "fa-circle-1", text: "Click \"Add filter\" below" },
                          { icon: "fa-circle-2", text: "Choose a field to filter by" },
                          { icon: "fa-circle-3", text: "Pick at least one value. The grid updates immediately" },
                        ].map(step => (
                          <div key={step.icon} className="flex items-center gap-2 text-xs text-muted-foreground">
                            <i className={`fa-light ${step.icon} text-muted-foreground text-xs shrink-0`} aria-hidden="true" />
                            {step.text}
                          </div>
                        ))}
                      </div>
                    </div>
                  ) : (
                    <>
                      {activeFilters.map((f, idx) => {
                        const fieldDef = filterFields.find(fd => fd.key === f.fieldKey)
                        if (!fieldDef) return null
                        const leftId = idx > 0 ? activeFilters[idx - 1]!.id : null
                        const connector = leftId ? getFilterConnector(leftId) : "and"
                        return (
                          <React.Fragment key={f.id}>
                            {idx > 0 && leftId && (
                              <div className="flex items-center gap-2 py-1">
                                <div className="flex-1 h-px bg-border" aria-hidden="true" />
                                <Tip
                                  label="Click to switch. AND: every filter must match. OR: any matching filter is enough."
                                  side="left"
                                  contentClassName={PROPERTIES_SHEET_TOOLTIP_Z}
                                  contentZIndex={PROPERTIES_SHEET_TOOLTIP_Z_INDEX}
                                >
                                  <Button
                                    type="button"
                                    variant="outline"
                                    size="xs"
                                    onClick={() => onToggleFilterConnector(leftId)}
                                    className={cn(
                                      "h-auto shrink-0 gap-1 rounded-full border-control-35 bg-background px-2.5 py-0.5 text-xs font-semibold uppercase tracking-wide shadow-sm",
                                      "hover:bg-interactive-hover hover:text-interactive-hover-foreground",
                                    )}
                                    aria-label={
                                      connector === "and"
                                        ? "Filters are combined with AND. Click to use OR instead."
                                        : "Filters are combined with OR. Click to use AND instead."
                                    }
                                  >
                                    {connector}
                                    <i
                                      className="fa-light fa-arrows-rotate text-xs opacity-70"
                                      aria-hidden="true"
                                    />
                                  </Button>
                                </Tip>
                                <div className="flex-1 h-px bg-border" aria-hidden="true" />
                              </div>
                            )}
                            <DrawerFilterCard
                              filter={f}
                              fieldDef={fieldDef}
                              fieldContext={filterFieldContext?.[f.fieldKey]}
                              expanded={drawerExpandedFilters.has(f.id)}
                              onToggleExpand={() => onDrawerExpandedFiltersChange(prev => {
                                const next = new Set(prev)
                                if (next.has(f.id)) next.delete(f.id)
                                else next.add(f.id)
                                return next
                              })}
                              onUpdate={onUpdateFilter}
                              onRemove={id => {
                                onRemoveFilter(id)
                                onDrawerExpandedFiltersChange(prev => { const next = new Set(prev); next.delete(id); return next })
                              }}
                              renderOptionLabel={
                                renderFilterOptionValue
                                  ? value => renderFilterOptionValue(f.fieldKey, value)
                                  : undefined
                              }
                            />
                          </React.Fragment>
                        )
                      })}
                    </>
                  )}

                  {/* Add filter + Remove all */}
                  <div className="flex items-center gap-2 pt-2">
                    <DropdownMenu modal={false}>
                      <DropdownMenuTrigger asChild>
                        <Button
                          type="button"
                          variant="outline"
                          className="flex-1 gap-1.5 h-8 border-dashed text-muted-foreground"
                        >
                          <i className="fa-light fa-plus text-xs" aria-hidden="true" />
                          Add filter
                        </Button>
                      </DropdownMenuTrigger>
                      <FilterByFieldDropdownContent
                        align="start"
                        className={PROPERTIES_SHEET_PORTAL_Z}
                        items={filterFields.map(f => ({
                          key: f.key,
                          label: f.label,
                          icon: f.icon,
                        }))}
                        onSelectField={onAddFilter}
                      />
                    </DropdownMenu>
                    {activeFilters.length > 0 && (
                      <Button
                        type="button"
                        variant="ghost"
                        size="sm"
                        className="shrink-0 text-destructive-ink hover:text-destructive-ink hover:bg-destructive/10"
                        onClick={() => { activeFilters.forEach(f => onRemoveFilter(f.id)); onDrawerExpandedFiltersChange(new Set()) }}
                      >
                        Remove all
                      </Button>
                    )}
                  </div>

                  {/* Enable filter bar toggle */}
                  <div className="flex items-start justify-between gap-3 pt-3 mt-1 border-t border-border">
                    <div>
                      <label htmlFor="toggle-filter-bar" className="text-sm font-medium text-foreground cursor-pointer">Enable filter bar</label>
                      <p className="text-xs text-muted-foreground mt-0.5">Show filters above the table.</p>
                    </div>
                    <ToggleSwitch id="toggle-filter-bar" checked={filterBarVisible} onChange={onFilterBarVisibleChange} />
                  </div>
                </div>
              )}

              {/* ── Sort ── */}
              {sheetPanel === "sort" && (
                <div className="p-4 space-y-2">
                  {sortRules.length === 0 ? (
                    /* Empty state */
                    <div className="rounded-xl border border-dashed border-border bg-muted/30 px-4 py-6 text-center space-y-2">
                      <div className="inline-flex items-center justify-center size-9 rounded-lg bg-muted mb-1">
                        <i className="fa-light fa-arrow-up-arrow-down text-muted-foreground text-base" aria-hidden="true" />
                      </div>
                      <p className="text-sm font-medium text-foreground">No sorts applied</p>
                      <p className="text-xs text-muted-foreground leading-relaxed">
                        Add a sort rule to order rows by any field. Multiple rules are applied in priority order.
                      </p>
                      <div className="space-y-1.5 text-start pt-1">
                        {[
                          { icon: "fa-circle-1", text: "Click \"Add sort\" below" },
                          { icon: "fa-circle-2", text: "Choose a field to sort by" },
                          { icon: "fa-circle-3", text: "Toggle ascending or descending" },
                        ].map(step => (
                          <div key={step.icon} className="flex items-center gap-2 text-xs text-muted-foreground">
                            <i className={`fa-light ${step.icon} text-muted-foreground text-xs shrink-0`} aria-hidden="true" />
                            {step.text}
                          </div>
                        ))}
                      </div>
                    </div>
                  ) : (
                    sortRules.map((rule, idx) => {
                      const dragProps = sortDrag.getItemProps(rule.id)
                      return (
                        <React.Fragment key={rule.id}>
                          {idx > 0 && (
                            <div className="flex items-center gap-2 py-0.5">
                              <div className="flex-1 h-px bg-border" />
                              <span className="text-xs font-medium text-muted-foreground px-1">then by</span>
                              <div className="flex-1 h-px bg-border" />
                            </div>
                          )}
                          <div
                            {...dragProps}
                            className={cn(
                              "transition-[opacity,box-shadow,background-color] duration-150 ease-out",
                              dragProps["data-dragging"] && "opacity-40",
                              dragProps["data-over"] && "ring-2 ring-ring bg-accent/30 rounded-lg",
                            )}
                          >
                            <DrawerSortCard
                              rule={rule}
                              fieldLabel={resolveColumnLabel(rule.fieldKey)}
                              isPrimary={idx === 0}
                              onRemove={() => onRemoveSortRule(rule.id)}
                              onToggleDir={() => onToggleSortDir(rule.id)}
                            />
                          </div>
                        </React.Fragment>
                      )
                    })
                  )}

                  {/* Add sort + Remove all */}
                  <div className="flex items-center gap-2 pt-2">
                    <DropdownMenu modal={false}>
                      <DropdownMenuTrigger asChild>
                        <Button
                          type="button"
                          variant="outline"
                          className="flex-1 gap-1.5 h-8 border-dashed text-muted-foreground"
                        >
                          <i className="fa-light fa-plus text-xs" aria-hidden="true" />
                          Add sort
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="start" className={PROPERTIES_SHEET_PORTAL_Z}>
                        <DropdownMenuLabel className="text-xs">Sort by field</DropdownMenuLabel>
                        <DropdownMenuSeparator />
                        {addableSortFields.map(col => (
                          <DropdownMenuItem key={col.key} onSelect={() => onAddSortRule(col.key)}>
                            <i className="fa-light fa-arrow-up-arrow-down text-xs" aria-hidden="true" />
                            {col.label}
                          </DropdownMenuItem>
                        ))}
                        {addableSortFields.length === 0 && (
                          <p className="px-2 py-1.5 text-xs text-muted-foreground">All fields added</p>
                        )}
                      </DropdownMenuContent>
                    </DropdownMenu>
                    {sortRules.length > 0 && (
                      <Button
                        type="button"
                        variant="ghost"
                        size="sm"
                        className="shrink-0 text-destructive-ink hover:text-destructive-ink hover:bg-destructive/10"
                        onClick={() => onSortRulesChange([])}
                      >
                        Remove all
                      </Button>
                    )}
                  </div>
                </div>
              )}

              {/* ── Group ── */}
              {sheetPanel === "group" && (
                <div className="p-4 space-y-2">
                  <p className="text-xs text-muted-foreground mb-3">
                    {groupBy ? `Grouped by ${resolveColumnLabel(groupBy)}.` : "No grouping applied."}
                  </p>
                  <Button
                    type="button"
                    variant="ghost"
                    onClick={() => onGroupByChange(null)}
                    className={cn("w-full justify-start gap-2 px-3 py-2 h-auto text-sm font-normal",
                      !groupBy ? "bg-accent text-accent-foreground font-medium" : "text-muted-foreground",
                    )}
                  >
                    <i className="fa-light fa-ban text-xs" aria-hidden="true" />
                    None
                  </Button>
                  {groupFieldList.map(col => (
                    <Button
                      key={col.key}
                      type="button"
                      variant="ghost"
                      onClick={() => onGroupByChange(groupBy === col.key ? null : col.key)}
                      className={cn("w-full justify-start gap-2 px-3 py-2 h-auto text-sm font-normal",
                        groupBy === col.key ? "bg-accent text-accent-foreground font-medium" : "",
                      )}
                    >
                      <i className="fa-light fa-layer-group text-xs text-muted-foreground" aria-hidden="true" />
                      {col.label}
                      {groupBy === col.key && <i className="fa-solid fa-check text-accent-foreground text-xs ms-auto" aria-hidden="true" />}
                    </Button>
                  ))}
                </div>
              )}

              {/* ── Columns ── */}
              {sheetPanel === "columns" && (
                <div className="p-4">
                  {isBoardView ? (
                    <p className="text-xs text-muted-foreground mb-3">
                      Column visibility and order apply when you use Table. They are saved with this tab.
                    </p>
                  ) : null}
                  <p className="text-xs text-muted-foreground mb-3">
                    {hiddenCols.size === 0
                      ? "All columns visible. Drag to reorder."
                      : `${hiddenCols.size} column${hiddenCols.size !== 1 ? "s" : ""} hidden. Drag handle to reorder.`}
                  </p>
                  <ul className="space-y-0.5 list-none m-0 p-0" aria-label="Column order and visibility">
                    {orderable.map((key, idx, arr) => {
                      const dragProps = colDrag.getItemProps(key)
                      return (
                        <ColumnRow
                          key={key}
                          label={resolveColumnLabel(key)}
                          isFirst={idx === 0}
                          isLast={idx === arr.length - 1}
                          visible={!hiddenCols.has(key)}
                          onToggleVisible={() => onToggleColVisibility(key)}
                          onMoveUp={() => onMoveCol(key, "up")}
                          onMoveDown={() => onMoveCol(key, "down")}
                          draggable={dragProps.draggable}
                          onDragStart={dragProps.onDragStart}
                          onDragOver={dragProps.onDragOver}
                          onDrop={dragProps.onDrop}
                          onDragEnd={dragProps.onDragEnd}
                          isDragging={dragProps["data-dragging"]}
                          isOver={dragProps["data-over"]}
                        />
                      )
                    })}
                  </ul>
                </div>
              )}

              {/* ── Conditional rules ── */}
              {sheetPanel === "conditional-rules" && (
                <ConditionalRulesPanel
                  filterFields={filterFields}
                  rules={conditionalRules}
                  onAdd={onAddConditionalRule}
                  onRemove={onRemoveConditionalRule}
                  onUpdate={onUpdateConditionalRule}
                  renderFilterOptionValue={renderFilterOptionValue}
                />
              )}

            </FloatingSheetPanelBody>
          </>
        )}

      {isCreatingNewView ? (
        <FloatingSheetPanelWorkflowFooter
          onCancel={() => handleSheetOpenChange(false)}
          primaryLabel="Create view"
          onPrimary={() => onCreateNewView?.()}
          primaryDisabled={!newViewName?.trim()}
          primaryIconClassName="fa-light fa-plus text-xs"
        />
      ) : null}

      </FloatingSheetPanelContent>
    </FloatingSheetPanel>
  )
}

// ─────────────────────────────────────────────────────────────────────────────
// ConditionalRulesPanel — same DrawerFilterCard as filters (incl. operator cycle);
// highlight color lives inside the card. Adding a rule expands only that card (like
// add filter from drawer). No And/Or connectors.
// ─────────────────────────────────────────────────────────────────────────────

function ConditionalRulesPanel({
  filterFields,
  rules,
  onAdd,
  onRemove,
  onUpdate,
  renderFilterOptionValue,
}: {
  filterFields: FilterFieldDef[]
  rules: ConditionalRule[]
  onAdd: (rule: Omit<ConditionalRule, "id">, id?: string) => void
  onRemove: (id: string) => void
  onUpdate: (id: string, patch: Partial<ConditionalRule>) => void
  renderFilterOptionValue?: (fieldKey: string, value: string) => React.ReactNode
}) {
  const [expandedIds, setExpandedIds] = React.useState<Set<string>>(() => new Set())

  function toggleExpanded(id: string) {
    setExpandedIds(prev => {
      const next = new Set(prev)
      if (next.has(id)) next.delete(id)
      else next.add(id)
      return next
    })
  }

  return (
    <div className="p-4 space-y-2">
      {rules.length === 0 ? (
        <div className="rounded-xl border border-dashed border-border bg-muted/30 px-4 py-6 text-center space-y-2">
          <div className="inline-flex items-center justify-center size-9 rounded-lg bg-muted mb-1">
            <i className="fa-light fa-palette text-muted-foreground text-base" aria-hidden="true" />
          </div>
          <p className="text-sm font-medium text-foreground">No rules yet</p>
          <p className="text-xs text-muted-foreground leading-relaxed">
            Highlight cells with a background color based on their value.
          </p>
        </div>
      ) : (
        <div className="space-y-2">
          {rules.map(rule => {
            const fd = filterFields.find(f => f.key === rule.fieldKey)
            if (!fd) return null
            return (
              <DrawerFilterCard
                key={rule.id}
                variant="conditional"
                filter={rule}
                fieldDef={fd}
                expanded={expandedIds.has(rule.id)}
                onToggleExpand={() => toggleExpanded(rule.id)}
                onUpdate={onUpdate}
                onRemove={id => {
                  onRemove(id)
                  setExpandedIds(prev => {
                    const next = new Set(prev)
                    next.delete(id)
                    return next
                  })
                }}
                renderOptionLabel={
                  renderFilterOptionValue
                    ? value => renderFilterOptionValue(rule.fieldKey, value)
                    : undefined
                }
              />
            )
          })}
        </div>
      )}

      <div className="flex items-center gap-2 pt-2">
        <DropdownMenu modal={false}>
          <DropdownMenuTrigger asChild>
            <Button
              type="button"
              variant="outline"
              className="flex-1 gap-1.5 h-8 border-dashed text-muted-foreground"
            >
              <i className="fa-light fa-plus text-xs" aria-hidden="true" />
              Add rule
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="start" className={PROPERTIES_SHEET_PORTAL_Z}>
            <DropdownMenuLabel className="text-xs">Rule for column</DropdownMenuLabel>
            <DropdownMenuSeparator />
            {filterFields.map(f => (
              <DropdownMenuItem
                key={f.key}
                onSelect={() => {
                  const id = createConditionalRuleId()
                  onAdd(
                    {
                      fieldKey: f.key,
                      operator: f.operators[0],
                      values: [],
                      bgColor: RULE_COLORS[0].bg,
                      colorSource: "palette",
                    },
                    id,
                  )
                  setExpandedIds(new Set([id]))
                }}
              >
                <i className={`fa-light ${f.icon}`} aria-hidden="true" />
                {f.label}
              </DropdownMenuItem>
            ))}
          </DropdownMenuContent>
        </DropdownMenu>
        {rules.length > 0 && (
          <Button
            type="button"
            variant="ghost"
            size="sm"
            className="shrink-0 text-destructive-ink hover:text-destructive-ink hover:bg-destructive/10"
            onClick={() => {
              rules.forEach(r => onRemove(r.id))
              setExpandedIds(new Set())
            }}
          >
            Remove all
          </Button>
        )}
      </div>
    </div>
  )
}