newtab.js

// Main logic for New Tab

document.addEventListener('DOMContentLoaded', () => {
    // ---- Elements ----
    const timeEl = document.getElementById('current-time');
    const dateEl = document.getElementById('current-date');
    const weatherInfoEl = document.getElementById('weather-info');
    const weatherDescEl = document.getElementById('weather-desc');
    
    // Settings elements
    const triggerBtn = document.getElementById('settings-trigger');
    const closeBtn = document.getElementById('close-settings');
    const drawer = document.getElementById('settings-drawer');
    const backdrop = document.getElementById('settings-backdrop');
    
    const themeSelect = document.getElementById('theme-select');
    const bgTypeSelect = document.getElementById('bg-type');
    const bgColorPick = document.getElementById('bg-color-pick');
    const bgGradPresets = document.getElementById('bg-gradient-presets');
    const bgGradCustom = document.getElementById('bg-gradient-custom');
    const bgImageContainer = document.getElementById('bg-image-container');
    const bgImageFile = document.getElementById('bg-image-file');
    const clearImageBtn = document.getElementById('clear-image-btn');
    const pinSizeSelect = document.getElementById('pin-size-select');
    const refreshFaviconsBtn = document.getElementById('refresh-favicons-btn');
    const resetBtn = document.getElementById('reset-settings');

    // Pins Elements
    const pinsGrid = document.getElementById('pins-grid');
    const addPinBtn = document.getElementById('add-pin-btn');
    const pinModal = document.getElementById('pin-modal');
    const pinModalBackdrop = document.getElementById('pin-modal-backdrop');
    const cancelPinBtn = document.getElementById('cancel-pin');
    const savePinBtn = document.getElementById('save-pin');
    const pinUrlInput = document.getElementById('pin-url');
    const pinNameInput = document.getElementById('pin-name');
    const pinModalTitle = document.getElementById('pin-modal-title');
    
    // Context Menu Elements
    const ctxMenu = document.getElementById('context-menu');
    const ctxOpen = document.getElementById('ctx-open');
    const ctxOpenNew = document.getElementById('ctx-open-new');
    const ctxRefetch = document.getElementById('ctx-refetch');
    const ctxEdit = document.getElementById('ctx-edit');
    const ctxRemove = document.getElementById('ctx-remove');

    // Search Elements
    const searchInput = document.getElementById('search-input');
    const searchDropdown = document.getElementById('search-dropdown');
    const searchResults = document.getElementById('search-results');

    // Recent Pins Elements
    const recentPinsWrapper = document.getElementById('recent-pins-wrapper');
    const recentPinsScroll = document.getElementById('recent-pins-scroll');

    let currentEditingPinId = null;
    let contextTargetId = null;
    let selectedSearchIndex = -1;
    let currentSearchResults = [];

    // ---- Favicon Management & Multi-Tier Fallback System ----
    function extractDomain(url) {
        if (!url) return '';
        let target = url.trim();
        if (!target.startsWith('http://') && !target.startsWith('https://')) {
            target = 'https://' + target;
        }
        try {
            const parsed = new URL(target);
            return parsed.hostname || '';
        } catch (e) {
            const match = target.match(/(?:https?:\/\/)?(?:www\.)?([^/\s:]+)/i);
            return match ? match[1] : '';
        }
    }

    function getChromeFaviconUrl(url, size = 64) {
        if (typeof chrome !== 'undefined' && chrome.runtime && chrome.runtime.getURL && url) {
            let targetUrl = url.trim();
            if (!targetUrl.startsWith('http://') && !targetUrl.startsWith('https://')) {
                targetUrl = 'https://' + targetUrl;
            }
            return chrome.runtime.getURL(`/_favicon/?pageUrl=${encodeURIComponent(targetUrl)}&size=${size}`);
        }
        return '';
    }

    function getFaviconFallbackUrls(pageUrl, customFavicon = null) {
        const urls = [];

        // If custom non-Google favicon provided, test it first
        if (customFavicon && customFavicon.trim() && !customFavicon.includes('google.com/s2/favicons')) {
            urls.push(customFavicon.trim());
        }

        // 1. Chrome Native Local Favicon Cache (MV3 _favicon API)
        if (pageUrl) {
            const chromeFav = getChromeFaviconUrl(pageUrl, 64);
            if (chromeFav) urls.push(chromeFav);
        }

        const domain = extractDomain(pageUrl);
        const localFallback = (typeof chrome !== 'undefined' && chrome.runtime && chrome.runtime.getURL)
            ? chrome.runtime.getURL('icons/default-favicon.svg')
            : 'icons/default-favicon.svg';

        if (domain) {
            // 2. Direct domain favicon
            urls.push(`https://${domain}/favicon.ico`);
            // 3. DuckDuckGo Icons API
            urls.push(`https://icons.duckduckgo.com/ip3/${encodeURIComponent(domain)}.ico`);
            // 4. Vemetric Favicon API
            urls.push(`https://favicon.vemetric.com/${encodeURIComponent(domain)}`);
            // 5. Favicone API
            urls.push(`https://favicone.com/${encodeURIComponent(domain)}`);
            // 6. Google Favicon API (validated on load)
            urls.push(`https://www.google.com/s2/favicons?domain=${encodeURIComponent(domain)}&sz=64`);
        }

        // 7. Local default SVG fallback icon
        urls.push(localFallback);

        return urls;
    }

    function setupFaviconFallback(imgElement, pageUrl, customFavicon = null) {
        const urls = getFaviconFallbackUrls(pageUrl, customFavicon);
        let index = 0;

        function tryNext() {
            index++;
            if (index < urls.length) {
                imgElement.src = urls[index];
            } else {
                imgElement.onload = null;
                imgElement.onerror = null;
            }
        }

        imgElement.onload = () => {
            const currentUrl = urls[index] || '';
            // Detect if Google Favicon API returned its 16x16 default blue/gray globe placeholder image
            if (currentUrl.includes('google.com/s2/favicons') && imgElement.naturalWidth <= 16) {
                tryNext();
            }
        };

        imgElement.onerror = () => {
            tryNext();
        };

        imgElement.src = urls[0];
    }

    // ---- Clock & Date ----
    function updateClock() {
        const now = new Date();
        const hrs = now.getHours().toString().padStart(2, '0');
        const mins = now.getMinutes().toString().padStart(2, '0');
        timeEl.textContent = `${hrs}:${mins}`;
        
        const options = { weekday: 'long', month: 'long', day: 'numeric' };
        dateEl.textContent = now.toLocaleDateString('en-US', options);
    }
    setInterval(updateClock, 1000);
    updateClock();

    // ---- Weather ----
    function initWeather() {
        if (!navigator.geolocation) {
            weatherDescEl.textContent = "Geolocation not supported";
            return;
        }

        // Check cache (30 mins)
        chrome.storage.local.get(['weatherCache'], (res) => {
            const cache = res.weatherCache;
            const now = Date.now();
            if (cache && cache.timestamp > now - 30 * 60 * 1000 && cache.data) {
                displayWeather(cache.data);
                return;
            }
            navigator.geolocation.getCurrentPosition(success, error);
        });

        function success(position) {
            const lat = position.coords.latitude;
            const long = position.coords.longitude;
            fetchWeather(lat, long);
        }

        function error() {
            weatherDescEl.textContent = "Location Permission Denied";
        }
    }

    async function fetchWeather(lat, long) {
        try {
            const response = await fetch(`https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${long}&current_weather=true&temperature_unit=celsius`);
            if (!response.ok) throw new Error('Weather API Error');
            const data = await response.json();
            
            let locationName = "Local";
            if (data.timezone) {
                const parts = data.timezone.split('/');
                locationName = parts[parts.length - 1].replace(/_/g, ' ');
            }
            
            const payload = { temp: Math.round(data.current_weather.temperature), location: locationName };
            
            chrome.storage.local.set({
                weatherCache: { timestamp: Date.now(), data: payload }
            });
            displayWeather(payload);

        } catch (err) {
            weatherDescEl.textContent = "Weather API Error";
            console.error(err);
        }
    }

    function displayWeather(data) {
        weatherInfoEl.innerHTML = `
            <span id="weather-desc">${data.location}: ${data.temp}°C</span>
        `;
    }

    setTimeout(initWeather, 500);

    // ---- Settings UI Binding ----
    function initSettingsUI() {
        themeSelect.value = window.SettingsState.theme;
        const bg = window.SettingsState.background;
        bgTypeSelect.value = bg.type;
        
        if (bg.type === 'custom_color') bgColorPick.value = bg.value;
        if (bg.type === 'gradient_preset') bgGradPresets.value = bg.value;
        if (bg.type === 'gradient_custom') bgGradCustom.value = bg.value;
        if (bg.type === 'image' && bg.value) clearImageBtn.style.display = 'inline-block';
        
        pinSizeSelect.value = window.SettingsState.pinSize || 'medium';
        updateBgInputsVisibility();
    }

    function updateBgInputsVisibility() {
        const type = bgTypeSelect.value;
        bgColorPick.classList.toggle('hidden', type !== 'custom_color');
        bgGradPresets.classList.toggle('hidden', type !== 'gradient_preset');
        bgGradCustom.classList.toggle('hidden', type !== 'gradient_custom');
        bgImageContainer.classList.toggle('hidden', type !== 'image');
    }

    // Settings Listeners
    bgTypeSelect.addEventListener('change', (e) => {
        updateBgInputsVisibility();
        const type = e.target.value;
        let val = '';
        if (type === 'custom_color') val = bgColorPick.value;
        if (type === 'gradient_preset') val = bgGradPresets.value;
        if (type === 'gradient_custom') val = bgGradCustom.value;
        if (type === 'image') return; // Handled file input separately
        
        updateSetting('background', { type, value: val });
    });

    bgColorPick.addEventListener('input', (e) => updateSetting('background', { type: 'custom_color', value: e.target.value }));
    bgGradPresets.addEventListener('change', (e) => updateSetting('background', { type: 'gradient_preset', value: e.target.value }));
    bgGradCustom.addEventListener('input', (e) => updateSetting('background', { type: 'gradient_custom', value: e.target.value }));
    themeSelect.addEventListener('change', (e) => updateSetting('theme', e.target.value));
    pinSizeSelect.addEventListener('change', (e) => updateSetting('pinSize', e.target.value));

    // Handle Image Upload with Canvas Compression to bypass quota limits
    bgImageFile.addEventListener('change', (e) => {
        const file = e.target.files[0];
        if (!file) return;
        const reader = new FileReader();
        reader.onload = (event) => {
            const img = new Image();
            img.onload = () => {
                const canvas = document.createElement('canvas');
                let width = img.width;
                let height = img.height;
                const maxSize = 1920;
                if (width > maxSize || height > maxSize) {
                    if (width > height) {
                        height = Math.round(height * (maxSize / width));
                        width = maxSize;
                    } else {
                        width = Math.round(width * (maxSize / height));
                        height = maxSize;
                    }
                }
                canvas.width = width;
                canvas.height = height;
                const ctx = canvas.getContext('2d');
                ctx.drawImage(img, 0, 0, width, height);
                const dataUrl = canvas.toDataURL('image/jpeg', 0.6); // 60% quality jpeg
                
                try {
                    updateSetting('background', { type: 'image', value: dataUrl });
                    clearImageBtn.style.display = 'inline-block';
                } catch (err) {
                    alert("Image is still too large. Please select a highly compressed or smaller image.");
                }
            };
            img.src = event.target.result;
        };
        reader.readAsDataURL(file);
    });

    clearImageBtn.addEventListener('click', () => {
        bgImageFile.value = '';
        clearImageBtn.style.display = 'none';
        updateSetting('background', { type: 'image', value: '' });
    });

    // Refresh / Reset all pin favicons
    if (refreshFaviconsBtn) {
        refreshFaviconsBtn.addEventListener('click', () => {
            pins = pins.map(pin => {
                const { favicon, ...rest } = pin;
                return rest;
            });
            savePins();
            alert("All pinned icons have been refreshed with the new multi-tier fallback system!");
        });
    }

    // Reset settings
    resetBtn.addEventListener('click', () => {
        if(confirm("Are you sure you want to reset all settings?")) {
            chrome.storage.local.clear(() => {
                chrome.runtime.reload();
            });
        }
    });

    // Drawer toggles
    function openDrawer() {
        initSettingsUI();
        drawer.classList.add('open');
        backdrop.classList.add('open');
    }
    function closeDrawerFunc() {
        drawer.classList.remove('open');
        backdrop.classList.remove('open');
    }
    triggerBtn.addEventListener('click', openDrawer);
    closeBtn.addEventListener('click', closeDrawerFunc);
    backdrop.addEventListener('click', closeDrawerFunc);


    // ---- Pins Management ----
    let pins = [];
    let dragSourceId = null;
    
    function loadPins() {
        chrome.storage.local.get(['pins'], (res) => {
            if (res.pins && Array.isArray(res.pins)) {
                let hasMigrated = false;
                pins = res.pins.map(pin => {
                    // If pin contains legacy hardcoded single-tier favicon URL, remove it to enable the multi-tier fallback system
                    if (pin.favicon && (pin.favicon.includes('google.com/s2/favicons') || pin.favicon.includes('vemetric') || pin.favicon.includes('favicone') || pin.favicon.includes('duckduckgo'))) {
                        const { favicon, ...rest } = pin;
                        hasMigrated = true;
                        return rest;
                    }
                    return pin;
                });
                if (hasMigrated) {
                    savePins();
                } else {
                    renderPins();
                }
            }
        });
    }

    function savePins() {
        chrome.storage.local.set({ pins }, renderPins);
    }

    function trackPinClick(pinId) {
        if (!pinId) return;
        chrome.storage.local.get(['pinStats'], (res) => {
            const stats = res.pinStats || {};
            const curr = stats[pinId] || { clicks: 0, lastUsed: 0 };
            stats[pinId] = {
                clicks: curr.clicks + 1,
                lastUsed: Date.now()
            };
            chrome.storage.local.set({ pinStats: stats }, () => {
                renderRecentApps();
            });
        });
    }

    function renderRecentApps() {
        if (!recentPinsScroll || !pins) return;

        if (pins.length === 0) {
            if (recentPinsWrapper) recentPinsWrapper.classList.add('hidden');
            return;
        }

        chrome.storage.local.get(['pinStats'], (res) => {
            const stats = res.pinStats || {};
            
            // Sort pins by lastUsed descending, then by clicks descending
            const sortedPins = [...pins].sort((a, b) => {
                const statA = stats[a.id] || { clicks: 0, lastUsed: 0 };
                const statB = stats[b.id] || { clicks: 0, lastUsed: 0 };
                if (statB.lastUsed !== statA.lastUsed) {
                    return statB.lastUsed - statA.lastUsed;
                }
                return statB.clicks - statA.clicks;
            });

            // Display top 10 recent / most used apps
            const recentPins = sortedPins.slice(0, 10);
            
            recentPinsScroll.innerHTML = '';
            
            recentPins.forEach(pin => {
                const chip = document.createElement('a');
                chip.className = 'recent-pin-chip';
                chip.href = pin.url;
                
                const img = document.createElement('img');
                img.alt = pin.name;
                setupFaviconFallback(img, pin.url, pin.favicon);
                
                const span = document.createElement('span');
                span.textContent = pin.name;
                
                chip.appendChild(img);
                chip.appendChild(span);
                
                chip.addEventListener('click', () => {
                    trackPinClick(pin.id);
                });
                
                recentPinsScroll.appendChild(chip);
            });
            
            if (recentPinsWrapper) {
                recentPinsWrapper.classList.remove('hidden');
            }
        });
    }

    // Convert vertical mouse wheel scrolling to horizontal scrolling for top recent pins bar
    if (recentPinsScroll) {
        recentPinsScroll.addEventListener('wheel', (e) => {
            if (e.deltaY !== 0) {
                e.preventDefault();
                recentPinsScroll.scrollLeft += e.deltaY * 0.8;
            }
        }, { passive: false });
    }

    function renderPins() {
        // Clear all except the add button
        Array.from(pinsGrid.children).forEach(child => {
            if (child.id !== 'add-pin-btn') child.remove();
        });

        pins.forEach(pin => {
            const el = document.createElement('a');
            el.className = 'pin-card';
            el.href = pin.url;
            el.dataset.id = pin.id;
            
            const img = document.createElement('img');
            img.className = 'pin-icon';
            img.alt = pin.name;
            setupFaviconFallback(img, pin.url, pin.favicon);
            
            const label = document.createElement('span');
            label.className = 'pin-label';
            label.textContent = pin.name;
            
            el.appendChild(img);
            el.appendChild(label);

            el.addEventListener('click', () => {
                trackPinClick(pin.id);
            });
            
            // Drag and Drop Logic
            el.setAttribute('draggable', 'true');
            el.addEventListener('dragstart', function(e) {
                dragSourceId = pin.id;
                e.dataTransfer.effectAllowed = 'move';
                e.dataTransfer.setData('text/plain', dragSourceId);
                setTimeout(() => el.classList.add('dragging'), 0);
            });
            el.addEventListener('dragover', function(e) {
                e.preventDefault();
                e.dataTransfer.dropEffect = 'move';
            });
            el.addEventListener('drop', function(e) {
                e.preventDefault();
                e.stopPropagation();
                if (dragSourceId && dragSourceId !== pin.id) {
                    const srcIndex = pins.findIndex(p => p.id === dragSourceId);
                    const tgtIndex = pins.findIndex(p => p.id === pin.id);
                    if (srcIndex > -1 && tgtIndex > -1) {
                        const draggedPin = pins.splice(srcIndex, 1)[0];
                        pins.splice(tgtIndex, 0, draggedPin);
                        savePins(); // which handles re-rendering
                    }
                }
            });
            el.addEventListener('dragend', function() {
                el.classList.remove('dragging');
                dragSourceId = null;
            });

            // Make sure Add Button does not steal drops inappropriately
            addPinBtn.addEventListener('dragover', e => e.preventDefault());
            addPinBtn.addEventListener('drop', e => {
                e.preventDefault();
                const srcIndex = pins.findIndex(p => p.id === dragSourceId);
                if (srcIndex > -1) {
                    const draggedPin = pins.splice(srcIndex, 1)[0];
                    pins.push(draggedPin); // drop at the very end
                    savePins();
                }
            });

            el.addEventListener('contextmenu', (e) => {
                e.preventDefault();
                showContextMenu(e.pageX, e.pageY, pin.id);
            });

            pinsGrid.insertBefore(el, addPinBtn);
        });

        renderRecentApps();
    }

    // Pin Modal Methods
    function openPinModal(editId = null) {
        currentEditingPinId = editId;
        if (editId) {
            const pin = pins.find(p => p.id === editId);
            pinUrlInput.value = pin.url;
            pinNameInput.value = pin.name;
            pinModalTitle.textContent = "Edit Pin";
        } else {
            pinUrlInput.value = '';
            pinNameInput.value = '';
            pinModalTitle.textContent = "Add Pin";
        }
        pinModal.classList.remove('hidden');
        pinModalBackdrop.classList.remove('hidden');
        pinUrlInput.focus();
    }
    
    function closePinModal() {
        pinModal.classList.add('hidden');
        pinModalBackdrop.classList.add('hidden');
    }

    addPinBtn.addEventListener('click', () => openPinModal(null));
    cancelPinBtn.addEventListener('click', closePinModal);
    pinModalBackdrop.addEventListener('click', closePinModal);

    savePinBtn.addEventListener('click', () => {
        let url = pinUrlInput.value.trim();
        let name = pinNameInput.value.trim();
        
        if (!url) return alert("URL is required");
        if (!url.startsWith('http://') && !url.startsWith('https://')) {
            url = 'https://' + url;
        }

        try {
            const hostname = extractDomain(url);
            if (!name) name = hostname || url;

            if (currentEditingPinId) {
                const pin = pins.find(p => p.id === currentEditingPinId);
                if (pin) {
                    pin.url = url;
                    pin.name = name;
                }
            } else {
                pins.push({
                    id: Date.now().toString() + Math.random().toString(36).slice(2, 6),
                    url,
                    name
                });
            }

            savePins();
            closePinModal();
        } catch (e) {
            alert("Invalid URL structure: " + e.message);
        }
    });

    // Context Menu Logic
    function showContextMenu(x, y, id) {
        contextTargetId = id;
        ctxMenu.style.left = `${x}px`;
        ctxMenu.style.top = `${y}px`;
        ctxMenu.classList.remove('hidden');
    }

    document.addEventListener('click', (e) => {
        if (!ctxMenu.contains(e.target)) {
            ctxMenu.classList.add('hidden');
        }
    });

    ctxOpen.addEventListener('click', () => {
        const pin = pins.find(p => p.id === contextTargetId);
        if (pin) {
            trackPinClick(pin.id);
            window.location.href = pin.url;
        }
        ctxMenu.classList.add('hidden');
    });

    ctxOpenNew.addEventListener('click', () => {
        const pin = pins.find(p => p.id === contextTargetId);
        if (pin) {
            trackPinClick(pin.id);
            window.open(pin.url, '_blank');
        }
        ctxMenu.classList.add('hidden');
    });

    if (ctxRefetch) {
        ctxRefetch.addEventListener('click', () => {
            const pin = pins.find(p => p.id === contextTargetId);
            if (pin) {
                delete pin.favicon;
                savePins();
            }
            ctxMenu.classList.add('hidden');
        });
    }

    ctxEdit.addEventListener('click', () => {
        openPinModal(contextTargetId);
        ctxMenu.classList.add('hidden');
    });

    ctxRemove.addEventListener('click', () => {
        pins = pins.filter(p => p.id !== contextTargetId);
        savePins();
        ctxMenu.classList.add('hidden');
    });

    loadPins();


    // ---- Search Logic ----
    let searchDebounce;
    
    function renderSearchResults(results) {
        searchResults.innerHTML = '';
        currentSearchResults = results;
        selectedSearchIndex = -1;

        if (results.length === 0) {
            const q = searchInput.value;
            if (q) {
                const li = document.createElement('li');
                li.className = 'search-result-item';
                li.innerHTML = `<span class="result-title">Search Google for "${q}"</span>`;
                li.onclick = () => doGoogleSearch(q);
                searchResults.appendChild(li);
                currentSearchResults = [{ type: 'google', query: q }];
            }
            searchDropdown.classList.toggle('hidden', results.length === 0 && !q);
            return;
        }

        results.forEach((res, index) => {
            const li = document.createElement('li');
            li.className = 'search-result-item';
            
            const img = document.createElement('img');
            img.className = 'result-icon';
            img.alt = res.title || 'Result';
            setupFaviconFallback(img, res.url, res.favicon);

            const textDiv = document.createElement('div');
            textDiv.className = 'result-text';
            
            const titleSpan = document.createElement('span');
            titleSpan.className = 'result-title';
            titleSpan.textContent = res.title;
            
            const urlSpan = document.createElement('span');
            urlSpan.className = 'result-url';
            urlSpan.textContent = res.url;
            
            textDiv.appendChild(titleSpan);
            textDiv.appendChild(urlSpan);

            li.appendChild(img);
            li.appendChild(textDiv);

            li.onclick = () => window.location.href = res.url;
            searchResults.appendChild(li);
        });
        
        searchDropdown.classList.remove('hidden');
    }

    function doGoogleSearch(query) {
        window.location.href = `https://www.google.com/search?q=${encodeURIComponent(query)}`;
    }

    searchInput.addEventListener('input', (e) => {
        const q = e.target.value.toLowerCase().trim();
        clearTimeout(searchDebounce);
        
        if (!q) {
            searchDropdown.classList.add('hidden');
            return;
        }
        
        searchDebounce = setTimeout(() => {
            // Find matches in pins
            const pinMatches = pins.filter(p => p.name.toLowerCase().includes(q) || p.url.toLowerCase().includes(q)).map(p => ({
                title: p.name,
                url: p.url,
                favicon: p.favicon
            }));

            // Find matches in bookmarks
            if (chrome.bookmarks) {
                chrome.bookmarks.search(q, (bmTree) => {
                    const bmMatches = bmTree.filter(bm => bm.url && (bm.title.toLowerCase().includes(q) || bm.url.toLowerCase().includes(q))).slice(0, 5).map(bm => ({
                        title: bm.title || bm.url,
                        url: bm.url,
                        favicon: null
                    }));

                    const finalResults = [...pinMatches, ...bmMatches].slice(0, 8);
                    renderSearchResults(finalResults);
                });
            } else {
                renderSearchResults(pinMatches);
            }
        }, 150);
    });

    // Keyboard Navigation for Search
    searchInput.addEventListener('keydown', (e) => {
        const items = searchResults.querySelectorAll('.search-result-item');
        if (!items.length) {
            if (e.key === 'Enter' && searchInput.value) {
                doGoogleSearch(searchInput.value);
            }
            return;
        }

        if (e.key === 'ArrowDown') {
            e.preventDefault();
            selectedSearchIndex = (selectedSearchIndex + 1) % items.length;
            updateSearchSelection(items);
        } else if (e.key === 'ArrowUp') {
            e.preventDefault();
            selectedSearchIndex = (selectedSearchIndex - 1 + items.length) % items.length;
            updateSearchSelection(items);
        } else if (e.key === 'Enter') {
            e.preventDefault();
            if (selectedSearchIndex === -1) {
                const res = currentSearchResults[0];
                if (res.type === 'google') doGoogleSearch(res.query);
                else window.location.href = res.url;
            } else {
                const res = currentSearchResults[selectedSearchIndex];
                if (res.type === 'google') doGoogleSearch(res.query);
                else window.location.href = res.url;
            }
        }
    });

    function updateSearchSelection(items) {
        items.forEach((item, idx) => {
            if (idx === selectedSearchIndex) {
                item.classList.add('selected');
                item.scrollIntoView({ block: 'nearest' });
            } else {
                item.classList.remove('selected');
            }
        });
    }

    // Hide dropdown when clicking outside
    document.addEventListener('click', (e) => {
        if (!searchInput.contains(e.target) && !searchDropdown.contains(e.target)) {
            searchDropdown.classList.add('hidden');
        }
    });
});