/**
 * useKeyboardNavigation Hook
 *
 * Shared focus management for navigable component lists.
 * Handles arrow keys, Enter/Space, Escape, Home/End.
 * Provides visible focus indicators via CSS variables.
 */
import { useState, useCallback, useRef, useEffect } from 'react';
const FOCUS_RING_STYLE = {
    outline: '2px solid var(--seekora-focus-color, #2563eb)',
    outlineOffset: '2px',
};
const NO_FOCUS_STYLE = {
    outline: 'none',
};
let idCounter = 0;
export const useKeyboardNavigation = (options) => {
    const { itemCount, orientation = 'vertical', wrap = false, onSelect, onEscape, onDelete, enabled = true, } = options;
    const [activeIndex, setActiveIndex] = useState(-1);
    const idPrefixRef = useRef(`seekora-nav-${++idCounter}`);
    // Reset active index when item count changes
    useEffect(() => {
        if (activeIndex >= itemCount) {
            setActiveIndex(itemCount > 0 ? itemCount - 1 : -1);
        }
    }, [itemCount, activeIndex]);
    const moveNext = useCallback(() => {
        setActiveIndex(prev => {
            if (prev >= itemCount - 1) {
                return wrap ? 0 : prev;
            }
            return prev + 1;
        });
    }, [itemCount, wrap]);
    const movePrev = useCallback(() => {
        setActiveIndex(prev => {
            if (prev <= 0) {
                return wrap ? itemCount - 1 : (prev === -1 ? 0 : prev);
            }
            return prev - 1;
        });
    }, [itemCount, wrap]);
    const handleKeyDown = useCallback((e) => {
        if (!enabled || itemCount === 0)
            return;
        const nextKey = orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight';
        const prevKey = orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft';
        switch (e.key) {
            case nextKey:
                e.preventDefault();
                moveNext();
                break;
            case prevKey:
                e.preventDefault();
                movePrev();
                break;
            case 'Enter':
            case ' ':
                if (activeIndex >= 0) {
                    e.preventDefault();
                    onSelect?.(activeIndex);
                }
                break;
            case 'Escape':
                e.preventDefault();
                setActiveIndex(-1);
                onEscape?.();
                break;
            case 'Home':
                e.preventDefault();
                setActiveIndex(0);
                break;
            case 'End':
                e.preventDefault();
                setActiveIndex(itemCount - 1);
                break;
            case 'Delete':
            case 'Backspace':
                if (activeIndex >= 0) {
                    e.preventDefault();
                    onDelete?.(activeIndex);
                }
                break;
        }
    }, [enabled, itemCount, orientation, activeIndex, moveNext, movePrev, onSelect, onEscape, onDelete]);
    const handleBlur = useCallback(() => {
        // Delay reset to allow click events to fire
        setTimeout(() => setActiveIndex(-1), 150);
    }, []);
    const containerProps = {
        tabIndex: enabled ? 0 : -1,
        role: orientation === 'vertical' ? 'listbox' : 'list',
        'aria-activedescendant': activeIndex >= 0 ? `${idPrefixRef.current}-${activeIndex}` : undefined,
        onKeyDown: handleKeyDown,
        onBlur: handleBlur,
    };
    const getItemProps = useCallback((index) => ({
        id: `${idPrefixRef.current}-${index}`,
        role: 'option',
        tabIndex: -1,
        'aria-selected': index === activeIndex,
        onMouseEnter: () => setActiveIndex(index),
        onFocus: () => setActiveIndex(index),
        style: index === activeIndex ? FOCUS_RING_STYLE : NO_FOCUS_STYLE,
    }), [activeIndex]);
    return {
        activeIndex,
        setActiveIndex,
        containerProps,
        getItemProps,
        hasFocus: activeIndex >= 0,
    };
};
