dlhd_so();

const player = document.getElementById('player');
const grilla = document.getElementById('grillaCanales');
const panel = document.getElementById('panelDerecho');

let canalActualNombre = '';
let enlaceActualIndex = 0;

function cargarFiltros() {
    const selectPais = document.getElementById("filtroPais");
    //   const selectCategoria = document.getElementById("filtroCategoria");
    const paises = new Set();
    //   const categorias = new Set();

    for (let [_, canal] of MisCanales) {
        if (canal.pais) paises.add(canal.pais);
        // if (canal.categoria) categorias.add(canal.categoria);
    }

    [...paises].sort().forEach(p => {
        const opt = document.createElement("option");
        opt.value = p;
        opt.textContent = p;
        selectPais.appendChild(opt);
    });

    //   [...categorias].sort().forEach(c => {
    //     const opt = document.createElement("option");
    //     opt.value = c;
    //     opt.textContent = c;
    //     selectCategoria.appendChild(opt);
    //   });
}

function renderGrilla() {
    grilla.innerHTML = '';
    for (let [nombre, canal] of MisCanales) {
        const logoURL = `../img/${encodeURIComponent(nombre)}.webp`;
        const div = document.createElement('button');
        div.className = 'canal-card d-flex align-items-center gap-3 w-100 text-light';
        div.innerHTML = `
                  <img src="${logoURL}" alt="${nombre} logo" onerror="this.src='../img/generic.webp'" style="width:50px; height: 50px; border-radius: 8px; object-fit: contain;" />
                  <div class="text-start">
                    <h5 class="mb-1">${nombre}</h5>
                    <small>${canal.pais}</small>
                  </div>
                `;
        div.onclick = () => reproducir(nombre);
        grilla.appendChild(div);
    }
}

function filtrarCanales() {
    const texto = document.getElementById("buscador").value.toLowerCase();
    const pais = document.getElementById("filtroPais").value;
    //   const categoria = document.getElementById("filtroCategoria").value;
    grilla.innerHTML = '';

    for (let [nombre, canal] of MisCanales) {
        const coincideTexto = nombre.toLowerCase().includes(texto);
        const coincidePais = !pais || canal.pais === pais;
        // const coincideCategoria = !categoria || canal.categoria === categoria;
        if (coincideTexto && coincidePais) {
            const logoURL = `../img/${encodeURIComponent(nombre)}.webp`;
            const div = document.createElement('button');
            div.className = 'canal-card d-flex align-items-center gap-3 w-100 text-light';
            div.innerHTML = `
            <img src="${logoURL}" alt="${nombre} logo" onerror="this.src='../img/generic.webp'" style="width:50px; height: 50px; border-radius: 8px; object-fit: contain;" />
            <div class="text-start">
              <h5 class="mb-1">${nombre}</h5>
              <small>${canal.pais}</small>
            </div>
          `;
            div.onclick = () => reproducir(nombre);
            grilla.appendChild(div);
        }
    }
}






///Traer el canal y servidor por URL ---------------------------------
let url = new URL(window.location.href);
const stream = url.searchParams.get('stream'); // Intenta obtener el parámetro 'stream'
const server = url.searchParams.get('server'); // Intenta obtener el parámetro 'server'

if (stream !== null && stream.trim() !== '') {
    if (MisCanales.has(stream)) canalActualNombre = stream;
    else { alert("El canal " + stream + " no existe o se dio de baja..."); window.location.href = "index.html"; }

    if (server !== null && server.trim() !== '') {
        enlaceActualIndex = server - 1;
    }
    // reproducir(stream);
}

function actualizoLink() {
    url.searchParams.set('stream', canalActualNombre);
    url.searchParams.set('server', enlaceActualIndex + 1);
    window.history.pushState({}, '', url);
}


function reproducir(nombre) {
    const canal = MisCanales.get(nombre);
    if (!canal || canal.enlaces.length === 0) return;

    canalActualNombre = nombre;

    if (enlaceActualIndex >= canal.enlaces.length) enlaceActualIndex = 0;

    player.src = canal.enlaces[enlaceActualIndex];
    localStorage.setItem("ultimoCanal", nombre);

    // Actualizar nombre visual del canal
    const labelNombre = document.getElementById("nombreCanalActual");
    labelNombre.textContent = `Canal: ${nombre}`;

    // Generar opciones de servidor
    const selector = document.getElementById("selectorServidor");
    selector.innerHTML = '';
    canal.enlaces.forEach((enlace, i) => {
        const opcion = document.createElement('option');
        opcion.value = i;

        let servidor = enlacesServidor[enlace] || "Sin nombre";
        if (servidor === "Sin nombre") {
            if (enlace.includes("sensa_ext.html?id=") || enlace.includes("extension.html?get=")) servidor = "Extensión";
            else servidor = `Servidor ${i + 1}`;
        }
        opcion.textContent = servidor;
        selector.appendChild(opcion);
    });

    selector.selectedIndex = enlaceActualIndex;
    actualizoLink();
}

function reiniciarCanal() {
    const canal = MisCanales.get(canalActualNombre);
    player.src = canal.enlaces[enlaceActualIndex];
}

function cambiarServidor(index) {
    // alert("Selecciono: "+index)
    enlaceActualIndex = index;
    canal = MisCanales.get(canalActualNombre);
    if (!canal) return;
    const idx = parseInt(index);
    if (isNaN(idx) || !canal.enlaces[idx]) return;
    enlaceActualIndex = idx;
    player.src = canal.enlaces[idx];

    actualizoLink();
}

window.onload = () => {
    cargarFiltros();
    renderGrilla();
    document.getElementById('botonesCategorias').style.display = 'none';

    let reproducirCanal = "";
    if (stream !== null && stream.trim() !== '') reproducirCanal = stream;
    else {
        const ultimo = localStorage.getItem("ultimoCanal");
        reproducirCanal = MisCanales.has(ultimo) ? ultimo : MisCanales.keys().next().value;
    }
    if (reproducirCanal) reproducir(reproducirCanal);


    let permitido = true;
    const item = "c2Rh";
    const clave = atob(item);
    const guardado = localStorage.getItem(clave);

    if (guardado) {
		console.log("guardado....");
    }

    if (!permitido) {
		console.log("Permitido...");
	}
};


function cerrarPagina() {
	console.log("CerrarPagina....!");
}


document.addEventListener('DOMContentLoaded', function () {
    document.addEventListener('keydown', function (e) {
        if (
            e.key === "F12" || // F12
            (e.ctrlKey && e.key.toLowerCase() === 'u') || // Ctrl+U
            (e.ctrlKey && e.shiftKey && ['i', 'j', 'c'].includes(e.key.toLowerCase())) || // Ctrl+Shift+I/J/C
            (e.ctrlKey && ['s', 'p'].includes(e.key.toLowerCase())) || // Ctrl+S / Ctrl+P
            (e.metaKey && ['s', 'p'].includes(e.key.toLowerCase())) // Cmd+S / Cmd+P para Mac
        ) {
            e.preventDefault();
            cerrarPagina(); // Castigo
        }
    });
});

let abrioHerramientas = false;
let reaccionEjecutada = false;

function detectarDevTools(orientation) {
    const threshold = 160;
    const ancho = window.outerWidth - window.innerWidth > threshold;
    const alto = window.outerHeight - window.innerHeight > threshold;

    if ((orientation === 'vertical' && ancho) || (orientation === 'horizontal' && alto)) {
        abrioHerramientas = true;

        // Solo ejecuta la reacción una vez
        if (!reaccionEjecutada) {
            reaccionEjecutada = true;
            cerrarPagina(); // Ejecuta la función de castigo
        }

    } else {
        if (abrioHerramientas && !reaccionEjecutada) {
            location.reload();
        } else {
            abrioHerramientas = false;
        }
    }
}

setInterval(() => {
    detectarDevTools('vertical');
    // detectarDevTools('horizontal');
}, 500);

// Insertar año automáticamente
document.getElementById("añoActual").textContent = new Date().getFullYear();


// Categorías definidas
const categorias = [
    { nombre: 'Todos', descripcion: 'Todos los canales', icono: 'Todos.png', alt: 'Todos los canales' },
    { nombre: 'Argentina', descripcion: 'Vistos en Argentina', icono: 'Argentina.png', alt: 'Argentina' },
    { nombre: 'Grilla', descripcion: 'Guía de Programación', icono: 'Grilla.png', alt: 'Grilla' },
    { nombre: 'Noticias', descripcion: 'Canales de Noticias', icono: 'Noticias.png', alt: 'Noticias' },
    { nombre: 'Peliculas', descripcion: 'Canales de Peliculas', icono: 'Peliculas.png', alt: 'Películas' },
    { nombre: 'Series', descripcion: 'Canales de Series', icono: 'Series.png', alt: 'Series' },
    { nombre: 'Documentales', descripcion: 'Canales de Documentales', icono: 'Documentales.png', alt: 'Documentales' },
    { nombre: 'Cultura', descripcion: 'Canales de Cultura', icono: 'Cultura.png', alt: 'Cultura' },
    { nombre: 'Deportes', descripcion: 'Canales de Deportes', icono: 'Deportes.png', alt: 'Deportes' },
    { nombre: 'Novelas', descripcion: 'Canales de Novelas', icono: 'Novelas.png', alt: 'Novelas' },
    { nombre: 'Música', descripcion: 'Canales de Música', icono: 'Música.png', alt: 'Música' },
    { nombre: 'Caricaturas', descripcion: 'Canales de Caricaturas', icono: 'Caricaturas.png', alt: 'Caricaturas' },
    { nombre: 'Adultos', descripcion: 'Canales de Adultos', icono: 'Playboy.png', alt: 'Adultos', claseExtra: 'mx-auto' },
    { nombre: 'Varios', descripcion: 'Canales Varios', icono: 'Varios.png', alt: 'Varios', claseExtra: 'mx-auto' },
];

// Map con listas permitidas (tu ejemplo)


const contenedorCategorias = document.getElementById('botonesCategorias');

let mostrandoCategorias = true;
let mostrandoChat = false;
let mostrandoOpciones = false;

// const grilla = document.getElementById('grillaCanales');
const chat = document.getElementById('chatbro-frame');
// const contenedorCategorias = document.getElementById('botonesCategorias');
const panelOpciones = document.getElementById('panelOpciones'); // asegurate de tener este div

function ocultarTodo() {
    grilla.style.display = 'none';
    chat.style.display = 'none';
    contenedorCategorias.style.display = 'none';
    panelOpciones.style.display = 'none';

    mostrandoCategorias = false;
    mostrandoChat = false;
    mostrandoOpciones = false;
}


function toggleCategorias() {
    if (mostrandoCategorias) {
        ocultarTodo();
        grilla.style.display = 'block';
    } else {
        ocultarTodo();
        contenedorCategorias.style.display = 'block';
        mostrarCategorias(); // tu función ya existente para renderizar
        mostrandoCategorias = true;
    }
}


function toggleChat() {
    if (mostrandoChat) {
        ocultarTodo();
        grilla.style.display = 'block';
    } else {
        ocultarTodo();
        chat.style.display = 'block';
        mostrandoChat = true;
    }
}


function togglePanelOpciones() {
    if (mostrandoOpciones) {
        ocultarTodo();
        grilla.style.display = 'block';
    } else {
        ocultarTodo();
        panelOpciones.style.display = 'block';
        mostrandoOpciones = true;
    }
}


// Renderizamos los botones de categorías
function mostrarCategorias() {
    contenedorCategorias.innerHTML = ''; // limpiar

    categorias.forEach(cat => {
        const fila = document.createElement('button');
        fila.className = 'categoria-fila d-flex align-items-center gap-3 p-2 mb-2 rounded btn btn-outline-light';
        fila.style.cursor = 'pointer';
        fila.style.minHeight = '60px';

        fila.innerHTML = `
            <img src="../img/Iconos/${cat.icono}" alt="${cat.alt}" style="height: 40px; width: 40px; object-fit: contain;" />
            <div class="d-flex flex-column justify-content-center text-start" style="line-height: 1.2;">
              <div style="font-weight: 600; font-size: 1.1rem;">${cat.nombre}</div>
              <small class="text-muted">${cat.descripcion}</small>
            </div>
        `;

        fila.onclick = () => filtrarPorCategoria(cat.nombre);

        contenedorCategorias.appendChild(fila);
    });
}


// Filtra y muestra la grilla según la categoría seleccionada
function filtrarPorCategoria(nombreCategoria) {
    mostrandoCategorias = false;
    contenedorCategorias.style.display = 'none';
    grilla.style.display = 'block';

    // Filtrar canales según la categoría
    if (nombreCategoria === 'Todos') {
        renderGrilla(); // Todos los canales
        return;
    }

    // Obtenemos lista permitida para la categoría
    const permitidos = listasPermitidas[nombreCategoria];
    if (!permitidos) {
        renderGrilla(); // Si no está definida, mostrar todos
        return;
    }

    // Filtramos MisCanales por nombre en permitidos
    grilla.innerHTML = '';
    for (let [nombre, canal] of MisCanales) {
        if (permitidos.has(nombre)) {
            const logoURL = `../img/${encodeURIComponent(nombre)}.webp`;

            const div = document.createElement('button');
            div.className = 'canal-card d-flex align-items-center gap-3 w-100 text-light';

            div.innerHTML = `
                <img src="${logoURL}" alt="${nombre} logo" style="width:50px; height: 50px; border-radius: 8px; object-fit: contain;" />
                <div class="text-start">
                    <h5 class="mb-1">${nombre}</h5>
                    <small>${canal.pais}</small>
                </div>
            `;

            div.onclick = () => reproducir(nombre);
            grilla.appendChild(div);
        }
    }
}



document.addEventListener('DOMContentLoaded', () => {
    let item = "c2Rh";
    const guardado = localStorage.getItem(atob(item));
    const mensajeDiv = document.getElementById("mensajePublicidad");

    if (guardado && mensajeDiv) {
        try {
            const { expira } = JSON.parse(guardado);
            const ahora = Date.now();

            if (ahora < expira) {
                const diasRestantes = Math.ceil((expira - ahora) / (1000 * 60 * 60 * 24));
                mensajeDiv.innerHTML = `🎉 ¡Gracias por tu colaboración!<br>Te quedan <strong>${diasRestantes} día${diasRestantes !== 1 ? 's' : ''}</strong> de acceso completo. Disfrutá el contenido sin interrupciones. 📺`;
                // document.getElementById("botonQuitarPublicidad").classList.add("d-none");
            } else {
                mensajeDiv.innerHTML = '🌟 Tu apoyo impulsa estos proyectos. <br>Considerá invitarnos un café para seguir mejorando. <br>¡Gracias por estar del otro lado! ☕'; // Código vencido, no mostrar mensaje
            }
        } catch {
            mensajeDiv.innerHTML = '🌟 Tu apoyo impulsa estos proyectos. <br>Considerá invitarnos un café para seguir mejorando. <br>¡Gracias por estar del otro lado! ☕'; // Error parseando, no mostrar mensaje
        }
    } else if (mensajeDiv) {
        mensajeDiv.innerHTML = '🌟 Tu apoyo impulsa estos proyectos. <br>Considerá invitarnos un café para seguir mejorando. <br>¡Gracias por estar del otro lado! ☕'; // No hay código guardado, no mostrar mensaje
    }
});


///Notificaciones ----------------------------------------------
function showNotification(type, message) {
    const container = document.getElementById('notification-container');



    const notification = document.createElement('div');
    notification.classList.add('notification', type);

    container.style.margin = "0 auto";

    const messageElement = document.createElement('div');
    messageElement.classList.add('message');
    messageElement.innerHTML = message;

    const closeButton = document.createElement('button');
    closeButton.classList.add('close-btn');
    closeButton.innerText = 'Cerrar';

    // Variable para saber si ya se cerró la notificación
    let isClosed = false;

    closeButton.onclick = () => {
        if (!isClosed) {
            isClosed = true;  // Marcamos como cerrada la notificación
            notification.classList.add('hide');
            setTimeout(() => notification.remove(), 300); // Elimina el elemento después de la animación
        }
    };

    notification.appendChild(messageElement);
    notification.appendChild(closeButton);

    container.appendChild(notification);

    // Cerrar automáticamente después de 60 segundos si no se cerró antes
    const autoCloseTimeout = setTimeout(() => {
        if (!isClosed) { // Verificamos si ya se cerró antes manualmente
            notification.classList.add('hide');
            setTimeout(() => notification.remove(), 300); // Elimina el elemento después de la animación
        }
    }, 60000);

    // Si el usuario cierra antes de tiempo, se limpia el `setTimeout`
    closeButton.onclick = () => {
        if (!isClosed) {
            isClosed = true;
            clearTimeout(autoCloseTimeout); // Cancelamos el `setTimeout` si el usuario cierra la notificación
            notification.classList.add('hide');
            setTimeout(() => notification.remove(), 300); // Elimina el elemento después de la animación
        }
    };
}




const MessageDonaciones = `
  <section class="container text-center" style="background-color: #111; padding: 25px; border-radius: 12px; border: 1px solid #0ff; box-shadow: 0 0 15px rgba(0, 255, 255, 0.2); color: #eee;">
    
    <h5 class="mb-3" style="font-size: 20px; font-weight: 600; color: #0ff;">
      🚀 ¡Bienvenido a <strong>Canales Online</strong>! 🚀
    </h5>

    <div style="background-color: #0f2233; border: 2px solid #00c3ff; border-radius: 12px; padding: 16px; margin-top: 25px;">
      <p style="font-size: 16px; color: #00c3ff; margin: 0;">
        🔔 <strong>¡Sistema sin publicidad ahora por solo $1000!</strong><br>
        🙌 Más accesible para todos. Si podés donar más, ¡mil gracias!
      </p>
      <a href="html/quitar-publicidad.html" class="btn btn-info mt-3">¿Cómo evitar anuncios?</a>
    </div>

    <p class="mt-3" style="font-size: 16px; color: #0ff;">
      💖 Gracias por apoyar y ser parte de esta comunidad 💖
    </p>
  </section>
`;


setTimeout(() => {
    // showNotification('gray', MessageDonaciones);
}, 5000);