import React, { useState, useEffect, useRef } from 'react'
import {
    ArrowUp,
    ArrowDown,
    ListFilter,
    ChevronRight,
    Search,
} from 'lucide-react'
import { TrashSimpleIcon } from '@phosphor-icons/react'
import Block from '../../Primitives/Block/Block'
import PrimitiveText from '../../Primitives/PrimitiveText/PrimitiveText'
import { TextInput } from '../../Inputs/TextInput'
import { Checkbox } from '../../Checkbox'
import { CheckboxSize } from '../../Checkbox/types'
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 { useTheme } from '../../../context/ThemeContext'
import {
    Drawer,
    DrawerPortal,
    DrawerOverlay,
    DrawerContent,
    DrawerBody,
} from '../../Drawer'
import DateRangePicker from '../../DateRangePicker/DateRangePicker'
import { DateRange } from '../../DateRangePicker/types'
import { parseDateLike, toLocalDateString } from '../utils'

type MobileFilterDrawerProps = {
    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
    onPopoverClose?: () => void
}

export const MobileFilterDrawer: React.FC<MobileFilterDrawerProps> = ({
    column,
    data,
    tableToken,
    sortHandlers,
    filterHandlers,
    filterState,
    sortState,
    enableFiltering = true,
    onColumnFilter,
    onPopoverClose,
}) => {
    const [filterDrawerOpen, setFilterDrawerOpen] = useState(false)
    const { theme } = useTheme()
    const destructiveColor =
        theme === 'dark'
            ? FOUNDATION_THEME.colors.red[400]
            : FOUNDATION_THEME.colors.red[600]
    const filterToken = tableToken.dataTable.table.header.filter

    const columnConfig = getColumnTypeConfigForColumn(column)
    const fieldKey = String(column.field)
    const hasFiltering = columnConfig.supportsFiltering && enableFiltering

    // Mirrors the desktop clear affordance: an applied value can be absent from
    // the current option list, so this is driven by filter state rather than by
    // what the option list happens to render. The date filter has its own clear
    // inside the nested drawer.
    const selectedFilterValue = filterState.columnSelectedValues[fieldKey]
    const hasActiveSelection = Array.isArray(selectedFilterValue)
        ? selectedFilterValue.length > 0
        : selectedFilterValue !== undefined && selectedFilterValue !== ''

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

    const isCurrentField = sortState.currentSortField === fieldKey
    const currentDirection = isCurrentField
        ? sortState.currentSortDirection
        : SortDirection.NONE
    const isAscendingActive = currentDirection === SortDirection.ASCENDING
    const isDescendingActive = currentDirection === SortDirection.DESCENDING

    const handleSortAndClose = (sortFn: () => void) => {
        sortFn()
        onPopoverClose?.()
    }

    const handleOpenFilterDrawer = () => {
        setFilterDrawerOpen(true)
    }

    const handleCloseFilterDrawer = () => {
        setFilterDrawerOpen(false)
    }

    const renderSortItem = (
        icon: React.ReactNode,
        label: string,
        onClick: () => void,
        isActive: boolean = false
    ) => (
        <Block
            display="flex"
            alignItems="center"
            gap={FOUNDATION_THEME.unit[8]}
            padding="14px 20px"
            cursor="pointer"
            backgroundColor={
                isActive
                    ? filterToken.sortOption.hoverBackground
                    : 'transparent'
            }
            _hover={{
                backgroundColor: filterToken.sortOption.hoverBackground,
            }}
            onClick={onClick}
        >
            {icon}
            <PrimitiveText
                style={{
                    fontSize: 14,
                    color: filterToken.sortOption.textColor,
                    fontWeight: 500,
                }}
            >
                {label}
            </PrimitiveText>
        </Block>
    )

    const renderFilterItem = (
        label: string,
        isSelected: boolean,
        onClick: () => void
    ) => (
        <Block
            display="flex"
            alignItems="center"
            justifyContent="space-between"
            padding="14px 20px"
            cursor="pointer"
            backgroundColor={
                isSelected ? filterToken.selectedBackground : 'transparent'
            }
            _hover={{
                backgroundColor: filterToken.hoverBackground,
            }}
            onClick={onClick}
        >
            <PrimitiveText
                style={{
                    fontSize: 14,
                    color: isSelected
                        ? filterToken.selectedTextColor
                        : filterToken.normalTextColor,
                    fontWeight: isSelected ? 600 : 500,
                    flexGrow: 1,
                }}
            >
                {label}
            </PrimitiveText>
            <Checkbox checked={isSelected} size={CheckboxSize.SMALL} />
        </Block>
    )

    // SliderFilter component to handle hooks properly
    const SliderFilter: React.FC = () => {
        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)
                }
            }
        }, [])

        if (!sliderConfig) {
            return (
                <Block padding="14px 20px">
                    <PrimitiveText
                        style={{
                            fontSize: 14,
                            color: filterToken.groupLabelColor,
                        }}
                    >
                        Slider configuration missing
                    </PrimitiveText>
                </Block>
            )
        }

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

            if (debounceRef.current) {
                clearTimeout(debounceRef.current)
            }

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

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

        return (
            <Block padding="14px 20px">
                <Block
                    display="flex"
                    flexDirection="column"
                    gap={FOUNDATION_THEME.unit[12]}
                >
                    <PrimitiveText
                        style={{
                            fontSize: 14,
                            fontWeight: 600,
                            color: filterToken.selectedTextColor,
                        }}
                    >
                        Filter by Range
                    </PrimitiveText>

                    <Block
                        display="flex"
                        justifyContent="space-between"
                        alignItems="center"
                    >
                        <PrimitiveText
                            style={{
                                fontSize: 12,
                                color: filterToken.sortOption.textColor,
                            }}
                        >
                            {sliderConfig.prefix || ''}
                            {localValue[0]}
                            {sliderConfig.suffix || ''}
                        </PrimitiveText>
                        <PrimitiveText
                            style={{
                                fontSize: 12,
                                color: filterToken.sortOption.textColor,
                            }}
                        >
                            {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: 11,
                                color: filterToken.groupLabelColor,
                            }}
                        >
                            {sliderConfig.prefix || ''}
                            {min}
                            {sliderConfig.suffix || ''}
                        </PrimitiveText>
                        <PrimitiveText
                            style={{
                                fontSize: 11,
                                color: filterToken.groupLabelColor,
                            }}
                        >
                            {sliderConfig.prefix || ''}
                            {max}
                            {sliderConfig.suffix || ''}
                        </PrimitiveText>
                    </Block>
                </Block>
            </Block>
        )
    }

    return (
        <>
            <Block display="flex" flexDirection="column" paddingBottom="20px">
                {isSortingEnabled && (
                    <>
                        {renderSortItem(
                            <ArrowUp
                                size={16}
                                color={filterToken.sortOption.iconColor}
                            />,
                            'Sort Ascending',
                            () =>
                                handleSortAndClose(() =>
                                    sortHandlers.handleSortAscending(fieldKey)
                                ),
                            isAscendingActive
                        )}
                        {renderSortItem(
                            <ArrowDown
                                size={16}
                                color={filterToken.sortOption.iconColor}
                            />,
                            'Sort Descending',
                            () =>
                                handleSortAndClose(() =>
                                    sortHandlers.handleSortDescending(fieldKey)
                                ),
                            isDescendingActive
                        )}
                    </>
                )}

                {isSortingEnabled && hasFiltering && (
                    <Block
                        height="1px"
                        backgroundColor={filterToken.separatorColor}
                    />
                )}

                {hasFiltering && (
                    <Block
                        display="flex"
                        alignItems="center"
                        justifyContent="space-between"
                        padding="14px 20px"
                        cursor="pointer"
                        backgroundColor="transparent"
                        _hover={{
                            backgroundColor: filterToken.hoverBackground,
                        }}
                        onClick={handleOpenFilterDrawer}
                    >
                        <Block
                            display="flex"
                            alignItems="center"
                            gap={FOUNDATION_THEME.unit[8]}
                        >
                            <ListFilter
                                size={16}
                                color={filterToken.sortOption.iconColor}
                            />
                            <PrimitiveText
                                style={{
                                    fontSize: 14,
                                    color: filterToken.selectedTextColor,
                                    fontWeight: 500,
                                }}
                            >
                                Filter
                            </PrimitiveText>
                        </Block>
                        <ChevronRight
                            size={16}
                            color={filterToken.sortOption.iconColor}
                        />
                    </Block>
                )}

                {hasFiltering &&
                    columnConfig.filterComponent !== 'dateRange' &&
                    hasActiveSelection && (
                        <Block
                            display="flex"
                            alignItems="center"
                            gap={FOUNDATION_THEME.unit[8]}
                            padding="14px 20px"
                            cursor="pointer"
                            backgroundColor="transparent"
                            _hover={{
                                backgroundColor: filterToken.hoverBackground,
                            }}
                            onClick={() => {
                                onColumnFilter?.(
                                    fieldKey,
                                    columnConfig.filterType,
                                    [],
                                    'equals'
                                )
                                onPopoverClose?.()
                            }}
                        >
                            <TrashSimpleIcon
                                size={16}
                                color={destructiveColor}
                                weight="bold"
                            />
                            <PrimitiveText
                                style={{
                                    fontSize: 14,
                                    color: destructiveColor,
                                    fontWeight: 500,
                                }}
                            >
                                Clear Filter
                            </PrimitiveText>
                        </Block>
                    )}
            </Block>

            <Drawer
                open={filterDrawerOpen}
                onOpenChange={setFilterDrawerOpen}
                direction="bottom"
                modal={true}
                dismissible={true}
                showHandle={true}
            >
                <DrawerPortal>
                    <DrawerOverlay />
                    <DrawerContent contentDriven={true}>
                        <DrawerBody noPadding>
                            <Block
                                display="flex"
                                flexDirection="column"
                                paddingBottom="20px"
                            >
                                {(columnConfig.filterComponent ===
                                    'multiselect' ||
                                    columnConfig.filterComponent ===
                                        'select') && (
                                    <Block padding="14px 20px 8px 20px">
                                        <TextInput
                                            placeholder="Search"
                                            value={
                                                filterState.columnSearchValues[
                                                    fieldKey
                                                ] || ''
                                            }
                                            leftSlot={
                                                <Search
                                                    size={16}
                                                    color={
                                                        filterToken.sortOption
                                                            .iconColor
                                                    }
                                                />
                                            }
                                            onChange={(
                                                e: React.ChangeEvent<HTMLInputElement>
                                            ) => {
                                                filterHandlers.handleSearchChange(
                                                    fieldKey,
                                                    e.target.value
                                                )
                                            }}
                                        />
                                    </Block>
                                )}

                                {columnConfig.filterComponent === 'select' && (
                                    <>
                                        {getSelectMenuItems(column, data).map(
                                            (group, groupIndex) =>
                                                filterItemsBySearch(
                                                    group.items,
                                                    filterState
                                                        .columnSearchValues[
                                                        fieldKey
                                                    ] || ''
                                                ).map((item, itemIndex) => {
                                                    const selectedValues =
                                                        filterState
                                                            .columnSelectedValues[
                                                            fieldKey
                                                        ]
                                                    const currentSelected =
                                                        Array.isArray(
                                                            selectedValues
                                                        )
                                                            ? selectedValues[0]
                                                            : typeof selectedValues ===
                                                                'string'
                                                              ? selectedValues
                                                              : ''
                                                    const isSelected =
                                                        currentSelected ===
                                                        item.value

                                                    return (
                                                        <div
                                                            key={`select-${groupIndex}-${itemIndex}`}
                                                        >
                                                            {renderFilterItem(
                                                                item.label,
                                                                isSelected,
                                                                () => {
                                                                    filterHandlers.handleSelectFilter(
                                                                        column,
                                                                        fieldKey,
                                                                        item.value,
                                                                        onColumnFilter
                                                                    )
                                                                    handleCloseFilterDrawer()
                                                                }
                                                            )}
                                                        </div>
                                                    )
                                                })
                                        )}
                                    </>
                                )}

                                {columnConfig.filterComponent ===
                                    'multiselect' && (
                                    <>
                                        {getMultiSelectMenuItems(
                                            column,
                                            data
                                        ).map((group, groupIndex) =>
                                            filterItemsBySearch(
                                                group.items,
                                                filterState.columnSearchValues[
                                                    fieldKey
                                                ] || ''
                                            ).map((item, itemIndex) => {
                                                const selectedValues =
                                                    filterState
                                                        .columnSelectedValues[
                                                        fieldKey
                                                    ]
                                                const isSelected =
                                                    Array.isArray(
                                                        selectedValues
                                                    ) &&
                                                    selectedValues.includes(
                                                        item.value
                                                    )

                                                return (
                                                    <div
                                                        key={`multiselect-${groupIndex}-${itemIndex}`}
                                                    >
                                                        {renderFilterItem(
                                                            item.label,
                                                            isSelected,
                                                            () => {
                                                                filterHandlers.handleMultiSelectFilter(
                                                                    column,
                                                                    fieldKey,
                                                                    item.value,
                                                                    onColumnFilter
                                                                )
                                                            }
                                                        )}
                                                    </div>
                                                )
                                            })
                                        )}
                                    </>
                                )}

                                {columnConfig.filterComponent === 'slider' && (
                                    <SliderFilter />
                                )}

                                {columnConfig.filterComponent ===
                                    'dateRange' && (
                                    <Block
                                        display="flex"
                                        flexDirection="column"
                                        padding="14px 20px"
                                    >
                                        {(() => {
                                            const selectedValue =
                                                filterState
                                                    .columnSelectedValues[
                                                    fieldKey
                                                ]
                                            const selectedRange = Array.isArray(
                                                selectedValue
                                            )
                                                ? selectedValue
                                                : typeof selectedValue ===
                                                        'string' &&
                                                    selectedValue
                                                  ? [
                                                        selectedValue,
                                                        selectedValue,
                                                    ]
                                                  : []
                                            const hasActiveDateRange =
                                                selectedRange.length > 0 &&
                                                Boolean(selectedRange[0])

                                            return hasActiveDateRange ? (
                                                <Block
                                                    display="flex"
                                                    justifyContent="flex-end"
                                                    paddingBottom="8px"
                                                >
                                                    <button
                                                        type="button"
                                                        style={{
                                                            background:
                                                                'transparent',
                                                            border: 'none',
                                                            padding: 0,
                                                            cursor: 'pointer',
                                                        }}
                                                        onClick={() => {
                                                            onColumnFilter?.(
                                                                fieldKey,
                                                                FilterType.DATE,
                                                                [],
                                                                'range'
                                                            )
                                                            handleCloseFilterDrawer()
                                                        }}
                                                    >
                                                        <PrimitiveText
                                                            style={{
                                                                fontSize: 12,
                                                                fontWeight: 600,
                                                                color: destructiveColor,
                                                            }}
                                                        >
                                                            Clear Filter
                                                        </PrimitiveText>
                                                    </button>
                                                </Block>
                                            ) : null
                                        })()}
                                        <DateRangePicker
                                            value={(():
                                                | DateRange
                                                | undefined => {
                                                const selectedValue =
                                                    filterState
                                                        .columnSelectedValues[
                                                        fieldKey
                                                    ]
                                                const selectedRange =
                                                    Array.isArray(selectedValue)
                                                        ? selectedValue
                                                        : typeof selectedValue ===
                                                                'string' &&
                                                            selectedValue
                                                          ? [
                                                                selectedValue,
                                                                selectedValue,
                                                            ]
                                                          : []
                                                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,
                                                }
                                            })()}
                                            onChange={(range) => {
                                                const start = toLocalDateString(
                                                    range.startDate
                                                )
                                                const end = toLocalDateString(
                                                    range.endDate ||
                                                        range.startDate
                                                )
                                                onColumnFilter?.(
                                                    fieldKey,
                                                    FilterType.DATE,
                                                    [start, end],
                                                    'range'
                                                )
                                            }}
                                            showDateTimePicker={false}
                                            showPresets={false}
                                            allowSingleDateSelection={false}
                                            useDrawerOnMobile={false}
                                        />
                                    </Block>
                                )}

                                {!columnConfig.filterComponent && (
                                    <Block
                                        padding="14px 20px"
                                        textAlign="center"
                                    >
                                        <PrimitiveText
                                            style={{
                                                fontSize: 14,
                                                color: filterToken.groupLabelColor,
                                                fontStyle: 'italic',
                                            }}
                                        >
                                            No filter component configured for
                                            this column type
                                        </PrimitiveText>
                                    </Block>
                                )}
                            </Block>
                        </DrawerBody>
                    </DrawerContent>
                </DrawerPortal>
            </Drawer>
        </>
    )
}

export default MobileFilterDrawer