/**
 * SearchInput — purely controlled search input with zero provider dependencies.
 *
 * No SearchProvider, no SuggestionsProvider, no useSearchState, no useQuerySuggestions.
 * Just a styled input + optional clear button + optional submit button.
 *
 * ## Usage
 *
 * ```tsx
 * // Fully standalone — no Seekora context required
 * const [q, setQ] = React.useState('');
 * <SearchInput
 *   value={q}
 *   onChange={setQ}
 *   onSubmit={(query) => window.location.href = '/search?q=' + encodeURIComponent(query)}
 * />
 * ```
 *
 * ## Navigate shorthand
 *
 * If `onSubmit` is not provided but `searchResultsUrl` is, Enter navigates to
 * `searchResultsUrl + encodeURIComponent(query)`.
 *
 * ```tsx
 * <SearchInput
 *   value={q}
 *   onChange={setQ}
 *   searchResultsUrl="/find?query="
 * />
 * ```
 *
 * To compose with Seekora analytics or suggestions, wrap it yourself — this
 * component intentionally stays dependency-free.
 */
import React, { useCallback, useEffect, useRef } from "react";
import { clsx } from "clsx";
import { ensureSeekoraStyles } from "../styles/inject";
// ============================================================================
// Internal icons — inline SVG, no external deps
// ============================================================================
const ClearIcon = () => (React.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true" },
    React.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
    React.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" })));
const SearchIcon = () => (React.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true" },
    React.createElement("circle", { cx: "11", cy: "11", r: "8" }),
    React.createElement("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })));
// ============================================================================
// Component
// ============================================================================
/**
 * Pure controlled search input. No Seekora context required.
 * Supports forwardRef so the parent can imperatively focus/blur the input.
 */
export const SearchInput = React.forwardRef(function SearchInput({ value, onChange, onSubmit, placeholder = "Search", showClearButton = true, showSubmitButton = false, submitButtonLabel = "Search", className, inputProps, searchResultsUrl, }, ref) {
    useEffect(() => {
        ensureSeekoraStyles();
    }, []);
    // Internal ref used for refocusing after clear; merged with forwarded ref.
    const internalRef = useRef(null);
    const inputRef = (ref ?? internalRef);
    const handleKeyDown = useCallback((e) => {
        if (e.key === "Enter") {
            e.preventDefault();
            if (onSubmit) {
                onSubmit(value);
            }
            else if (searchResultsUrl) {
                window.location.href =
                    searchResultsUrl + encodeURIComponent(value.trim());
            }
            // No onSubmit + no searchResultsUrl → no-op
        }
        else if (e.key === "Escape") {
            inputRef.current?.blur();
        }
    }, [value, onSubmit, searchResultsUrl, inputRef]);
    const handleChange = useCallback((e) => {
        onChange(e.target.value);
    }, [onChange]);
    const handleClear = useCallback(() => {
        onChange("");
        inputRef.current?.focus();
    }, [onChange, inputRef]);
    const handleSubmitClick = useCallback(() => {
        if (onSubmit) {
            onSubmit(value);
        }
        else if (searchResultsUrl) {
            window.location.href =
                searchResultsUrl + encodeURIComponent(value.trim());
        }
    }, [value, onSubmit, searchResultsUrl]);
    return (React.createElement("div", { className: clsx("seekora-search-input-standalone", className), role: "search" },
        React.createElement("div", { className: "seekora-search-input-standalone__field" },
            React.createElement("span", { className: "seekora-search-input-standalone__icon", "aria-hidden": "true" },
                React.createElement(SearchIcon, null)),
            React.createElement("input", { ...inputProps, ref: inputRef, type: "text", value: value, onChange: handleChange, onKeyDown: handleKeyDown, placeholder: placeholder, autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, className: clsx("seekora-search-input-standalone__input", inputProps?.className) }),
            showClearButton && value.length > 0 && (React.createElement("button", { type: "button", onClick: handleClear, className: "seekora-search-input-standalone__clear", "aria-label": "Clear search" },
                React.createElement(ClearIcon, null)))),
        showSubmitButton && (React.createElement("button", { type: "button", onClick: handleSubmitClick, className: "seekora-search-input-standalone__submit" }, submitButtonLabel))));
});
