import React, { useState, useEffect, useRef } from 'react'
import { useVirtualizer } from '@tanstack/react-virtual'
import type { VirtualItem } from '@tanstack/react-virtual'
import { ArrowUp, ArrowDown, Search, ChevronRight, Check } from 'lucide-react'
import {
    TextAUnderlineIcon,
    TrashSimpleIcon,
    MathOperationsIcon,
    ArrowLineLeftIcon,
    ArrowLineRightIcon,
    FunnelSimpleIcon,
} from '@phosphor-icons/react'
import Block from '../../Primitives/Block/Block'
import PrimitiveText from '../../Primitives/PrimitiveText/PrimitiveText'
import { SearchInput } from '../../Inputs/SearchInput'
import Slider from '../../Slider/Slider'
import { SliderSize, SliderValueType } from '../../Slider/types'
import { ColumnDefinition, FilterType, SortDirection } from '../types'
import { TableTokenType } from '../dataTable.tokens'
import {
    SortHandlers,
    FilterHandlers,
    FilterState,
    ColumnFilterHandler,
    SortState,
} from './handlers'
import {
    getSelectMenuItems,
    getMultiSelectMenuItems,
    filterItemsBySearch,
    getColumnTypeConfigForColumn,
} from './utils'
import { FOUNDATION_THEME } from '../../../tokens'
import { useBreakpoints } from '../../../hooks/useBreakPoints'
import { useTheme } from '../../../context/ThemeContext'
import { BREAKPOINTS } from '../../../breakpoints/breakPoints'
import { Popover } from '../../Popover'
import MobileFilterDrawer from './MobileFilterDrawer'
import { Checkbox } from '../../Checkbox'
import { CheckboxSize } from '../../Checkbox/types'
import { VirtualListItem } from '../../VirtualList'
import DateRangePicker from '../../DateRangePicker/DateRangePicker'
import { DateRange } from '../../DateRangePicker/types'
import { parseDateLike, toLocalDateString } from '../utils'

const FILTER_VIRTUAL_ITEM_ESTIMATE_HEIGHT = 40
const FILTER_VIRTUAL_LIST_MAX_HEIGHT = 220
type FilterComponentsProps = {
    column: ColumnDefinition<Record<string, unknown>>
    data?: Record<string, unknown>[]
    tableToken: TableTokenType
    sortHandlers: SortHandlers
    filterHandlers: FilterHandlers
    filterState: FilterState
    sortState: SortState
    /** When false, no filter UI is offered — a filter here could not affect rows. */
    enableFiltering?: boolean
    onColumnFilter?: ColumnFilterHandler
    onRenameHeader?: () => void
    onOperations?: () => void
    onInsertLeft?: () => void
    onInsertRight?: () => void
    onDeleteColumn?: () => void
    onPopoverClose?: () => void
    onFilterApplied?: () => void
}

/** Reusable menu item for the column header popover */
type MenuItemProps = {
    icon: React.ReactNode
    label: string
    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void
    /**
     * Default true. Set false when MenuItem is used
     * as a Radix `asChild` trigger (Popover, etc).
     */
    stopPropagationOnClick?: boolean
    trailingIcon?: React.ReactNode
    isDestructive?: boolean
    tableToken: TableTokenType
} & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onKeyDown'>

const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(
    (
        {
            icon,
            label,
            onClick,
            stopPropagationOnClick = true,
            trailingIcon,
            isDestructive,
            tableToken,
            ...props
        },
        ref
    ) => {
        const { theme } = useTheme()
        const destructiveColor =
            theme === 'dark'
                ? FOUNDATION_THEME.colors.red[400]
                : FOUNDATION_THEME.colors.red[500]
        const interactiveHandlers = onClick
            ? {
                  onClick: (e: React.MouseEvent<HTMLDivElement>) => {
                      if (stopPropagationOnClick) e.stopPropagation()
                      onClick(e)
                  },
                  onKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => {
                      if (e.key === 'Enter' || e.key === ' ') {
                          e.preventDefault()
                          if (stopPropagationOnClick) e.stopPropagation()
                          onClick(
                              e as unknown as React.MouseEvent<HTMLDivElement>
                          )
                      }
                  },
              }
            : {}

        return (
            <Block
                ref={ref}
                {...props}
                display="flex"
                alignItems="center"
                justifyContent="space-between"
                gap={tableToken.dataTable.table.header.filter.itemGap}
                padding={
                    tableToken.dataTable.table.header.filter.sortOption.padding
                }
                borderRadius={
                    tableToken.dataTable.table.header.filter.sortOption
                        .borderRadius
                }
                cursor="pointer"
                backgroundColor="transparent"
                _hover={{
                    backgroundColor:
                        tableToken.dataTable.table.header.filter.sortOption
                            .hoverBackground,
                }}
                {...interactiveHandlers}
                tabIndex={0}
                role="menuitem"
                _focus={{ outline: 'none' }}
                // _focusVisible={{
                //     outline: `1px solid ${FOUNDATION_THEME.colors.primary[500]}`,
                //     outlineOffset: '2px',
                // }}
            >
                <Block
                    display="flex"
                    alignItems="center"
                    gap={tableToken.dataTable.table.header.filter.itemGap}
                >
                    {icon}
                    <PrimitiveText
                        style={{
                            fontSize:
                                tableToken.dataTable.table.header.filter
                                    .sortOption.fontSize,
                            color: isDestructive
                                ? destructiveColor
                                : tableToken.dataTable.table.header.filter
                                      .sortOption.textColor,
                            fontWeight: isDestructive
                                ? 600
                                : tableToken.dataTable.table.header.filter
                                      .sortOption.fontWeight,
                        }}
                    >
                        {label}
                    </PrimitiveText>
                </Block>
                {trailingIcon}
            </Block>
        )
    }
)

const renderSortOption = (
    tableToken: TableTokenType,
    icon: React.ReactNode,
    label: string,
    onClick: () => void,
    isActive: boolean,
    checkColor?: string
) => (
    <Block
        display="flex"
        alignItems="center"
        gap={tableToken.dataTable.table.header.filter.itemGap}
        padding={tableToken.dataTable.table.header.filter.sortOption.padding}
        borderRadius={
            tableToken.dataTable.table.header.filter.sortOption.borderRadius
        }
        cursor="pointer"
        backgroundColor={
            isActive
                ? tableToken.dataTable.table.header.filter.sortOption
                      .hoverBackground
                : 'transparent'
        }
        _hover={{
            backgroundColor:
                tableToken.dataTable.table.header.filter.sortOption
                    .hoverBackground,
        }}
        onClick={onClick}
        onKeyDown={(e) => {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault()
                e.stopPropagation()
                onClick()
            }
        }}
        tabIndex={0}
        role="menuitem"
        _focus={{ outline: 'none' }}
        _focusVisible={{
            outline:
                tableToken.header.actionIcons.columnManagerTrigger?.focusVisible
                    .outline,
            outlineOffset: '2px',
        }}
    >
        {icon}
        <PrimitiveText
            style={{
                fontSize:
                    tableToken.dataTable.table.header.filter.sortOption
                        .fontSize,
                color: tableToken.dataTable.table.header.filter.sortOption
                    .textColor,
                fontWeight:
                    tableToken.dataTable.table.header.filter.sortOption
                        .fontWeight,
                flexGrow: 1,
            }}
        >
            {label}
        </PrimitiveText>
        {isActive && (
            <Check
                size={FOUNDATION_THEME.unit[16]}
                color={
                    checkColor ||
                    tableToken.dataTable.table.header.filter.sortOption
                        .textColor
                }
            />
        )}
    </Block>
)

export const SortOptions: React.FC<{
    column: ColumnDefinition<Record<string, unknown>>
    fieldKey: string
    tableToken: TableTokenType
    sortHandlers: SortHandlers
    sortState: SortState
    onFilterApplied?: () => void
    onPopoverClose?: () => void
}> = ({
    column,
    fieldKey,
    tableToken,
    sortHandlers,
    sortState,
    onFilterApplied,
    onPopoverClose,
}) => {
    const hasDeltaSort =
        column.isDeltaSortable === true && !!column.getSortField
    const isCurrentField = sortState.currentSortField === fieldKey
    const currentDirection = isCurrentField
        ? sortState.currentSortDirection
        : SortDirection.NONE
    const currentSortType = sortState.currentSortType

    const isPrimaryAscendingActive =
        isCurrentField &&
        currentDirection === SortDirection.ASCENDING &&
        (!currentSortType || currentSortType === 'primary')
    const isPrimaryDescendingActive =
        isCurrentField &&
        currentDirection === SortDirection.DESCENDING &&
        (!currentSortType || currentSortType === 'primary')
    const isDeltaAscendingActive =
        isCurrentField &&
        currentDirection === SortDirection.ASCENDING &&
        currentSortType === 'delta'
    const isDeltaDescendingActive =
        isCurrentField &&
        currentDirection === SortDirection.DESCENDING &&
        currentSortType === 'delta'

    return (
        <Block
            display="flex"
            flexDirection="column"
            gap={FOUNDATION_THEME.unit[2]}
        >
            {renderSortOption(
                tableToken,
                <ArrowUp
                    size={FOUNDATION_THEME.unit[16]}
                    color={
                        tableToken.dataTable.table.header.filter.sortOption
                            .iconColor
                    }
                />,
                'Sort Ascending',
                () => {
                    sortHandlers.handleSortAscending(fieldKey, 'primary')
                    onFilterApplied?.()
                    onPopoverClose?.()
                },
                isPrimaryAscendingActive,
                tableToken.dataTable.table.header.filter.sortOption.textColor
            )}
            {renderSortOption(
                tableToken,
                <ArrowDown
                    size={FOUNDATION_THEME.unit[16]}
                    color={
                        tableToken.dataTable.table.header.filter.sortOption
                            .iconColor
                    }
                />,
                'Sort Descending',
                () => {
                    sortHandlers.handleSortDescending(fieldKey, 'primary')
                    onFilterApplied?.()
                    onPopoverClose?.()
                },
                isPrimaryDescendingActive,
                tableToken.dataTable.table.header.filter.sortOption.textColor
            )}
            {hasDeltaSort && (
                <>
                    <Block
                        height="1px"
                        backgroundColor={
                            tableToken.dataTable.table.header.filter
                                .separatorColor
                        }
                        marginY={FOUNDATION_THEME.unit[4]}
                    />
                    <PrimitiveText
                        style={{
                            fontSize:
                                tableToken.dataTable.table.header.filter
                                    .groupLabelFontSize,
                            color: tableToken.dataTable.table.header.filter
                                .groupLabelColor,
                            fontWeight: 600,
                            padding: `${FOUNDATION_THEME.unit[4]} ${tableToken.dataTable.table.header.filter.sortOption.padding}`,
                            textTransform: 'uppercase',
                            letterSpacing: '0.5px',
                        }}
                    >
                        Delta
                    </PrimitiveText>
                    {renderSortOption(
                        tableToken,
                        <ArrowUp
                            size={FOUNDATION_THEME.unit[16]}
                            color={
                                tableToken.dataTable.table.header.filter
                                    .sortOption.iconColor
                            }
                        />,
                        'Sort Ascending',
                        () => {
                            sortHandlers.handleSortAscending(fieldKey, 'delta')
                            onFilterApplied?.()
                            onPopoverClose?.()
                        },
                        isDeltaAscendingActive,
                        tableToken.dataTable.table.header.filter.sortOption
                            .textColor
                    )}
                    {renderSortOption(
                        tableToken,
                        <ArrowDown
                            size={FOUNDATION_THEME.unit[16]}
                            color={
                                tableToken.dataTable.table.header.filter
                                    .sortOption.iconColor
                            }
                        />,
                        'Sort Descending',
                        () => {
                            sortHandlers.handleSortDescending(fieldKey, 'delta')
                            onFilterApplied?.()
                            onPopoverClose?.()
                        },
                        isDeltaDescendingActive,
                        tableToken.dataTable.table.header.filter.sortOption
                            .textColor
                    )}
                </>
            )}
        </Block>
    )
}

export const DropdownSearchSection: React.FC<{
    column: ColumnDefinition<Record<string, unknown>>
    fieldKey: string
    tableToken: TableTokenType
    filterHandlers: FilterHandlers
    filterState: FilterState
}> = ({ fieldKey, tableToken, filterHandlers, filterState }) => (
    <Block>
        <SearchInput
            placeholder={`Search`}
            value={filterState.columnSearchValues[fieldKey] || ''}
            leftSlot={
                <Search
                    size={FOUNDATION_THEME.unit[16]}
                    color={
                        tableToken.dataTable.table.header.filter.sortOption
                            .iconColor
                    }
                />
            }
            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                const value = e.target.value
                filterHandlers.handleSearchChange(fieldKey, value)
            }}
        />
    </Block>
)

export const Separator: React.FC<{ tableToken: TableTokenType }> = ({
    tableToken,
}) => (
    <Block
        height={FOUNDATION_THEME.unit[1]}
        backgroundColor={
            tableToken.dataTable.table.header.filter.separatorColor
        }
    />
)

export const SingleSelectItems: React.FC<{
    column: ColumnDefinition<Record<string, unknown>>
    fieldKey: string
    tableToken: TableTokenType
    filterHandlers: FilterHandlers
    filterState: FilterState
    data?: Record<string, unknown>[]
    onColumnFilter?: ColumnFilterHandler
    onPopoverClose?: () => void
}> = ({
    column,
    fieldKey,
    tableToken,
    filterHandlers,
    filterState,
    data,
    onColumnFilter,
    onPopoverClose,
}) => {
    const menuItems = getSelectMenuItems(column, data)
    const filterSearch = menuItems.map((group) =>
        filterItemsBySearch(
            group.items,
            filterState.columnSearchValues[fieldKey] || ''
        )
    )
    const items: VirtualListItem[] = filterSearch[0].map(
        (item: { label: string; value: string }) => ({
            id: item.value,
            label: item.label,
            value: item.value,
        })
    )
    const virtualScrollRef = useRef<HTMLDivElement>(null)
    const virtualizer = useVirtualizer({
        count: items.length,
        getScrollElement: () => virtualScrollRef.current,
        estimateSize: () => FILTER_VIRTUAL_ITEM_ESTIMATE_HEIGHT,
        overscan: 5,
        getItemKey: (index: number) => items[index]?.id ?? index,
    })
    const virtualItems = virtualizer.getVirtualItems()
    const viewportHeight = Math.min(
        FILTER_VIRTUAL_LIST_MAX_HEIGHT,
        Math.max(items.length * FILTER_VIRTUAL_ITEM_ESTIMATE_HEIGHT, 0)
    )

    return (
        <Block
            display="flex"
            flexDirection="column"
            marginTop={FOUNDATION_THEME.unit[2]}
            padding={`${FOUNDATION_THEME.unit[0]} ${FOUNDATION_THEME.unit[4]} ${FOUNDATION_THEME.unit[4]} ${FOUNDATION_THEME.unit[4]}`}
        >
            {items.length === 0 ? (
                <PrimitiveText
                    style={{
                        fontSize:
                            tableToken.dataTable.table.header.filter.sortOption
                                .fontSize,
                        color: tableToken.dataTable.table.header.filter
                            .groupLabelColor,
                        padding:
                            tableToken.dataTable.table.header.filter.sortOption
                                .padding,
                    }}
                >
                    No results found
                </PrimitiveText>
            ) : (
                <Block
                    ref={virtualScrollRef}
                    style={{
                        maxHeight: viewportHeight,
                        overflow: 'auto',
                        position: 'relative',
                    }}
                >
                    <Block
                        style={{
                            height: virtualizer.getTotalSize(),
                            width: '100%',
                            position: 'relative',
                        }}
                    >
                        {virtualItems.map((virtualItem: VirtualItem) => {
                            const item = items[virtualItem.index]
                            const value = item.value as string
                            const label = item.label as React.ReactNode
                            const selectedValues =
                                filterState.columnSelectedValues[fieldKey]
                            const currentSelected = Array.isArray(
                                selectedValues
                            )
                                ? selectedValues[0]
                                : typeof selectedValues === 'string'
                                  ? selectedValues
                                  : ''
                            const isSelected = currentSelected === value

                            return (
                                <Block
                                    key={String(virtualItem.key)}
                                    data-index={virtualItem.index}
                                    ref={virtualizer.measureElement}
                                    style={{
                                        position: 'absolute',
                                        top: 0,
                                        left: 0,
                                        width: '100%',
                                        transform: `translateY(${virtualItem.start}px)`,
                                    }}
                                >
                                    <Block
                                        display="flex"
                                        alignItems="center"
                                        justifyContent="space-between"
                                        padding={
                                            tableToken.dataTable.table.header
                                                .filter.sortOption.padding
                                        }
                                        borderRadius={
                                            tableToken.dataTable.table.header
                                                .filter.sortOption.borderRadius
                                        }
                                        cursor="pointer"
                                        backgroundColor={
                                            isSelected
                                                ? tableToken.dataTable.table
                                                      .header.filter.sortOption
                                                      .hoverBackground
                                                : 'transparent'
                                        }
                                        _hover={{
                                            backgroundColor:
                                                tableToken.dataTable.table
                                                    .header.filter.sortOption
                                                    .hoverBackground,
                                        }}
                                        onClick={() => {
                                            filterHandlers.handleSelectFilter(
                                                column,
                                                fieldKey,
                                                value,
                                                onColumnFilter
                                            )
                                            onPopoverClose?.()
                                        }}
                                        onKeyDown={(e) => {
                                            if (
                                                e.key === 'Enter' ||
                                                e.key === ' '
                                            ) {
                                                e.preventDefault()
                                                e.stopPropagation()
                                                filterHandlers.handleSelectFilter(
                                                    column,
                                                    fieldKey,
                                                    value,
                                                    onColumnFilter
                                                )
                                                onPopoverClose?.()
                                            }
                                        }}
                                        tabIndex={0}
                                        role="menuitemradio"
                                        aria-checked={isSelected}
                                        _focus={{ outline: 'none' }}
                                        _focusVisible={{
                                            outline:
                                                tableToken.header.actionIcons
                                                    .columnManagerTrigger
                                                    ?.focusVisible.outline,
                                            outlineOffset: '2px',
                                        }}
                                    >
                                        <PrimitiveText
                                            style={{
                                                fontSize:
                                                    tableToken.dataTable.table
                                                        .header.filter
                                                        .sortOption.fontSize,
                                                color: tableToken.dataTable
                                                    .table.header.filter
                                                    .sortOption.textColor,
                                                fontWeight:
                                                    tableToken.dataTable.table
                                                        .header.filter
                                                        .sortOption.fontWeight,
                                                flexGrow: 1,
                                                overflowWrap: 'break-word',
                                                minWidth: 0,
                                            }}
                                        >
                                            {label}
                                        </PrimitiveText>
                                        {isSelected && (
                                            <Check
                                                size={FOUNDATION_THEME.unit[16]}
                                                color={
                                                    tableToken.dataTable.table
                                                        .header.filter
                                                        .sortOption.textColor
                                                }
                                            />
                                        )}
                                    </Block>
                                </Block>
                            )
                        })}
                    </Block>
                </Block>
            )}
        </Block>
    )
}

export const MultiSelectItems: React.FC<{
    column: ColumnDefinition<Record<string, unknown>>
    fieldKey: string
    tableToken: TableTokenType
    filterHandlers: FilterHandlers
    filterState: FilterState
    data?: Record<string, unknown>[]
    onColumnFilter?: ColumnFilterHandler
}> = ({
    column,
    fieldKey,
    tableToken,
    filterHandlers,
    filterState,
    data,
    onColumnFilter,
}) => {
    const menuItems = getMultiSelectMenuItems(column, data)
    const filterSearch = menuItems.map((group) =>
        filterItemsBySearch(
            group.items,
            filterState.columnSearchValues[fieldKey] || ''
        )
    )
    const items: VirtualListItem[] = filterSearch[0].map(
        (item: { label: string; value: string }) => ({
            id: item.value,
            label: item.label,
            value: item.value,
        })
    )
    const virtualScrollRef = useRef<HTMLDivElement>(null)
    const virtualizer = useVirtualizer({
        count: items.length,
        getScrollElement: () => virtualScrollRef.current,
        estimateSize: () => FILTER_VIRTUAL_ITEM_ESTIMATE_HEIGHT,
        overscan: 5,
        getItemKey: (index: number) => items[index]?.id ?? index,
    })
    const virtualItems = virtualizer.getVirtualItems()
    const viewportHeight = Math.min(
        FILTER_VIRTUAL_LIST_MAX_HEIGHT,
        Math.max(items.length * FILTER_VIRTUAL_ITEM_ESTIMATE_HEIGHT, 0)
    )

    return (
        <Block
            display="flex"
            flexDirection="column"
            marginTop={FOUNDATION_THEME.unit[2]}
            padding={`${FOUNDATION_THEME.unit[0]} ${FOUNDATION_THEME.unit[4]} ${FOUNDATION_THEME.unit[4]} ${FOUNDATION_THEME.unit[4]}`}
        >
            {items.length === 0 ? (
                <PrimitiveText
                    style={{
                        fontSize:
                            tableToken.dataTable.table.header.filter.sortOption
                                .fontSize,
                        color: tableToken.dataTable.table.header.filter
                            .groupLabelColor,
                        padding:
                            tableToken.dataTable.table.header.filter.sortOption
                                .padding,
                    }}
                >
                    No results found
                </PrimitiveText>
            ) : (
                <Block
                    ref={virtualScrollRef}
                    style={{
                        maxHeight: viewportHeight,
                        overflow: 'auto',
                        position: 'relative',
                    }}
                >
                    <Block
                        style={{
                            height: virtualizer.getTotalSize(),
                            width: '100%',
                            position: 'relative',
                        }}
                    >
                        {virtualItems.map((virtualItem: VirtualItem) => {
                            const item = items[virtualItem.index]
                            const value = item.value as string
                            const label = item.label as React.ReactNode
                            const selectedValues =
                                filterState.columnSelectedValues[fieldKey]
                            const currentSelected = Array.isArray(
                                selectedValues
                            )
                                ? selectedValues
                                : []

                            const isSelected = currentSelected.includes(value)

                            return (
                                <Block
                                    key={String(virtualItem.key)}
                                    data-index={virtualItem.index}
                                    ref={virtualizer.measureElement}
                                    style={{
                                        position: 'absolute',
                                        top: 0,
                                        left: 0,
                                        width: '100%',
                                        transform: `translateY(${virtualItem.start}px)`,
                                    }}
                                >
                                    <Block
                                        display="flex"
                                        alignItems="center"
                                        justifyContent="space-between"
                                        padding={
                                            tableToken.dataTable.table.header
                                                .filter.sortOption.padding
                                        }
                                        borderRadius={
                                            tableToken.dataTable.table.header
                                                .filter.sortOption.borderRadius
                                        }
                                        cursor="pointer"
                                        backgroundColor={
                                            isSelected
                                                ? tableToken.dataTable.table
                                                      .header.filter.sortOption
                                                      .hoverBackground
                                                : 'transparent'
                                        }
                                        _hover={{
                                            backgroundColor:
                                                tableToken.dataTable.table
                                                    .header.filter.sortOption
                                                    .hoverBackground,
                                        }}
                                        onClick={() => {
                                            filterHandlers.handleMultiSelectFilter(
                                                column,
                                                fieldKey,
                                                value,
                                                onColumnFilter
                                            )
                                        }}
                                        onKeyDown={(e) => {
                                            if (
                                                e.key === 'Enter' ||
                                                e.key === ' '
                                            ) {
                                                e.preventDefault()
                                                e.stopPropagation()
                                                filterHandlers.handleMultiSelectFilter(
                                                    column,
                                                    fieldKey,
                                                    value,
                                                    onColumnFilter
                                                )
                                            }
                                        }}
                                        tabIndex={0}
                                        role="menuitemcheckbox"
                                        aria-checked={isSelected}
                                        _focus={{ outline: 'none' }}
                                        _focusVisible={{
                                            outline:
                                                tableToken.header.actionIcons
                                                    .columnManagerTrigger
                                                    ?.focusVisible.outline,
                                            outlineOffset: '2px',
                                        }}
                                    >
                                        <PrimitiveText
                                            style={{
                                                fontSize:
                                                    tableToken.dataTable.table
                                                        .header.filter
                                                        .sortOption.fontSize,
                                                color: tableToken.dataTable
                                                    .table.header.filter
                                                    .sortOption.textColor,
                                                fontWeight:
                                                    tableToken.dataTable.table
                                                        .header.filter
                                                        .sortOption.fontWeight,
                                                flexGrow: 1,
                                                overflowWrap: 'break-word',
                                                minWidth: 0,
                                            }}
                                        >
                                            {label}
                                        </PrimitiveText>
                                        <Checkbox
                                            checked={isSelected}
                                            size={CheckboxSize.SMALL}
                                        />
                                    </Block>
                                </Block>
                            )
                        })}
                    </Block>
                </Block>
            )}
        </Block>
    )
}

export const SliderFilter: React.FC<{
    column: ColumnDefinition<Record<string, unknown>>
    fieldKey: string
    tableToken: TableTokenType
    filterHandlers: FilterHandlers
    filterState: FilterState
    data?: Record<string, unknown>[]
    onColumnFilter?: ColumnFilterHandler
}> = ({ column, fieldKey, tableToken, filterState, data, onColumnFilter }) => {
    const sliderColumn = column as ColumnDefinition<Record<string, unknown>> & {
        sliderConfig?: {
            min: number
            max: number
            step?: number
            valueType?: string
            prefix?: string
            suffix?: string
            decimalPlaces?: number
        }
    }
    const sliderConfig = sliderColumn.sliderConfig

    const dataValues =
        data
            ?.map((row) => {
                const value = row[column.field]
                return typeof value === 'number'
                    ? value
                    : parseFloat(String(value)) || 0
            })
            .filter((val) => !isNaN(val)) || []

    const dataMin = dataValues.length > 0 ? Math.min(...dataValues) : 0
    const dataMax = dataValues.length > 0 ? Math.max(...dataValues) : 100

    const min = sliderConfig?.min ?? dataMin
    const max = sliderConfig?.max ?? dataMax
    const step = sliderConfig?.step ?? 1

    const currentFilter = filterState.columnSelectedValues[fieldKey]
    const isRangeFilter =
        currentFilter &&
        typeof currentFilter === 'object' &&
        'min' in currentFilter &&
        'max' in currentFilter

    const currentMin =
        isRangeFilter && typeof currentFilter.min === 'number'
            ? currentFilter.min
            : min
    const currentMax =
        isRangeFilter && typeof currentFilter.max === 'number'
            ? currentFilter.max
            : max

    const validCurrentMin = Math.max(min, Math.min(max, currentMin))
    const validCurrentMax = Math.max(min, Math.min(max, currentMax))

    const [localValue, setLocalValue] = useState<[number, number]>([
        validCurrentMin,
        validCurrentMax,
    ])
    const debounceRef = useRef<NodeJS.Timeout | null>(null)

    useEffect(() => {
        setLocalValue([validCurrentMin, validCurrentMax])
    }, [validCurrentMin, validCurrentMax])

    useEffect(() => {
        return () => {
            if (debounceRef.current) {
                clearTimeout(debounceRef.current)
            }
        }
    }, [])

    const debouncedFilterUpdate = (values: [number, number]) => {
        if (debounceRef.current) {
            clearTimeout(debounceRef.current)
        }

        debounceRef.current = setTimeout(() => {
            const filterValue = { min: values[0], max: values[1] }
            if (onColumnFilter) {
                onColumnFilter(
                    fieldKey,
                    FilterType.SLIDER,
                    filterValue,
                    'range'
                )
            }
        }, 300)
    }

    if (!sliderConfig) {
        return (
            <Block
                display="flex"
                flexDirection="column"
                gap={tableToken.dataTable.table.header.filter.gap}
                padding={`${FOUNDATION_THEME.unit[0]} ${FOUNDATION_THEME.unit[8]}`}
            >
                <PrimitiveText
                    style={{
                        fontSize:
                            tableToken.dataTable.table.header.filter
                                .groupLabelFontSize,
                        color: tableToken.dataTable.table.header.filter
                            .groupLabelColor,
                    }}
                >
                    Slider configuration missing
                </PrimitiveText>
            </Block>
        )
    }

    const handleSliderChange = (values: number[]) => {
        const [newMin, newMax] = values
        const newValue: [number, number] = [newMin, newMax]

        setLocalValue(newValue)

        debouncedFilterUpdate(newValue)
    }

    const getValueType = (): SliderValueType => {
        switch (sliderConfig.valueType) {
            case 'percentage':
                return SliderValueType.PERCENTAGE
            case 'decimal':
                return SliderValueType.DECIMAL
            default:
                return SliderValueType.NUMBER
        }
    }

    return (
        <Block
            display="flex"
            flexDirection="column"
            gap={tableToken.dataTable.table.header.filter.gap}
            padding={`${FOUNDATION_THEME.unit[8]} ${FOUNDATION_THEME.unit[8]}`}
        >
            <PrimitiveText
                style={{
                    fontSize:
                        tableToken.dataTable.table.header.filter
                            .groupLabelFontSize,
                    color: tableToken.dataTable.table.header.filter
                        .groupLabelColor,
                    fontWeight:
                        tableToken.dataTable.table.header.filter
                            .groupLabelFontWeight,
                    textTransform:
                        tableToken.dataTable.table.header.filter
                            .groupLabelTextTransform,
                    marginBottom: FOUNDATION_THEME.unit[8],
                }}
            >
                Filter by Range
            </PrimitiveText>

            <Block
                display="flex"
                flexDirection="column"
                gap={FOUNDATION_THEME.unit[8]}
            >
                <Block
                    display="flex"
                    justifyContent="space-between"
                    alignItems="center"
                >
                    <PrimitiveText
                        style={{
                            fontSize:
                                tableToken.dataTable.table.header.filter
                                    .itemFontSize,
                            color: tableToken.dataTable.table.header.filter
                                .normalTextColor,
                        }}
                    >
                        {sliderConfig.prefix || ''}
                        {localValue[0]}
                        {sliderConfig.suffix || ''}
                    </PrimitiveText>
                    <PrimitiveText
                        style={{
                            fontSize:
                                tableToken.dataTable.table.header.filter
                                    .itemFontSize,
                            color: tableToken.dataTable.table.header.filter
                                .normalTextColor,
                        }}
                    >
                        {sliderConfig.prefix || ''}
                        {localValue[1]}
                        {sliderConfig.suffix || ''}
                    </PrimitiveText>
                </Block>

                <Slider
                    size={SliderSize.SMALL}
                    min={min}
                    max={max}
                    step={step}
                    value={localValue}
                    onValueChange={handleSliderChange}
                    valueFormat={{
                        type: getValueType(),
                        decimalPlaces: sliderConfig.decimalPlaces || 0,
                        prefix: sliderConfig.prefix || '',
                        suffix: sliderConfig.suffix || '',
                    }}
                    showValueLabels={false}
                />

                <Block
                    display="flex"
                    justifyContent="space-between"
                    alignItems="center"
                >
                    <PrimitiveText
                        style={{
                            fontSize: '11px',
                            color: tableToken.dataTable.table.header.filter
                                .groupLabelColor,
                        }}
                    >
                        {sliderConfig.prefix || ''}
                        {min}
                        {sliderConfig.suffix || ''}
                    </PrimitiveText>
                    <PrimitiveText
                        style={{
                            fontSize: '11px',
                            color: tableToken.dataTable.table.header.filter
                                .groupLabelColor,
                        }}
                    >
                        {sliderConfig.prefix || ''}
                        {max}
                        {sliderConfig.suffix || ''}
                    </PrimitiveText>
                </Block>
            </Block>
        </Block>
    )
}

export const DateFilter: React.FC<{
    column: ColumnDefinition<Record<string, unknown>>
    fieldKey: string
    tableToken: TableTokenType
    filterState: FilterState
    onColumnFilter?: ColumnFilterHandler
}> = ({ column, fieldKey, tableToken, filterState, onColumnFilter }) => {
    const { theme } = useTheme()
    const destructiveColor =
        theme === 'dark'
            ? FOUNDATION_THEME.colors.red[400]
            : FOUNDATION_THEME.colors.red[600]
    const selectedValue = filterState.columnSelectedValues[fieldKey]
    const selectedRange = Array.isArray(selectedValue)
        ? selectedValue
        : typeof selectedValue === 'string' && selectedValue
          ? [selectedValue, selectedValue]
          : []

    const pickerValue: DateRange | undefined = (() => {
        if (selectedRange.length === 0 || !selectedRange[0]) return undefined
        const start = parseDateLike(selectedRange[0])
        if (!start) return undefined
        const end = parseDateLike(selectedRange[1] || selectedRange[0]) || start
        return { startDate: start, endDate: end }
    })()
    const hasActiveDateRange = selectedRange.length > 0

    return (
        <Block display="flex" flexDirection="column">
            <DateRangePicker
                value={pickerValue}
                onChange={(range) => {
                    const start = toLocalDateString(range.startDate)
                    const end = toLocalDateString(
                        range.endDate || range.startDate
                    )
                    onColumnFilter?.(
                        String(column.field),
                        FilterType.DATE,
                        [start, end],
                        'range'
                    )
                }}
                showDateTimePicker={false}
                showDateInput={false}
                showPresets={false}
                allowSingleDateSelection={false}
                useDrawerOnMobile={false}
                popoverConfig={{
                    side: 'right',
                    align: 'start',
                    sideOffset: 10,
                }}
                triggerConfig={{
                    style: { width: '100%' },
                    renderTrigger: ({ onClick }) => (
                        <MenuItem
                            icon={
                                <FunnelSimpleIcon
                                    size={FOUNDATION_THEME.unit[16]}
                                    color={
                                        tableToken.dataTable.table.header.filter
                                            .sortOption.iconColor
                                    }
                                    weight="bold"
                                />
                            }
                            label="Filter"
                            onClick={(e) => {
                                e.stopPropagation()
                                onClick()
                            }}
                            trailingIcon={
                                <ChevronRight
                                    size={FOUNDATION_THEME.unit[16]}
                                    color={
                                        tableToken.dataTable.table.header.filter
                                            .sortOption.iconColor
                                    }
                                />
                            }
                            tableToken={tableToken}
                            style={{ width: '100%' }}
                        />
                    ),
                }}
            />
            {hasActiveDateRange && (
                <MenuItem
                    icon={
                        <TrashSimpleIcon
                            size={FOUNDATION_THEME.unit[16]}
                            color={destructiveColor}
                            weight="bold"
                        />
                    }
                    label="Clear Filter"
                    onClick={(e) => {
                        e.stopPropagation()
                        onColumnFilter?.(
                            String(column.field),
                            FilterType.DATE,
                            [],
                            'range'
                        )
                    }}
                    isDestructive
                    tableToken={tableToken}
                    style={{ width: '100%' }}
                />
            )}
        </Block>
    )
}

export const ColumnFilter: React.FC<FilterComponentsProps> = ({
    column,
    data,
    tableToken,
    sortHandlers,
    filterHandlers,
    filterState,
    sortState,
    enableFiltering = true,
    onColumnFilter,
    onRenameHeader,
    onOperations,
    onInsertLeft,
    onInsertRight,
    onDeleteColumn,
    onPopoverClose,
    onFilterApplied,
}) => {
    const { theme } = useTheme()
    const destructiveColor =
        theme === 'dark'
            ? FOUNDATION_THEME.colors.red[400]
            : FOUNDATION_THEME.colors.red[600]
    const { breakPointLabel } = useBreakpoints(BREAKPOINTS)
    const isMobile = breakPointLabel === 'sm'
    const columnConfig = getColumnTypeConfigForColumn(column)
    const fieldKey = String(column.field)
    const [nestedFilterOpen, setNestedFilterOpen] = useState(false)
    const hasFiltering = columnConfig.supportsFiltering && enableFiltering
    const selectedFilterValue = filterState.columnSelectedValues[fieldKey]
    // An applied value can be absent from the current option list (async or
    // server-driven options), so the clear affordance is driven by the filter
    // state rather than by what the dropdown happens to render.
    const hasActiveSelection = Array.isArray(selectedFilterValue)
        ? selectedFilterValue.length > 0
        : selectedFilterValue !== undefined && selectedFilterValue !== ''
    const menuRef = useRef<HTMLDivElement>(null)
    const [focusedIndex, setFocusedIndex] = useState<number>(-1)

    const isSortingEnabled =
        columnConfig.supportsSorting && column.isSortable !== false

    const iconColor =
        tableToken.dataTable.table.header.filter.sortOption.iconColor
    const iconSize = FOUNDATION_THEME.unit[16]

    // Get all focusable menu items
    const getMenuItems = (): HTMLElement[] => {
        if (!menuRef.current) return []
        return Array.from(
            menuRef.current.querySelectorAll(
                '[role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"]'
            )
        ) as HTMLElement[]
    }

    // Handle arrow key navigation
    const handleMenuKeyDown = (e: React.KeyboardEvent) => {
        const items = getMenuItems()
        if (items.length === 0) return

        const currentFocused = document.activeElement as HTMLElement
        const currentIndex = items.findIndex((item) => item === currentFocused)
        let newIndex = currentIndex >= 0 ? currentIndex : focusedIndex

        switch (e.key) {
            case 'ArrowDown':
                e.preventDefault()
                e.stopPropagation()
                newIndex = newIndex < items.length - 1 ? newIndex + 1 : 0
                setFocusedIndex(newIndex)
                items[newIndex]?.focus()
                break
            case 'ArrowUp':
                e.preventDefault()
                e.stopPropagation()
                newIndex = newIndex > 0 ? newIndex - 1 : items.length - 1
                setFocusedIndex(newIndex)
                items[newIndex]?.focus()
                break
            case 'Home':
                e.preventDefault()
                e.stopPropagation()
                setFocusedIndex(0)
                items[0]?.focus()
                break
            case 'End':
                e.preventDefault()
                e.stopPropagation()
                setFocusedIndex(items.length - 1)
                items[items.length - 1]?.focus()
                break
            case 'Escape':
                e.preventDefault()
                e.stopPropagation()
                onPopoverClose?.()
                break
        }
    }

    useEffect(() => {
        if (nestedFilterOpen) {
            setFocusedIndex(-1)
        }
    }, [nestedFilterOpen])

    if (isMobile) {
        return (
            <MobileFilterDrawer
                column={column}
                data={data}
                tableToken={tableToken}
                sortHandlers={sortHandlers}
                filterHandlers={filterHandlers}
                filterState={filterState}
                sortState={sortState}
                enableFiltering={enableFiltering}
                onColumnFilter={onColumnFilter}
                onPopoverClose={onPopoverClose}
            />
        )
    }

    return (
        <Block
            ref={menuRef}
            display="flex"
            flexDirection="column"
            gap={FOUNDATION_THEME.unit[0]}
            padding={FOUNDATION_THEME.unit[4]}
            onKeyDown={handleMenuKeyDown}
            role="menu"
            _focus={{ outline: 'none' }}
            _focusVisible={{ outline: 'none' }}
        >
            {/* Sort — direct options */}
            {isSortingEnabled && (
                <SortOptions
                    column={column}
                    fieldKey={fieldKey}
                    tableToken={tableToken}
                    sortHandlers={sortHandlers}
                    sortState={sortState}
                    onFilterApplied={onFilterApplied}
                    onPopoverClose={onPopoverClose}
                />
            )}

            {/* Filter — direct for date range, nested for others */}
            {hasFiltering && columnConfig.filterComponent === 'dateRange' && (
                <DateFilter
                    column={column}
                    fieldKey={fieldKey}
                    tableToken={tableToken}
                    filterState={filterState}
                    onColumnFilter={onColumnFilter}
                />
            )}

            {hasFiltering && columnConfig.filterComponent !== 'dateRange' && (
                <Popover
                    trigger={
                        <MenuItem
                            icon={
                                <FunnelSimpleIcon
                                    size={iconSize}
                                    color={iconColor}
                                    weight="bold"
                                />
                            }
                            label="Filter"
                            stopPropagationOnClick={false}
                            trailingIcon={
                                <ChevronRight
                                    size={iconSize}
                                    color={iconColor}
                                />
                            }
                            tableToken={tableToken}
                        />
                    }
                    maxWidth={220}
                    minWidth={220}
                    side="right"
                    align="start"
                    sideOffset={10}
                    open={nestedFilterOpen}
                    onOpenChange={(open) => {
                        setNestedFilterOpen(open)
                    }}
                >
                    <Block
                        display="flex"
                        flexDirection="column"
                        gap={FOUNDATION_THEME.unit[4]}
                        maxHeight="300px"
                        overflow="auto"
                    >
                        {(columnConfig.filterComponent === 'multiselect' ||
                            columnConfig.filterComponent === 'select') && (
                            <DropdownSearchSection
                                column={column}
                                fieldKey={fieldKey}
                                tableToken={tableToken}
                                filterHandlers={filterHandlers}
                                filterState={filterState}
                            />
                        )}

                        {columnConfig.filterComponent === 'select' && (
                            <SingleSelectItems
                                column={column}
                                fieldKey={fieldKey}
                                tableToken={tableToken}
                                filterHandlers={filterHandlers}
                                filterState={filterState}
                                data={data}
                                onColumnFilter={onColumnFilter}
                                onPopoverClose={() => {
                                    setNestedFilterOpen(false)
                                    onPopoverClose?.()
                                }}
                            />
                        )}

                        {columnConfig.filterComponent === 'multiselect' && (
                            <MultiSelectItems
                                column={column}
                                fieldKey={fieldKey}
                                tableToken={tableToken}
                                filterHandlers={filterHandlers}
                                filterState={filterState}
                                data={data}
                                onColumnFilter={onColumnFilter}
                            />
                        )}

                        {columnConfig.filterComponent === 'slider' && (
                            <SliderFilter
                                column={column}
                                fieldKey={fieldKey}
                                tableToken={tableToken}
                                filterHandlers={filterHandlers}
                                filterState={filterState}
                                data={data}
                                onColumnFilter={onColumnFilter}
                            />
                        )}
                    </Block>
                </Popover>
            )}

            {hasFiltering &&
                columnConfig.filterComponent !== 'dateRange' &&
                hasActiveSelection && (
                    <MenuItem
                        icon={
                            <TrashSimpleIcon
                                size={iconSize}
                                color={destructiveColor}
                                weight="bold"
                            />
                        }
                        label="Clear Filter"
                        onClick={(e) => {
                            e.stopPropagation()
                            setNestedFilterOpen(false)
                            onColumnFilter?.(
                                String(column.field),
                                columnConfig.filterType,
                                [],
                                'equals'
                            )
                        }}
                        isDestructive
                        tableToken={tableToken}
                    />
                )}

            {onOperations && (
                <MenuItem
                    icon={
                        <MathOperationsIcon
                            size={iconSize}
                            color={iconColor}
                            weight="bold"
                        />
                    }
                    label="Operations"
                    onClick={() => {
                        setNestedFilterOpen(false)
                        onOperations()
                        onPopoverClose?.()
                    }}
                    tableToken={tableToken}
                />
            )}

            {(onRenameHeader || onInsertLeft || onInsertRight) && (
                <Separator tableToken={tableToken} />
            )}

            {onRenameHeader && (
                <MenuItem
                    icon={
                        <TextAUnderlineIcon
                            size={iconSize}
                            color={iconColor}
                            weight="bold"
                        />
                    }
                    label="Rename"
                    onClick={() => {
                        setNestedFilterOpen(false)
                        onRenameHeader()
                        onPopoverClose?.()
                    }}
                    tableToken={tableToken}
                />
            )}

            {/* Insert Left — callback */}
            {onInsertLeft && (
                <MenuItem
                    icon={
                        <ArrowLineLeftIcon
                            size={iconSize}
                            color={iconColor}
                            weight="bold"
                        />
                    }
                    label="Insert Left"
                    onClick={() => {
                        setNestedFilterOpen(false)
                        onInsertLeft()
                        onPopoverClose?.()
                    }}
                    tableToken={tableToken}
                />
            )}

            {onInsertRight && (
                <MenuItem
                    icon={
                        <ArrowLineRightIcon
                            size={iconSize}
                            color={iconColor}
                            weight="bold"
                        />
                    }
                    label="Insert Right"
                    onClick={() => {
                        setNestedFilterOpen(false)
                        onInsertRight()
                        onPopoverClose?.()
                    }}
                    tableToken={tableToken}
                />
            )}

            {onDeleteColumn && <Separator tableToken={tableToken} />}

            {onDeleteColumn && (
                <MenuItem
                    icon={
                        <TrashSimpleIcon
                            size={iconSize}
                            color={destructiveColor}
                            weight="bold"
                        />
                    }
                    label="Delete"
                    isDestructive
                    onClick={() => {
                        setNestedFilterOpen(false)
                        onDeleteColumn()
                        onPopoverClose?.()
                    }}
                    tableToken={tableToken}
                />
            )}
        </Block>
    )
}