app.js

/* --- DATOS DE PRUEBA (MOCK DATA) --- */
// Esto simula lo que tu Python devolverá en formato JSON
const MOCK_DATA = [
    {
        id: 1,
        title: "Fundamentos de Python: De Cero a Héroe",
        level: "beginner",
        rating: 4.8,
        reviews: 12500,
        duration: "10h 30m",
        image: "https://placehold.co/600x400/dcfce7/15803d?text=Python+Basics",
        description: "Aprende las bases de la programación: variables, bucles y funciones con ejercicios prácticos."
    },
    {
        id: 2,
        title: "Estructuras de Datos y Algoritmos en Python",
        level: "intermediate",
        rating: 4.6,
        reviews: 8200,
        duration: "18h 15m",
        image: "https://placehold.co/600x400/fef9c3/a16207?text=Algoritmos",
        description: "Domina listas enlazadas, árboles binarios y optimización de código."
    },
    {
        id: 3,
        title: "Machine Learning y Data Science Avanzado",
        level: "expert",
        rating: 4.9,
        reviews: 21000,
        duration: "32h 00m",
        image: "https://placehold.co/600x400/fee2e2/b91c1c?text=AI+Expert",
        description: "Implementa redes neuronales, TensorFlow y modelos predictivos complejos."
    }
];

/* --- VARIABLES DE ESTADO --- */
let currentTopic = "";

/* --- FUNCIONES DE NAVEGACIÓN --- */

function handleEnter(e) {
    if (e.key === 'Enter') {
        startSearch();
    }
}

function quickSearch(term) {
    document.getElementById('search-input').value = term;
    startSearch();
}

function resetApp() {
    // Volver a la vista inicial
    hideElement('view-loading');
    hideElement('view-results');
    showElement('view-home');
    hideElement('view-tabs');
    
    // Limpiar input
    document.getElementById('search-input').value = '';
}

function startSearch() {
    const input = document.getElementById('search-input');
    const term = input.value.trim();
    
    if (!term) return;
    
    currentTopic = term;
    
    // 1. Cambiar UI a Loading
    hideElement('view-home');
    showElement('view-loading');
    
    // 2. Simular llamada al Backend (Aquí conectarás tu Python)
    fetchDataFromPython(term);
}

function switchTab(tabName) {
    // Manejar clases de botones
    const btnRoadmap = document.getElementById('btn-roadmap');
    const btnGraph = document.getElementById('btn-graph');
    
    if (tabName === 'roadmap') {
        btnRoadmap.classList.add('active');
        btnGraph.classList.remove('active');
        
        showElement('tab-roadmap');
        hideElement('tab-graph');
    } else {
        btnGraph.classList.add('active');
        btnRoadmap.classList.remove('active');
        
        hideElement('tab-roadmap');
        showElement('tab-graph');
        
        // Renderizar grafo si es la primera vez
        renderGraph(MOCK_DATA);
    }
}

/* --- LÓGICA DE DATOS --- */

function fetchDataFromPython(term) {
    console.log("Buscando ruta para:", term);
    
    // SIMULACIÓN DE RETARDO DE RED (1.5 segundos)
    setTimeout(() => {
        // AQUÍ ES DONDE HARÁS: fetch('http://localhost:5000/api/ruta?tema=' + term)
        // Por ahora usamos MOCK_DATA
        const data = MOCK_DATA; 
        
        renderRoadmap(data, term);
        
        // Cambiar vista
        hideElement('view-loading');
        showElement('view-results');
        document.getElementById('view-tabs').classList.remove('hidden'); // Mostrar tabs
        document.getElementById('view-tabs').style.display = 'flex'; // Forzar flex
        
    }, 1500);
}

/* --- RENDERIZADO (GENERACIÓN DE HTML) --- */

function renderRoadmap(courses, topic) {
    const container = document.getElementById('roadmap-container');
    document.getElementById('result-title').innerHTML = `Ruta para: <span class="highlight">${topic}</span>`;
    
    container.innerHTML = ''; // Limpiar anterior
    
    courses.forEach((course, index) => {
        // Determinar etiquetas y colores
        let badgeClass = course.level; // beginner, intermediate, expert
        let badgeText = course.level === 'beginner' ? 'Principiante' : 
                        course.level === 'intermediate' ? 'Intermedio' : 'Experto';
        
        let stepColor = badgeClass === 'beginner' ? 'var(--color-beginner)' : 
                        badgeClass === 'intermediate' ? 'var(--color-intermediate)' : 'var(--color-expert)';

        // Crear HTML de la tarjeta
        const cardHTML = `
            <div class="course-card-wrapper" style="animation-delay: ${index * 0.2}s">
                <!-- Número del paso -->
                <div class="step-number" style="border-color: ${stepColor}; color: ${stepColor}">
                    ${index + 1}
                </div>
                
                <!-- Tarjeta -->
                <div class="course-card">
                    <div class="card-image">
                        <img src="${course.image}" alt="${course.title}">
                    </div>
                    <div class="card-content">
                        <div>
                            <div class="card-badges">
                                <span class="badge ${badgeClass}">${badgeText}</span>
                                <div class="rating">
                                    <!-- Icono Estrella SVG -->
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                                    ${course.rating}
                                </div>
                            </div>
                            <h3 class="card-title">${course.title}</h3>
                            <p class="card-desc">${course.description}</p>
                        </div>
                        <div class="card-footer">
                            <span>⏳ ${course.duration}</span>
                            <span>👥 ${course.reviews.toLocaleString()} reviews</span>
                        </div>
                    </div>
                </div>
            </div>
            ${index < courses.length - 1 ? `
                <div class="arrow-connector">
                    <!-- Flecha hacia abajo SVG -->
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>
                </div>
            ` : ''}
        `;
        
        container.innerHTML += cardHTML;
    });
}

function renderGraph(courses) {
    const container = document.getElementById('graph-svg-container');
    // Construimos un SVG simple dinámicamente
    
    // Coordenadas fijas para demostración (X aumenta, Y fijo)
    // En un caso real, calcularías esto con lógica de grafos
    
    let svgContent = `<svg width="100%" height="100%" viewBox="0 0 600 200">`;
    
    // Dibujar Aristas (Líneas) primero para que queden detrás
    courses.forEach((c, i) => {
        if (i < courses.length - 1) {
            let x1 = 100 + (i * 200);
            let x2 = 100 + ((i + 1) * 200);
            svgContent += `
                <line x1="${x1}" y1="100" x2="${x2}" y2="100" stroke="#cbd5e1" stroke-width="2" stroke-dasharray="5,5" />
                <circle cx="${(x1+x2)/2}" cy="100" r="12" fill="white" stroke="#cbd5e1" />
                <text x="${(x1+x2)/2}" y="104" text-anchor="middle" font-size="10" fill="#64748b" font-family="sans-serif">Peso</text>
            `;
        }
    });

    // Dibujar Nodos
    courses.forEach((c, i) => {
        let x = 100 + (i * 200);
        let color = c.level === 'beginner' ? '#22c55e' : c.level === 'intermediate' ? '#eab308' : '#ef4444';
        let label = c.level === 'beginner' ? 'INI' : c.level === 'intermediate' ? 'PRO' : 'FIN';
        
        svgContent += `
            <g class="node-group" style="cursor: pointer">
                <circle cx="${x}" cy="100" r="30" fill="${color}20" stroke="${color}" stroke-width="3" />
                <text x="${x}" y="105" text-anchor="middle" font-family="sans-serif" font-weight="bold" fill="#334155" font-size="12">${label}</text>
                <text x="${x}" y="150" text-anchor="middle" font-family="sans-serif" fill="#64748b" font-size="10">${c.title.substring(0, 12)}...</text>
            </g>
        `;
    });

    svgContent += `</svg>`;
    container.innerHTML = svgContent;
}

/* --- UTILIDADES DOM --- */
function showElement(id) {
    const el = document.getElementById(id);
    if (el) el.classList.remove('hidden');
}

function hideElement(id) {
    const el = document.getElementById(id);
    if (el) el.classList.add('hidden');
}