function storeFetchedFiles(files) {
    // Convert the files array to a JSON string and store it in localStorage
    localStorage.setItem('fetchedFiles', JSON.stringify(files));
    console.log('Files stored in localStorage');
}
function search() {
    const inputElement = document.getElementById('searchBar');
    const query = inputElement.value.trim();
    
    // If the query is empty, call the function to remove results
    checkAndRemoveResults();

    // If the query is not empty, call the searchFiles function
    if (query.length > 1) {
        searchFiles(query);
    }
}

function searchFiles(query) {
    fetch(`/search?q=${encodeURIComponent(query)}`)
        .then(res => res.json())
        .then(results => {
            displayFiles(results); // Display the fetched files
            storeFetchedFiles(results); // Store the fetched files in localStorage
        })
        .catch(err => console.error(err));
}

function displayFiles(files) {
    const inputElement = document.getElementById('searchBar');
    let existingResults = document.getElementById('searchResults');
    
    // Remove existing results if they exist
    if (existingResults) {
        existingResults.remove();
    }

    // If the search bar is empty, hide the results and return
    if (!inputElement.value.trim()) {
        return;
    }

    // Create a new div element for the results
    const resultsContainer = document.createElement('div');
    resultsContainer.id = 'searchResults'; // Assign an ID for styling or later removal
    resultsContainer.style.position = 'absolute'; // Position it absolutely
    resultsContainer.style.top = `${inputElement.offsetHeight + inputElement.offsetTop + 10}px`; // 10px below the input element
    resultsContainer.style.left = `${inputElement.offsetLeft}px`; // Align to the left of the search bar
    resultsContainer.style.width = `${inputElement.offsetWidth}px`; // Match the width of the search bar
    resultsContainer.style.border = '1px solid #ccc'; // Optional: Add a border for visibility
    resultsContainer.style.backgroundColor = '#f9f9f9'; // Optional background color
    resultsContainer.style.padding = '10px';
    resultsContainer.style.maxHeight = '200px'; // Optional: limit the height of results
    resultsContainer.style.overflowY = 'auto'; // Optional: add scroll if too many results
    resultsContainer.style.borderRadius = '5px';

    // Check if there are results
    if (files.length === 0) {
        resultsContainer.innerHTML = '<p>No matching files found.</p>';
    } else {
        // Populate the results container with file names (no dots)
        files.forEach(file => {
            const fileDiv = document.createElement('div');
            fileDiv.textContent = file.name; // Display only the file name
            fileDiv.style.padding = '5px'; // Optional: padding for better appearance
            fileDiv.style.borderBottom = '1px solid #ddd'; // Optional: separator between file names
            resultsContainer.appendChild(fileDiv);
        });
    }

    // Append the results container below the input element
    document.body.appendChild(resultsContainer);
}

function checkAndRemoveResults() {
    const inputElement = document.getElementById('searchBar');
    const resultsContainer = document.getElementById('searchResults');
    
    // Check if the search bar is empty
    if (!inputElement.value.trim()) {
        // If the results container exists, remove it
        if (resultsContainer) {
            resultsContainer.remove();
        }
    }
}