// ------------------------------------------------------------------------------
//                        SERIES CON SCRAPING INTEGRADO MULTI-PÁGINA                                    
// ------------------------------------------------------------------------------

// Variables globales
let Series = new Map();
let seriesArray = [];
let serieSeleccionada = null;
let temporadaActual = 1;
let episodioActual = 1;
let categoriasAgregadas = new Set();
let categSeleccionada = "Todas las series";

// CONFIGURACIÓN DE PÁGINAS
const PAGINAS_A_BUSCAR = 10;
const URL_BASE = "https://pelisplushd.bz/series?page=";
// const URL_BASE = "https://pelisplushd.bz/series/populares?page=";

const zonaBotones = document.getElementById('id_botones');
const zonaSeries = document.getElementById('id_series');
const tele = document.getElementById("id_PantallaTV");

// Variables para el control de carga progresiva
let cargaEnProceso = false;
let totalSeriesEncontradas = 0;
let paginasTerminadas = 0;

// Función para mostrar mensaje de carga con progreso
function mostrarCargando(pagina = null, total = null, encontradas = 0) {
    let mensaje = document.getElementById('id_mensaje');
    if (!mensaje) {
        mensaje = document.createElement('div');
        mensaje.id = 'id_mensaje';
        mensaje.className = 'text-center text-light p-3';
        zonaBotones.parentNode.insertBefore(mensaje, zonaBotones);
    }

    if (pagina && total) {
        mensaje.innerHTML = `Cargando series... Página ${pagina} de ${total} | ${encontradas} series encontradas`;
    } else {
        mensaje.innerHTML = 'Cargando series...';
    }

    mensaje.classList.remove("d-none");
    mensaje.className = 'opacity-100 text-light text-center p-3';
}

// Función para actualizar mensaje con progreso final
function actualizarMensajeFinal() {
    let mensaje = document.getElementById('id_mensaje');
    if (mensaje) {
        mensaje.innerHTML = `Carga completa: ${totalSeriesEncontradas} series de ${PAGINAS_A_BUSCAR} páginas`;
        setTimeout(() => mensaje.className = 'opacity-75 text-light text-center p-3', 2000);
        setTimeout(() => mensaje.className = 'opacity-50 text-light text-center p-3', 3000);
        setTimeout(() => mensaje.className = 'opacity-25 text-light text-center p-3', 4000);
        setTimeout(() => mensaje.className = 'opacity-0 d-none text-light text-center p-3', 5000);
    }
}

// Función para obtener series de una página específica
async function obtenerSeriesPagina(numeroPagina) {
    const url = `https://corsproxy.io/?${URL_BASE}${numeroPagina}`;

    try {
        const res = await fetch(url);
        const html = await res.text();
        const parser = new DOMParser();
        const doc = parser.parseFromString(html, "text/html");

        let seriesPagina = new Map();
        let contador = 0;

        doc.querySelectorAll("#default-tab-1 a.Posters-link").forEach((a) => {
            const link = a.getAttribute("href") || "";
            const img = a.querySelector("img")?.getAttribute("src") || "";
            const titulo = a.querySelector(".listing-content p")?.innerText.trim() || "";
            const valoracionElement = a.querySelector(".stars span");
            const valoracion = valoracionElement ? valoracionElement.innerText.trim() : "N/A";

            if (titulo && titulo.trim() !== "" && !seriesPagina.has(titulo)) {
                const serieData = {
                    titulo: titulo,
                    imagen: img,
                    valoracion: valoracion.replace(/[^\d.,]/g, '') || "N/A",
                    categoria: "Series Web",
                    link: link,
                    temporadas: null,
                    temporadasCargadas: false,
                    pagina: numeroPagina
                };

                seriesPagina.set(titulo, serieData);
                contador++;

                if (!categoriasAgregadas.has(serieData.categoria)) {
                    categoriasAgregadas.add(serieData.categoria);
                }
            }
        });

        console.log(`Página ${numeroPagina}: ${contador} series encontradas`);
        return seriesPagina;

    } catch (error) {
        console.error(`Error al obtener series de la página ${numeroPagina}:`, error);
        return new Map();
    }
}

// Función para agregar series nuevas al DOM inmediatamente
function agregarSeriesAlDOM(seriesNuevas) {
    if (seriesNuevas.size === 0) return;

    let htmlBotones = "";
    let botonesAgregados = 0;

    seriesNuevas.forEach((datos, titulo) => {
        if (categSeleccionada === datos.categoria || categSeleccionada === "Todas las series") {
            htmlBotones += CrearBotonSerie(titulo, datos);
            botonesAgregados++;
        }
    });

    if (htmlBotones) {
        zonaBotones.innerHTML += htmlBotones;
        console.log(`${botonesAgregados} series agregadas al DOM inmediatamente`);
        mostrarScroll();
    }
}

// Función para crear cada botón de serie
function CrearBotonSerie(serie, datos) {
    return `<button type="button" title="${datos.titulo}" 
                        class="card btn border m-2 p-2 bg-dark bg-gradient col-5 col-md-3 col-lg-2 class_CanalBoton class_SerieBoton encontrado" 
                        onclick="SeleccionarSerie('${datos.titulo.replace(/'/g, "\\'")}')"> 
                    <section class="card-body text-light col-12 text-center">
                        <h4 class="card-title">${datos.titulo}</h4> 
                    </section>
                    <figure class="h-100 d-flex align-items-center">
                        <img class="card-img-top w-100 h-100" src="${datos.imagen}" loading="lazy" alt="${datos.titulo}" 
                             onerror="this.src='https://via.placeholder.com/300x450/333/fff?text=Sin+Imagen'"> 
                    </figure>
                    <div class="d-flex flex-column text-center">
                        <h6 class="card-title text-light opacity-75 mb-0">⭐${datos.valoracion}</h6>
                        <small class="text-muted opacity-50">Pág.${datos.pagina}</small>
                    </div>
                </button>`;
}

// Función para procesar una página y mostrar resultados inmediatamente
async function procesarPaginaInmediata(numeroPagina) {
    try {
        const seriesPagina = await obtenerSeriesPagina(numeroPagina);

        if (seriesPagina.size > 0) {
            const seriesNuevas = new Map();

            seriesPagina.forEach((datos, titulo) => {
                if (!Series.has(titulo)) {
                    Series.set(titulo, datos);
                    seriesNuevas.set(titulo, datos);
                    totalSeriesEncontradas++;
                }
            });

            const nuevasSeries = Array.from(seriesNuevas.entries());
            seriesArray = seriesArray.concat(nuevasSeries);

            if (seriesNuevas.size > 0) {
                agregarSeriesAlDOM(seriesNuevas);
            }

            console.log(`Página ${numeroPagina}: ${seriesNuevas.size} nuevas series agregadas`);
        }

        return seriesPagina.size;

    } catch (error) {
        console.error(`Error procesando página ${numeroPagina}:`, error);
        return 0;
    }
}

// Scraping progresivo de series
async function obtenerSeriesProgresivo() {
    try {
        cargaEnProceso = true;
        totalSeriesEncontradas = 0;
        paginasTerminadas = 0;
        zonaBotones.innerHTML = "";

        console.log(`Iniciando búsqueda progresiva en ${PAGINAS_A_BUSCAR} páginas...`);

        for (let pagina = 1; pagina <= PAGINAS_A_BUSCAR; pagina++) {
            mostrarCargando(pagina, PAGINAS_A_BUSCAR, totalSeriesEncontradas);
            await procesarPaginaInmediata(pagina);
            paginasTerminadas++;
            await new Promise(resolve => setTimeout(resolve, 300));
        }

        console.log(`CARGA COMPLETADA: ${totalSeriesEncontradas} series de ${paginasTerminadas} páginas`);

        actualizarMensajeFinal();
        cargaEnProceso = false;

        return Series;

    } catch (error) {
        console.error("Error general en carga progresiva:", error);
        actualizarMensajeFinal();
        cargaEnProceso = false;
        return new Map();
    }
}

// Función para obtener temporadas y episodios de una serie
async function obtenerTemporadasSerie(linkSerie) {
    try {
        console.log(`Buscando temporadas para: ${linkSerie}`);

        const urlSerie = `https://corsproxy.io/?${linkSerie}`;
        const resSerie = await fetch(urlSerie);
        const htmlSerie = await resSerie.text();
        const parserSerie = new DOMParser();
        const docSerie = parserSerie.parseFromString(htmlSerie, "text/html");

        const temporadas = {};

        const seasonTabs = docSerie.querySelectorAll('.TbVideoNv li a[data-toggle="tab"]');

        console.log(`Pestañas de temporadas encontradas: ${seasonTabs.length}`);

        seasonTabs.forEach((tab) => {
            const tabText = tab.textContent.trim();
            const seasonMatch = tabText.match(/TEMPORADA\s+(\d+)/i);

            if (seasonMatch) {
                const seasonNumber = parseInt(seasonMatch[1]);
                const seasonKey = `Temporada ${seasonNumber}`;

                const href = tab.getAttribute('href');
                if (!href) return;

                const panelId = href.trim().replace('#', '').trim();

                const episodesPanel = docSerie.querySelector(`#${panelId}`);

                if (episodesPanel) {
                    const episodios = [];

                    const episodeLinks = episodesPanel.querySelectorAll('a.btn[href*="/temporada/"]');

                    console.log(`  Temporada ${seasonNumber}: ${episodeLinks.length} episodios encontrados`);

                    episodeLinks.forEach((link) => {
                        const episodeText = link.textContent.trim();
                        const episodeLink = link.getAttribute('href');

                        const episodeMatch = episodeText.match(/E(\d+):\s*(.+)/i);

                        if (episodeMatch && episodeLink) {
                            const episodeNumber = parseInt(episodeMatch[1]);
                            const episodeTitle = episodeMatch[2].trim();

                            episodios.push({
                                numero: episodeNumber,
                                titulo: episodeTitle,
                                link: episodeLink,
                                textoCompleto: episodeText
                            });
                        }
                    });

                    if (episodios.length > 0) {
                        temporadas[seasonKey] = episodios;
                    }
                }
            }
        });

        const numTemporadas = Object.keys(temporadas).length;
        console.log(`${numTemporadas} temporadas procesadas correctamente`);

        Object.keys(temporadas).forEach(temp => {
            console.log(`  ${temp}: ${temporadas[temp].length} episodios`);
        });

        return temporadas;

    } catch (error) {
        console.error("Error al obtener temporadas:", error);
        return {};
    }
}

// Función para obtener servidores de un episodio
async function obtenerServidoresEpisodio(linkEpisodio) {
    try {
        console.log(`Buscando servidores para episodio: ${linkEpisodio}`);

        // Paso 1: Obtener el HTML del episodio
        const urlEpisodio = `https://corsproxy.io/?${linkEpisodio}`;
        const resEpisodio = await fetch(urlEpisodio);
        const htmlEpisodio = await resEpisodio.text();

        // Paso 2: Buscar el script que contiene video[1]
        const videoScriptMatch = htmlEpisodio.match(/video\[1\]\s*=\s*['"]([^'"]+)['"]/);

        if (!videoScriptMatch) {
            console.log("No se encontró el script video[1]");
            return { "Error": "No se encontró el reproductor embed" };
        }

        const embedUrl = videoScriptMatch[1];
        console.log(`Embed encontrado: ${embedUrl}`);

        // Paso 3: Obtener el contenido del embed
        const urlEmbed = `https://corsproxy.io/?${embedUrl}`;
        const resEmbed = await fetch(urlEmbed);
        const htmlEmbed = await resEmbed.text();

        // Paso 4: Buscar dataLink en el HTML del embed
        const dataLinkMatch = htmlEmbed.match(/(?:let|const|var)\s+dataLink\s*=\s*(\[[\s\S]*?\]);/);

        if (!dataLinkMatch) {
            console.log("No se encontró dataLink en el embed");
            return { "Error": "No se encontraron servidores en el embed" };
        }

        let dataLink;
        try {
            dataLink = JSON.parse(dataLinkMatch[1]);
            console.log("DataLink parseado correctamente");
        } catch (e) {
            console.error("Error al parsear dataLink:", e);
            return { "Error": "Formato inválido en dataLink" };
        }

        // Paso 5: Procesar los servidores
        const servidores = {};

        dataLink.forEach(entry => {
            const idioma = entry.video_language;
            servidores[idioma] = [];

            entry.sortedEmbeds.forEach(embed => {
                try {
                    // Decodificar el JWT (parte del medio entre los puntos)
                    const token = embed.link.split(".")[1];
                    const decoded = JSON.parse(atob(token));

                    if (decoded.link) {
                        servidores[idioma].push({
                            servidor: embed.servername,
                            url: decoded.link
                        });
                        console.log(`  Servidor: ${embed.servername} -> ${decoded.link}`);
                    }
                } catch (err) {
                    console.warn("No se pudo decodificar un link:", embed.servername, err);
                }
            });
        });

        const totalServidores = Object.values(servidores).reduce((acc, arr) => acc + arr.length, 0);
        console.log(`${Object.keys(servidores).length} idiomas con ${totalServidores} servidores encontrados`);

        return servidores;

    } catch (error) {
        console.error("Error al obtener servidores:", error);
        return { "Error de conexión": linkEpisodio };
    }
}

// Función para seleccionar una serie
async function SeleccionarSerie(tituloSerie) {
    const serie = Series.get(tituloSerie);
    if (!serie) {
        alert("Serie no encontrada");
        return;
    }

    serieSeleccionada = serie;
    temporadaActual = 1;
    episodioActual = 1;

    console.log(`Serie seleccionada: ${tituloSerie}`);

    if (!serie.temporadasCargadas) {
        zonaSeries.innerHTML = '<div class="text-center text-light p-3"><div class="spinner-border text-light" role="status"></div><p class="mt-3">Cargando temporadas y episodios...</p></div>';

        const temporadas = await obtenerTemporadasSerie(serie.link);
        serie.temporadas = temporadas;
        serie.temporadasCargadas = true;
        Series.set(tituloSerie, serie);
    }

    MostrarSelectorTemporadas();
    window.scrollTo({ top: 0, behavior: 'smooth' });
}

// Función para mostrar selector de temporadas con estilo visual
function MostrarSelectorTemporadas() {
    if (!serieSeleccionada || !serieSeleccionada.temporadas) {
        zonaSeries.innerHTML = '<div class="text-center text-warning p-3">No se encontraron temporadas</div>';
        return;
    }

    const temporadas = serieSeleccionada.temporadas;
    const numTemporadas = Object.keys(temporadas).length;

    if (numTemporadas === 0) {
        zonaSeries.innerHTML = '<div class="text-center text-warning p-3">Esta serie no tiene episodios disponibles</div>';
        return;
    }

    if (temporadaActual > numTemporadas) temporadaActual = 1;

    let html = `
        <div class="container-fluid">
            <div class="row mb-4">
                <div class="col-12 text-center">
                    <h2 class="text-light mb-3">${serieSeleccionada.titulo}</h2>
                    <button class="btn btn-outline-light" onclick="VolverAListaSeries()">
                        Volver a series
                    </button>
                </div>
            </div>
            
            <ul class="nav nav-tabs justify-content-center mb-4" id="tabsTemporadas" role="tablist">
    `;

    for (let i = 1; i <= numTemporadas; i++) {
        const tempKey = `Temporada ${i}`;
        if (temporadas[tempKey]) {
            const activeClass = i === temporadaActual ? 'active' : '';
            html += `
                <li class="nav-item" role="presentation">
                    <button class="nav-link ${activeClass}" id="tab-temp-${i}" data-bs-toggle="tab" 
                            data-bs-target="#content-temp-${i}" type="button" role="tab"
                            onclick="CambiarTemporadaTab(${i})">
                        Temporada ${i}
                    </button>
                </li>
            `;
        }
    }

    html += `
            </ul>
            
            <div class="tab-content" id="tabContentTemporadas">
    `;

    for (let i = 1; i <= numTemporadas; i++) {
        const tempKey = `Temporada ${i}`;
        const episodios = temporadas[tempKey];

        if (!episodios) continue;

        const activeClass = i === temporadaActual ? 'show active' : '';

        html += `
            <div class="tab-pane fade ${activeClass}" id="content-temp-${i}" role="tabpanel">
                <div class="row justify-content-center g-3">
        `;

        episodios.forEach((ep) => {
            html += `
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="card bg-dark text-light border-secondary h-100 episodio-card" 
                         onclick="ReproducirEpisodio(${i}, ${ep.numero})" 
                         style="cursor: pointer; transition: transform 0.2s;">
                        <div class="card-body">
                            <h5 class="card-title">Episodio ${ep.numero}</h5>
                            <p class="card-text text-truncate" title="${ep.titulo}">${ep.titulo}</p>
                        </div>
                        <div class="card-footer bg-secondary text-center">
                            <small>T${i} - E${ep.numero}</small>
                        </div>
                    </div>
                </div>
            `;
        });

        html += `
                </div>
            </div>
        `;
    }

    html += `
            </div>
        </div>
        
        <style>
            .episodio-card:hover {
                transform: scale(1.05);
                box-shadow: 0 0 15px rgba(13, 110, 253, 0.5);
            }
            .nav-tabs .nav-link {
                color: #adb5bd;
            }
            .nav-tabs .nav-link.active {
                background-color: #0d6efd;
                color: white;
                border-color: #0d6efd;
            }
            .nav-tabs .nav-link:hover {
                color: white;
            }
        </style>
    `;

    zonaSeries.innerHTML = html;

    document.getElementById("id_sapping").style.display = "flex";
    document.getElementById("id_sapping-canal").innerHTML = `${serieSeleccionada.titulo} - T${temporadaActual}`;
}

// Función para cambiar de temporada desde las pestañas
function CambiarTemporadaTab(numTemporada) {
    temporadaActual = numTemporada;
    episodioActual = 1;
    
    // Ocultar iframe y selector de servidores al cambiar de temporada
    tele.style.display = "none";
    tele.src = "";
    document.getElementById("id_sapping").style.display = "none";
    
    const selector = document.getElementById('selector-servidores');
    if (selector) selector.remove();
    
    console.log(`Cambiado a Temporada ${numTemporada}`);
}

// Función para volver a la lista de series
function VolverAListaSeries() {
    // Limpiar todo
    zonaSeries.innerHTML = '';
    serieSeleccionada = null;
    servidoresActuales = {};

    // Ocultar elementos de reproducción
    document.getElementById("id_sapping").style.display = "none";
    tele.style.display = "none";
    tele.src = "";

    // Eliminar selector de servidores
    const selector = document.getElementById('selector-servidores');
    if (selector) selector.remove();

    // Eliminar mensaje de carga si existe
    const msgCarga = document.getElementById('carga-episodio');
    if (msgCarga) msgCarga.remove();

    // Scroll suave a los botones de series
    setTimeout(() => {
        zonaBotones.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }, 100);
}

// Variable global para almacenar los servidores del episodio actual
let servidoresActuales = {};

// Función para reproducir un episodio
async function ReproducirEpisodio(numTemporada, numeroEpisodio) {
    temporadaActual = numTemporada;
    episodioActual = numeroEpisodio;

    const tempKey = `Temporada ${temporadaActual}`;
    const episodios = serieSeleccionada.temporadas[tempKey];

    if (!episodios || !episodios[numeroEpisodio - 1]) {
        alert("Episodio no encontrado");
        return;
    }

    const episodio = episodios[numeroEpisodio - 1];

    console.log(`Reproduciendo: ${serieSeleccionada.titulo} - T${temporadaActual} E${numeroEpisodio}`);

    tele.style.display = "none";

    // Limpiar selector de servidores previo
    const servidoresPrevios = document.getElementById('selector-servidores');
    if (servidoresPrevios) servidoresPrevios.remove();

    const mensajeCarga = document.createElement('div');
    mensajeCarga.id = 'carga-episodio';
    mensajeCarga.className = 'text-center text-light p-4';
    mensajeCarga.innerHTML = '<div class="spinner-border text-light" role="status"></div><p class="mt-3">Cargando episodio...</p>';
    zonaSeries.insertBefore(mensajeCarga, zonaSeries.firstChild);

    try {
        const servidores = await obtenerServidoresEpisodio(episodio.link);

        const msgCarga = document.getElementById('carga-episodio');
        if (msgCarga) msgCarga.remove();

        if (!servidores || Object.keys(servidores).length === 0) {
            alert("No se encontraron servidores disponibles para este episodio");
            return;
        }

        // Guardar servidores globalmente
        servidoresActuales = servidores;

        // Reproducir el primer servidor disponible
        let urlReproduccion = null;
        let servidorActual = null;
        for (const idioma in servidores) {
            if (servidores[idioma].length > 0) {
                urlReproduccion = servidores[idioma][0].url;
                servidorActual = { idioma, servidor: servidores[idioma][0] };
                console.log(`Usando servidor: ${servidores[idioma][0].servidor} (${idioma})`);
                break;
            }
        }

        if (urlReproduccion) {
            tele.src = urlReproduccion;
            tele.style.display = "block";
            document.getElementById("id_sapping-canal").innerHTML =
                `${serieSeleccionada.titulo} - T${temporadaActual} E${numeroEpisodio}: ${episodio.titulo}`;

            // Crear selector de servidores
            MostrarSelectorServidores(servidores, servidorActual);

            window.scrollTo({ top: 0, behavior: 'smooth' });
        } else {
            alert("No se pudo obtener el enlace de reproducción");
        }

    } catch (error) {
        console.error("Error al reproducir episodio:", error);
        const msgCarga = document.getElementById('carga-episodio');
        if (msgCarga) msgCarga.remove();
        alert("Error al cargar el episodio. Por favor intente de nuevo.");
    }
}

// Función para mostrar selector de servidores
function MostrarSelectorServidores(servidores, servidorActual) {
    // Buscar si ya existe el contenedor
    let contenedor = document.getElementById('selector-servidores');
    if (contenedor) contenedor.remove();

    // Crear nuevo contenedor
    contenedor = document.createElement('div');
    contenedor.id = 'selector-servidores';
    contenedor.className = 'container-fluid my-4 p-4';
    contenedor.style.cssText = 'background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.5);';

    let html = `
        <div class="row mb-4">
            <div class="col-12 text-center">
                <h3 class="text-light fw-bold mb-0" style="text-shadow: 2px 2px 4px rgba(0,0,0,0.5); letter-spacing: 1px;">
                    <i class="bi bi-collection-play-fill me-2"></i>
                    SERVIDORES DISPONIBLES
                </h3>
            </div>
        </div>
    `;

    // Agrupar por idioma
    for (const idioma in servidores) {
        const etiquetaIdioma = idioma === "LAT" ? "Latino" :
            idioma === "SUB" ? "Subtitulado" :
                idioma === "ESP" ? "Español" :
                    idioma === "JAP" ? "Japonés" :
                        idioma === "ENG" ? "Inglés" : idioma;

        const iconoIdioma = idioma === "LAT" ? "bi-chat-square-text-fill" :
            idioma === "SUB" ? "bi-badge-cc-fill" :
                idioma === "ESP" ? "bi-translate" :
                    idioma === "JAP" ? "bi-globe-asia-australia" : "bi-globe";

        html += `
            <div class="row mb-4">
                <div class="col-12">
                    <div class="idioma-header mb-3 p-3 rounded" style="background: rgba(13, 110, 253, 0.15); border-left: 4px solid #0d6efd;">
                        <h4 class="text-light mb-0 fw-bold">
                            <i class="bi ${iconoIdioma} me-2"></i>${etiquetaIdioma}
                        </h4>
                    </div>
                    <div class="btn-group-servidores d-flex flex-wrap justify-content-center" style="gap: 15px;">
        `;

        servidores[idioma].forEach((servidor, index) => {
            const esActivo = servidorActual &&
                servidorActual.idioma === idioma &&
                servidorActual.servidor.servidor === servidor.servidor;

            const estiloBoton = esActivo ?
                'background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%); color: white; border: 3px solid #0dcaf0; box-shadow: 0 8px 20px rgba(13, 110, 253, 0.6);' :
                'background: rgba(255,255,255,0.1); color: white; border: 2px solid rgba(255,255,255,0.3);';

            const iconoEstado = esActivo ? '<i class="bi bi-play-circle-fill me-2"></i>' : '<i class="bi bi-server me-2"></i>';

            html += `
                <button class="btn servidor-btn-tv" 
                        onclick="CambiarServidor('${idioma}', ${index})"
                        data-idioma="${idioma}"
                        data-indice="${index}"
                        style="${estiloBoton}"
                        title="Reproducir con ${servidor.servidor}">
                    ${iconoEstado}<span class="servidor-nombre">${servidor.servidor}</span>
                </button>
            `;
        });

        html += `
                    </div>
                </div>
            </div>
        `;
    }

    contenedor.innerHTML = html;

    // INSERTAR CORRECTAMENTE
    const mainMenu = document.getElementById('menu_canales');
    if (mainMenu) {
        if (zonaSeries && zonaSeries.parentNode === mainMenu) {
            mainMenu.insertBefore(contenedor, zonaSeries);
        } else {
            const iframe = document.getElementById('id_PantallaTV');
            if (iframe && iframe.nextSibling) {
                mainMenu.insertBefore(contenedor, iframe.nextSibling);
            } else if (iframe) {
                iframe.parentNode.appendChild(contenedor);
            }
        }
    }

    // Agregar estilos CSS mejorados para TV
    if (!document.getElementById('estilos-servidores-tv')) {
        const estilos = document.createElement('style');
        estilos.id = 'estilos-servidores-tv';
        estilos.innerHTML = `
            .servidor-btn-tv {
                padding: 20px 35px !important;
                font-size: 1.5rem !important;
                font-weight: 400 !important;
                border-radius: 15px !important;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
                text-transform: uppercase !important;
                letter-spacing: 1px !important;
                min-width: 100px !important;
                cursor: pointer !important;
                position: relative !important;
                overflow: hidden !important;
            }
            
            .servidor-btn-tv:hover {
                transform: translateY(-5px) scale(1.05) !important;
                box-shadow: 0 15px 40px rgba(13, 110, 253, 0.5) !important;
                border-color: #0dcaf0 !important;
            }
            
            .servidor-btn-tv:active {
                transform: translateY(-2px) scale(1.02) !important;
            }
            
            .servidor-btn-tv::before {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                width: 0;
                height: 0;
                border-radius: 50%;
                background: rgba(255, 255, 255, 0.3);
                transform: translate(-50%, -50%);
                transition: width 0.6s, height 0.6s;
            }
            
            .servidor-btn-tv:hover::before {
                width: 300px;
                height: 300px;
            }
            
            .servidor-nombre {
                position: relative;
                z-index: 1;
            }
            
            .idioma-header {
                animation: slideInLeft 0.5s ease-out;
            }
            
            @keyframes slideInLeft {
                from {
                    opacity: 0;
                    transform: translateX(-30px);
                }
                to {
                    opacity: 1;
                    transform: translateX(0);
                }
            }
            
            .servidor-btn-tv i {
                font-size: 1.8rem;
                vertical-align: middle;
            }
            
            /* Responsive para móviles */
            @media (max-width: 768px) {
                .servidor-btn-tv {
                    padding: 15px 25px !important;
                    font-size: 1.2rem !important;
                    min-width: 150px !important;
                }
                
                .servidor-btn-tv i {
                    font-size: 1.4rem;
                }
            }
            
            /* Extra grande para TVs */
            @media (min-width: 1200px) {
                .servidor-btn-tv {
                    padding: 25px 45px !important;
                    font-size: 1.8rem !important;
                    min-width: 250px !important;
                }
                
                .servidor-btn-tv i {
                    font-size: 2rem;
                }
            }
        `;
        document.head.appendChild(estilos);
    }

    console.log('Selector de servidores TV insertado correctamente');
}

function CambiarServidor(idioma, indice) {
    console.log(`Cambiando servidor: ${idioma}, índice ${indice}`);

    if (!servidoresActuales[idioma] || !servidoresActuales[idioma][indice]) {
        alert("Servidor no disponible");
        return;
    }

    const servidor = servidoresActuales[idioma][indice];

    console.log(`Servidor seleccionado: ${servidor.servidor} (${idioma})`);
    console.log(`URL: ${servidor.url}`);

    // Cambiar el src del iframe
    tele.src = servidor.url;

    // Actualizar TODOS los botones a estado inactivo
    document.querySelectorAll('.servidor-btn-tv').forEach(btn => {
        btn.style.background = 'rgba(255,255,255,0.1)';
        btn.style.color = 'white';
        btn.style.border = '2px solid rgba(255,255,255,0.3)';
        btn.style.boxShadow = 'none';

        // Cambiar icono a servidor
        const iconoActual = btn.querySelector('i');
        if (iconoActual) {
            iconoActual.className = 'bi bi-server me-2';
        }
    });

    // Marcar el botón actual como activo
    const botonActual = document.querySelector(`.servidor-btn-tv[data-idioma="${idioma}"][data-indice="${indice}"]`);
    if (botonActual) {
        botonActual.style.background = 'linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%)';
        botonActual.style.color = 'white';
        botonActual.style.border = '3px solid #0dcaf0';
        botonActual.style.boxShadow = '0 8px 20px rgba(13, 110, 253, 0.6)';

        // Cambiar icono a play
        const iconoBoton = botonActual.querySelector('i');
        if (iconoBoton) {
            iconoBoton.className = 'bi bi-play-circle-fill me-2';
        }

        // Efecto de pulso
        botonActual.style.animation = 'pulso 0.5s ease-out';
    }

    // Agregar animación de pulso si no existe
    if (!document.getElementById('animacion-pulso')) {
        const style = document.createElement('style');
        style.id = 'animacion-pulso';
        style.innerHTML = `
            @keyframes pulso {
                0%, 100% { transform: scale(1); }
                50% { transform: scale(1.1); }
            }
        `;
        document.head.appendChild(style);
    }

    // NO hacer scroll, mantener la vista actual
}

// Navegación entre episodios
// Navegación entre episodios
function EpisodioAnterior() {
    if (!serieSeleccionada || !serieSeleccionada.temporadas) return;

    const tempKey = `Temporada ${temporadaActual}`;
    const episodios = serieSeleccionada.temporadas[tempKey];

    if (episodioActual > 1) {
        // Episodio anterior en la misma temporada
        ReproducirEpisodio(temporadaActual, episodioActual - 1);
    } else if (temporadaActual > 1) {
        // Último episodio de la temporada anterior
        const tempKeyAnterior = `Temporada ${temporadaActual - 1}`;
        const episodiosAnteriores = serieSeleccionada.temporadas[tempKeyAnterior];
        if (episodiosAnteriores && episodiosAnteriores.length > 0) {
            ReproducirEpisodio(temporadaActual - 1, episodiosAnteriores.length);

            // Actualizar la pestaña visual si es necesario
            setTimeout(() => {
                const tabAnterior = document.getElementById(`tab-temp-${temporadaActual}`);
                if (tabAnterior) {
                    const bsTab = new bootstrap.Tab(tabAnterior);
                    bsTab.show();
                }
            }, 500);
        }
    } else {
        console.log("Ya estás en el primer episodio de la primera temporada");
    }
}

function EpisodioSiguiente() {
    if (!serieSeleccionada || !serieSeleccionada.temporadas) return;

    const tempKey = `Temporada ${temporadaActual}`;
    const episodios = serieSeleccionada.temporadas[tempKey];

    if (!episodios) return;

    if (episodioActual < episodios.length) {
        // Siguiente episodio en la misma temporada
        ReproducirEpisodio(temporadaActual, episodioActual + 1);
    } else {
        // Primer episodio de la siguiente temporada
        const numTemporadas = Object.keys(serieSeleccionada.temporadas).length;
        if (temporadaActual < numTemporadas) {
            ReproducirEpisodio(temporadaActual + 1, 1);

            // Actualizar la pestaña visual si es necesario
            setTimeout(() => {
                const tabSiguiente = document.getElementById(`tab-temp-${temporadaActual}`);
                if (tabSiguiente) {
                    const bsTab = new bootstrap.Tab(tabSiguiente);
                    bsTab.show();
                }
            }, 500);
        } else {
            console.log("Ya estás en el último episodio de la última temporada");
        }
    }
}

// Función para buscar series
function Buscar_Serie() {
    let value = document.getElementById("id_BuscardorSeries").value.toLowerCase();
    let botonesSeries = document.querySelectorAll(".class_SerieBoton");

    for (let i = 0; i < botonesSeries.length; i++) {
        let boton = botonesSeries[i];
        let buscar = boton.title.toLowerCase();
        if (buscar.indexOf(value) > -1) {
            boton.style.display = "flex";
            boton.style.opacity = 1;
            boton.classList.add("encontrado");
        } else {
            boton.style.display = "none";
            boton.style.opacity = 0;
            boton.classList.remove("encontrado");
        }
    }
}

// Función mostrarScroll
function mostrarScroll() {
    let animado = document.querySelectorAll(".class_SerieBoton");
    let scrollTop = document.documentElement.scrollTop;
    for (let i = 0; i < animado.length; i++) {
        if (animado[i].offsetTop - 700 < scrollTop) {
            animado[i].style.opacity = 1;
            animado[i].classList.add("mostrarHaciaArriba");
        } else {
            animado[i].style.opacity = 0;
            animado[i].classList.remove("mostrarHaciaArriba");
        }
    }
}

// Inicializar la carga progresiva de series
async function IniciarCargaSeries() {
    try {
        console.log(`Configuración actual: Buscando progresivamente en ${PAGINAS_A_BUSCAR} páginas de series`);

        Series = new Map();
        seriesArray = [];
        totalSeriesEncontradas = 0;
        paginasTerminadas = 0;

        await obtenerSeriesProgresivo();

        if (Series.size === 0) {
            zonaBotones.innerHTML = '<div class="text-center text-warning p-3">No se pudieron cargar las series.</div>';
            return;
        }

        window.addEventListener('scroll', mostrarScroll);

        console.log(`Carga progresiva completada: ${Series.size} series mostradas en tiempo real`);

    } catch (error) {
        console.error("Error al inicializar la carga progresiva:", error);
        zonaBotones.innerHTML = '<div class="text-center text-danger p-3">Error al inicializar la aplicación.</div>';
    }
}

// INICIALIZACIÓN
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', IniciarCargaSeries);
} else {
    IniciarCargaSeries();
}

// Event Listeners
document.getElementById("id_BuscardorSeries").addEventListener("keyup", Buscar_Serie);
document.getElementById("id_BuscardorSeries").addEventListener("click", Buscar_Serie);
window.addEventListener("scroll", mostrarScroll);

document.getElementById("id_sapping-izquierda").addEventListener("click", EpisodioAnterior);
document.getElementById("id_sapping-derecha").addEventListener("click", EpisodioSiguiente);

// Event Listener para el botón de reiniciar capítulo
document.getElementById("id_sapping-canal").addEventListener("click", function() {
    if (serieSeleccionada && temporadaActual && episodioActual) {
        // Reiniciar el episodio actual
        const tempKey = `Temporada ${temporadaActual}`;
        const episodios = serieSeleccionada.temporadas[tempKey];
        
        if (episodios && episodios[episodioActual - 1]) {
            console.log("Reiniciando episodio actual");
            ReproducirEpisodio(temporadaActual, episodioActual);
        }
    }
});

// Atajos de teclado
document.addEventListener('keydown', (e) => {
    // Alt + ◄ (flecha izquierda) = Episodio anterior
    if (e.altKey && e.key === 'ArrowLeft') {
        e.preventDefault();
        EpisodioAnterior();
    } 
    // Alt + ► (flecha derecha) = Episodio siguiente
    else if (e.altKey && e.key === 'ArrowRight') {
        e.preventDefault();
        EpisodioSiguiente();
    }
    // Escape = Volver a lista de series
    else if (e.key === 'Escape' && serieSeleccionada) {
        e.preventDefault();
        VolverAListaSeries();
    }
});