'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog';
import * as VisuallyHidden from '@radix-ui/react-visually-hidden';
import { MagnifyingGlass, File, Code, ArrowRight, BookOpen, Lightning } from '@phosphor-icons/react';
import { cn } from '@/lib/utils';
const METHOD_COLORS = {
    GET: 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400',
    POST: 'bg-blue-500/10 text-blue-600 dark:text-blue-400',
    PUT: 'bg-amber-500/10 text-amber-600 dark:text-amber-400',
    PATCH: 'bg-orange-500/10 text-orange-600 dark:text-orange-400',
    DELETE: 'bg-red-500/10 text-red-600 dark:text-red-400'
};
export function SearchDialog({ open, onOpenChange, items, onSelect }) {
    const [query, setQuery] = useState('');
    const [selectedIndex, setSelectedIndex] = useState(0);
    const inputRef = useRef(null);
    const listRef = useRef(null);
    // Filter and group items based on query with fuzzy/BM25-like scoring
    const { groupedResults } = useMemo(()=>{
        let filtered;
        if (!query.trim()) {
            // Show a mix of docs and endpoints when no query
            const docs = items.filter((i)=>i.type === 'doc').slice(0, 15);
            const endpoints = items.filter((i)=>i.type === 'endpoint').slice(0, 15);
            filtered = [
                ...docs,
                ...endpoints
            ];
        } else {
            // Tokenize query
            const queryTokens = query.toLowerCase().split(/\s+/).filter((t)=>t.length > 1);
            const queryLower = query.toLowerCase();
            // Score each item
            const scored = items.map((item)=>{
                let score = 0;
                const titleLower = item.title.toLowerCase();
                const descLower = (item.description || '').toLowerCase();
                const pathLower = (item.path || '').toLowerCase();
                const hrefLower = item.href.toLowerCase();
                // Exact phrase match (highest priority)
                if (titleLower.includes(queryLower)) score += 100;
                if (pathLower.includes(queryLower)) score += 80;
                if (descLower.includes(queryLower)) score += 60;
                if (hrefLower.includes(queryLower)) score += 40;
                // Token matching
                for (const token of queryTokens){
                    // Title matches
                    if (titleLower === token) score += 50;
                    else if (titleLower.startsWith(token)) score += 30;
                    else if (titleLower.includes(token)) score += 20;
                    // Path matches (for endpoints and docs)
                    if (pathLower.includes(token)) score += 25;
                    const pathParts = pathLower.split(/[\/\s-]/);
                    if (pathParts.some((part)=>part === token)) score += 35;
                    if (pathParts.some((part)=>part.startsWith(token))) score += 20;
                    // Description matches
                    if (descLower.includes(token)) score += 15;
                    // Href/slug matches
                    const hrefParts = hrefLower.split(/[\/\s-#]/);
                    if (hrefParts.some((part)=>part === token)) score += 30;
                    if (hrefParts.some((part)=>part.startsWith(token))) score += 15;
                    // Method matching for endpoints
                    if (item.method && item.method.toLowerCase() === token) score += 25;
                    // Fuzzy matching
                    const allWords = [
                        titleLower,
                        ...pathParts,
                        ...hrefParts
                    ].filter(Boolean);
                    for (const word of allWords){
                        if (word.length > 2 && token.length > 2) {
                            const minLen = Math.min(word.length, token.length);
                            let matches = 0;
                            for(let i = 0; i < minLen; i++){
                                if (word[i] === token[i]) matches++;
                            }
                            if (matches / minLen > 0.7) score += 5;
                        }
                    }
                }
                return {
                    item,
                    score
                };
            });
            // Filter and sort by score
            filtered = scored.filter((s)=>s.score > 0).sort((a, b)=>b.score - a.score).slice(0, 30).map((s)=>s.item);
        }
        // Group by type
        const grouped = {
            docs: filtered.filter((i)=>i.type === 'doc'),
            endpoints: filtered.filter((i)=>i.type === 'endpoint')
        };
        return {
            groupedResults: grouped
        };
    }, [
        query,
        items
    ]);
    // Flat list for keyboard navigation
    const flatItems = useMemo(()=>{
        return [
            ...groupedResults.docs,
            ...groupedResults.endpoints
        ];
    }, [
        groupedResults
    ]);
    // Reset selection when results change
    useEffect(()=>{
        setSelectedIndex(0);
    }, [
        flatItems
    ]);
    // Reset and focus when dialog opens
    useEffect(()=>{
        if (open) {
            setQuery('');
            setSelectedIndex(0);
            setTimeout(()=>inputRef.current?.focus(), 50);
        }
    }, [
        open
    ]);
    // Scroll selected item into view
    useEffect(()=>{
        if (listRef.current && flatItems.length > 0) {
            const selectedEl = listRef.current.querySelector(`[data-index="${selectedIndex}"]`);
            selectedEl?.scrollIntoView({
                block: 'nearest'
            });
        }
    }, [
        selectedIndex,
        flatItems.length
    ]);
    // Handle selection
    const handleSelect = useCallback((item)=>{
        onSelect(item);
        onOpenChange(false);
    }, [
        onSelect,
        onOpenChange
    ]);
    // Keyboard navigation
    const handleKeyDown = useCallback((e)=>{
        switch(e.key){
            case 'ArrowDown':
                e.preventDefault();
                setSelectedIndex((i)=>Math.min(i + 1, flatItems.length - 1));
                break;
            case 'ArrowUp':
                e.preventDefault();
                setSelectedIndex((i)=>Math.max(i - 1, 0));
                break;
            case 'Enter':
                e.preventDefault();
                if (flatItems[selectedIndex]) {
                    handleSelect(flatItems[selectedIndex]);
                }
                break;
        }
    }, [
        flatItems,
        selectedIndex,
        handleSelect
    ]);
    // Get the global index for an item
    const getGlobalIndex = (item)=>{
        return flatItems.findIndex((i)=>i.id === item.id);
    };
    const renderItem = (item)=>{
        const index = getGlobalIndex(item);
        return /*#__PURE__*/ _jsxs("button", {
            "data-index": index,
            onClick: ()=>handleSelect(item),
            onMouseEnter: ()=>setSelectedIndex(index),
            className: cn('w-full flex items-center gap-3 px-3 py-2 rounded-md text-left transition-colors duration-75', index === selectedIndex ? 'bg-primary/10 text-foreground' : 'hover:bg-muted/50'),
            children: [
                /*#__PURE__*/ _jsx("div", {
                    className: "shrink-0",
                    children: item.type === 'endpoint' ? /*#__PURE__*/ _jsx(Code, {
                        className: "h-4 w-4 text-muted-foreground",
                        weight: "bold"
                    }) : /*#__PURE__*/ _jsx(File, {
                        className: "h-4 w-4 text-muted-foreground",
                        weight: "bold"
                    })
                }),
                /*#__PURE__*/ _jsxs("div", {
                    className: "flex-1 min-w-0",
                    children: [
                        /*#__PURE__*/ _jsxs("div", {
                            className: "flex items-center gap-2",
                            children: [
                                item.method && /*#__PURE__*/ _jsx("span", {
                                    className: cn('px-1.5 py-0.5 rounded text-[10px] font-bold uppercase shrink-0', METHOD_COLORS[item.method] || 'bg-gray-500/10 text-gray-600'),
                                    children: item.method
                                }),
                                /*#__PURE__*/ _jsx("span", {
                                    className: "font-medium truncate text-sm",
                                    children: item.title
                                })
                            ]
                        }),
                        (item.path || item.description) && /*#__PURE__*/ _jsx("p", {
                            className: "text-xs text-muted-foreground truncate mt-0.5",
                            children: item.type === 'endpoint' ? item.path : item.description || item.path
                        })
                    ]
                }),
                index === selectedIndex && /*#__PURE__*/ _jsx(ArrowRight, {
                    className: "h-4 w-4 text-muted-foreground shrink-0"
                })
            ]
        }, item.id);
    };
    const hasResults = flatItems.length > 0;
    return /*#__PURE__*/ _jsx(Dialog, {
        open: open,
        onOpenChange: onOpenChange,
        children: /*#__PURE__*/ _jsxs(DialogContent, {
            className: "max-w-2xl p-0 gap-0 overflow-hidden !duration-150",
            onOpenAutoFocus: (e)=>e.preventDefault(),
            children: [
                /*#__PURE__*/ _jsx(VisuallyHidden.Root, {
                    children: /*#__PURE__*/ _jsx(DialogTitle, {
                        children: "Search documentation"
                    })
                }),
                /*#__PURE__*/ _jsxs("div", {
                    className: "flex items-center border-b px-4 gap-3",
                    children: [
                        /*#__PURE__*/ _jsx(MagnifyingGlass, {
                            className: "h-5 w-5 text-muted-foreground shrink-0"
                        }),
                        /*#__PURE__*/ _jsx("input", {
                            ref: inputRef,
                            value: query,
                            onChange: (e)=>setQuery(e.target.value),
                            onKeyDown: handleKeyDown,
                            placeholder: "Search documentation and endpoints...",
                            className: "flex-1 h-14 text-base bg-transparent outline-none placeholder:text-muted-foreground"
                        }),
                        /*#__PURE__*/ _jsx("kbd", {
                            className: "hidden sm:inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground",
                            children: "ESC"
                        })
                    ]
                }),
                /*#__PURE__*/ _jsx("div", {
                    ref: listRef,
                    className: "max-h-[400px] overflow-y-auto",
                    children: !hasResults && query ? /*#__PURE__*/ _jsxs("div", {
                        className: "py-12 text-center text-muted-foreground",
                        children: [
                            /*#__PURE__*/ _jsx(MagnifyingGlass, {
                                className: "h-10 w-10 mx-auto mb-3 opacity-50"
                            }),
                            /*#__PURE__*/ _jsxs("p", {
                                className: "text-sm",
                                children: [
                                    'No results found for "',
                                    query,
                                    '"'
                                ]
                            })
                        ]
                    }) : !hasResults ? /*#__PURE__*/ _jsx("div", {
                        className: "py-12 text-center text-muted-foreground",
                        children: /*#__PURE__*/ _jsx("p", {
                            className: "text-sm",
                            children: "Start typing to search..."
                        })
                    }) : /*#__PURE__*/ _jsxs("div", {
                        className: "py-2",
                        children: [
                            groupedResults.docs.length > 0 && /*#__PURE__*/ _jsxs("div", {
                                className: "mb-2",
                                children: [
                                    /*#__PURE__*/ _jsxs("div", {
                                        className: "flex items-center gap-2 px-4 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wide",
                                        children: [
                                            /*#__PURE__*/ _jsx(BookOpen, {
                                                className: "h-3.5 w-3.5",
                                                weight: "bold"
                                            }),
                                            "Documentation",
                                            /*#__PURE__*/ _jsx("span", {
                                                className: "text-[10px] font-normal ml-auto",
                                                children: groupedResults.docs.length
                                            })
                                        ]
                                    }),
                                    /*#__PURE__*/ _jsx("div", {
                                        className: "px-2 space-y-0.5",
                                        children: groupedResults.docs.map(renderItem)
                                    })
                                ]
                            }),
                            groupedResults.endpoints.length > 0 && /*#__PURE__*/ _jsxs("div", {
                                children: [
                                    /*#__PURE__*/ _jsxs("div", {
                                        className: "flex items-center gap-2 px-4 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wide",
                                        children: [
                                            /*#__PURE__*/ _jsx(Lightning, {
                                                className: "h-3.5 w-3.5",
                                                weight: "bold"
                                            }),
                                            "API Endpoints",
                                            /*#__PURE__*/ _jsx("span", {
                                                className: "text-[10px] font-normal ml-auto",
                                                children: groupedResults.endpoints.length
                                            })
                                        ]
                                    }),
                                    /*#__PURE__*/ _jsx("div", {
                                        className: "px-2 space-y-0.5",
                                        children: groupedResults.endpoints.map(renderItem)
                                    })
                                ]
                            })
                        ]
                    })
                }),
                /*#__PURE__*/ _jsxs("div", {
                    className: "border-t px-4 py-2 flex items-center gap-4 text-xs text-muted-foreground bg-muted/30",
                    children: [
                        /*#__PURE__*/ _jsxs("span", {
                            className: "flex items-center gap-1",
                            children: [
                                /*#__PURE__*/ _jsx("kbd", {
                                    className: "px-1.5 py-0.5 rounded border bg-background text-[10px]",
                                    children: "↑↓"
                                }),
                                "navigate"
                            ]
                        }),
                        /*#__PURE__*/ _jsxs("span", {
                            className: "flex items-center gap-1",
                            children: [
                                /*#__PURE__*/ _jsx("kbd", {
                                    className: "px-1.5 py-0.5 rounded border bg-background text-[10px]",
                                    children: "↵"
                                }),
                                "select"
                            ]
                        }),
                        /*#__PURE__*/ _jsxs("span", {
                            className: "flex items-center gap-1",
                            children: [
                                /*#__PURE__*/ _jsx("kbd", {
                                    className: "px-1.5 py-0.5 rounded border bg-background text-[10px]",
                                    children: "esc"
                                }),
                                "close"
                            ]
                        })
                    ]
                })
            ]
        })
    });
}
