document.addEventListener("DOMContentLoaded", () => {
    const socket = io();

    function performSearch() {
        // Collect all included search history
        const searches = [];
        document.querySelectorAll('.search-item input:checked').forEach(item => {
            searches.push(item.parentElement.innerText.trim());
        });

        if (searches.length === 0) return;

        // Combine search history into a single text with a prompt prefix
        const combinedSearchText = `Search history: ${searches.join(' ')}`;

        // Emit search event to server with combined search text
        socket.emit('search', combinedSearchText);
    }

    function search() {
        const searchInput = document.getElementById('search-input').value;
        if (searchInput.trim() === "") return;

        // Add search term to the search history
        const searchList = document.getElementById('search-list');
        const newSearch = document.createElement('div');
        newSearch.className = 'search-item';
        newSearch.innerHTML = `<input type="checkbox" checked> ${searchInput}`;
        newSearch.querySelector('input').addEventListener('change', performSearch);
        searchList.appendChild(newSearch);

        performSearch();

        document.getElementById('search-input').value = '';
    }

    function reset() {
        document.getElementById('search-list').innerHTML = '';
        document.getElementById('cards').innerHTML = '';
        document.getElementById('search-input').value = '';
    }

    // Listen for data event from the server
    socket.on('data', function(data) {
        const cards = document.getElementById('cards');
        cards.innerHTML = ''; // Clear previous cards

        data.forEach(item => {
            const card = document.createElement('div');
            card.className = 'card';
            card.innerHTML = `<img src="${item.url}" alt="Product Image"><p>${item.name}</p>`;
            cards.appendChild(card);
        });
    });

    // Attach the search and reset functions to global scope
    window.search = search;
    window.reset = reset;
});