/* ============================================================================
   GUÍA DEL OPERADOR — manual práctico integrado en Mission Control.
   Static content. Cero dependencia de MissionState (no muta nada).
   Cero llamadas externas.

   Wrapped in an IIFE so its top-level `const { useState } = React` doesn't
   collide with the identical line in app.jsx / inbox.jsx (Babel standalone
   evaluates all <script type="text/babel"> in the same global scope).
============================================================================ */
(function () {
const { useState } = React;

// -----------------------------------------------------------------------------
// Sub-componentes reusables
// -----------------------------------------------------------------------------

function GuideHeader() {
  return (
    <div className="gd-header">
      <div>
        <div className="gd-eyebrow">JARVIS · GUÍA DEL OPERADOR</div>
        <div className="gd-title">Cómo operar Mission Control</div>
        <div className="gd-sub">Manual práctico integrado. Consulta lo que necesites cuando lo necesites.</div>
      </div>
      <div className="gd-mode-tag">v1 · ESTÁTICA</div>
    </div>
  );
}

// Bloque destacado siempre visible: secuencia corta de revisión recomendada.
function StartHere() {
  const steps = [
    { n: "1", title: "Abre VISTA DE EQUIPO",  detail: "Ve quiénes están trabajando, en qué sala, y en qué tarea." },
    { n: "2", title: "Revisa el chip de alertas (⚠)", detail: "Si está visible, haz click. Atiende warnings antes que info." },
    { n: "3", title: "Pasa por BANDEJA",      detail: "Lee el brief ejecutivo. Decide los 3-5 mensajes clave: Atendido / Posponer / Ver." },
    { n: "4", title: "Usa CONTENIDO si quieres convertir una idea en pieza reutilizable", detail: "Content Agent Fase 1: idea → hook, caption, carrusel o story. Local/demo, sin API externa." },
    { n: "5", title: "Vuelve a VISTA TÁCTICA cuando todo esté en marcha", detail: "Ahí monitoreas el sistema sin intervenir." },
  ];
  return (
    <div className="gd-start">
      <div className="gd-start-head">
        <span className="gd-start-icon">⌘</span>
        <span className="gd-start-title">Si no sabes por dónde empezar</span>
      </div>
      <ol className="gd-start-list">
        {steps.map(s => (
          <li key={s.n} className="gd-start-step">
            <span className="gd-start-num">{s.n}</span>
            <div>
              <div className="gd-start-step-title">{s.title}</div>
              <div className="gd-start-step-detail">{s.detail}</div>
            </div>
          </li>
        ))}
      </ol>
    </div>
  );
}

// Acordeón premium con un body controlado.
function Accordion({ id, eyebrow, title, defaultOpen, children }) {
  const [open, setOpen] = useState(!!defaultOpen);
  return (
    <section className={"gd-acc" + (open ? " open" : "")} id={id}>
      <button type="button" className="gd-acc-head" onClick={() => setOpen(o => !o)} aria-expanded={open}>
        <div className="gd-acc-head-text">
          {eyebrow && <div className="gd-acc-eyebrow">{eyebrow}</div>}
          <div className="gd-acc-title">{title}</div>
        </div>
        <span className="gd-acc-caret">{open ? "▾" : "▸"}</span>
      </button>
      {open && <div className="gd-acc-body">{children}</div>}
    </section>
  );
}

// Card "Qué es / Para qué sirve / Qué puedes hacer".
function ConceptCards({ what, why, can }) {
  return (
    <div className="gd-cards">
      <div className="gd-card">
        <div className="gd-card-label">QUÉ ES</div>
        <div className="gd-card-body">{what}</div>
      </div>
      <div className="gd-card">
        <div className="gd-card-label">PARA QUÉ SIRVE</div>
        <div className="gd-card-body">{why}</div>
      </div>
      <div className="gd-card">
        <div className="gd-card-label">QUÉ PUEDES HACER</div>
        <div className="gd-card-body">{can}</div>
      </div>
    </div>
  );
}

function Bullets({ items }) {
  return (
    <ul className="gd-bullets">
      {items.map((it, i) => (
        <li key={i}><span className="gd-bullet-mark">▎</span><span>{it}</span></li>
      ))}
    </ul>
  );
}

function Highlight({ kind = "info", title, children }) {
  return (
    <div className={"gd-highlight gd-hl-" + kind}>
      {title && <div className="gd-highlight-title">{title}</div>}
      <div>{children}</div>
    </div>
  );
}

function NextActions({ items }) {
  return (
    <div className="gd-next">
      <div className="gd-next-label">QUÉ HACER AHORA</div>
      <ul className="gd-next-list">
        {items.map((it, i) => <li key={i}>{it}</li>)}
      </ul>
    </div>
  );
}

function FaqItem({ q, a }) {
  const [open, setOpen] = useState(false);
  return (
    <div className={"gd-faq-item" + (open ? " open" : "")}>
      <button type="button" className="gd-faq-q" onClick={() => setOpen(o => !o)} aria-expanded={open}>
        <span>{q}</span>
        <span className="gd-faq-caret">{open ? "−" : "+"}</span>
      </button>
      {open && <div className="gd-faq-a">{a}</div>}
    </div>
  );
}

// -----------------------------------------------------------------------------
// CONTENIDO PRINCIPAL
// -----------------------------------------------------------------------------
function GuideApp() {
  return (
    <div className="gd-root">
      <div className="gd-bg-grid" aria-hidden="true" />
      <div className="gd-shell">
        <GuideHeader />
        <StartHere />

        {/* === GRUPO 1: ORIENTACIÓN === */}
        <div className="gd-group-divider">01 · ORIENTACIÓN</div>

        <Accordion eyebrow="01" title="Qué es Mission Control" defaultOpen={true}>
          <ConceptCards
            what="El centro de operaciones donde JARVIS supervisa tu sistema y donde tú diriges agentes y tareas."
            why="Para tener una vista única del trabajo en curso sin perderte entre apps, mensajes y herramientas dispersas."
            can="Crear agentes, despachar tareas, organizar salas, atender mensajes y monitorear todo en tiempo real."
          />
          <Highlight title="Tu rol">
            Eres el operador. Tomas decisiones operativas: a quién despachar, qué priorizar, qué ignorar. JARVIS es el supervisor: filtra ruido, sugiere acciones, cuida coherencia.
          </Highlight>
          <Bullets items={[
            "JARVIS observa, sugiere, filtra. No actúa por ti sin tu visto bueno.",
            "Los agentes ejecutan tareas que tú les asignas. Avanzan progreso por sí solos.",
            "Tú diriges el flujo desde Mission Control y validas decisiones clave.",
          ]} />
        </Accordion>

        <Accordion eyebrow="02" title="Flujo recomendado de uso diario">
          <Bullets items={[
            "Al abrir el sistema, revisa el chip de alertas (⚠) si aparece. Atiende los warnings primero.",
            "Pasa por BANDEJA: lee el brief ejecutivo y decide los 3-5 mensajes clave.",
            "Entra a VISTA DE EQUIPO: confirma que los agentes están en la sala correcta y con la tarea correcta.",
            "Si algo no está corriendo, despacha la siguiente tarea desde el panel inferior.",
            "Vuelve a VISTA TÁCTICA cuando todo esté en marcha; ahí monitoreas sin intervenir.",
          ]} />
          <Highlight kind="warning" title="Si ves algo urgente">
            Una alerta ámbar o una tarea estancada significa que necesitas decidir. No la dejes pasar — entra al detalle y resuelve, pausa o cancela.
          </Highlight>
          <NextActions items={[
            "Empieza tu día por la BANDEJA, no por la VISTA TÁCTICA.",
            "Atiende alertas antes que mensajes — son señales más críticas.",
            "Si dudas qué priorizar, sigue el orden del brief ejecutivo.",
          ]} />
        </Accordion>

        {/* === GRUPO 2: LAS VISTAS === */}
        <div className="gd-group-divider">02 · LAS VISTAS</div>

        <Accordion eyebrow="03" title="Vista de Equipo">
          <ConceptCards
            what="Vista en vivo del equipo: agentes, salas, tareas activas y colaboradores."
            why="Para ver de un vistazo quién hace qué, dónde, y con cuánto progreso."
            can="Seleccionar un agente, despacharle una tarea, moverlo de sala, asignar colaboradores, enviarle un mensaje."
          />
          <div className="gd-section-mini">Salas</div>
          <Bullets items={[
            "Cada sala es una zona temática del sistema (Oficina, Estrategia, Laboratorio, etc.).",
            "Los agentes viven dentro de una sala a la vez. Su sala determina el contexto en el que trabajan.",
            "Hay 6 salas base que no se pueden editar ni eliminar; las salas custom sí.",
          ]} />
          <div className="gd-section-mini">Panel inferior</div>
          <Bullets items={[
            "AGENTE SELECCIONADO: el agente activo. Cambia al hacer click en otra sala o en otro nombre del roster.",
            "TAREA ACTUAL: lo que ese agente está haciendo, con barra de progreso y prioridad.",
            "EN COLA / HISTORIAL: chips pequeños que aparecen si el agente tiene más tareas pendientes o terminadas.",
            "COLABORADORES: otros agentes ayudando en la tarea activa.",
          ]} />
          <NextActions items={[
            "Click en una sala para enfocarla y ver sus agentes.",
            "Click en ✎ Editar para cambiar nombre, rol o color del agente.",
            "Click en Despachar para asignarle una nueva tarea.",
          ]} />
        </Accordion>

        <Accordion eyebrow="04" title="Vista Táctica">
          <ConceptCards
            what="Tablero de monitoreo del núcleo del sistema y sus módulos (CORE, COMMS, OBS, LAB, ENG)."
            why="Para vigilar el estado profundo del sistema sin intervenir constantemente."
            can="Cambiar el módulo activo, leer telemetría, revisar la bitácora de eventos recientes."
          />
          <div className="gd-section-mini">Qué mirar</div>
          <Bullets items={[
            "Estado del módulo activo (ÓPTIMO, ESCUCHANDO, BARRIDO, etc.) — debe verse estable.",
            "Bitácora del sistema: logs en tiempo real de lo que pasa en todo Mission Control.",
            "Indicadores de latencia, ping, agentes activos.",
          ]} />
          <Highlight kind="info" title="Vista de monitoreo, no de acción">
            En VISTA TÁCTICA casi no necesitas hacer click. Es para observar. Las acciones operativas (crear tareas, despachar, decidir mensajes) viven en VISTA DE EQUIPO y BANDEJA.
          </Highlight>
          <NextActions items={[
            "Úsala como pantalla de monitoreo cuando todo está en marcha.",
            "Si ves algo raro en la bitácora, salta a la vista correspondiente.",
            "No intentes operar el día completo desde aquí.",
          ]} />
        </Accordion>

        <Accordion eyebrow="05" title="Bandeja">
          <ConceptCards
            what="Tu inbox curado: mensajes entrantes simulados con sugerencias de respuesta y acciones rápidas."
            why="Para decidir rápido qué responder, qué posponer y qué ignorar sin abrir cada plataforma."
            can="Marcar un mensaje como Atendido, Posponer, o Ver para entrar al detalle completo."
          />
          <div className="gd-section-mini">Vista ejecutiva vs bandeja completa</div>
          <Bullets items={[
            "VISTA EJECUTIVA (default): solo los 3-5 mensajes que JARVIS considera más relevantes. Acciones de alto nivel.",
            "BANDEJA COMPLETA: lista total con filtros, sugerencias, dropdowns manuales y todo el detalle. Se abre con el botón “Abrir bandeja completa ›”.",
          ]} />
          <div className="gd-section-mini">Categorías</div>
          <Bullets items={[
            "Urgente: requiere atención inmediata.",
            "Colaboración: propuesta de marca o aliado.",
            "Oportunidad: posible cliente, prensa, alianza estratégica.",
            "Comunidad: seguidores, agradecimientos, conversación general.",
            "Responder luego: aplazado a propósito.",
            "Spam: irrelevante, ignorar.",
          ]} />
          <div className="gd-section-mini">Acciones</div>
          <Bullets items={[
            "Ver: abre la bandeja completa con ese mensaje preseleccionado.",
            "Atendido: marca como resuelto. Cierra el ciclo del mensaje.",
            "Posponer: lo mueve a “Responder luego” con estado pendiente.",
          ]} />
          <NextActions items={[
            "Empieza por los mensajes clave del brief ejecutivo.",
            "Usa Atendido cuando ya decidiste qué hacer (aunque la respuesta real la mandes después).",
            "Posponer es legítimo — no todo necesita resolverse ya.",
          ]} />
        </Accordion>

        <Accordion eyebrow="06" title="Contenido">
          <ConceptCards
            what="Content Agent Fase 1. Transforma ideas en hooks, captions, carruseles o stories. Local/demo, sin API externa."
            why="Para validar el flujo idea → pieza → draft sin depender de servicios externos ni de un cerebro real todavía."
            can="Escribir una idea, elegir formato y tono, generar la pieza, guardar draft, actualizar y recuperar drafts recientes."
          />
          <div className="gd-section-mini">Formatos disponibles</div>
          <Bullets items={[
            "Hook: apertura potente, 1–2 líneas.",
            "Caption: texto fluido, 3–6 líneas.",
            "Carrusel: 3–7 slides numeradas.",
            "Story: narrativo breve, 2–4 líneas.",
          ]} />
          <div className="gd-section-mini">Tonos</div>
          <Bullets items={[
            "Directa, Emocional, Educativa, Resumida — cambian el ángulo de la pieza sin cambiar la idea base.",
          ]} />
          <Highlight kind="info" title="Fase 1 · Local / Demo">
            La generación es por reglas locales, no IA externa. Sirve para validar flujo, formatos, tonos y persistencia de drafts. El cerebro real del agente se conectará en una fase posterior.
          </Highlight>
          <NextActions items={[
            "Escribe una idea clara y elige formato + tono.",
            "Pulsa GENERAR y revisa la salida; usa Variar tono o Regenerar si quieres otra versión.",
            "Guarda como draft cuando te convenza; podrás recuperarlo desde DRAFTS RECIENTES.",
          ]} />
        </Accordion>

        {/* === GRUPO 3: CONCEPTOS OPERATIVOS === */}
        <div className="gd-group-divider">03 · CONCEPTOS OPERATIVOS</div>

        <Accordion eyebrow="07" title="Agentes">
          <ConceptCards
            what="Operadores virtuales que ejecutan tareas dentro del sistema. JARVIS es el agente raíz."
            why="Para distribuir trabajo: cada agente puede tener un rol distinto (estrategia, contenido, datos, etc.)."
            can="Crear, editar nombre/rol/color, eliminar (excepto JARVIS), mover entre salas, despachar tareas."
          />
          <Bullets items={[
            "Cada agente tiene un nombre, un rol, un color de avatar y una sala actual.",
            "JARVIS es el agente core — protegido, no se puede eliminar.",
            "Los agentes despachados pasan a estado Working y avanzan progreso automáticamente.",
            "Si los pones en Standby o los mueves de sala, el sistema mantiene la coherencia.",
          ]} />
          <NextActions items={[
            "Crea un agente desde el botón “+ Agregar agente” en el roster.",
            "Despacha tareas desde el panel inferior con el botón Despachar.",
            "Mueve agentes seleccionando otra sala destino en el modal de despacho.",
          ]} />
        </Accordion>

        <Accordion eyebrow="08" title="Tareas">
          <ConceptCards
            what="Unidades de trabajo asignadas a un agente. Tienen título, prioridad, sala, progreso y estado."
            why="Para representar lo que cada agente está haciendo de forma clara y trazable."
            can="Despachar nuevas, pausar, reanudar, completar, cancelar, encolar para más adelante."
          />
          <div className="gd-section-mini">Ciclo de vida</div>
          <Bullets items={[
            "Activa (running): avanza progreso automáticamente con el tiempo.",
            "En cola (queued): asignada al agente pero esperando a que termine la activa.",
            "Pausada: detenida por el operador, no avanza.",
            "Completada / Cancelada: terminal, queda en historial.",
          ]} />
          <div className="gd-section-mini">Cuando llega a 100%</div>
          <Bullets items={[
            "El sistema NO la cierra solo. Espera tu confirmación.",
            "Aparece una alerta amarilla de “tarea al 100% esperando confirmación”.",
            "Tú decides: ✓ Completar (la cierra) o cancelar.",
            "Al cerrarla, JARVIS activa automáticamente la siguiente tarea de la cola del agente.",
          ]} />
          <div className="gd-section-mini">Colaboradores y progreso</div>
          <Bullets items={[
            "Puedes asignar otros agentes como colaboradores de una tarea activa.",
            "Cada colaborador acelera ligeramente el progreso (bonus suave, no turbo).",
            "Las prioridades altas avanzan más rápido por tick.",
          ]} />
          <NextActions items={[
            "Si una tarea no avanza, revisa que la automatización esté corriendo.",
            "Usa la cola para planificar siguiente paso sin intervenir cada vez.",
            "Revisa el historial del agente para ver qué hizo recientemente.",
          ]} />
        </Accordion>

        <Accordion eyebrow="09" title="Salas">
          <ConceptCards
            what="Espacios temáticos donde viven los agentes y donde ocurren las tareas."
            why="Para organizar el sistema por contexto: comando, estrategia, investigación, contenido, ops, datos, etc."
            can="Crear salas custom con nombre, tipo, color y capacidad. Editarlas o eliminarlas cuando ya no las necesites."
          />
          <div className="gd-section-mini">Salas base vs custom</div>
          <Bullets items={[
            "Las 6 salas base (Oficina, Estrategia, Laboratorio, Estudio, Bahía, Analítica) son fijas.",
            "Las salas custom las creas tú con el botón “+ Nueva sala” en la grilla.",
            "Solo las custom se pueden editar o eliminar — las base están protegidas.",
          ]} />
          <Highlight kind="warning" title="Si eliminas una sala con agentes o tareas dentro">
            JARVIS reasigna automáticamente los agentes a la Oficina y reubica las tareas activas a la misma sala. Nadie se queda colgado, pero conviene revisar dónde quedaron.
          </Highlight>
          <NextActions items={[
            "Crea salas custom solo cuando un contexto nuevo lo justifica.",
            "Edita color y tipo si la temática evoluciona.",
            "Antes de eliminar, considera si los agentes deben ir a otra sala distinta de la Oficina.",
          ]} />
        </Accordion>

        <Accordion eyebrow="10" title="Alertas">
          <ConceptCards
            what="Señales operativas que JARVIS curó por encima de los logs crudos."
            why="Para que veas qué requiere atención sin tener que leer toda la bitácora."
            can="Atender (la silencia sin resolverla), descartar (la marca como resuelta) o esperar a que se resuelva sola."
          />
          <div className="gd-section-mini">Severidades</div>
          <Bullets items={[
            "INFO (cian): informativa, no requiere acción inmediata.",
            "WARNING (ámbar): requiere atención del operador.",
            "CRITICAL (coral): acción urgente. Pulsa visualmente para llamar tu atención.",
          ]} />
          <div className="gd-section-mini">Cuáles se resuelven solas</div>
          <Bullets items={[
            "Tarea al 100%: se resuelve sola cuando confirmas la tarea.",
            "Tarea estancada: se resuelve sola cuando vuelve a avanzar.",
            "Cola sobrecargada: se resuelve sola cuando despachas o cancelas.",
            "Crítica sin colaboradores: se resuelve sola cuando asignas uno o cambias prioridad.",
          ]} />
          <Highlight kind="info" title="Atender vs descartar">
            “Atender” silencia la alerta pero la condición sigue ahí (útil cuando ya sabes lo que pasa). “Descartar” la marca como resuelta manualmente.
          </Highlight>
          <NextActions items={[
            "Click en el chip ⚠ para ver todas las alertas activas.",
            "Atiende warnings antes que infos.",
            "No es necesario descartar todo — muchas alertas se autoresuelven.",
          ]} />
        </Accordion>

        <Accordion eyebrow="11" title="Content Agent Fase 1">
          <ConceptCards
            what="Módulo local para validar el flujo idea → pieza → draft."
            why="La inteligencia real del agente queda pendiente para una fase posterior; en Fase 1 lo que se valida es el flujo, los formatos, los tonos y la persistencia de drafts."
            can="Generar piezas por reglas locales, alternar tonos, guardar y actualizar drafts, recuperar trabajo previo desde DRAFTS RECIENTES."
          />
          <Bullets items={[
            "Sin API externa: la generación es por plantillas locales.",
            "Sin red: todo vive en el estado local del operador.",
            "Drafts persisten al cambiar de pestaña y se listan en DRAFTS RECIENTES.",
          ]} />
          <Highlight kind="info" title="Qué se valida en Fase 1">
            Que el flujo idea → pieza → draft funcione de extremo a extremo, que los formatos y tonos rindan visualmente y que los drafts se guarden y recuperen sin pérdida.
          </Highlight>
        </Accordion>

        {/* === CIERRE === */}
        <div className="gd-group-divider">04 · PREGUNTAS RÁPIDAS</div>

        <div className="gd-faq">
          <FaqItem q="¿Qué debo mirar primero?" a="El chip de alertas (⚠) si está visible, después la BANDEJA, y luego VISTA DE EQUIPO para confirmar que todo está en marcha." />
          <FaqItem q="¿Qué pasa si elimino una sala?" a="Solo puedes eliminar salas custom. Los agentes que estaban dentro se mueven automáticamente a la Oficina, y las tareas activas también se reubican ahí. Nada se pierde." />
          <FaqItem q="¿Cómo sé qué tarea está activa para un agente?" a="Selecciona el agente. En el panel inferior verás TAREA ACTUAL con título, prioridad y barra de progreso." />
          <FaqItem q="¿Qué significa una alerta?" a="Una señal curada que requiere tu atención. Las warnings (ámbar) son las más importantes; las infos (cian) son solo recordatorios." />
          <FaqItem q="¿Qué hace JARVIS y qué hacen los agentes?" a="JARVIS supervisa, filtra y sugiere. Los agentes ejecutan tareas concretas que tú les despachas. Tú diriges el conjunto." />
          <FaqItem q="¿Por qué no se cierra sola una tarea al 100%?" a="Es deliberado. JARVIS espera tu confirmación para cerrarla por si quieres revisar el resultado, reasignar o cancelar. Cuando confirmas, activa la siguiente de la cola." />
          <FaqItem q="¿La bandeja se conecta a Instagram real?" a="Todavía no. Esta versión es local con datos mock para que pruebes el flujo. Las conexiones reales llegan en una fase posterior." />
          <FaqItem q="¿Contenido ya usa IA real?" a="No. En Fase 1 funciona local/demo para probar flujo, formatos, tonos y drafts. La API o cerebro real se conectará después." />
        </div>

        <div className="gd-footnote">
          Esta guía es estática. Si el sistema crece, la guía crecerá con él.
        </div>
      </div>
    </div>
  );
}

const guideMountEl = document.getElementById("guide-react-root");
if (guideMountEl) {
  const root = ReactDOM.createRoot(guideMountEl);
  root.render(<GuideApp />);
}
})();