<?php
/**
 * modules/soporte/views/documentacion.php
 * Visor de la documentación del proyecto.
 *
 * ?s=<seccion>&d=<documento>   documento puntual
 * ?s=<seccion>                 portada de la sección
 * (sin parámetros)             portada general
 */
require_once APP_ROOT . '/config/config.php';
if (!isUserLoggedIn()) { header('Location: ' . BASE_URL . 'login.php'); exit; }

require_once __DIR__ . '/../Markdown.php';
require_once __DIR__ . '/../DocIndex.php';
require_once __DIR__ . '/../Generadores.php';

$arbol   = DocIndex::arbol();
$seccion = preg_replace('/[^a-z0-9-]/', '', $_GET['s'] ?? '');
$docSlug = preg_replace('/[^a-z0-9-]/', '', $_GET['d'] ?? '');

$archivo = ($seccion && $docSlug) ? DocIndex::resolver($seccion, $docSlug) : null;
$titulo  = 'Documentación';
$cuerpo  = '';
$toc     = [];

if ($archivo) {
    [, $crudo] = DocIndex::leer($archivo);   // descarta la cabecera de permisos
    $md     = Generadores::expandir($crudo);
    $cuerpo = Markdown::render($md);
    $toc    = Markdown::indice($md);
    foreach ($arbol[$seccion]['docs'] ?? [] as $d) {
        if ($d['slug'] === $docSlug) { $titulo = $d['titulo']; break; }
    }
} elseif ($seccion && isset($arbol[$seccion])) {
    $titulo = $arbol[$seccion]['titulo'];
}

Layout::open('Soporte · Documentación', 'fas fa-life-ring');
?>
<style>
    .doc-wrap { display:flex; gap:0; align-items:flex-start; min-height:calc(100vh - 60px); background:#fff; }

    /* ── Índice lateral ── */
    .doc-nav { width:280px; flex-shrink:0; border-right:1px solid #e2e8f0; background:#f8fafc;
               align-self:stretch; padding:18px 0 60px; position:sticky; top:0; max-height:100vh; overflow-y:auto; }
    .doc-nav .buscador { padding:0 16px 14px; }
    .doc-nav .buscador input { width:100%; font-size:.84rem; padding:7px 11px; border:1px solid #cbd5e1;
                               border-radius:8px; background:#fff; }
    .doc-nav .buscador input:focus { outline:none; border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.12); }
    .doc-nav .btn-pdf { display:block; margin-top:8px; text-align:center; font-size:.78rem;
                        padding:6px 10px; border:1px solid #cbd5e1; border-radius:8px;
                        color:#475569; text-decoration:none; background:#fff; }
    .doc-nav .btn-pdf:hover { border-color:#2563eb; color:#1d4ed8; }
    .doc-nav-sec { padding:10px 16px 4px; font-size:.68rem; font-weight:800; text-transform:uppercase;
                   letter-spacing:.08em; color:#64748b; display:flex; align-items:center; gap:6px; }
    .doc-nav a { display:block; padding:5px 16px 5px 30px; font-size:.83rem; color:#334155;
                 text-decoration:none; border-left:2px solid transparent; }
    .doc-nav a:hover { background:#eef2f7; color:#1e293b; }
    .doc-nav a.activo { background:#e0edff; color:#1d4ed8; font-weight:600; border-left-color:#2563eb; }

    /* ── Resultados de búsqueda ── */
    #resultados { padding:0 16px; }
    #resultados .r { display:block; padding:8px 10px; border-radius:8px; text-decoration:none;
                     margin-bottom:4px; background:#fff; border:1px solid #e2e8f0; }
    #resultados .r:hover { border-color:#2563eb; }
    #resultados .r-t { font-size:.83rem; font-weight:600; color:#1e293b; }
    #resultados .r-c { font-size:.68rem; color:#64748b; text-transform:uppercase; letter-spacing:.05em; }
    #resultados .r-x { font-size:.75rem; color:#475569; margin-top:2px; }
    #resultados .vacio { font-size:.8rem; color:#94a3b8; padding:8px 4px; }

    /* ── Contenido ── */
    .doc-main { flex:1; min-width:0; display:flex; gap:0; }
    .doc-body { flex:1; min-width:0; padding:26px 40px 80px; max-width:900px; }
    .doc-ruta { font-size:.73rem; color:#94a3b8; margin-bottom:14px; }
    .doc-ruta a { color:#64748b; text-decoration:none; }
    .doc-ruta a:hover { text-decoration:underline; }

    .doc-body h1 { font-size:1.65rem; font-weight:800; color:#0f172a; margin:0 0 18px;
                   padding-bottom:12px; border-bottom:1px solid #e2e8f0; }
    .doc-body h2 { font-size:1.2rem; font-weight:700; color:#1e293b; margin:32px 0 12px;
                   padding-top:6px; scroll-margin-top:20px; }
    .doc-body h3 { font-size:1rem; font-weight:700; color:#334155; margin:24px 0 9px; scroll-margin-top:20px; }
    .doc-body h4 { font-size:.9rem; font-weight:700; color:#475569; margin:18px 0 7px; }
    .doc-body p  { font-size:.9rem; line-height:1.7; color:#334155; margin:0 0 13px; }
    .doc-body ul, .doc-body ol { font-size:.9rem; line-height:1.7; color:#334155; margin:0 0 13px; padding-left:24px; }
    .doc-body li { margin-bottom:4px; }
    .doc-body li > ul, .doc-body li > ol { margin:4px 0 2px; }
    .doc-body a { color:#2563eb; }
    .doc-body strong { color:#0f172a; }
    .doc-body code { background:#f1f5f9; color:#be185d; padding:1px 5px; border-radius:4px;
                     font-size:.83em; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
    .doc-body pre { background:#0f172a; color:#e2e8f0; padding:14px 16px; border-radius:10px;
                    overflow-x:auto; margin:0 0 15px; }
    .doc-body pre code { background:none; color:inherit; padding:0; font-size:.8rem; line-height:1.6; }
    .doc-body blockquote { border-left:3px solid #f59e0b; background:#fffbeb; margin:0 0 15px;
                           padding:10px 16px; border-radius:0 8px 8px 0; }
    .doc-body blockquote p { margin:0; color:#78350f; font-size:.86rem; }
    .doc-body hr { border:none; border-top:1px solid #e2e8f0; margin:26px 0; }
    .tabla-scroll { overflow-x:auto; margin:0 0 16px; }
    .doc-body table { width:100%; border-collapse:collapse; font-size:.82rem; }
    .doc-body thead th { background:#f8fafc; text-align:left; font-weight:700; color:#475569;
                         padding:8px 11px; border-bottom:2px solid #e2e8f0; white-space:nowrap; }
    .doc-body tbody td { padding:7px 11px; border-bottom:1px solid #f1f5f9; color:#334155; vertical-align:top; }
    .doc-body tbody tr:hover { background:#f8fafc; }

    /* ── Tabla de contenidos ── */
    .doc-toc { width:210px; flex-shrink:0; padding:32px 20px 60px; position:sticky; top:0;
               max-height:100vh; overflow-y:auto; }
    .doc-toc-t { font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
                 color:#94a3b8; margin-bottom:9px; }
    .doc-toc a { display:block; font-size:.76rem; color:#64748b; text-decoration:none;
                 padding:3px 0 3px 9px; border-left:2px solid #e2e8f0; line-height:1.4; }
    .doc-toc a:hover { color:#2563eb; border-left-color:#93c5fd; }
    .doc-toc a.n3 { padding-left:20px; font-size:.73rem; }

    /* ── Portadas ── */
    .doc-hero { margin-bottom:26px; }
    .doc-hero h1 { font-size:1.7rem; font-weight:800; color:#0f172a; margin:0 0 8px; }
    .doc-hero p  { font-size:.92rem; color:#64748b; margin:0; }
    .tarjetas { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
    .tarjeta { display:block; padding:18px; border:1px solid #e2e8f0; border-radius:12px;
               text-decoration:none; background:#fff; transition:border-color .15s, transform .15s; }
    .tarjeta:hover { border-color:#2563eb; transform:translateY(-2px); }
    .tarjeta i { font-size:1.3rem; color:#2563eb; }
    .tarjeta .t { font-size:1rem; font-weight:700; color:#1e293b; margin:9px 0 5px; }
    .tarjeta .d { font-size:.82rem; color:#64748b; line-height:1.5; }
    .tarjeta .n { font-size:.72rem; color:#94a3b8; margin-top:9px; }

    .lista-docs { list-style:none; padding:0; margin:0; }
    .lista-docs li { border-bottom:1px solid #f1f5f9; }
    .lista-docs a { display:block; padding:12px 4px; text-decoration:none; color:#1e293b; font-size:.92rem; }
    .lista-docs a:hover { color:#2563eb; }

    @media (max-width:1100px) { .doc-toc { display:none; } }
    @media (max-width:820px) {
        .doc-nav { position:static; width:100%; max-height:none; border-right:none;
                   border-bottom:1px solid #e2e8f0; }
        .doc-wrap { flex-direction:column; }
        .doc-body { padding:20px 18px 60px; }
    }
    @media print {
        .doc-nav, .doc-toc, .doc-ruta, #btnAI, #aiPanel { display:none !important; }
        .doc-body { max-width:none; padding:0; }
        .doc-body pre { background:#f8fafc; color:#0f172a; border:1px solid #cbd5e1; }
    }

    /* ── Panel LIA — mismo diseño que el dashboard del turnero ── */
    #aiPanel {
        position:fixed; bottom:0; right:24px; width:400px; z-index:1080;
        box-shadow:0 -8px 40px rgba(0,0,0,.22); border-radius:20px 20px 0 0;
        background:#fff; border:1px solid #e2e8f0; border-bottom:none;
        transform:translateY(100%); transition:transform .35s cubic-bezier(.4,0,.2,1);
        display:flex; flex-direction:column; max-height:580px;
    }
    #aiPanel.open { transform:translateY(0); }
    #aiPanel.minimized .ai-body { display:none; }
    #aiPanel.minimized { max-height:none; }
    .ai-header {
        background:linear-gradient(135deg,#0d47a1,#1565c0,#0288d1);
        color:#fff; padding:14px 18px; border-radius:20px 20px 0 0;
        display:flex; align-items:center; gap:12px; flex-shrink:0; cursor:pointer; user-select:none;
    }
    .lia-logo {
        width:44px; height:44px; border-radius:50%;
        background:rgba(255,255,255,.15); border:2px solid rgba(255,255,255,.4);
        display:flex; align-items:center; justify-content:center;
        font-size:1rem; font-weight:900; letter-spacing:-1px; flex-shrink:0;
        transition:transform .3s;
    }
    .lia-logo:hover { transform:scale(1.08); }
    .lia-logo .lia-i { color:#7dd3fc; }
    .ai-title { font-weight:800; font-size:1.05rem; letter-spacing:.5px; }
    .btn-tts { background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.3);
               color:rgba(255,255,255,.7); cursor:pointer; padding:5px 9px; border-radius:8px;
               font-size:.88rem; transition:all .2s; }
    .btn-tts:hover { background:rgba(255,255,255,.25); color:#fff; }
    .ai-header .btn-close { filter:invert(1) brightness(2); opacity:.7; }
    .ai-header .btn-close:hover { opacity:1; }
    .ai-body { display:flex; flex-direction:column; flex:1; overflow:hidden; }
    .ai-quick { display:flex; gap:7px; flex-wrap:wrap; padding:10px 14px;
                border-bottom:1px solid #f1f5f9; flex-shrink:0; background:#fafbff; }
    .ai-chip { background:#fff; border:1.5px solid #e2e8f0; border-radius:99px; padding:6px 13px;
               font-size:.82rem; cursor:pointer; color:#334155; white-space:nowrap;
               transition:all .15s; font-weight:500; }
    .ai-chip:hover { background:#eff6ff; border-color:#93c5fd; color:#1d4ed8; }
    .ai-messages { flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
    .ai-msg { max-width:92%; padding:10px 14px; border-radius:16px; font-size:.9rem;
              line-height:1.55; animation:msg-in .2s ease; word-wrap:break-word; }
    @keyframes msg-in { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
    .ai-msg.user { background:linear-gradient(135deg,#1565c0,#0288d1); color:#fff;
                   align-self:flex-end; border-radius:16px 16px 2px 16px; }
    .ai-msg.bot  { background:#f1f5f9; color:#1e293b; align-self:flex-start; border-radius:16px 16px 16px 2px; }
    .ai-msg.bot.typing::after { content:'●●●'; animation:dots 1.2s infinite; letter-spacing:2px; }
    @keyframes dots { 0%,100%{opacity:.3} 50%{opacity:1} }
    .ai-msg.bot strong { color:#1565c0; }
    .ai-msg.bot ul, .ai-msg.bot ol { margin:4px 0 4px 16px; padding:0; }
    .ai-msg.bot code { background:#e2e8f0; color:#be185d; padding:1px 4px; border-radius:3px; font-size:.9em; }
    .ai-msg.bot pre { background:#0f172a; color:#e2e8f0; padding:9px 11px; border-radius:8px;
                      overflow-x:auto; font-size:.76rem; margin:6px 0; }
    .ai-fuentes { font-size:.68rem; color:#94a3b8; align-self:flex-start; margin:-6px 0 0 4px; }
    .ai-footer { padding:10px 14px; border-top:1px solid #f1f5f9; display:flex; gap:8px;
                 flex-shrink:0; background:#fafbff; }
    .ai-footer input { flex:1; border:1.5px solid #e2e8f0; border-radius:10px; padding:9px 14px;
                       font-size:.9rem; outline:none; background:#fff; }
    .ai-footer input:focus { border-color:#1565c0; }
    .ai-footer .btn-send { background:linear-gradient(135deg,#1565c0,#0288d1); color:#fff; border:none;
                           border-radius:10px; padding:9px 16px; cursor:pointer; font-size:.88rem; min-width:42px; }
    .ai-footer .btn-send:disabled { opacity:.5; cursor:default; }
    #btnAI {
        position:fixed; bottom:24px; right:24px; z-index:1079;
        background:linear-gradient(135deg,#0d47a1,#1565c0,#0288d1);
        color:#fff; border:none; border-radius:50%; width:58px; height:58px;
        font-size:.78rem; font-weight:900; letter-spacing:-.5px;
        cursor:pointer; box-shadow:0 4px 20px rgba(21,101,192,.45);
        transition:transform .2s,box-shadow .2s;
        display:flex; align-items:center; justify-content:center;
    }
    #btnAI:hover { transform:scale(1.1); box-shadow:0 6px 28px rgba(21,101,192,.55); }
    #btnAI.hidden { display:none; }
    @media(max-width:600px) { #aiPanel { width:100%; right:0; border-radius:16px 16px 0 0; } }
</style>

<div class="doc-wrap">
    <!-- ── Índice lateral ── -->
    <nav class="doc-nav">
        <div class="buscador">
            <input type="search" id="q" placeholder="Buscar en la documentación…" autocomplete="off">
            <a class="btn-pdf" href="<?= BASE_URL ?>erp.php?m=soporte&v=imprimir" target="_blank">
                <i class="fas fa-file-pdf"></i> Exportar a PDF
            </a>
        </div>
        <div id="resultados" style="display:none"></div>
        <div id="arbol">
            <?php foreach ($arbol as $sec => $cfg): ?>
                <div class="doc-nav-sec">
                    <i class="<?= htmlspecialchars($cfg['icono']) ?>"></i>
                    <a href="<?= BASE_URL ?>erp.php?m=soporte&v=documentacion&s=<?= urlencode($sec) ?>"
                       style="padding:0;border:none;color:inherit;font:inherit;letter-spacing:inherit">
                        <?= htmlspecialchars($cfg['titulo']) ?>
                    </a>
                </div>
                <?php foreach ($cfg['docs'] as $d): ?>
                    <a href="<?= BASE_URL ?>erp.php?m=soporte&v=documentacion&s=<?= urlencode($sec) ?>&d=<?= urlencode($d['slug']) ?>"
                       class="<?= ($sec === $seccion && $d['slug'] === $docSlug) ? 'activo' : '' ?>">
                        <?= htmlspecialchars($d['titulo']) ?>
                    </a>
                <?php endforeach; ?>
            <?php endforeach; ?>
        </div>
    </nav>

    <div class="doc-main">
        <div class="doc-body">
        <?php if ($archivo): ?>
            <div class="doc-ruta">
                <a href="<?= BASE_URL ?>erp.php?m=soporte&v=documentacion">Documentación</a>
                &nbsp;›&nbsp;
                <a href="<?= BASE_URL ?>erp.php?m=soporte&v=documentacion&s=<?= urlencode($seccion) ?>">
                    <?= htmlspecialchars($arbol[$seccion]['titulo'] ?? $seccion) ?>
                </a>
                &nbsp;›&nbsp;<?= htmlspecialchars($titulo) ?>
            </div>
            <?= $cuerpo ?>

        <?php elseif ($seccion && isset($arbol[$seccion])): ?>
            <div class="doc-ruta">
                <a href="<?= BASE_URL ?>erp.php?m=soporte&v=documentacion">Documentación</a>
                &nbsp;›&nbsp;<?= htmlspecialchars($arbol[$seccion]['titulo']) ?>
            </div>
            <div class="doc-hero">
                <h1><?= htmlspecialchars($arbol[$seccion]['titulo']) ?></h1>
                <p><?= htmlspecialchars($arbol[$seccion]['resumen']) ?></p>
            </div>
            <?php if ($arbol[$seccion]['docs']): ?>
            <ul class="lista-docs">
                <?php foreach ($arbol[$seccion]['docs'] as $d): ?>
                <li><a href="<?= BASE_URL ?>erp.php?m=soporte&v=documentacion&s=<?= urlencode($seccion) ?>&d=<?= urlencode($d['slug']) ?>">
                    <?= htmlspecialchars($d['titulo']) ?>
                </a></li>
                <?php endforeach; ?>
            </ul>
            <?php else: ?>
            <p class="text-muted">Esta sección aún no tiene documentos.</p>
            <?php endif; ?>

        <?php else: ?>
            <div class="doc-hero">
                <h1>Documentación del sistema</h1>
                <p>Todo sobre cómo funciona este ERP: cómo se usa, cómo está construido y qué hacer cuando algo falla.</p>
            </div>
            <div class="tarjetas">
                <?php foreach ($arbol as $sec => $cfg): ?>
                <a class="tarjeta" href="<?= BASE_URL ?>erp.php?m=soporte&v=documentacion&s=<?= urlencode($sec) ?>">
                    <i class="<?= htmlspecialchars($cfg['icono']) ?>"></i>
                    <div class="t"><?= htmlspecialchars($cfg['titulo']) ?></div>
                    <div class="d"><?= htmlspecialchars($cfg['resumen']) ?></div>
                    <div class="n"><?= count($cfg['docs']) ?> documento<?= count($cfg['docs']) === 1 ? '' : 's' ?></div>
                </a>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>
        </div>

        <?php if ($toc): ?>
        <aside class="doc-toc">
            <div class="doc-toc-t">En esta página</div>
            <?php foreach ($toc as $t): ?>
                <a href="#<?= htmlspecialchars($t['slug']) ?>" class="<?= $t['nivel'] === 3 ? 'n3' : '' ?>">
                    <?= htmlspecialchars($t['texto']) ?>
                </a>
            <?php endforeach; ?>
        </aside>
        <?php endif; ?>
    </div>
</div>

<!-- ── Panel LIA — asistente sobre la documentación ── -->
<button id="btnAI" onclick="toggleAI()" title="Preguntar a LIA">LIA</button>
<div id="aiPanel">
    <div class="ai-header" onclick="minimizarIA(event)">
        <div class="lia-logo" id="liaLogo">
            <span>L</span><span class="lia-i">I</span><span>A</span>
        </div>
        <div style="flex:1;line-height:1.1">
            <div class="ai-title">LIA</div>
            <div style="font-size:.68rem;opacity:.75;font-weight:400">Asistente de Documentación</div>
        </div>
        <button class="btn-tts" onclick="event.stopPropagation();minimizarIA(event)" title="Minimizar" id="btnMin">
            <i class="fas fa-minus" id="iconMin"></i>
        </button>
        <button class="btn-close" onclick="event.stopPropagation();toggleAI()"></button>
    </div>
    <div class="ai-body" id="aiBody">
        <div class="ai-quick" id="aiQuick"></div>
        <div class="ai-messages" id="aiMessages"></div>
        <div class="ai-footer">
            <input type="text" id="aiInput" placeholder="Pregunta cómo hacer algo…" maxlength="400"
                   onkeydown="if(event.key==='Enter')enviarIA()">
            <button class="btn-send" onclick="enviarIA()"><i class="fas fa-paper-plane"></i></button>
        </div>
    </div>
</div>

<script>
/* ── Buscador: índice completo servido con la página ── */
const DOCS  = <?= json_encode(DocIndex::indiceBusqueda(), JSON_UNESCAPED_UNICODE) ?>;
const BASEQ = '<?= BASE_URL ?>erp.php?m=soporte&v=documentacion';

const norm = s => (s || '').toLowerCase()
    .normalize('NFD').replace(/[̀-ͯ]/g, '');

function buscar(termino) {
    const q = norm(termino).trim();
    const cajaR = document.getElementById('resultados');
    const cajaA = document.getElementById('arbol');
    if (q.length < 2) { cajaR.style.display = 'none'; cajaA.style.display = ''; return; }

    const palabras = q.split(/\s+/);
    const hits = [];
    DOCS.forEach(d => {
        const heno = norm(d.t + ' ' + d.c + ' ' + d.x);
        if (!palabras.every(p => heno.includes(p))) return;
        // El título pesa más que el cuerpo
        const enTitulo = palabras.every(p => norm(d.t).includes(p));
        const pos = heno.indexOf(palabras[0]);
        hits.push({ d, score: (enTitulo ? 0 : 1000) + pos, pos });
    });
    hits.sort((a, b) => a.score - b.score);

    cajaA.style.display = 'none';
    cajaR.style.display = '';
    if (!hits.length) {
        cajaR.innerHTML = '<div class="vacio">Sin resultados para «' + esc(termino) + '»</div>';
        return;
    }
    cajaR.innerHTML = hits.slice(0, 20).map(h => {
        const ini = Math.max(0, h.pos - 40);
        const frag = h.d.x.substr(ini, 120).trim();
        return `<a class="r" href="${BASEQ}&s=${encodeURIComponent(h.d.s)}&d=${encodeURIComponent(h.d.u)}">
            <div class="r-c">${esc(h.d.c)}</div>
            <div class="r-t">${esc(h.d.t)}</div>
            <div class="r-x">${ini > 0 ? '…' : ''}${esc(frag)}…</div>
        </a>`;
    }).join('');
}

function esc(s) {
    const d = document.createElement('div');
    d.textContent = s == null ? '' : String(s);
    return d.innerHTML;
}

/* ── LIA: asistente sobre la documentación ──
   Mismo comportamiento y nombres que el panel del dashboard del turnero. */
const AI_API = '<?= BASE_URL ?>modules/soporte/api/ai_docs.php';
let _liaHistorial = [];

function toggleAI() {
    const panel = document.getElementById('aiPanel');
    const fab   = document.getElementById('btnAI');
    const abre  = !panel.classList.contains('open');
    panel.classList.toggle('open', abre);
    panel.classList.remove('minimized');
    fab.classList.toggle('hidden', abre);
    if (abre) {
        if (!document.getElementById('aiMessages').children.length) saludarIA();
        document.getElementById('aiInput').focus();
    }
}

function minimizarIA(e) {
    if (e) e.stopPropagation();
    const panel = document.getElementById('aiPanel');
    panel.classList.toggle('minimized');
    const icono = document.getElementById('iconMin');
    icono.className = panel.classList.contains('minimized') ? 'fas fa-chevron-up' : 'fas fa-minus';
}

function saludarIA() {
    agregarMsg('bot', 'Hola, soy LIA. Pregúnteme cómo hacer algo en el sistema y le respondo con la documentación.');
    // Atajos armados con los documentos que este usuario realmente puede ver
    const quick = document.getElementById('aiQuick');
    quick.innerHTML = DOCS.slice(0, 4)
        .map(d => `<button class="ai-chip" onclick="enviarRapido('¿Qué explica ${esc(d.t)}?')">${esc(d.t)}</button>`)
        .join('');
}

function enviarRapido(texto) {
    document.getElementById('aiInput').value = texto;
    enviarIA();
}

function agregarMsg(tipo, html) {
    const msgs = document.getElementById('aiMessages');
    const div  = document.createElement('div');
    div.className = 'ai-msg ' + tipo;
    div.innerHTML = html;
    msgs.appendChild(div);
    msgs.scrollTop = msgs.scrollHeight;
    return div;
}

/* Formato mínimo de la respuesta: negritas, código, listas y saltos. */
function mdToHtml(md) {
    let h = esc(md);
    h = h.replace(/```[\s\S]*?```/g, m => '<pre>' + m.replace(/```\w*\n?/g, '') + '</pre>');
    h = h.replace(/`([^`]+)`/g, '<code>$1</code>');
    h = h.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
    h = h.replace(/^\s*[-*]\s+(.*)$/gm, '<li>$1</li>');
    h = h.replace(/(<li>[\s\S]*?<\/li>)/g, '<ul>$1</ul>');
    return h.replace(/\n{2,}/g, '<br><br>').replace(/\n/g, '<br>');
}

async function enviarIA() {
    const input = document.getElementById('aiInput');
    const pregunta = input.value.trim();
    if (!pregunta) return;

    document.getElementById('aiQuick').innerHTML = '';
    agregarMsg('user', esc(pregunta));

    const typing = agregarMsg('bot typing', '');
    input.value = '';
    input.disabled = true;

    try {
        const res = await fetch(AI_API, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ pregunta, historial: _liaHistorial }),
        });
        const d = await res.json();
        typing.className = 'ai-msg bot';

        if (d.ok) {
            typing.innerHTML = mdToHtml(d.respuesta);
            if (d.fuentes && d.fuentes.length) {
                const f = document.createElement('div');
                f.className = 'ai-fuentes';
                f.textContent = 'Según: ' + d.fuentes.join(' · ');
                document.getElementById('aiMessages').appendChild(f);
            }
            _liaHistorial.push({ rol: 'user', texto: pregunta }, { rol: 'model', texto: d.respuesta });
            if (_liaHistorial.length > 6) _liaHistorial = _liaHistorial.slice(-6);
        } else {
            typing.textContent = d.error || 'No pude responder.';
        }
    } catch (_) {
        typing.className = 'ai-msg bot';
        typing.textContent = 'Error de conexión';
    } finally {
        input.disabled = false;
        input.focus();
        const msgs = document.getElementById('aiMessages');
        msgs.scrollTop = msgs.scrollHeight;
    }
}

const inputQ = document.getElementById('q');
let _t = null;
inputQ.addEventListener('input', () => {
    clearTimeout(_t);
    _t = setTimeout(() => buscar(inputQ.value), 120);
});
// Atajo: "/" enfoca el buscador
document.addEventListener('keydown', e => {
    if (e.key === '/' && document.activeElement !== inputQ) { e.preventDefault(); inputQ.focus(); }
    if (e.key === 'Escape' && document.activeElement === inputQ) { inputQ.value = ''; buscar(''); inputQ.blur(); }
});
</script>

<?php Layout::close(); ?>
