import React, {
    createContext,
    useContext,
    useCallback,
    useRef,
    useLayoutEffect,
} from 'react'
import type { SectionProps } from './types'
import { ChevronDown } from 'lucide-react'
import NavItem from './NavItem'
import Block from '../Primitives/Block/Block'
import Text from '../Text/Text'
import styled from 'styled-components'
import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
import { DirectoryTokenType } from './directory.tokens'
import { useSectionScroll } from '../../hooks/useSectionScroll'
import { getItemPathSegment } from './utils'

type SectionStateContextValue = {
    sectionStates: Map<number, boolean>
    setSectionState: (index: number, isOpen: boolean) => void
}

const SectionStateContext = createContext<SectionStateContextValue | null>(null)

const useSectionState = () => {
    const context = useContext(SectionStateContext)
    return context
}

export { SectionStateContext }

const ChevronWrapper = styled(Block)<{
    $isOpen: boolean
    $tokens: DirectoryTokenType
}>`
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;

    & > svg {
        width: ${({ $tokens }) =>
            $tokens.section.header.chevron.width} !important;
        height: ${({ $tokens }) =>
            $tokens.section.header.chevron.width} !important;
        transition: transform 150ms;
        transform: ${({ $isOpen }) =>
            $isOpen ? 'rotate(180deg)' : 'rotate(0)'};
    }
`

const Section = ({
    section,
    sectionIndex,
    onNavigateBetweenSections,
    idPrefix,
    iconOnlyMode = false,
    showHierarchyLines = false,
    hierarchyLineBorderRadius = 0,
    enableParentSelection = false,
    highlightActivePath = false,
}: SectionProps) => {
    const tokens = useResponsiveTokens<DirectoryTokenType>('DIRECTORY')
    const sectionStateContext = useSectionState()
    const { scrollIntoView } = useSectionScroll()

    const defaultIsOpen = section.defaultOpen !== false
    const sharedIsOpen = sectionStateContext?.sectionStates.get(sectionIndex)
    const [localIsOpen, setLocalIsOpen] = React.useState(defaultIsOpen)

    const isOpen = sharedIsOpen !== undefined ? sharedIsOpen : localIsOpen
    const previousIsOpen = useRef(isOpen)

    const setIsOpen = useCallback(
        (value: boolean) => {
            if (sectionStateContext) {
                sectionStateContext.setSectionState(sectionIndex, value)
            } else {
                setLocalIsOpen(value)
            }
        },
        [sectionIndex, sectionStateContext]
    )
    const sectionRef = useRef<HTMLDivElement>(null)
    const headerRef = useRef<HTMLDivElement>(null)
    const itemRefs = useRef<Array<React.RefObject<HTMLElement | null>>>([])

    React.useEffect(() => {
        if (section.items) {
            itemRefs.current = section.items.map(() =>
                React.createRef<HTMLElement | null>()
            )
        }
    }, [section.items])

    useLayoutEffect(() => {
        const wasCollapsed = !previousIsOpen.current
        const isExpanding = isOpen && wasCollapsed
        previousIsOpen.current = isOpen

        if (isExpanding && sectionRef.current) {
            scrollIntoView(sectionRef.current)
        }
    }, [isOpen, scrollIntoView])

    const toggleSection = () => {
        if (!iconOnlyMode) {
            setIsOpen(!isOpen)
        }
    }

    const handleKeyDown = (e: React.KeyboardEvent) => {
        if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault()
            toggleSection()
        } else if (e.key === 'ArrowDown') {
            e.preventDefault()
            if (!isOpen) {
                setIsOpen(true)
            } else {
                const firstItem = sectionRef.current
                    ?.querySelector('ul')
                    ?.querySelector('button, a')
                if (firstItem) {
                    ;(firstItem as HTMLElement).focus()
                } else {
                    onNavigateBetweenSections('down', sectionIndex)
                }
            }
        } else if (e.key === 'ArrowUp') {
            e.preventDefault()
            onNavigateBetweenSections('up', sectionIndex)
        }
    }

    const handleItemNavigation = (
        direction: 'up' | 'down',
        currentIndex: number
    ) => {
        if (direction === 'up') {
            if (currentIndex === 0) {
                headerRef.current?.focus()
            } else {
                const prevItem = sectionRef.current
                    ?.querySelector('ul')
                    ?.querySelectorAll('button, a')[currentIndex - 1]
                if (prevItem) {
                    ;(prevItem as HTMLElement).focus()
                }
            }
        } else {
            if (currentIndex === (section.items?.length || 0) - 1) {
                onNavigateBetweenSections('down', sectionIndex)
            } else {
                const nextItem = sectionRef.current
                    ?.querySelector('ul')
                    ?.querySelectorAll('button, a')[currentIndex + 1]
                if (nextItem) {
                    ;(nextItem as HTMLElement).focus()
                }
            }
        }
    }

    const isCollapsible = section.isCollapsible !== false

    return (
        <Block
            display="flex"
            flexDirection="column"
            gap={iconOnlyMode ? '8px' : tokens.section.gap}
            width="100%"
            ref={sectionRef}
            data-state={isOpen ? 'open' : 'closed'}
            key={`section-${sectionIndex}`}
            data-element="sidebar-section"
            data-id={section.label || `section-${sectionIndex}`}
            data-status={isOpen ? 'expanded' : 'collapsed'}
        >
            {section.label && !iconOnlyMode && (
                <Block
                    display="flex"
                    alignItems="center"
                    paddingX={tokens.section.header.padding.x}
                    paddingY={tokens.section.header.padding.y}
                    cursor={isCollapsible ? 'pointer' : undefined}
                    ref={headerRef}
                    onClick={isCollapsible ? toggleSection : undefined}
                    onKeyDown={isCollapsible ? handleKeyDown : undefined}
                    role={isCollapsible ? 'button' : undefined}
                    tabIndex={isCollapsible ? 0 : undefined}
                    aria-expanded={
                        isCollapsible ? (isOpen ? true : false) : undefined
                    }
                    aria-controls={
                        isCollapsible && isOpen
                            ? `${idPrefix || ''}section-content-${sectionIndex}`
                            : undefined
                    }
                    aria-label={
                        isCollapsible && section.label
                            ? `${section.label}, ${isOpen ? 'expanded' : 'collapsed'}`
                            : undefined
                    }
                >
                    <Text
                        variant="body.sm"
                        color={tokens.section.header.label.color}
                        fontWeight={tokens.section.header.label.fontWeight}
                        fontSize={tokens.section.header.label.fontSize}
                        style={{ whiteSpace: 'nowrap' }}
                    >
                        {section.label.toUpperCase()}
                    </Text>
                    {isCollapsible && (
                        <ChevronWrapper
                            $isOpen={isOpen}
                            $tokens={tokens}
                            aria-hidden="true"
                        >
                            <ChevronDown
                                color={tokens.section.header.chevron.color}
                            />
                        </ChevronWrapper>
                    )}
                </Block>
            )}

            {iconOnlyMode && sectionIndex > 0 && (
                <Block
                    width="32px"
                    height="1px"
                    backgroundColor={tokens.section.header.label.color}
                    style={{
                        opacity: 0.2,
                        margin: '0 auto 8px auto',
                    }}
                    role="separator"
                    aria-hidden="true"
                />
            )}

            {section.items && (isOpen || iconOnlyMode) && (
                <ul
                    style={{
                        width: '100%',
                        display: 'flex',
                        flexDirection: 'column',
                        gap: tokens.section.itemList.gap,
                    }}
                    id={`${idPrefix || ''}section-content-${sectionIndex}`}
                    role="list"
                    aria-label={
                        section.label
                            ? `${section.label} navigation`
                            : undefined
                    }
                >
                    {section.items.map((item, itemIdx) => (
                        <NavItem
                            key={itemIdx}
                            item={item}
                            index={itemIdx}
                            itemPath={getItemPathSegment(item)}
                            iconOnlyMode={iconOnlyMode}
                            showHierarchyLines={showHierarchyLines}
                            hierarchyLineBorderRadius={
                                hierarchyLineBorderRadius
                            }
                            isLast={
                                itemIdx === (section.items?.length || 0) - 1
                            }
                            enableParentSelection={enableParentSelection}
                            highlightActivePath={highlightActivePath}
                            onNavigate={handleItemNavigation}
                        />
                    ))}
                </ul>
            )}
        </Block>
    )
}

export default Section