/**
 * SearchBarWithSuggestions Component
 *
 * Integrated search bar with query suggestions dropdown.
 * Combines SearchBar with any of the suggestion dropdown variants.
 */
import React, { useState, useRef, useCallback, useEffect, forwardRef, useImperativeHandle, } from 'react';
import { useSearchContext } from './SearchProvider';
import { QuerySuggestionsDropdown } from './QuerySuggestionsDropdown';
import { RichQuerySuggestions } from './RichQuerySuggestions';
import { FederatedDropdown } from './FederatedDropdown';
import { useSuggestionsAnalytics } from '../hooks/useSuggestionsAnalytics';
import { clsx } from 'clsx';
// ============================================================================
// Styles
// ============================================================================
const styles = {
    wrapper: {
        position: 'relative',
        width: '100%',
    },
    inputWrapper: {
        display: 'flex',
        alignItems: 'center',
        backgroundColor: 'var(--seekora-bg-surface, #ffffff)',
        border: '1px solid var(--seekora-border-color, #e5e7eb)',
        borderRadius: 'var(--seekora-border-radius-lg, 8px)',
        overflow: 'hidden',
        transition: 'border-color 150ms ease, box-shadow 150ms ease',
    },
    inputWrapperFocused: {
        borderColor: 'var(--seekora-border-focus, var(--seekora-primary, #3b82f6))',
        boxShadow: '0 0 0 3px var(--seekora-border-focus-alpha, var(--seekora-primary-light, rgba(59, 130, 246, 0.1)))',
    },
    input: {
        flex: 1,
        padding: '12px 16px',
        fontSize: '16px',
        border: 'none',
        outline: 'none',
        backgroundColor: 'transparent',
        color: 'var(--seekora-text-primary, #111827)',
        fontFamily: 'inherit',
    },
    searchIcon: {
        width: '20px',
        height: '20px',
        color: 'var(--seekora-text-secondary, #9ca3af)',
        marginLeft: '12px',
        flexShrink: 0,
    },
    clearButton: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: '32px',
        height: '32px',
        marginRight: '4px',
        padding: 0,
        border: 'none',
        backgroundColor: 'transparent',
        color: 'var(--seekora-text-secondary, #9ca3af)',
        borderRadius: '50%',
        cursor: 'pointer',
        transition: 'background-color 150ms ease, color 150ms ease',
    },
    searchButton: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        gap: '8px',
        padding: '12px 20px',
        margin: '4px',
        border: 'none',
        backgroundColor: 'var(--seekora-primary, #3b82f6)',
        color: 'var(--seekora-primary-text, white)',
        borderRadius: 'var(--seekora-border-radius, 6px)',
        fontSize: '14px',
        fontWeight: 600,
        cursor: 'pointer',
        transition: 'background-color 150ms ease',
    },
};
// ============================================================================
// Icons
// ============================================================================
const SearchIcon = () => (React.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", style: styles.searchIcon },
    React.createElement("path", { fillRule: "evenodd", d: "M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z", clipRule: "evenodd" })));
const ClearIcon = () => (React.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", style: { width: 16, height: 16 } },
    React.createElement("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" })));
// ============================================================================
// Component
// ============================================================================
export const SearchBarWithSuggestions = forwardRef(function SearchBarWithSuggestions(props, ref) {
    const { variant = 'classic', placeholder = 'Powered by Seekora', initialQuery = '', value, onQueryChange, onSearch, onSuggestionSelect, onProductClick, showSearchButton = false, searchButtonText = 'Search', showClearButton = true, autoFocus = false, minQueryLength = 1, maxSuggestions = 8, maxProducts = 8, debounceMs = 200, showRecentSearches = true, showTrendingOnEmpty = true, includeDropdownRecommendations = false, filteredTabs, enableAnalytics = true, analyticsTags, includeFacets, includeCategories, dropdownWidth, dropdownMaxHeight, classNames = {}, style, inputStyle, ariaLabel = 'Search', } = props;
    const { client } = useSearchContext();
    const inputRef = useRef(null);
    const dropdownRef = useRef(null);
    const [query, setQuery] = useState(value ?? initialQuery);
    const [isFocused, setIsFocused] = useState(false);
    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
    // Analytics
    const analytics = useSuggestionsAnalytics({
        client,
        enabled: enableAnalytics,
        analyticsTags,
    });
    // Sync controlled value
    useEffect(() => {
        if (value !== undefined && value !== query) {
            setQuery(value);
        }
    }, [value]);
    // Handle query change
    const handleQueryChange = useCallback((e) => {
        const newQuery = e.target.value;
        setQuery(newQuery);
        onQueryChange?.(newQuery);
        // Open dropdown when typing
        if (newQuery.length >= minQueryLength || (showTrendingOnEmpty && newQuery.length === 0)) {
            setIsDropdownOpen(true);
        }
    }, [onQueryChange, minQueryLength, showTrendingOnEmpty]);
    // Handle search submit
    const handleSubmit = useCallback((e) => {
        e?.preventDefault();
        if (query.trim()) {
            onSearch?.(query.trim());
            analytics.trackSearchSubmit(query.trim(), false);
            setIsDropdownOpen(false);
        }
    }, [query, onSearch, analytics]);
    // Handle suggestion select
    const handleSuggestionSelect = useCallback((suggestion) => {
        setQuery(suggestion.query);
        onQueryChange?.(suggestion.query);
        onSuggestionSelect?.(suggestion);
        analytics.trackSuggestionClick({
            suggestion,
            position: 0, // Would need to track actual position
            query,
        });
        setIsDropdownOpen(false);
        // Optionally trigger search
        onSearch?.(suggestion.query);
    }, [query, onQueryChange, onSuggestionSelect, onSearch, analytics]);
    // Handle product click
    const handleProductClick = useCallback((product) => {
        onProductClick?.(product);
        analytics.trackProductClick({
            product,
            position: 0,
            query,
        });
        setIsDropdownOpen(false);
    }, [query, onProductClick, analytics]);
    // Handle recent search click
    const handleRecentSearchClick = useCallback((search) => {
        setQuery(search.query);
        onQueryChange?.(search.query);
        analytics.trackRecentSearchClick(search);
        setIsDropdownOpen(false);
        onSearch?.(search.query);
    }, [onQueryChange, onSearch, analytics]);
    // Handle focus
    const handleFocus = useCallback(() => {
        setIsFocused(true);
        setIsDropdownOpen(true);
        analytics.trackDropdownOpen(query);
    }, [query, analytics]);
    // Handle blur
    const handleBlur = useCallback(() => {
        setIsFocused(false);
        // Delay closing to allow click events on dropdown
        setTimeout(() => {
            setIsDropdownOpen(false);
            analytics.trackDropdownClose(query);
        }, 200);
    }, [query, analytics]);
    // Handle clear
    const handleClear = useCallback(() => {
        setQuery('');
        onQueryChange?.('');
        inputRef.current?.focus();
    }, [onQueryChange]);
    // Handle keyboard navigation
    const handleKeyDown = useCallback((e) => {
        if (!isDropdownOpen) {
            if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
                setIsDropdownOpen(true);
            }
            return;
        }
        switch (e.key) {
            case 'ArrowDown':
                e.preventDefault();
                dropdownRef.current?.navigateNext?.();
                break;
            case 'ArrowUp':
                e.preventDefault();
                dropdownRef.current?.navigatePrevious?.();
                break;
            case 'Enter':
                e.preventDefault();
                if ((dropdownRef.current?.getActiveIndex?.() ?? -1) >= 0) {
                    dropdownRef.current?.selectActive?.();
                }
                else {
                    handleSubmit();
                }
                break;
            case 'Escape':
                e.preventDefault();
                setIsDropdownOpen(false);
                inputRef.current?.blur();
                break;
        }
    }, [isDropdownOpen, handleSubmit]);
    // Expose ref methods
    useImperativeHandle(ref, () => ({
        focus: () => inputRef.current?.focus(),
        blur: () => inputRef.current?.blur(),
        clear: handleClear,
        getQuery: () => query,
        setQuery: (newQuery) => {
            setQuery(newQuery);
            onQueryChange?.(newQuery);
        },
        openDropdown: () => setIsDropdownOpen(true),
        closeDropdown: () => setIsDropdownOpen(false),
        navigateNext: () => dropdownRef.current?.navigateNext?.(),
        navigatePrevious: () => dropdownRef.current?.navigatePrevious?.(),
        selectCurrent: () => dropdownRef.current?.selectActive?.(),
    }), [query, handleClear, onQueryChange]);
    // Render dropdown based on variant
    const renderDropdown = () => {
        const commonProps = {
            query,
            isOpen: isDropdownOpen,
            maxSuggestions,
            minQueryLength,
            debounceMs,
            showRecentSearches,
            classNames,
            onSuggestionSelect: handleSuggestionSelect,
            onRecentSearchClick: handleRecentSearchClick,
            onClose: () => setIsDropdownOpen(false),
            analyticsTags,
        };
        switch (variant) {
            case 'rich':
                return (React.createElement(RichQuerySuggestions, { ref: dropdownRef, ...commonProps, includeDropdownRecommendations: includeDropdownRecommendations, includeCategories: true, width: dropdownWidth || '100%', maxHeight: dropdownMaxHeight || '480px' }));
            case 'federated':
                return (React.createElement(FederatedDropdown, { ref: dropdownRef, ...commonProps, maxProducts: maxProducts, filteredTabs: filteredTabs, showProducts: true, showBrands: true, showFilteredTabs: !!filteredTabs, onProductClick: handleProductClick, width: dropdownWidth || '800px', maxHeight: dropdownMaxHeight || '600px', includeFacets: includeFacets, includeCategories: includeCategories, includeDropdownRecommendations: includeDropdownRecommendations }));
            case 'compact':
                return (React.createElement(QuerySuggestionsDropdown, { ref: dropdownRef, ...commonProps, maxSuggestions: 5, showCounts: false, width: dropdownWidth || '100%' }));
            case 'classic':
            default:
                return (React.createElement(QuerySuggestionsDropdown, { ref: dropdownRef, ...commonProps, width: dropdownWidth || '100%' }));
        }
    };
    return (React.createElement("div", { className: clsx('seekora-search-bar-with-suggestions', classNames.wrapper), style: { ...styles.wrapper, ...style } },
        React.createElement("form", { onSubmit: handleSubmit },
            React.createElement("div", { style: {
                    ...styles.inputWrapper,
                    ...(isFocused ? styles.inputWrapperFocused : {}),
                } },
                React.createElement(SearchIcon, null),
                React.createElement("input", { ref: inputRef, type: "text", value: query, onChange: handleQueryChange, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, placeholder: placeholder, autoFocus: autoFocus, autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, "aria-label": ariaLabel, "aria-expanded": isDropdownOpen, "aria-haspopup": "listbox", "aria-autocomplete": "list", role: "combobox", className: classNames.input, style: { ...styles.input, ...inputStyle } }),
                showClearButton && query && (React.createElement("button", { type: "button", onClick: handleClear, className: classNames.clearButton, style: styles.clearButton, "aria-label": "Clear search" },
                    React.createElement(ClearIcon, null))),
                showSearchButton && (React.createElement("button", { type: "submit", className: classNames.button, style: styles.searchButton }, searchButtonText)))),
        React.createElement("div", { className: classNames.dropdown }, renderDropdown())));
});
export default SearchBarWithSuggestions;
