/* 2.2 — Diagnósticos */

function Diagnosticos({ role }) {
  const [tab, setTab] = useState("instrumentos");
  return (
    <div className="page" data-screen-label="2.2 Diagnósticos">
      <div className="page-head">
        <div>
          <div className="meta">MÓDULO 2.2 · MEDICIÓN DE LÍNEA BASE Y CIERRE</div>
          <h1>Diagnósticos & encuestas</h1>
          <div className="sub">Instrumentos parametrizables sin código, hojas de ruta personalizadas y análisis longitudinal ex-ante / ex-post por dimensión.</div>
        </div>
        <div className="flex gap-8">
          <button className="btn"><Icon name="download" size={13}/> Exportar tabulación</button>
          <button className="btn btn-primary"><Icon name="plus" size={13}/> Nuevo instrumento</button>
        </div>
      </div>

      <div className="tabs">
        <div className={`tab ${tab === "instrumentos" ? "active" : ""}`} onClick={() => setTab("instrumentos")}>Instrumentos <span className="badge">5</span></div>
        <div className={`tab ${tab === "builder" ? "active" : ""}`} onClick={() => setTab("builder")}>Diseñador (sin código)</div>
        <div className={`tab ${tab === "resultados" ? "active" : ""}`} onClick={() => setTab("resultados")}>Resultados agregados</div>
        <div className={`tab ${tab === "rutas" ? "active" : ""}`} onClick={() => setTab("rutas")}>Hojas de ruta</div>
        <div className={`tab ${tab === "ia" ? "active" : ""}`} onClick={() => setTab("ia")}>Tabulación IA <span className="badge">Beta</span></div>
      </div>

      {tab === "instrumentos" && <Instrumentos/>}
      {tab === "builder" && <DiagnosticoBuilder/>}
      {tab === "resultados" && <ResultadosAgregados/>}
      {tab === "rutas" && <HojasDeRuta/>}
      {tab === "ia" && <TabulacionIA/>}
    </div>
  );
}

function Instrumentos() {
  return (
    <>
      <div className="grid-kpis">
        <KpiTile label="Instrumentos activos" value="5" sub="2 línea base · 2 cierre · 1 transversal"/>
        <KpiTile label="Tasa de finalización" value="68.2%" sub="4,824 de 7,075" delta="+4.1 pp"/>
        <KpiTile label="Mediciones ex-post" value="1,842" sub="cohorte 2025 cerrada" delta="+412"/>
        <KpiTile label="Variación promedio" value="+1.3 pts" sub="madurez digital · ex-ante → ex-post" accent/>
      </div>
      <div className="card">
        <div className="card-head"><h3>Instrumentos disponibles</h3></div>
        <table className="data">
          <thead><tr><th>Instrumento</th><th>Tipo</th><th>Momento</th><th className="num">Aplicados</th><th className="num">Finalizados</th><th className="num">% Compl.</th><th>Dimensiones</th><th></th></tr></thead>
          <tbody>
            {window.DIAGNOSTICOS.map(d => {
              const pct = Math.round((d.finalizados / d.aplicados) * 100);
              return (
                <tr key={d.id}>
                  <td><span className="cell-strong">{d.nombre}</span><div className="cell-sub mono">{d.id}</div></td>
                  <td><span className="chip">{d.tipo}</span></td>
                  <td>
                    {d.momento === "ex_ante" && <span className="chip info">Línea base</span>}
                    {d.momento === "ex_post" && <span className="chip success">Cierre</span>}
                    {d.momento === "transversal" && <span className="chip warn">Transversal</span>}
                  </td>
                  <td className="num mono">{d.aplicados.toLocaleString()}</td>
                  <td className="num mono">{d.finalizados.toLocaleString()}</td>
                  <td className="num">
                    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                      <div className="bar" style={{ width: 60 }}><div className="fill success" style={{ width: `${pct}%` }}/></div>
                      <span className="mono" style={{ minWidth: 30, textAlign: "right" }}>{pct}%</span>
                    </div>
                  </td>
                  <td className="mono num">{d.dimensiones}</td>
                  <td className="flex gap-8" style={{ justifyContent: "flex-end" }}>
                    <button className="btn btn-sm btn-ghost"><Icon name="eye" size={11}/></button>
                    <button className="btn btn-sm btn-ghost"><Icon name="edit" size={11}/></button>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </>
  );
}

// ───── Diagnóstico builder (sin código) ─────
function DiagnosticoBuilder() {
  const [questions, setQuestions] = useState([
    { id: "q1", tipo: "likert", dimension: "Estrategia digital", texto: "¿La organización tiene una estrategia digital documentada y comunicada?" },
    { id: "q2", tipo: "single", dimension: "Cultura y talento", texto: "Nivel de capacitación digital del equipo", opts: ["Sin capacitación", "Capacitación puntual", "Programa anual", "Cultura de aprendizaje continuo"] },
    { id: "q3", tipo: "multi", dimension: "Tecnología e infraestructura", texto: "¿Qué tecnologías usa actualmente?", opts: ["ERP", "CRM", "BI / Analítica", "Cloud", "IA / ML", "IoT", "Ciberseguridad gestionada"] },
    { id: "q4", tipo: "abierta", dimension: "Datos y analítica", texto: "Describa cómo toma decisiones basadas en datos en su organización." },
    { id: "q5", tipo: "escala", dimension: "Ciberseguridad", texto: "Nivel de madurez en gestión de incidentes (1–5)" },
  ]);
  const [active, setActive] = useState("q1");

  const addQ = (tipo) => {
    const id = "q" + (questions.length + 1);
    setQuestions([...questions, { id, tipo, dimension: "Nueva dimensión", texto: "Nueva pregunta…", opts: tipo === "single" || tipo === "multi" ? ["Opción 1", "Opción 2"] : undefined }]);
    setActive(id);
  };

  const activeQ = questions.find(q => q.id === active);

  return (
    <div style={{ display: "grid", gridTemplateColumns: "300px 1fr 320px", gap: 16, height: "calc(100vh - 240px)" }}>
      {/* Sidebar: questions list */}
      <div className="card" style={{ display: "flex", flexDirection: "column", overflow: "hidden" }}>
        <div className="card-head"><h3>Preguntas · {questions.length}</h3></div>
        <div style={{ overflowY: "auto", flex: 1 }}>
          {questions.map((q, i) => (
            <div key={q.id}
              onClick={() => setActive(q.id)}
              style={{
                padding: "10px 14px",
                borderBottom: "1px solid var(--c-line-2)",
                borderLeft: active === q.id ? "3px solid var(--c-primary)" : "3px solid transparent",
                background: active === q.id ? "var(--c-primary-50)" : "transparent",
                cursor: "pointer"
              }}>
              <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 3 }}>
                <span className="mono" style={{ fontSize: 10, color: "var(--c-ink-5)" }}>P{i + 1}</span>
                <TipoBadge tipo={q.tipo}/>
              </div>
              <div style={{ fontSize: 12, fontWeight: 500, lineHeight: 1.3 }}>{q.texto}</div>
              <div style={{ fontSize: 10, color: "var(--c-ink-5)", marginTop: 3, textTransform: "uppercase", letterSpacing: "0.06em" }}>{q.dimension}</div>
            </div>
          ))}
        </div>
        <div style={{ padding: 10, borderTop: "1px solid var(--c-line)", display: "flex", gap: 4, flexWrap: "wrap" }}>
          <button className="btn btn-sm" onClick={() => addQ("likert")}><Icon name="plus" size={11}/> Likert</button>
          <button className="btn btn-sm" onClick={() => addQ("single")}>+ Opción única</button>
          <button className="btn btn-sm" onClick={() => addQ("multi")}>+ Múltiple</button>
          <button className="btn btn-sm" onClick={() => addQ("abierta")}>+ Abierta</button>
          <button className="btn btn-sm" onClick={() => addQ("escala")}>+ Escala</button>
        </div>
      </div>

      {/* Center: preview */}
      <div className="card" style={{ overflow: "auto" }}>
        <div className="card-head">
          <h3>Vista previa del participante</h3>
          <div className="flex gap-8">
            <span className="chip">Móvil</span>
            <span className="chip solid">Desktop</span>
          </div>
        </div>
        <div style={{ padding: 32, background: "var(--c-bg)", minHeight: 500 }}>
          <div style={{ maxWidth: 560, margin: "0 auto", background: "#fff", borderRadius: 10, padding: 28, border: "1px solid var(--c-line)" }}>
            <div style={{ fontFamily: "var(--font-serif)", fontSize: 22, fontWeight: 600, marginBottom: 4 }}>Diagnóstico de Madurez Digital</div>
            <div style={{ fontSize: 12, color: "var(--c-ink-4)", marginBottom: 18 }}>Cohorte 2026-I · Pregunta {questions.findIndex(q => q.id === active) + 1} de {questions.length}</div>
            <div className="bar" style={{ marginBottom: 24 }}><div className="fill" style={{ width: `${((questions.findIndex(q => q.id === active) + 1) / questions.length) * 100}%` }}/></div>
            {activeQ && <QuestionPreview q={activeQ}/>}
            <div style={{ display: "flex", justifyContent: "space-between", marginTop: 30 }}>
              <button className="btn">Anterior</button>
              <button className="btn btn-primary">Siguiente <Icon name="chev_r" size={12}/></button>
            </div>
          </div>
        </div>
      </div>

      {/* Right: inspector */}
      <div className="card" style={{ overflow: "auto" }}>
        <div className="card-head"><h3>Inspector de pregunta</h3></div>
        <div className="card-body" style={{ fontSize: 12 }}>
          {activeQ && (
            <>
              <Row label="Texto">
                <textarea className="textarea" rows={3} value={activeQ.texto}
                  onChange={e => setQuestions(questions.map(q => q.id === active ? { ...q, texto: e.target.value } : q))}/>
              </Row>
              <Row label="Tipo">
                <select className="select" value={activeQ.tipo}
                  onChange={e => setQuestions(questions.map(q => q.id === active ? { ...q, tipo: e.target.value } : q))}>
                  <option value="likert">Likert 1–5</option>
                  <option value="single">Opción única</option>
                  <option value="multi">Selección múltiple</option>
                  <option value="abierta">Respuesta abierta</option>
                  <option value="escala">Escala numérica</option>
                </select>
              </Row>
              <Row label="Dimensión">
                <select className="select" value={activeQ.dimension}
                  onChange={e => setQuestions(questions.map(q => q.id === active ? { ...q, dimension: e.target.value } : q))}>
                  {window.DIMENSIONES_MADUREZ.map(d => <option key={d.nombre} value={d.nombre}>{d.nombre}</option>)}
                </select>
              </Row>
              <Row label="Obligatoria">
                <label><input type="checkbox" defaultChecked/> Sí</label>
              </Row>
              <Row label="Aplica si…" help="Lógica condicional sin código">
                <input className="input" placeholder="P2 = 'Programa anual'"/>
              </Row>
              <Row label="Peso en dimensión">
                <input className="input" type="number" defaultValue="1.0" step="0.1"/>
              </Row>
              <div style={{ padding: "12px 0", display: "flex", gap: 6 }}>
                <button className="btn btn-sm" style={{ color: "var(--c-danger)" }} onClick={() => setQuestions(questions.filter(q => q.id !== active))}>
                  <Icon name="x" size={11}/> Eliminar
                </button>
                <button className="btn btn-sm">Duplicar</button>
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

function TipoBadge({ tipo }) {
  const map = { likert: ["Likert", "info"], single: ["Única", ""], multi: ["Múltiple", ""], abierta: ["Abierta", "warn"], escala: ["Escala", "info"] };
  const [l, k] = map[tipo] || [tipo, ""];
  return <span className={`chip ${k}`} style={{ fontSize: 9.5 }}>{l}</span>;
}

function QuestionPreview({ q }) {
  return (
    <div>
      <div style={{ fontSize: 13, fontWeight: 500, marginBottom: 14, lineHeight: 1.4 }}>{q.texto}</div>
      {q.tipo === "likert" && (
        <div style={{ display: "flex", gap: 6 }}>
          {[1,2,3,4,5].map(n => (
            <button key={n} className="btn" style={{ flex: 1, padding: "10px 0", flexDirection: "column" }}>
              <span className="mono" style={{ fontSize: 14, fontWeight: 600 }}>{n}</span>
              <span style={{ fontSize: 9, color: "var(--c-ink-4)" }}>
                {["Nada","Bajo","Medio","Alto","Total"][n-1]}
              </span>
            </button>
          ))}
        </div>
      )}
      {q.tipo === "single" && (
        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
          {q.opts.map((o, i) => (
            <label key={i} style={{ display: "flex", alignItems: "center", gap: 8, padding: 10, border: "1px solid var(--c-line)", borderRadius: 6, fontSize: 12 }}>
              <input type="radio" name={q.id}/> {o}
            </label>
          ))}
        </div>
      )}
      {q.tipo === "multi" && (
        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
          {q.opts.map((o, i) => (
            <label key={i} style={{ display: "flex", alignItems: "center", gap: 8, padding: 10, border: "1px solid var(--c-line)", borderRadius: 6, fontSize: 12 }}>
              <input type="checkbox"/> {o}
            </label>
          ))}
        </div>
      )}
      {q.tipo === "abierta" && <textarea className="textarea" rows={4} placeholder="Escribe tu respuesta…"/>}
      {q.tipo === "escala" && (
        <div>
          <input type="range" min="1" max="5" defaultValue="3" style={{ width: "100%" }}/>
          <div style={{ display: "flex", justifyContent: "space-between", fontSize: 10, color: "var(--c-ink-4)" }}>
            <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
          </div>
        </div>
      )}
    </div>
  );
}

// ───── Resultados agregados ─────
function ResultadosAgregados() {
  const dims = window.DIMENSIONES_MADUREZ;
  return (
    <>
      <div className="grid-2" style={{ marginBottom: 16 }}>
        <div className="card">
          <div className="card-head">
            <h3>Variación ex-ante / ex-post · Madurez digital</h3>
            <span className="chip success"><span className="dot"/> +1.3 pts promedio</span>
          </div>
          <div className="card-body">
            <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              {dims.map(d => {
                const delta = d.ex_post - d.ex_ante;
                return (
                  <div key={d.nombre}>
                    <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, marginBottom: 4 }}>
                      <span>{d.nombre}</span>
                      <span className="mono" style={{ color: "var(--c-success)" }}>+{delta.toFixed(1)} pts</span>
                    </div>
                    <div style={{ display: "grid", gridTemplateColumns: "60px 1fr 60px", gap: 8, alignItems: "center" }}>
                      <span className="mono" style={{ fontSize: 11, color: "var(--c-ink-4)", textAlign: "right" }}>{d.ex_ante.toFixed(1)}</span>
                      <div style={{ position: "relative", height: 14, background: "var(--c-line-2)", borderRadius: 4 }}>
                        <div style={{ position: "absolute", left: 0, top: 0, height: "100%", width: `${(d.ex_ante / 5) * 100}%`, background: "var(--c-primary-200)", borderRadius: 4 }}/>
                        <div style={{ position: "absolute", left: `${(d.ex_ante / 5) * 100}%`, top: 0, height: "100%", width: `${(delta / 5) * 100}%`, background: "var(--c-success)", borderRadius: 4 }}/>
                      </div>
                      <span className="mono" style={{ fontSize: 11, color: "var(--c-success)", fontWeight: 600 }}>{d.ex_post.toFixed(1)}</span>
                    </div>
                  </div>
                );
              })}
            </div>
            <div style={{ display: "flex", gap: 14, marginTop: 18, fontSize: 11, color: "var(--c-ink-4)" }}>
              <Legend swatch="var(--c-primary-200)" label="Línea base"/>
              <Legend swatch="var(--c-success)" label="Cierre"/>
            </div>
          </div>
        </div>

        <div className="card">
          <div className="card-head"><h3>Brechas por sector</h3><div className="hint">Madurez promedio</div></div>
          <div className="card-body">
            <HBarChart
              data={window.SECTORES_CIIU.slice(0, 10).map((s, i) => ({
                label: s.short,
                value: Math.round((2 + Math.random() * 2.5) * 10) / 10,
              }))}
              maxVal={5}
              format={v => `${v.toFixed(1)} / 5`}/>
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-head"><h3>Distribución de respuestas · ítem P3 "Tecnologías en uso"</h3></div>
        <div className="card-body">
          <HBarChart
            data={[
              { label: "ERP", value: 38, color: "#1a3a6c" },
              { label: "CRM", value: 47, color: "#1a3a6c" },
              { label: "BI / Analítica", value: 24, color: "#1a3a6c" },
              { label: "Cloud", value: 62, color: "#1a3a6c" },
              { label: "IA / ML", value: 11, color: "#c97a16" },
              { label: "IoT", value: 14, color: "#c97a16" },
              { label: "Ciberseg. gestionada", value: 28, color: "#1a3a6c" },
            ]}
            maxVal={100}
            format={v => `${v}%`}/>
        </div>
      </div>
    </>
  );
}

function Legend({ swatch, label }) {
  return <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}>
    <span style={{ width: 8, height: 8, background: swatch, borderRadius: 2 }}/>{label}
  </span>;
}

// ───── Hojas de ruta ─────
function HojasDeRuta() {
  return (
    <div className="card">
      <div className="card-head">
        <h3>Hojas de ruta personalizadas · generadas automáticamente</h3>
        <span className="chip success">418 activas</span>
      </div>
      <div className="card-body" style={{ padding: 0 }}>
        {[
          { actor: "Mercadia Logística", tipo: "Startup · Crecimiento", brechas: ["Datos y analítica", "Ciberseguridad"], recom: 6, completas: 3, ruta: "Aceleración Serie A" },
          { actor: "Bioandes Salud Digital", tipo: "Startup · Temprana", brechas: ["Cultura y talento", "Ciberseguridad", "Datos y analítica"], recom: 8, completas: 2, ruta: "Validación regulatoria" },
          { actor: "Cafetera Analytics", tipo: "Startup · Temprana", brechas: ["Estrategia digital", "Procesos"], recom: 5, completas: 1, ruta: "Validación de mercado rural" },
          { actor: "Tunja Agritech", tipo: "MiPyme", brechas: ["Tecnología", "Ciberseguridad", "Estrategia"], recom: 7, completas: 0, ruta: "Adopción digital MiPyme" },
        ].map((r, i) => (
          <div key={i} style={{ padding: 14, borderBottom: "1px solid var(--c-line-2)", display: "grid", gridTemplateColumns: "1fr 200px 280px 100px 120px", gap: 16, alignItems: "center" }}>
            <div>
              <div style={{ fontWeight: 600, fontSize: 13 }}>{r.actor}</div>
              <div style={{ fontSize: 11, color: "var(--c-ink-4)" }}>{r.tipo}</div>
            </div>
            <div>
              <div style={{ fontSize: 10, color: "var(--c-ink-5)", textTransform: "uppercase", letterSpacing: "0.06em" }}>Ruta sugerida</div>
              <div style={{ fontSize: 12 }}>{r.ruta}</div>
            </div>
            <div>
              <div style={{ fontSize: 10, color: "var(--c-ink-5)", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 3 }}>Brechas detectadas</div>
              <div style={{ display: "flex", gap: 3, flexWrap: "wrap" }}>
                {r.brechas.map(b => <span key={b} className="chip warn" style={{ fontSize: 10 }}>{b}</span>)}
              </div>
            </div>
            <div className="text-xs">
              <span className="mono">{r.completas}/{r.recom}</span> actividades
              <div className="bar" style={{ marginTop: 3 }}><div className="fill" style={{ width: `${(r.completas / r.recom) * 100}%` }}/></div>
            </div>
            <button className="btn btn-sm">Ver ruta <Icon name="chev_r" size={11}/></button>
          </div>
        ))}
      </div>
    </div>
  );
}

// ───── Tabulación IA ─────
function TabulacionIA() {
  return (
    <div className="grid-2">
      <div className="card">
        <div className="card-head">
          <h3>Resumen IA · Pregunta abierta P12</h3>
          <span className="chip info"><Icon name="spark" size={10}/> Procesado IA · 2,847 respuestas</span>
        </div>
        <div className="card-body">
          <div style={{ fontSize: 12.5, color: "var(--c-ink-3)", marginBottom: 14, padding: 12, background: "var(--c-primary-50)", borderRadius: 6, borderLeft: "3px solid var(--c-primary)" }}>
            <b>Pregunta:</b> "¿Cuál es el principal obstáculo que enfrenta su organización para avanzar en transformación digital?"
          </div>
          <div style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.06em", color: "var(--c-ink-5)", fontWeight: 600, marginBottom: 8 }}>Temas extraídos automáticamente</div>
          {[
            { tema: "Falta de presupuesto / acceso a financiación", pct: 34, sentimiento: "negativo" },
            { tema: "Brecha de talento técnico (data, IA, ciber)", pct: 27, sentimiento: "negativo" },
            { tema: "Resistencia cultural al cambio interno", pct: 18, sentimiento: "neutral" },
            { tema: "Conectividad y infraestructura regional", pct: 12, sentimiento: "negativo" },
            { tema: "Marco regulatorio poco claro", pct: 6, sentimiento: "neutral" },
            { tema: "Falta de proveedores especializados", pct: 3, sentimiento: "neutral" },
          ].map((t, i) => (
            <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 100px 60px", gap: 12, alignItems: "center", padding: "7px 0", borderBottom: "1px solid var(--c-line-2)", fontSize: 12 }}>
              <span>{t.tema}</span>
              <div className="bar"><div className="fill" style={{ width: `${t.pct * 2.5}%` }}/></div>
              <span className="mono" style={{ textAlign: "right" }}>{t.pct}%</span>
            </div>
          ))}
        </div>
      </div>
      <div className="card">
        <div className="card-head"><h3>Citas representativas (clusterizadas)</h3></div>
        <div className="card-body" style={{ padding: 0 }}>
          {[
            { tema: "Presupuesto", quote: "Tenemos clara la hoja de ruta pero no hay caja para contratar dos perfiles senior de datos en simultáneo.", actor: "MiPyme · Manufactura · Bucaramanga" },
            { tema: "Talento", quote: "Encontrar un ingeniero ML en la región es prácticamente imposible y los que hay se van rápido a Bogotá.", actor: "Startup · AgroTech · Manizales" },
            { tema: "Cultura", quote: "El equipo directivo aprobó la inversión pero el área operativa sigue usando Excel para todo y se resiste al ERP.", actor: "MiPyme · Logística · Cartagena" },
            { tema: "Conectividad", quote: "Tenemos sensores IoT pero la conectividad en finca es inestable, perdemos hasta 30% de los datos.", actor: "Cooperativa · AgriTech · Caquetá" },
          ].map((c, i) => (
            <div key={i} style={{ padding: 14, borderBottom: "1px solid var(--c-line-2)" }}>
              <span className="chip" style={{ marginBottom: 6 }}>{c.tema}</span>
              <div style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: 13, color: "var(--c-ink-2)", lineHeight: 1.45, margin: "6px 0" }}>"{c.quote}"</div>
              <div style={{ fontSize: 11, color: "var(--c-ink-4)" }}>{c.actor}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

window.Diagnosticos = Diagnosticos;