import React, { useId, useState } from 'react'
import {
    Drawer,
    DrawerTrigger,
    DrawerPortal,
    DrawerOverlay,
    DrawerContent,
    DrawerBody,
} from '../Drawer'
import Block from '../Primitives/Block/Block'
import Text from '../Text/Text'
import { FOUNDATION_THEME } from '../../tokens'
import InputLabels from '../Inputs/utils/InputLabels/InputLabels'
import InputFooter from '../Inputs/utils/InputFooter/InputFooter'
import { useBreakpoints } from '../../hooks/useBreakPoints'
import { BREAKPOINTS } from '../../breakpoints/breakPoints'
import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
import type { SingleSelectTokensType } from './singleSelect.tokens'
import type { SingleSelectProps } from './types'
import {
    type SelectMenuGroupType,
    type SelectMenuItemType,
    SelectMenuSize,
    SelectMenuVariant,
} from '../Select'
import SingleSelectTrigger from './SingleSelectTrigger'
import { TextInput } from '../Inputs/TextInput'
import { TextInputSize } from '../Inputs/TextInput/types'
import { Check } from 'lucide-react'
import { Skeleton, SkeletonVariant } from '../Skeleton'
import { setupAccessibility } from './utils'
import {
    hasExactMatch as checkExactMatch,
    getFilteredItemsWithCustomValue,
    hasRenderableSelectItems,
} from '../Select/selectUtils'
import { useSelectSearchController } from '../Select/useSelectSearchController'
import SelectSearchStatus from '../Select/SelectSearchStatus'

type MobileSingleSelectProps = SingleSelectProps

const map = function getValueLabelMap(
    groups: SelectMenuGroupType[]
): Record<string, string> {
    const map: Record<string, string> = {}

    function traverse(items: SelectMenuItemType[]) {
        for (const item of items) {
            map[item.value] = item.label
            if (item.subMenu) {
                traverse(item.subMenu)
            }
        }
    }

    for (const group of groups) {
        traverse(group.items)
    }

    return map
}

const SingleSelectItem = ({
    item,
    isSelected,
    onSelect,
}: {
    item: SelectMenuItemType
    isSelected: boolean
    onSelect: (value: string) => void
}) => {
    return (
        <Block
            display="flex"
            flexDirection="column"
            gap={4}
            padding={`${FOUNDATION_THEME.unit[8]} ${FOUNDATION_THEME.unit[6]}`}
            margin={`0 ${FOUNDATION_THEME.unit[8]}`}
            borderRadius={4}
            cursor={item.disabled ? 'not-allowed' : 'pointer'}
            backgroundColor={
                isSelected ? FOUNDATION_THEME.colors.gray[50] : 'transparent'
            }
            style={{
                transition: 'background-color 0.15s ease-in-out',
            }}
            _hover={{
                backgroundColor: FOUNDATION_THEME.colors.gray[50],
            }}
            onClick={() => {
                if (!item.disabled) {
                    onSelect(item.value)
                }
            }}
        >
            <Block
                width="100%"
                display="flex"
                alignItems="center"
                justifyContent="space-between"
                gap={8}
            >
                <Block display="flex" alignItems="center" gap={8} flexGrow={1}>
                    {item.slot1 && (
                        <Block flexShrink={0} height="auto" contentCentered>
                            {item.slot1}
                        </Block>
                    )}
                    <Text
                        variant="body.md"
                        color={
                            isSelected
                                ? FOUNDATION_THEME.colors.gray[700]
                                : FOUNDATION_THEME.colors.gray[600]
                        }
                        fontWeight={500}
                        truncate
                    >
                        {item.label}
                    </Text>
                </Block>
                <Block
                    display="flex"
                    alignItems="center"
                    gap={4}
                    flexShrink={0}
                >
                    {item.slot2 && (
                        <Block flexShrink={0} height="auto" contentCentered>
                            {item.slot2}
                        </Block>
                    )}
                    {item.slot3 && (
                        <Block flexShrink={0} height="auto" contentCentered>
                            {item.slot3}
                        </Block>
                    )}
                    {item.slot4 && (
                        <Block flexShrink={0} height="auto" contentCentered>
                            {item.slot4}
                        </Block>
                    )}
                    {isSelected && (
                        <Block flexShrink={0} height="auto" contentCentered>
                            <Check
                                size={16}
                                color={FOUNDATION_THEME.colors.gray[600]}
                            />
                        </Block>
                    )}
                </Block>
            </Block>
            {item.subLabel && (
                <Block display="flex" alignItems="center" width="100%">
                    <Text
                        variant="body.sm"
                        color={FOUNDATION_THEME.colors.gray[400]}
                        fontWeight={400}
                    >
                        {item.subLabel}
                    </Text>
                </Block>
            )}
        </Block>
    )
}

const filterMenuItem = (
    item: SelectMenuItemType,
    searchText: string
): SelectMenuItemType | null => {
    const lower = searchText.toLowerCase()
    const matches =
        (item.label && item.label.toLowerCase().includes(lower)) ||
        (item.subLabel && item.subLabel.toLowerCase().includes(lower))

    if (item.subMenu) {
        const filteredSub = item.subMenu
            .map((sub: SelectMenuItemType) => filterMenuItem(sub, lower))
            .filter(Boolean) as SelectMenuItemType[]
        if (filteredSub.length > 0 || matches) {
            return { ...item, subMenu: filteredSub }
        }
        return null
    }
    return matches ? item : null
}

const filterMenuGroups = (
    groups: SelectMenuGroupType[],
    searchText: string
): SelectMenuGroupType[] => {
    if (!searchText) return groups
    return groups
        .map((group: SelectMenuGroupType) => {
            const filteredItems = group.items
                .map((item: SelectMenuItemType) =>
                    filterMenuItem(item, searchText)
                )
                .filter(Boolean) as SelectMenuItemType[]
            if (filteredItems.length === 0) return null
            return { ...group, items: filteredItems }
        })
        .filter(Boolean) as SelectMenuGroupType[]
}

const MobileSingleSelect: React.FC<MobileSingleSelectProps> = ({
    label,
    subLabel,
    hintText,
    required,
    helpIconText,
    placeholder,
    error = false,
    errorMessage,
    size = SelectMenuSize.MEDIUM,
    items = [],
    name,
    variant = SelectMenuVariant.CONTAINER,
    disabled,
    selected,
    onSelect,
    enableSearch,
    searchPlaceholder = 'Search options...',
    searchText: controlledSearchText,
    onSearchChange,
    isSearchLoading,
    emptyStateText,
    slot,
    customTrigger,
    inline = false,
    skeleton = {
        count: 3,
        show: false,
        variant: 'pulse',
    },
    maxTriggerWidth,
    minTriggerWidth,
    allowCustomValue = false,
    customValueLabel = 'Specify',
    ...rest
}) => {
    const { breakPointLabel } = useBreakpoints(BREAKPOINTS)
    const isSmallScreen = breakPointLabel === 'sm'
    const singleSelectTokens =
        useResponsiveTokens<SingleSelectTokensType>('SINGLE_SELECT')
    const [drawerOpen, setDrawerOpen] = useState(false)
    const {
        value: searchText,
        isControlled: isSearchControlled,
        isSearchEnabled,
        shouldFilterInternally,
        valueForSearchBehavior,
        dispatchUserValue,
        resetUncontrolled,
    } = useSelectSearchController({
        controlledValue: controlledSearchText,
        onValueChange: onSearchChange,
        explicitShow: enableSearch,
        existingSurfaceDefault: false,
    })
    const isActiveSearchLoading = isSearchEnabled && Boolean(isSearchLoading)
    const valueLabelMap = map(items)

    const hasMatch = React.useMemo(
        () => checkExactMatch(valueForSearchBehavior, items),
        [valueForSearchBehavior, items]
    )

    const filteredItems = React.useMemo(() => {
        const baseFilteredItems = shouldFilterInternally
            ? filterMenuGroups(items, searchText)
            : items

        return getFilteredItemsWithCustomValue(
            baseFilteredItems,
            searchText,
            hasMatch,
            allowCustomValue,
            isSearchEnabled && !isSearchLoading,
            customValueLabel
        )
    }, [
        items,
        searchText,
        allowCustomValue,
        hasMatch,
        isSearchEnabled,
        isSearchLoading,
        shouldFilterInternally,
        customValueLabel,
    ])
    const hasSourceItems = isSearchControlled
        ? hasRenderableSelectItems(items)
        : items.length > 0
    const hasRenderableItems = isSearchControlled
        ? hasRenderableSelectItems(filteredItems)
        : filteredItems.length > 0
    const showEmptyState = isSearchControlled
        ? !hasRenderableItems
        : !hasSourceItems || (!hasRenderableItems && searchText.length > 0)

    const isItemSelected = selected.length > 0

    const { onFocus, onBlur, ...triggerRest } = rest
    const isSmallScreenWithLargeSize =
        isSmallScreen && size === SelectMenuSize.LARGE

    const generatedId = useId()
    const { uniqueName, hintTextId, errorMessageId, ariaAttributes } =
        setupAccessibility({
            name,
            generatedId,
            label,
            hintText,
            error,
            errorMessage,
            rest: triggerRest,
            prefix: 'singleselect-mobile',
        })

    const triggerRestWithoutAria = { ...triggerRest } as Record<string, unknown>
    delete triggerRestWithoutAria['aria-describedby']
    delete triggerRestWithoutAria['aria-label']
    delete triggerRestWithoutAria['aria-labelledby']

    return (
        <Block
            data-single-select={label || 'single-select'}
            data-status={disabled ? 'disabled' : 'enabled'}
            display="flex"
            flexDirection="column"
            gap={8}
        >
            {variant === SelectMenuVariant.CONTAINER &&
                (!isSmallScreen || size !== SelectMenuSize.LARGE) && (
                    <InputLabels
                        label={label}
                        sublabel={subLabel}
                        helpIconHintText={helpIconText}
                        name={uniqueName}
                        required={required}
                    />
                )}

            <Drawer
                open={drawerOpen}
                onOpenChange={(isOpen) => {
                    setDrawerOpen(isOpen)
                    if (isOpen) {
                        if (typeof onFocus === 'function') {
                            onFocus(
                                undefined as unknown as React.FocusEvent<HTMLButtonElement>
                            )
                        }
                    } else {
                        if (typeof onBlur === 'function') {
                            onBlur(
                                undefined as unknown as React.FocusEvent<HTMLButtonElement>
                            )
                        }
                        if (isSearchEnabled) {
                            resetUncontrolled()
                        }
                    }
                }}
            >
                <DrawerTrigger
                    onClick={triggerRest.onClick as (() => void) | undefined}
                    aria-label={triggerRest['aria-label'] as string | undefined}
                >
                    {customTrigger || (
                        <SingleSelectTrigger
                            maxTriggerWidth={maxTriggerWidth}
                            minTriggerWidth={minTriggerWidth}
                            singleSelectTokens={singleSelectTokens}
                            size={size}
                            selected={selected}
                            label={label || ''}
                            name={uniqueName}
                            placeholder={placeholder}
                            required={required || false}
                            valueLabelMap={valueLabelMap}
                            open={drawerOpen}
                            onClick={() => setDrawerOpen(true)}
                            slot={slot}
                            variant={variant}
                            isSmallScreenWithLargeSize={
                                isSmallScreenWithLargeSize
                            }
                            isItemSelected={isItemSelected}
                            inline={inline}
                            error={error}
                            disabled={disabled}
                            {...ariaAttributes}
                            {...triggerRestWithoutAria}
                        />
                    )}
                </DrawerTrigger>

                <DrawerPortal>
                    <DrawerOverlay />
                    <DrawerContent contentDriven={true}>
                        <DrawerBody noPadding={true}>
                            <Block
                                display="flex"
                                flexDirection="column"
                                height="100%"
                                overflow="hidden"
                            >
                                {skeleton.show ? (
                                    <Block
                                        padding={
                                            singleSelectTokens.menu.item.padding
                                        }
                                        display="flex"
                                        flexDirection="column"
                                        gap={
                                            singleSelectTokens.menu.item.gap ||
                                            4
                                        }
                                        borderRadius={
                                            singleSelectTokens.menu.item
                                                .borderRadius
                                        }
                                        outline="none"
                                        border="none"
                                        width="100%"
                                        maxWidth="100%"
                                    >
                                        {Array.from({
                                            length: skeleton.count || 3,
                                        }).map((_, index) => (
                                            <Skeleton
                                                key={index}
                                                width="100%"
                                                height="33px"
                                                variant={
                                                    (skeleton.variant as SkeletonVariant) ||
                                                    'pulse'
                                                }
                                            />
                                        ))}
                                    </Block>
                                ) : (
                                    <Block
                                        display="flex"
                                        flexDirection="column"
                                        gap={4}
                                        overflow="auto"
                                        flexGrow={1}
                                    >
                                        {isSearchEnabled && (
                                            <Block
                                                padding="16px 16px 8px 16px"
                                                backgroundColor={
                                                    FOUNDATION_THEME.colors
                                                        .gray[0]
                                                }
                                                zIndex={50}
                                            >
                                                <TextInput
                                                    size={TextInputSize.MEDIUM}
                                                    placeholder={
                                                        searchPlaceholder
                                                    }
                                                    value={searchText}
                                                    onChange={(e) =>
                                                        dispatchUserValue(
                                                            e.target.value
                                                        )
                                                    }
                                                    aria-label={
                                                        searchPlaceholder ||
                                                        'Search options'
                                                    }
                                                />
                                            </Block>
                                        )}

                                        <SelectSearchStatus
                                            isControlled={
                                                isSearchControlled &&
                                                isSearchEnabled
                                            }
                                            isLoading={isActiveSearchLoading}
                                            isEmpty={!hasRenderableItems}
                                            emptyStateText={
                                                emptyStateText ||
                                                (!hasSourceItems
                                                    ? 'No items available'
                                                    : 'No results found')
                                            }
                                        />

                                        {isActiveSearchLoading &&
                                        !hasRenderableItems ? null : showEmptyState ? (
                                            <Block
                                                display="flex"
                                                justifyContent="center"
                                                alignItems="center"
                                                padding={
                                                    singleSelectTokens.menu.item
                                                        .padding
                                                }
                                            >
                                                <Text
                                                    variant="body.md"
                                                    color={
                                                        singleSelectTokens.menu
                                                            .item.optionsLabel
                                                            .color.default
                                                    }
                                                    textAlign="center"
                                                >
                                                    {emptyStateText ||
                                                        (!hasSourceItems
                                                            ? 'No items available'
                                                            : 'No results found')}
                                                </Text>
                                            </Block>
                                        ) : (
                                            <Block
                                                display="flex"
                                                flexDirection="column"
                                                gap={4}
                                            >
                                                {filteredItems.map(
                                                    (group, groupId) => (
                                                        <React.Fragment
                                                            key={groupId}
                                                        >
                                                            {group.groupLabel && (
                                                                <Block
                                                                    padding={
                                                                        singleSelectTokens
                                                                            .menu
                                                                            .item
                                                                            .padding
                                                                    }
                                                                    margin={
                                                                        singleSelectTokens
                                                                            .menu
                                                                            .item
                                                                            .margin
                                                                    }
                                                                >
                                                                    <Text
                                                                        variant="body.sm"
                                                                        color={
                                                                            singleSelectTokens
                                                                                .menu
                                                                                .item
                                                                                .optionsLabel
                                                                                .color
                                                                                .default
                                                                        }
                                                                        textTransform="uppercase"
                                                                        fontSize={
                                                                            singleSelectTokens
                                                                                .menu
                                                                                .item
                                                                                .optionsLabel
                                                                                .fontSize
                                                                        }
                                                                    >
                                                                        {
                                                                            group.groupLabel
                                                                        }
                                                                    </Text>
                                                                </Block>
                                                            )}
                                                            {group.items.map(
                                                                (
                                                                    item,
                                                                    itemIndex
                                                                ) => {
                                                                    const isSelected =
                                                                        selected ===
                                                                        item.value
                                                                    return (
                                                                        <SingleSelectItem
                                                                            key={`${groupId}-${itemIndex}`}
                                                                            item={
                                                                                item
                                                                            }
                                                                            isSelected={
                                                                                isSelected
                                                                            }
                                                                            onSelect={(
                                                                                value
                                                                            ) => {
                                                                                onSelect(
                                                                                    value
                                                                                )
                                                                                setDrawerOpen(
                                                                                    false
                                                                                )
                                                                            }}
                                                                        />
                                                                    )
                                                                }
                                                            )}
                                                            {groupId !==
                                                                filteredItems.length -
                                                                    1 &&
                                                                group.showSeparator && (
                                                                    <Block
                                                                        height={
                                                                            singleSelectTokens
                                                                                .menu
                                                                                .item
                                                                                .seperator
                                                                                .height
                                                                        }
                                                                        backgroundColor={
                                                                            singleSelectTokens
                                                                                .menu
                                                                                .item
                                                                                .seperator
                                                                                .color
                                                                        }
                                                                        margin={
                                                                            singleSelectTokens
                                                                                .menu
                                                                                .item
                                                                                .seperator
                                                                                .margin
                                                                        }
                                                                    />
                                                                )}
                                                        </React.Fragment>
                                                    )
                                                )}
                                            </Block>
                                        )}
                                    </Block>
                                )}
                            </Block>
                        </DrawerBody>
                    </DrawerContent>
                </DrawerPortal>
            </Drawer>

            {variant === SelectMenuVariant.CONTAINER && (
                <InputFooter
                    hintText={hintText}
                    error={error}
                    errorMessage={errorMessage}
                    hintTextId={hintTextId}
                    errorMessageId={errorMessageId}
                />
            )}
        </Block>
    )
}

export default MobileSingleSelect