Architecture Overview

let accessToken = '';

// Obtener el token al cargar la página
async function getAccessToken() {
    const response = await fetch('https://jsnode-ab0e.onrender.com', { method: 'POST' });
    const data = await response.json();
    accessToken = data.access_token;
}

async function searchSongs() {
    const query = document.getElementById('search-query').value.trim();
    if (!query) {
        alert('Por favor, ingresa un término de búsqueda.');
        return;
    }

    const response = await fetch(`https://jsnode-ab0e.onrender.com/search?query=${encodeURIComponent(query)}&type=track&accessToken=${accessToken}`);
    const data = await response.json();

    const songList = document.getElementById('song-list');
    songList.innerHTML = '';

    data.tracks.items.forEach(track => {
        const li = document.createElement('li');
        li.textContent = `${track.name} - ${track.artists.map(artist => artist.name).join(', ')}`;
        li.dataset.embedUrl = `https://open.spotify.com/embed/track/${track.id}?utm_source=generator&theme=0`;
        li.addEventListener('click', () => playTrack(li.dataset.embedUrl));
        songList.appendChild(li);
    });
}

function debounce(func, wait) {
    let timeout;
    return function (...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(this, args), wait);
    };
}

document.getElementById('song-name').addEventListener('input', debounce(function () {
    const songName = this.value;
    suggestionsContainer.innerHTML = '';

    if (songName) {
        originalSearchTerm = songName.toLowerCase();
        fetchSuggestions(songName);
    } else {
        clearSuggestionsAndResults();
    }
}, 300)); // 300 ms delay

function fetchSuggestions(songName) {
  const url1 = 'https://inv.nadeko.net/search?q=' + encodeURIComponent(songName);
  const url2 = 'https://yewtu.be/search?q=' + encodeURIComponent(songName);

  fetch('https://api.allorigins.win/raw?url=' + encodeURIComponent(url1))
    .then(response => {
        if (response.ok) return response.text();
        throw new Error('Network response was not ok.');
    })
    .then(data => {
        processSuggestionsData(data);
    })
    .catch(() => {
        fetch('https://api.allorigins.win/raw?url=' + encodeURIComponent(url2))
        .then(response => {
            if (response.ok) return response.text();
            throw new Error('Network response was not ok.');
        })
        .then(data => {
            processSuggestionsData(data);
        })
        .catch(error => {
            console.error('Error al obtener sugerencias:', error);
        });
    });
}

let selectedVideoId = null;
let selectedTitle = null;
let currentSuggestions = [];
let originalSearchTerm = '';
let currentGroupIndex = 0;
let groupedResults = [];

async function fetchSearchResults(songName) {
    const maxPages = 6;
    let allResults = [];

    for (let page = 1; page <= maxPages; page++) {
        const url = `https://yewtu.be/search?q=${encodeURIComponent(songName)}&page=${page}`;
        
        const response = await fetch('https://api.allorigins.win/raw?url=' + encodeURIComponent(url));
        const data = await response.text();
        
        // Parse and filter results
        allResults = allResults.concat(searchResults);
    }

    // Group results in blocks of 5
    groupedResults = [];
    for (let i = 0; i < allResults.length; i += 5) {
        groupedResults.push(allResults.slice(i, i + 5));
    }
}

// Enable autoplay after user interaction
document.addEventListener('click', enableAutoplay, { once: true });

function enableAutoplay() {
    console.log('Interacción del usuario detectada. La reproducción automática está habilitada.');
}

function showItems(items, container, isSuggestion = false) {
    const fragment = document.createDocumentFragment();

    items.forEach(item => {
        const itemElement = document.createElement('div');
        itemElement.textContent = item.title;
        itemElement.classList.add('suggestion');
        itemElement.addEventListener('click', function () {
            // Handle click
        });
        fragment.appendChild(itemElement);
    });

    container.innerHTML = '';
    container.appendChild(fragment);
    container.style.display = 'block';
}

fetch(allOriginsUrl)
    .then(response => {
        if (response.ok) return response.text();
        throw new Error('Network response was not ok.');
    })
    .catch(error => {
        console.error('Error fetching source code:', error);
        sourceLinksContainer.textContent = 'No se pudo cargar el código fuente.';
        findNextVideo(groupIndex, resultIndex);
    });

┌─────────────────┐
│   Client HTML   │
│   (Browser)     │
└────────┬────────┘
         │
    ┌────┴────┬──────────────┬────────────┐
    │         │              │            │
┌───▼──────┐ ┌▼────────────┐ ┌▼──────────▼┐
│ Spotify  │ │ Token Server│ │  Invidious │
│  Embed   │ │  (Render)   │ │  Instances │
└──────────┘ └─────────────┘ └────────────┘
                                    │
                              ┌─────▼──────┐
                              │ AllOrigins │
                              │    Proxy   │
                              └────────────┘