<?php
ini_set('session.gc_maxlifetime', 10800);
ini_set('session.cookie_lifetime', 10800);
session_set_cookie_params([
    'lifetime' => 10800,
    'path'     => '/',
    'secure'   => false,
    'httponly' => true,
    'samesite' => 'Lax'
]);
session_start();

$_SESSION['LAST_ACTIVITY'] = time();

if (!isset($_SESSION['usuario']) || !isset($_SESSION['token'])) {
    header("Location: index.html");
    exit;
}

// Verificar token en BD igual que M1_estudio.php
$host = "localhost";
$user = "ascensof_Admin1";
$pass = "3DS0NCH4115H4CK3R+";
$db   = "ascensof_BDsimulador";

$conn = new mysqli($host, $user, $pass, $db);
if ($conn->connect_error) {
    die("Error de conexión: " . $conn->connect_error);
}

$stmt = $conn->prepare("SELECT token FROM Usuarios WHERE usuario = ?");
$stmt->bind_param("s", $_SESSION['usuario']);
$stmt->execute();
$result = $stmt->get_result();

if ($result->num_rows === 1) {
    $row = $result->fetch_assoc();
    if ($row['token'] !== $_SESSION['token']) {
        session_unset();
        session_destroy();
        header("Location: index.html?expirado=1");
        exit;
    }
} else {
    session_unset();
    session_destroy();
    header("Location: index.html?error=1");
    exit;
}
$conn->close();
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Generar Explicaciones IA - AscensoFacil</title>
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            font-family: 'Segoe UI', sans-serif;
            background: #0f1117;
            color: #e0e0e0;
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 850px;
            margin: 0 auto;
        }

        header {
            text-align: center;
            padding: 30px 0 20px;
            border-bottom: 1px solid #2a2d3e;
            margin-bottom: 30px;
        }

        header h1 {
            font-size: 1.8rem;
            color: #70b3ff;
        }

        header p {
            color: #888;
            margin-top: 6px;
            font-size: 0.95rem;
        }

        /* ── Tarjeta de estadísticas ── */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            margin-bottom: 28px;
        }

        .stat-card {
            background: #1a1d2e;
            border: 1px solid #2a2d3e;
            border-radius: 10px;
            padding: 20px;
            text-align: center;
        }

        .stat-card .valor {
            font-size: 2rem;
            font-weight: 700;
            color: #70b3ff;
        }

        .stat-card .label {
            font-size: 0.8rem;
            color: #888;
            margin-top: 4px;
        }

        /* ── Barra de progreso ── */
        .progreso-wrap {
            background: #1a1d2e;
            border: 1px solid #2a2d3e;
            border-radius: 10px;
            padding: 24px;
            margin-bottom: 28px;
        }

        .progreso-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }

        .progreso-header span {
            font-size: 0.9rem;
            color: #aaa;
        }

        .progreso-header .porcentaje {
            font-size: 1.1rem;
            font-weight: 700;
            color: #70b3ff;
        }

        .barra-fondo {
            background: #2a2d3e;
            border-radius: 20px;
            height: 18px;
            overflow: hidden;
        }

        .barra-relleno {
            height: 100%;
            background: linear-gradient(90deg, #3a7bd5, #70b3ff);
            border-radius: 20px;
            transition: width 0.5s ease;
            width: 0%;
        }

        /* ── Controles ── */
        .controles {
            background: #1a1d2e;
            border: 1px solid #2a2d3e;
            border-radius: 10px;
            padding: 24px;
            margin-bottom: 28px;
        }

        .controles h3 {
            font-size: 1rem;
            color: #ccc;
            margin-bottom: 16px;
        }

        .fila-controles {
            display: flex;
            gap: 12px;
            align-items: center;
            flex-wrap: wrap;
        }

        .fila-controles label {
            font-size: 0.9rem;
            color: #aaa;
        }

        .fila-controles input[type="number"] {
            width: 80px;
            padding: 8px 10px;
            background: #0f1117;
            border: 1px solid #3a3d4e;
            border-radius: 6px;
            color: #e0e0e0;
            font-size: 0.95rem;
            text-align: center;
        }

        .btn {
            padding: 10px 24px;
            border: none;
            border-radius: 8px;
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }

        .btn-iniciar {
            background: #3a7bd5;
            color: white;
        }

        .btn-iniciar:hover:not(:disabled) {
            background: #2d6abf;
        }

        .btn-pausar {
            background: #e67e22;
            color: white;
        }

        .btn-pausar:hover:not(:disabled) {
            background: #d35400;
        }

        .btn-recargar {
            background: #2a2d3e;
            color: #aaa;
            border: 1px solid #3a3d4e;
        }

        .btn-recargar:hover {
            background: #3a3d4e;
        }

        .btn:disabled {
            opacity: 0.45;
            cursor: not-allowed;
        }

        /* ── Log de actividad ── */
        .log-wrap {
            background: #1a1d2e;
            border: 1px solid #2a2d3e;
            border-radius: 10px;
            padding: 20px;
        }

        .log-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }

        .log-header h3 {
            font-size: 1rem;
            color: #ccc;
        }

        .log-header button {
            background: none;
            border: none;
            color: #666;
            cursor: pointer;
            font-size: 0.8rem;
        }

        .log-header button:hover { color: #aaa; }

        #log-contenido {
            height: 280px;
            overflow-y: auto;
            font-size: 0.82rem;
            font-family: 'Courier New', monospace;
            color: #aaa;
            line-height: 1.6;
        }

        .log-ok      { color: #4caf79; }
        .log-error   { color: #f44336; }
        .log-info    { color: #70b3ff; }
        .log-omitida { color: #888; }
        .log-espera  { color: #e67e22; }

        /* ── Estado actual ── */
        #estado-actual {
            text-align: center;
            padding: 12px;
            background: #0f1117;
            border-radius: 6px;
            margin-top: 12px;
            font-size: 0.88rem;
            color: #888;
            min-height: 38px;
        }

        /* ── Alerta completado ── */
        .completado-banner {
            display: none;
            background: linear-gradient(135deg, #1a3a1a, #1e4d1e);
            border: 1px solid #4caf79;
            border-radius: 10px;
            padding: 20px;
            text-align: center;
            margin-bottom: 28px;
            color: #4caf79;
            font-size: 1.1rem;
            font-weight: 600;
        }
    </style>
</head>
<body>
<div class="container">

    <header>
        <h1>⚙️ Generador de Explicaciones IA</h1>
        <p>Genera y guarda explicaciones para todas las preguntas usando OpenRouter</p>
    </header>

    <!-- Banner completado -->
    <div class="completado-banner" id="banner-completado">
        🎉 ¡Todas las preguntas tienen explicación guardada!
    </div>

    <!-- Estadísticas -->
    <div class="stats-grid">
        <div class="stat-card">
            <div class="valor" id="stat-total">—</div>
            <div class="label">Total preguntas</div>
        </div>
        <div class="stat-card">
            <div class="valor" id="stat-procesadas" style="color:#4caf79">—</div>
            <div class="label">Con explicación</div>
        </div>
        <div class="stat-card">
            <div class="valor" id="stat-pendientes" style="color:#e67e22">—</div>
            <div class="label">Pendientes</div>
        </div>
    </div>

    <!-- Barra de progreso -->
    <div class="progreso-wrap">
        <div class="progreso-header">
            <span id="label-progreso">Cargando estadísticas...</span>
            <span class="porcentaje" id="label-porcentaje">0%</span>
        </div>
        <div class="barra-fondo">
            <div class="barra-relleno" id="barra"></div>
        </div>
        <div id="estado-actual">Presiona "Iniciar" para comenzar a generar explicaciones.</div>
    </div>

    <!-- Controles -->
    <div class="controles">
        <h3>Configuración</h3>
        <div class="fila-controles">
            <label>Preguntas por bloque:</label>
            <input type="number" id="tamano-bloque" value="25" min="5" max="100">

            <label style="margin-left:16px">Pausa entre preguntas (ms):</label>
            <input type="number" id="pausa-ms" value="1500" min="500" max="5000" step="100">

            <button class="btn btn-iniciar"  id="btn-iniciar"  onclick="iniciarProceso()">▶ Iniciar</button>
            <button class="btn btn-pausar"   id="btn-pausar"   onclick="pausarProceso()"  disabled>⏸ Pausar</button>
            <button class="btn btn-recargar" id="btn-recargar" onclick="cargarEstadisticas()">↺ Actualizar</button>
        </div>
    </div>

    <!-- Log -->
    <div class="log-wrap">
        <div class="log-header">
            <h3>📋 Registro de actividad</h3>
            <button onclick="limpiarLog()">Limpiar</button>
        </div>
        <div id="log-contenido"></div>
    </div>

</div>

<script>
    // ── Estado global ──
    let procesando   = false;
    let pausado      = false;
    let colaPendiente = [];   // IDs pendientes del bloque actual
    let totalGeneral  = 0;
    let totalProcesadas = 0;

    // ── Al cargar ──
    document.addEventListener('DOMContentLoaded', cargarEstadisticas);

    // =====================================================================
    // Cargar estadísticas desde el servidor
    // =====================================================================
    async function cargarEstadisticas() {
        try {
            const res  = await fetch('procesar_explicacion.php', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                credentials: 'include',
                body: JSON.stringify({ accion: 'estadisticas' })
            });
            const data = await res.json();

            if (!data.success) { log('Error al cargar estadísticas', 'error'); return; }

            totalGeneral   = data.total;
            totalProcesadas = data.procesadas;

            document.getElementById('stat-total').textContent      = data.total.toLocaleString();
            document.getElementById('stat-procesadas').textContent = data.procesadas.toLocaleString();
            document.getElementById('stat-pendientes').textContent = data.pendientes.toLocaleString();

            actualizarBarra(data.procesadas, data.total);

            if (data.pendientes === 0 && data.total > 0) {
                document.getElementById('banner-completado').style.display = 'block';
                document.getElementById('btn-iniciar').disabled = true;
                setEstado('✅ Todas las preguntas ya tienen explicación guardada.');
            }

        } catch (err) {
            log('Error de conexión al cargar estadísticas', 'error');
        }
    }

    // =====================================================================
    // Iniciar proceso
    // =====================================================================
    async function iniciarProceso() {
        if (procesando) return;

        procesando = true;
        pausado    = false;

        document.getElementById('btn-iniciar').disabled = true;
        document.getElementById('btn-pausar').disabled  = false;

        log('═══════════════════════════════════', 'info');
        log('Iniciando generación de explicaciones...', 'info');

        await procesarLoop();
    }

    // =====================================================================
    // Loop principal: obtiene bloque → procesa uno por uno
    // =====================================================================
    async function procesarLoop() {
        const tamano = parseInt(document.getElementById('tamano-bloque').value) || 25;

        while (procesando && !pausado) {
            // Obtener siguiente bloque de pendientes
            setEstado('⏳ Obteniendo siguiente bloque de preguntas...');

            let bloque;
            try {
                const res  = await fetch('procesar_explicacion.php', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    credentials: 'include',
                    body: JSON.stringify({ accion: 'obtener_bloque', cantidad: tamano, offset: 0 })
                });
                bloque = await res.json();
            } catch (err) {
                log('Error de red al obtener bloque. Reintentando en 10s...', 'error');
                await esperar(10000);
                continue;
            }

            if (!bloque.success || bloque.preguntas.length === 0) {
                // No hay más pendientes
                procesando = false;
                await cargarEstadisticas();
                setEstado('✅ ¡Proceso completado! Todas las preguntas tienen explicación.');
                log('═══════════════════════════════════', 'info');
                log('✅ Proceso completado exitosamente.', 'info');
                document.getElementById('btn-iniciar').disabled = true;
                document.getElementById('btn-pausar').disabled  = true;
                document.getElementById('banner-completado').style.display = 'block';
                return;
            }

            log(`📦 Bloque obtenido: ${bloque.preguntas.length} preguntas. Pendientes totales: ${bloque.total_pendientes}`, 'info');

            // Procesar cada pregunta del bloque una por una
            for (const pregunta of bloque.preguntas) {
                if (pausado || !procesando) break;

                await procesarUna(pregunta);

                // Pausa entre llamadas para no saturar OpenRouter
                const pausaMs = parseInt(document.getElementById('pausa-ms').value) || 1500;
                await esperar(pausaMs);
            }

            // Actualizar estadísticas al terminar el bloque
            await cargarEstadisticas();
        }

        // Si se pausó
        if (pausado) {
            setEstado('⏸ Proceso pausado. Presiona "Iniciar" para continuar.');
            log('Proceso pausado por el usuario.', 'espera');
            document.getElementById('btn-iniciar').disabled = false;
            document.getElementById('btn-pausar').disabled  = true;
            procesando = false;
        }
    }

    // =====================================================================
    // Procesar UNA pregunta
    // =====================================================================
    async function procesarUna(pregunta) {
        setEstado(`⚙️ Procesando pregunta ID: ${pregunta.Id}...`);

        let intentos = 0;
        const MAX_INTENTOS = 3;

        while (intentos < MAX_INTENTOS) {
            try {
                const res = await fetch('procesar_explicacion.php', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    credentials: 'include',
                    body: JSON.stringify({ accion: 'generar_una', pregunta_id: pregunta.Id })
                });

                const data = await res.json();

                if (res.status === 429) {
                    const espera = (data.retry_after || 60);
                    log(`⏳ Límite OpenRouter alcanzado. Esperando ${espera}s...`, 'espera');

                    // Countdown visual
                    for (let s = espera; s > 0; s--) {
                        setEstado(`⏳ Límite de OpenRouter. Reanudando en ${s}s...`);
                        await esperar(1000);
                        if (pausado || !procesando) return;
                    }
                    intentos++;
                    continue;
                }

                if (!res.ok || !data.success) {
                    log(`❌ Error en ID ${pregunta.Id}: ${data.error || 'desconocido'}`, 'error');
                    return;
                }

                if (data.omitida) {
                    log(`⊘ ID ${pregunta.Id}: omitida (sin clave válida)`, 'omitida');
                } else {
                    log(`✅ ID ${pregunta.Id}: explicación guardada`, 'ok');
                    totalProcesadas++;
                    actualizarBarra(totalProcesadas, totalGeneral);
                }
                return;

            } catch (err) {
                intentos++;
                log(`⚠️ Error de red en ID ${pregunta.Id}. Intento ${intentos}/${MAX_INTENTOS}`, 'error');
                await esperar(3000);
            }
        }

        log(`❌ ID ${pregunta.Id}: falló después de ${MAX_INTENTOS} intentos. Continuando...`, 'error');
    }

    // =====================================================================
    // Pausar
    // =====================================================================
    function pausarProceso() {
        pausado = true;
        document.getElementById('btn-pausar').disabled = true;
        setEstado('⏸ Pausando... (terminando pregunta actual)');
    }

    // =====================================================================
    // Utilidades
    // =====================================================================
    function actualizarBarra(procesadas, total) {
        const pct = total > 0 ? Math.round((procesadas / total) * 100) : 0;
        document.getElementById('barra').style.width            = pct + '%';
        document.getElementById('label-porcentaje').textContent = pct + '%';
        document.getElementById('label-progreso').textContent   =
            `${procesadas.toLocaleString()} de ${total.toLocaleString()} preguntas procesadas`;
    }

    function setEstado(msg) {
        document.getElementById('estado-actual').textContent = msg;
    }

    function log(msg, tipo = 'info') {
        const div  = document.getElementById('log-contenido');
        const hora = new Date().toLocaleTimeString('es-PE');
        const linea = document.createElement('div');
        linea.className = 'log-' + tipo;
        linea.textContent = `[${hora}] ${msg}`;
        div.appendChild(linea);
        div.scrollTop = div.scrollHeight;
    }

    function limpiarLog() {
        document.getElementById('log-contenido').innerHTML = '';
    }

    function esperar(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }
</script>
</body>
</html>
