"use client"
import * as React from "react"
import { cn } from "../../lib/utils"
import { Button } from "../ui/button"
import { Input } from "../ui/input"
import { Tip } from "../ui/tip"
import { FilterDateCalendar } from "../data-table/filter-date-calendar"
import { FilterDateRangeControl } from "../data-table/filter-date-range-control"
import { FilterPersonOptionList } from "../data-table/filter-person-option-list"
import { FilterRangeControl } from "../data-table/filter-range-control"
import { FilterTextValueInput } from "../data-table/filter-text-value-input"
import type { FilterFieldRuntimeContext } from "../../lib/column-filter-context"
import {
  type ActiveFilter,
  type ConditionalRule,
  type FilterFieldDef,
  type FilterOperator,
  OPERATOR_LABELS,
  FILTER_TEXT_MASK_FORMAT_HINT,
} from "../../lib/table-properties-types"
import { PROPERTIES_SHEET_TOOLTIP_Z, PROPERTIES_SHEET_TOOLTIP_Z_INDEX } from "./sheet-portal-z"
import { PropertiesCardActions } from "./properties-card-icon-action"
import { ConditionalRuleColorPicker } from "./conditional-rule-color-picker"

type DrawerFilterCardBaseProps = {
  fieldDef: FilterFieldDef
  fieldContext?: FilterFieldRuntimeContext
  expanded: boolean
  onToggleExpand: () => void
  onRemove: (id: string) => void
  renderOptionLabel?: (value: string) => React.ReactNode
}

export type DrawerFilterCardProps =
  | (DrawerFilterCardBaseProps & {
      variant?: "filter"
      filter: ActiveFilter
      onUpdate: (id: string, patch: Partial<ActiveFilter>) => void
    })
  | (DrawerFilterCardBaseProps & {
      variant: "conditional"
      filter: ConditionalRule
      onUpdate: (id: string, patch: Partial<ConditionalRule>) => void
    })

/** Inline filter card used inside the Table Properties drawer (filter or conditional rule). */
export function DrawerFilterCard(props: DrawerFilterCardProps) {
  const {
    fieldDef,
    fieldContext,
    expanded,
    onToggleExpand,
    onRemove,
    renderOptionLabel,
  } = props

  const isCond = props.variant === "conditional"
  const filter = props.filter
  const filterId = filter.id
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const onUpdate = props.onUpdate as (id: string, patch: any) => void

  const [optSearch, setOptSearch] = React.useState("")
  const isPersonSelect =
    fieldDef.type === "select" && fieldDef.selectVariant === "person"
  const personOptions = fieldContext?.personOptions ?? []
  const options = isPersonSelect
    ? personOptions.map(p => ({ value: p.value, label: p.label }))
    : (fieldDef.options ?? [])
  const showSearch = !isPersonSelect && options.length > 8
  const filteredOpts = optSearch
    ? options.filter(o => o.label.toLowerCase().includes(optSearch.toLowerCase()))
    : options

  const values = filter.values
  const selectedValueSet = React.useMemo(() => new Set(values), [values])

  /** Roving tabindex over the option list (same pattern as `ViewSegmentedControl`). */
  const optionRefs = React.useRef<(HTMLDivElement | null)[]>([])
  const [activeOptionIndex, setActiveOptionIndex] = React.useState(0)
  const optionCount = filteredOpts.length
  const activeIndex = activeOptionIndex < optionCount ? activeOptionIndex : 0

  React.useEffect(() => {
    setActiveOptionIndex(0)
  }, [optSearch])

  const moveActiveOption = React.useCallback(
    (index: number) => {
      if (optionCount === 0) return
      const i = ((index % optionCount) + optionCount) % optionCount
      setActiveOptionIndex(i)
      requestAnimationFrame(() => {
        optionRefs.current[i]?.focus()
      })
    },
    [optionCount],
  )

  const onOptionKeyDown = React.useCallback(
    (e: React.KeyboardEvent<HTMLDivElement>, index: number) => {
      if (e.key === "ArrowDown") {
        e.preventDefault()
        moveActiveOption(index + 1)
      } else if (e.key === "ArrowUp") {
        e.preventDefault()
        moveActiveOption(index - 1)
      } else if (e.key === "Home") {
        e.preventDefault()
        moveActiveOption(0)
      } else if (e.key === "End") {
        e.preventDefault()
        moveActiveOption(optionCount - 1)
      }
    },
    [moveActiveOption, optionCount],
  )
  const rangeMin = fieldContext?.rangeMin ?? fieldDef.rangeMin ?? 0
  const rangeMax = fieldContext?.rangeMax ?? fieldDef.rangeMax ?? 100
  const rangeStep = fieldContext?.rangeStep ?? fieldDef.rangeStep ?? 1

  const effectiveOperator =
    (fieldDef.type === "select" || fieldDef.type === "date" || fieldDef.type === "date-range")
    && filter.operator !== "is"
    && filter.operator !== "is_not"
      ? "is"
      : filter.operator

  const hideOperatorCycle =
    fieldDef.type === "range" || fieldDef.type === "date-range"

  function toggleValue(val: string) {
    const next = values.includes(val) ? values.filter(v => v !== val) : [...values, val]
    onUpdate(filterId, { values: next })
  }

  function cycleOperator() {
    const ops = fieldDef.operators
    const idx = ops.indexOf(effectiveOperator as FilterOperator)
    const i = idx === -1 ? 0 : idx
    onUpdate(filterId, { operator: ops[(i + 1) % ops.length] })
  }

  const removeLabel = isCond ? "rule" : "filter"
  const expandLabel = expanded ? `Collapse ${fieldDef.label}` : `Expand ${fieldDef.label}`
  const rule = isCond ? (props.filter as ConditionalRule) : null

  const hasSelection =
    fieldDef.type === "date-range"
      ? Boolean(values[0] || values[1])
      : fieldDef.type === "range"
        ? values.length >= 2
        : values.length > 0

  return (
    <div className="rounded-lg border border-border overflow-hidden">
      <div>
      <div className="flex items-center justify-between px-3 py-2.5 gap-2">
        <div className="flex-1 min-w-0">
          <p className="text-sm font-semibold text-foreground">{fieldDef.label}</p>
          <Tip
            label="Change operator"
            side="left"
            contentClassName={PROPERTIES_SHEET_TOOLTIP_Z}
            contentZIndex={PROPERTIES_SHEET_TOOLTIP_Z_INDEX}
          >
            {hideOperatorCycle ? (
              <span className="text-xs text-muted-foreground">between</span>
            ) : (
              <Button
                type="button"
                variant="ghost"
                size="xs"
                aria-label={`Operator: ${OPERATOR_LABELS[effectiveOperator as FilterOperator]} — click to cycle`}
                onClick={e => {
                  e.stopPropagation()
                  cycleOperator()
                }}
                className="h-auto py-0 px-1 -ms-1 text-xs text-muted-foreground font-normal"
              >
                {OPERATOR_LABELS[effectiveOperator as FilterOperator]}
                <i className="fa-light fa-chevron-down text-xs" aria-hidden="true" />
              </Button>
            )}
          </Tip>
        </div>
        <PropertiesCardActions
          groupAriaLabel={`${fieldDef.label} actions`}
          removeLabel={`Remove ${fieldDef.label} ${removeLabel}`}
          expandLabel={expandLabel}
          expanded={expanded}
          onRemove={e => {
            e.stopPropagation()
            onRemove(filterId)
          }}
          onToggleExpand={onToggleExpand}
        />
      </div>

      {expanded && (
        <div className="border-t border-border">
          {fieldDef.type === "select" && isPersonSelect ? (
            <FilterPersonOptionList
              options={personOptions}
              selectedValues={values}
              onToggleValue={toggleValue}
            />
          ) : fieldDef.type === "select" ? (
            <>
              {showSearch && (
                <div className="px-3 pt-2 pb-1">
                  <Input placeholder="Search…" value={optSearch} onChange={e => setOptSearch(e.target.value)} className="h-7 text-xs" />
                </div>
              )}
              <div className="max-h-52 overflow-y-auto py-1">
              <div
                role="listbox"
                aria-multiselectable
                aria-label={`${fieldDef.label} options`}
              >
                {filteredOpts.map((opt, optIndex) => {
                  const checked = selectedValueSet.has(opt.value)
                  return (
                    <div
                      key={opt.value}
                      ref={el => {
                        optionRefs.current[optIndex] = el
                      }}
                      role="option"
                      aria-selected={checked}
                      tabIndex={optIndex === activeIndex ? 0 : -1}
                      onClick={() => toggleValue(opt.value)}
                      onKeyDown={e => {
                        if (e.key === "Enter" || e.key === " ") { e.preventDefault(); toggleValue(opt.value); return }
                        onOptionKeyDown(e, optIndex)
                      }}
                      className="flex cursor-pointer select-none items-center gap-2.5 px-3 py-2 text-sm hover:bg-interactive-hover focus-visible:bg-interactive-hover focus-visible:outline-none"
                    >
                      <span aria-hidden="true" data-slot="checkbox" data-state={checked ? "checked" : "unchecked"} className={cn(
                        "inline-flex items-center justify-center size-3.5 shrink-0 rounded-[3px] border transition-colors",
                        checked ? "bg-primary border-primary text-primary-foreground" : "border-input bg-background"
                      )}>
                        {checked && <i className="fa-solid fa-check text-xs text-current" aria-hidden="true" />}
                      </span>
                      {renderOptionLabel
                        ? renderOptionLabel(opt.value)
                        : <span className="text-foreground">{opt.label}</span>}
                    </div>
                  )
                })}
              </div>
              {filteredOpts.length === 0 && (
                <p className="px-3 py-2 text-xs text-muted-foreground">No options found</p>
              )}
              </div>
            </>
          ) : fieldDef.type === "date" ? (
            <div className="p-2">
              <FilterDateCalendar
                label={`${fieldDef.label} — choose date`}
                valueYmd={filter.values[0]}
                onChangeYmd={(ymd) =>
                  onUpdate(filterId, { values: ymd ? [ymd] : [] })
                }
              />
            </div>
          ) : fieldDef.type === "date-range" ? (
            <div className="p-2">
              <FilterDateRangeControl
                label={`${fieldDef.label} — choose date range`}
                values={values}
                onChangeYmd={(start, end) => {
                  const next = [start ?? "", end ?? ""]
                  onUpdate(filterId, { values: next.some(Boolean) ? next : [] })
                }}
              />
            </div>
          ) : fieldDef.type === "text" ? (
            <div className="space-y-1.5 p-3" data-properties-initial-focus>
              <FilterTextValueInput
                mask={fieldDef.textMask}
                aria-label={`${fieldDef.label} value`}
                placeholder={`Enter ${fieldDef.label.toLowerCase()}…`}
                value={values[0] ?? ""}
                onValueChange={next => onUpdate(filterId, { values: [next] })}
                className="text-sm"
                autoFocus
              />
              {fieldDef.textMask ? (
                <p className="text-xs text-muted-foreground">
                  Format: {FILTER_TEXT_MASK_FORMAT_HINT[fieldDef.textMask]}
                </p>
              ) : null}
            </div>
          ) : fieldDef.type === "range" ? (
            <FilterRangeControl
              min={rangeMin}
              max={rangeMax}
              step={rangeStep}
              unit={fieldDef.rangeUnit}
              values={
                values.length >= 2
                  ? values
                  : [String(rangeMin), String(rangeMax)]
              }
              onValuesChange={(lo, hi) =>
                onUpdate(filterId, { values: [String(lo), String(hi)] })
              }
            />
          ) : null}
          {hasSelection ? (
            <div className="sticky bottom-0 border-t border-border bg-card p-2">
              <Button
                type="button"
                variant="outline"
                size="sm"
                onClick={() => onUpdate(filterId, { values: [] })}
                className="w-full justify-center gap-1.5 text-xs text-muted-foreground"
              >
                <i className="fa-light fa-xmark text-xs" aria-hidden="true" />
                Clear selection
              </Button>
            </div>
          ) : null}
        </div>
      )}

      {isCond && rule && (
        <ConditionalRuleColorPicker rule={rule} onUpdate={onUpdate} />
      )}
      </div>
    </div>
  )
}