bookhoard/web/src/search.ts

let searchInputTimeout: ReturnType<typeof setTimeout> | null = null;
const SEARCH_DEBOUNCE_MS = 300;
const SEARCH_MIN_CHARS = 2;

function initializeSearch(): void {
    const searchInput = document.getElementById('header-search') as HTMLInputElement | null;
    if (!searchInput) {
        console.warn('Search input not found');
        return;
    }

    searchInput.addEventListener('input', handleSearchInput);
    searchInput.addEventListener('keydown', handleSearchKeydown);
    searchInput.addEventListener('focus', () => {
        if (searchInput.value.length >= SEARCH_MIN_CHARS) {
            performSearch(searchInput.value);
        }
    });

    document.addEventListener('click', (e: MouseEvent) => {
        const searchResults = document.getElementById('search-results');
        const searchInputEl = document.getElementById('header-search');

        if (searchResults && !searchResults.contains(e.target as Node) && e.target !== searchInputEl) {
            hideSearchResults();
        }
    });
}

function handleSearchInput(e: Event): void {
    const target = e.target as HTMLInputElement;
    const query = target.value.trim();

    if (searchInputTimeout) {
        clearTimeout(searchInputTimeout);
    }

    if (query.length < SEARCH_MIN_CHARS) {
        hideSearchResults();
        return;
    }

    searchInputTimeout = setTimeout(() => {
        performSearch(query);
    }, SEARCH_DEBOUNCE_MS);
}

function handleSearchKeydown(e: KeyboardEvent): void {
    const searchResults = document.getElementById('search-results');
    if (!searchResults || searchResults.classList.contains('hidden')) {
        return;
    }

    const items = searchResults.querySelectorAll('.search-result-item');
    const currentIndex = parseInt(searchResults.dataset.selectedIndex || '-1');

    if (e.key === 'ArrowDown') {
        e.preventDefault();
        const nextIndex = Math.min(currentIndex + 1, items.length - 1);
        selectSearchResult(items, nextIndex);
    } else if (e.key === 'ArrowUp') {
        e.preventDefault();
        const prevIndex = Math.max(currentIndex - 1, -1);
        selectSearchResult(items, prevIndex);
    } else if (e.key === 'Enter') {
        e.preventDefault();
        if (currentIndex >= 0 && items[currentIndex]) {
            const link = items[currentIndex].querySelector('a');
            if (link) link.click();
        }
    } else if (e.key === 'Escape') {
        hideSearchResults();
    }
}

function selectSearchResult(items: NodeListOf<Element>, index: number): void {
    items.forEach((item, i) => {
        if (i === index) {
            item.classList.add('bg-opacity-80');
        } else {
            item.classList.remove('bg-opacity-80');
        }
    });

    const searchResults = document.getElementById('search-results');
    if (searchResults) {
        searchResults.dataset.selectedIndex = index.toString();
    }
}

function performSearch(query: string): void {
    const token = localStorage.getItem('token');
    if (!token) {
        console.warn('No authentication token found');
        return;
    }

    showSearchLoading();

    fetch(`/api/media-items/search?q=${encodeURIComponent(query)}`, {
        headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json'
        }
    })
    .then(response => {
        if (response.status === 404) {
            return { error: 'no results found', results: [] };
        }
        return response.json();
    })
    .then((data: { error?: string; results?: MediaItemSummary[] } | MediaItemSummary[]) => {
        hideSearchLoading();

        if (data && 'error' in data && data.error === 'no results found') {
            showNoResults(query);
        } else if (Array.isArray(data) && data.length > 0) {
            showSearchResults(data, query);
        } else if (Array.isArray(data)) {
            showNoResults(query);
        } else {
            showNoResults(query);
        }
    })
    .catch(error => {
        hideSearchLoading();
        console.error('Search error:', error);
        showSearchError();
    });
}

function showSearchLoading(): void {
    createSearchResultsContainer();
    const searchResults = document.getElementById('search-results');
    if (!searchResults) return;

    searchResults.innerHTML = `
        <div class="p-4 text-center" style="color: var(--text-secondary)">
            <div class="inline-block animate-spin rounded-full h-6 w-6 border-b-2" style="border-color: var(--accent)"></div>
            <p class="mt-2 text-sm">Searching...</p>
        </div>
    `;
    searchResults.classList.remove('hidden');
}

function hideSearchLoading(): void {
}

function showSearchResults(results: MediaItemSummary[], query: string): void {
    createSearchResultsContainer();
    const searchResults = document.getElementById('search-results');
    if (!searchResults) return;

    searchResults.dataset.selectedIndex = '-1';

    const libraryIconMap: Record<string, string> = {
        'ebooks': '📚',
        'comics': '📖',
        'manga': '🗾'
    };

    let html = `
        <div class="p-3 border-b" style="border-color: var(--border)">
            <p class="text-xs font-semibold uppercase tracking-wide" style="color: var(--text-secondary)">
                ${results.length} result${results.length !== 1 ? 's' : ''} for "${searchEscapeHtml(query)}"
            </p>
        </div>
        <div class="max-h-96 overflow-y-auto">
    `;

    results.forEach((item, index) => {
        const icon = libraryIconMap[item.library_type_name] || '📁';
        const titleHtml = highlightMatch(item.title, query);
        const authorHtml = item.author ? highlightMatch(item.author, query) : '';

        html += `
            <div class="search-result-item p-3 border-b hover:bg-opacity-50 transition-colors cursor-pointer"
                 style="border-color: var(--border); background-color: var(--bg-secondary)"
                 data-index="${index}">
                <a href="/bookshelf"
                   class="block"
                   onclick="window.selectLibraryAndBook('${item.library_id}', '${item.id}')">
                    <div class="flex items-start space-x-3">
                        <div class="text-2xl">${icon}</div>
                        <div class="flex-1 min-w-0">
                            <h4 class="text-sm font-medium truncate" style="color: var(--text-primary)">
                                ${titleHtml}
                            </h4>
                            ${authorHtml ? `<p class="text-xs truncate" style="color: var(--text-secondary)">${authorHtml}</p>` : ''}
                            <p class="text-xs mt-1" style="color: var(--text-secondary)">
                                ${searchEscapeHtml(item.library_name)}
                            </p>
                        </div>
                    </div>
                </a>
            </div>
        `;
    });

    html += `
        </div>
        <div class="p-2 border-t text-center" style="border-color: var(--border)">
            <p class="text-xs" style="color: var(--text-secondary)">
                Press <kbd class="px-1 py-0.5 rounded" style="background-color: var(--bg-primary)">↑↓</kbd> to navigate,
                <kbd class="px-1 py-0.5 rounded" style="background-color: var(--bg-primary)">Enter</kbd> to select
            </p>
        </div>
    `;

    searchResults.innerHTML = html;
    searchResults.classList.remove('hidden');
}

function showNoResults(query: string): void {
    createSearchResultsContainer();
    const searchResults = document.getElementById('search-results');
    if (!searchResults) return;

    searchResults.innerHTML = `
        <div class="p-4 text-center">
            <div class="text-4xl mb-2">🔍</div>
            <p class="text-sm" style="color: var(--text-primary)">No results found for "${searchEscapeHtml(query)}"</p>
            <p class="text-xs mt-1" style="color: var(--text-secondary)">Try different keywords</p>
        </div>
    `;
    searchResults.classList.remove('hidden');
}

function showSearchError(): void {
    createSearchResultsContainer();
    const searchResults = document.getElementById('search-results');
    if (!searchResults) return;

    searchResults.innerHTML = `
        <div class="p-4 text-center">
            <div class="text-4xl mb-2">⚠️</div>
            <p class="text-sm" style="color: var(--text-primary)">Search error</p>
            <p class="text-xs mt-1" style="color: var(--text-secondary)">Please try again</p>
        </div>
    `;
    searchResults.classList.remove('hidden');
}

function hideSearchResults(): void {
    const searchResults = document.getElementById('search-results');
    if (searchResults) {
        searchResults.classList.add('hidden');
    }
}

function createSearchResultsContainer(): void {
    let searchResults = document.getElementById('search-results');
    if (!searchResults) {
        searchResults = document.createElement('div');
        searchResults.id = 'search-results';
        searchResults.className = 'hidden absolute z-50 w-full max-w-2xl mt-2 rounded-lg shadow-lg border';
        searchResults.style.cssText = 'background-color: var(--bg-secondary); border-color: var(--border)';

        const searchInput = document.getElementById('header-search');
        if (searchInput) {
            const searchContainer = searchInput.closest('.relative');
            if (searchContainer) {
                searchContainer.appendChild(searchResults);
            }
        }
    }
}

function highlightMatch(text: string, query: string): string {
    if (!text) return '';
    const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    const regex = new RegExp(`(${escapedQuery})`, 'gi');
    return searchEscapeHtml(text).replace(regex, '<mark style="background-color: var(--accent); color: var(--bg-primary); padding: 0 2px; border-radius: 2px;">$1</mark>');
}

function searchEscapeHtml(text: string): string {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

function selectLibraryAndBook(libraryId: string, bookId: string): void {
    localStorage.setItem('selectedLibrary', libraryId);
    localStorage.setItem('selectedBook', bookId);
    hideSearchResults();
}

document.addEventListener('DOMContentLoaded', initializeSearch);

(window as any).selectLibraryAndBook = selectLibraryAndBook;