// ============ AcademIA8 · Consola — Conocimiento del agente (RAG, arq_07 §4) ============
// v1: visualización real, solo lectura. Tres categorías (arq_07 §1):
//   1. Contenido del curso   -> el alumno lo recibe, automático, filtrado por progreso.
//   2. Acompañamiento        -> no visible, atado a una unidad, se activa al llegar ahí.
//   3. Referencia            -> no visible, siempre disponible desde el primer día.
// Ingesta 100% por script (scripts/ingest_fuentes.py); acá no se agrega/quita nada.
// "Reindexar" queda deshabilitado ("próximamente"): no hay endpoint de escritura aún.

function RagPanel({ course }){
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [err, setErr] = useState(null);

  useEffect(() => {
    let alive = true;
    (async () => {
      setLoading(true); setErr(null);
      try {
        const d = await A8Api.getConocimiento(course.id);
        if (alive) setData(d);
      } catch (e) {
        if (alive) setErr(e.message || String(e));
      } finally {
        if (alive) setLoading(false);
      }
    })();
    return () => { alive = false; };
  }, [course.id]);

  return (
    <div className="rag-wrap">
      <div className="rag-help">
        <div className="rag-help-t"><Icon name="help" /> Cómo funciona el conocimiento del agente</div>
        <ul>
          <li><b>El alumno solo recibe el contenido del curso</b>, dosificado día a día por WhatsApp. Es lo único que le llega.</li>
          <li><b>Ese contenido el agente lo usa siempre como base</b>, desbloqueándolo a medida que el alumno avanza: solo puede citar lo que el alumno ya recibió.</li>
          <li><b>El acompañamiento y la referencia nunca se le envían al alumno</b>: solo mejoran las respuestas del agente. El acompañamiento se activa al llegar a su unidad; la referencia está disponible desde el primer día.</li>
        </ul>
      </div>

      <div className="rag-index is-ok">
        <div className="ri-ic"><Icon name="check" /></div>
        <div className="ri-txt">
          <div className="ri-t">Ingesta por script</div>
          <div className="ri-s">El material de acompañamiento y referencia se carga con <code>scripts/ingest_fuentes.py</code>. Agregar o quitar fuentes desde acá llega en una versión próxima.</div>
        </div>
        <Btn variant="ghost" size="sm" icon="refresh" disabled title="Próximamente">Reindexar</Btn>
      </div>

      {loading && (
        <div className="empty-state" style={{padding:'40px 20px'}}>
          <div className="es-ic"><Icon name="refresh" /></div>
          <h3>Cargando conocimiento del agente…</h3>
        </div>
      )}

      {!loading && err && (
        <div className="empty-state" style={{padding:'40px 20px'}}>
          <div className="es-ic"><Icon name="x" /></div>
          <h3>No se pudo cargar</h3>
          <p>{err}</p>
        </div>
      )}

      {!loading && !err && data && (
        <>
          <div className="rag-group">
            <div className="rag-ghead">
              <div className="rag-gt"><Icon name="eye" /> Contenido del curso <span className="rag-gt-hint auto">automático</span></div>
              <span className="rag-gc">{data.contenido.total}</span>
            </div>
            <div className="rag-auto">
              <div className="rag-auto-ic"><Icon name="check" /></div>
              <div className="rag-auto-txt">
                <div className="rag-auto-t">Todo el contenido publicado ya es base del agente</div>
                <div className="rag-auto-s">Se usa automáticamente y se desbloquea con el progreso: el agente solo cita lo que el alumno ya recibió.</div>
                <div className="rag-auto-stat">
                  {data.contenido.incluidos} {data.contenido.incluidos===1?'fragmento indexado':'fragmentos indexados'}
                  {data.contenido.excluidos>0 && ` · ${data.contenido.excluidos} excluido${data.contenido.excluidos===1?'':'s'} por curación`}
                </div>
              </div>
            </div>
          </div>

          <div className="rag-group">
            <div className="rag-ghead">
              <div className="rag-gt"><Icon name="chat" /> Acompañamiento por unidad <span className="rag-gt-hint">el alumno no lo ve</span></div>
              <span className="rag-gc">{data.acompanamiento.total}</span>
            </div>
            <div className="rag-gdesc">Material que el agente usa para responder mejor una vez que el alumno llega a esa unidad, pero que nunca se le envía.</div>
            {data.acompanamiento.total===0 ? (
              <div className="rag-empty">Sin material de acompañamiento cargado.</div>
            ) : (
              <div className="rag-list">
                {data.acompanamiento.por_unidad.map(u=>(
                  <div key={u.unidad_id} className="rag-row apoyo">
                    <span className="rag-ic ft-documento"><Icon name="doc" /></span>
                    <div className="rag-main">
                      <div className="rag-name-row">
                        <div className="rag-name">{u.unidad_id}</div>
                        <span className="rag-gc">{u.cantidad}</span>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>

          <div className="rag-group">
            <div className="rag-ghead">
              <div className="rag-gt"><Icon name="chat" /> Referencia siempre disponible <span className="rag-gt-hint">el alumno no lo ve</span></div>
              <span className="rag-gc">{data.referencia.total}</span>
            </div>
            <div className="rag-gdesc">Material disponible desde el primer día, sin importar el progreso del alumno (FAQ, glosario, etc.).</div>
            {data.referencia.slugs.length===0 ? (
              <div className="rag-empty">Sin material de referencia cargado.</div>
            ) : (
              <div className="rag-list">
                {data.referencia.slugs.map(slug=>(
                  <div key={slug} className="rag-row apoyo">
                    <span className="rag-ic ft-documento"><Icon name="doc" /></span>
                    <div className="rag-main">
                      <div className="rag-name-row"><div className="rag-name">{slug}</div></div>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        </>
      )}
    </div>
  );
}

Object.assign(window, { RagPanel });