// OrchestAI — pages: Projects, Wiki, DataRoom, Research

// ---------- Projects ----------
function PageProjects({ t, lang, onOpen, onNew }) {
  const db = useDB();
  const [filter, setFilter] = React.useState("all");
  const [q, setQ] = React.useState("");

  const projects = db.projects.filter(p =>
    (filter === "all" || p.status === filter) &&
    (q === "" || p.name.toLowerCase().includes(q.toLowerCase()) || p.code.toLowerCase().includes(q.toLowerCase()))
  );
  const statuses = ["all","draft","running","review","delivered","archived"];

  return (
    <div>
      <div className="page-header">
        <div className="oai-row">
          <div style={{ flex: 1 }}>
            <h1>{t("projects_title")}</h1>
            <p>{t("projects_sub")}</p>
          </div>
          <Button kind="accent" icon={Icon.plus} onClick={onNew}>{t("nav_new")}</Button>
        </div>
      </div>

      <div className="oai-row" style={{ marginBottom: 18 }}>
        <div style={{ position: "relative", flex: 1, maxWidth: 420 }}>
          <Icon.search style={{ position: "absolute", left: 12, top: 10, width: 16, height: 16, color: "var(--oai-ink-3)" }}/>
          <Input placeholder="Buscar proyecto…" value={q} onChange={e => setQ(e.target.value)} style={{ paddingLeft: 36 }}/>
        </div>
        <Segmented value={filter} onChange={setFilter}
          options={statuses.map(s => ({ value: s, label: s === "all" ? t("all") : t("status." + s) }))}
        />
      </div>

      {projects.length === 0 ? (
        <EmptyState
          icon={Icon.chart}
          title={q ? "Sin resultados" : t("empty_projects")}
          sub={q ? "Intente con otro término de búsqueda." : t("empty_projects_sub")}
          action={!q && <Button kind="accent" icon={Icon.plus} onClick={onNew}>{t("nav_new")}</Button>}
        />
      ) : (
        <div className="project-grid">
          {projects.map(p => (
            <div key={p.id} className="project-card" onClick={() => onOpen && onOpen(p.id)}>
              <div className="oai-row">
                <div className="project-card__code">{p.code}</div>
                <div className="grow"/>
                <Pill tone={p.status === "running" ? "amber" : p.status === "delivered" ? "lime" : p.status === "review" ? "cobalt" : "neutral"}>
                  {t("status." + p.status)}
                </Pill>
              </div>
              <div>
                <div className="project-card__name">{p.name}</div>
                <div className="oai-row" style={{ marginTop: 6, gap: 4, color: "var(--oai-ink-3)", fontSize: 12 }}>
                  <span>{t("sectors." + p.sector)}</span>
                  <span>·</span>
                  <span>{p.country}</span>
                  <span>·</span>
                  <span>{t("mandates." + p.mandate)}</span>
                </div>
              </div>
              <div className="project-card__meta">
                {(p.methods || []).slice(0, 4).map(m => (
                  <Pill key={m}>{t("methods." + m).split(" ")[0].replace(/[()]/g,"")}</Pill>
                ))}
                {(p.methods || []).length > 4 && <Pill>+{p.methods.length - 4}</Pill>}
              </div>
              <div>
                <div className="project-card__progress"><div style={{ width: (p.progress || 0) + "%" }}/></div>
                <div className="oai-row" style={{ marginTop: 6, fontSize: 11, color: "var(--oai-ink-3)" }}>
                  <span className="mono">{p.progress || 0}%</span>
                  <span className="grow"/>
                  <span>{lang === "es" ? p.updated : p.updated_en}</span>
                </div>
              </div>
              <div className="project-card__row">
                <div>
                  <div className="project-card__ev-label">{t("ev")}</div>
                  <div className="project-card__ev">{p.ev_low ? `${p.currency} ${p.ev_low}–${p.ev_high}M` : "—"}</div>
                </div>
                <div className="oai-row" style={{ gap: 10, fontSize: 11, color: "var(--oai-ink-3)" }}>
                  <span className="mono"><Icon.doc style={{ width: 11, height: 11, verticalAlign: "-1px" }}/> {p.docs || 0}</span>
                  <span className="mono"><Icon.book style={{ width: 11, height: 11, verticalAlign: "-1px" }}/> {p.wiki_entries || 0}</span>
                  <Avatar initials={p.lead || "?"} size={24}/>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

// ---------- Wiki ----------
function PageWiki({ t, lang, auth }) {
  const db = useDB();
  const [view, setView] = React.useState("pages");
  const [type, setType] = React.useState("all");
  const [q, setQ] = React.useState("");
  const [showForm, setShowForm] = React.useState(false);
  const [form, setForm] = React.useState({ type: "method", title: "", summary: "", tags: "" });

  const entries = db.wikiEntries.filter(e =>
    (type === "all" || e.type === type) &&
    (q === "" || e.title.toLowerCase().includes(q.toLowerCase()) || (e.summary || "").toLowerCase().includes(q.toLowerCase()))
  );
  const counts = db.wikiEntries.reduce((a, e) => { a[e.type] = (a[e.type] || 0) + 1; return a; }, {});
  const types = Object.keys(t("wiki_types"));

  const saveEntry = () => {
    if (!form.title.trim()) return;
    window.DB.addWikiEntry({
      ...form,
      tags: form.tags.split(",").map(s => s.trim()).filter(Boolean)
    }, auth);
    setForm({ type: "method", title: "", summary: "", tags: "" });
    setShowForm(false);
  };

  return (
    <div>
      <div className="page-header">
        <div className="oai-row">
          <div style={{ flex: 1 }}>
            <h1>{t("wiki_title")}</h1>
            <p>{t("wiki_sub")}</p>
          </div>
          <Segmented value={view} onChange={setView} options={[
            { value: "pages", label: t("wiki_pages"), icon: Icon.book },
            { value: "graph", label: t("wiki_graph"), icon: Icon.graph }
          ]}/>
          <Button kind="accent" icon={Icon.plus} onClick={() => setShowForm(v => !v)}>{t("wiki_new")}</Button>
        </div>
      </div>

      {showForm && (
        <Card style={{ marginBottom: 20 }}>
          <h3 style={{ marginBottom: 14 }}>{t("wiki_new_entry")}</h3>
          <div className="oai-grid" style={{ gridTemplateColumns: "1fr 3fr", gap: 12 }}>
            <Field label={t("type_label")}>
              <Select value={form.type} onChange={e => setForm({ ...form, type: e.target.value })}>
                {types.map(k => <option key={k} value={k}>{t("wiki_types." + k)}</option>)}
              </Select>
            </Field>
            <Field label={t("title_label")}>
              <Input placeholder={t("title_ph")} value={form.title} onChange={e => setForm({ ...form, title: e.target.value })} />
            </Field>
          </div>
          <Field label={t("summary_label")} style={{ marginTop: 12 }}>
            <Textarea placeholder={t("summary_ph")} value={form.summary} onChange={e => setForm({ ...form, summary: e.target.value })} />
          </Field>
          <Field label={t("tags_label")}>
            <Input placeholder={t("tags_ph")} value={form.tags} onChange={e => setForm({ ...form, tags: e.target.value })} />
          </Field>
          <div className="oai-row" style={{ justifyContent: "flex-end", marginTop: 12, gap: 8 }}>
            <Button kind="ghost" onClick={() => setShowForm(false)}>{t("cancel")}</Button>
            <Button kind="accent" icon={Icon.check} onClick={saveEntry}>{t("save")}</Button>
          </div>
        </Card>
      )}

      <div style={{ position: "relative", marginBottom: 20 }}>
        <Icon.search style={{ position: "absolute", left: 14, top: 12, width: 18, height: 18, color: "var(--oai-ink-3)" }}/>
        <Input
          placeholder={t("wiki_search_ph")}
          value={q}
          onChange={e => setQ(e.target.value)}
          style={{ paddingLeft: 44, height: 44, fontSize: 14 }}
        />
        <span style={{ position: "absolute", right: 14, top: 13, fontSize: 11, color: "var(--oai-ink-3)", fontFamily: "var(--oai-font-mono)" }}>⌘K</span>
      </div>

      {view === "pages" ? (
        db.wikiEntries.length === 0 ? (
          <EmptyState
            icon={Icon.book}
            title={t("empty_wiki")}
            sub={t("empty_wiki_sub")}
            action={<Button kind="accent" icon={Icon.plus} onClick={() => setShowForm(true)}>{t("wiki_new")}</Button>}
          />
        ) : (
          <div className="wiki-layout">
            <div>
              <div className="oai-nav-section__title">Tipos</div>
              <div className="wiki-filters">
                <div className={classNames("wiki-filter-item", type === "all" && "is-on")} onClick={() => setType("all")}>
                  <Icon.dot style={{ width: 8, height: 8 }}/><span>{t("pages_all")}</span>
                  <span className="wiki-filter-item__count">{db.wikiEntries.length}</span>
                </div>
                {types.map(k => (
                  <div key={k} className={classNames("wiki-filter-item", type === k && "is-on")} onClick={() => setType(k)}>
                    <Icon.dot style={{ width: 8, height: 8 }}/><span>{t("wiki_types." + k)}</span>
                    <span className="wiki-filter-item__count">{counts[k] || 0}</span>
                  </div>
                ))}
              </div>
            </div>
            <div>
              {entries.length === 0 ? (
                <EmptyState icon={Icon.search} title="Sin resultados" sub="Pruebe con otro término o tipo."/>
              ) : entries.map(e => (
                <div key={e.id} className="wiki-entry">
                  <div className="wiki-entry__type" data-t={e.type}>{t("wiki_types." + e.type)}</div>
                  <div>
                    <div className="wiki-entry__title">{e.title}</div>
                    <div className="wiki-entry__summary">{e.summary}</div>
                    {e.tags && e.tags.length > 0 && (
                      <div className="wiki-entry__tags">
                        {e.tags.map(tag => <span key={tag} className="wiki-tag">#{tag}</span>)}
                      </div>
                    )}
                  </div>
                  <div className="wiki-entry__right">
                    <div className="wiki-entry__meta">{e.updated}</div>
                    <div className="wiki-entry__meta" style={{ marginTop: 4 }}>{e.backlinks} {t("backlinks").toLowerCase()}</div>
                    <div className="oai-row" style={{ marginTop: 6, justifyContent: "flex-end", gap: 4 }}>
                      <button className="oai-btn oai-btn--ghost oai-btn--sm" onClick={() => window.DB.deleteWikiEntry(e.id)}>
                        <Icon.trash className="oai-btn__icon"/>
                      </button>
                      <Avatar initials={e.author === "system" ? "AI" : (e.author || "?")} size={22}/>
                    </div>
                  </div>
                </div>
              ))}
            </div>
            <div>
              {db.wikiSuggestions.length > 0 && (
                <>
                  <div className="oai-row" style={{ marginBottom: 10 }}>
                    <Icon.sparkle style={{ width: 16, height: 16, color: "var(--oai-accent-ink)" }}/>
                    <h4>{t("knowledge_suggested")}</h4>
                  </div>
                  <div className="suggestions-list">
                    {db.wikiSuggestions.map(s => (
                      <div key={s.id} className="suggestion-card">
                        <div className="suggestion-card__title">{s.title}</div>
                        <div className="suggestion-card__reason">{s.reason}</div>
                        <div className="suggestion-card__actions">
                          <Button kind="accent" size="sm" icon={Icon.check}>{t("accept")}</Button>
                          <Button kind="ghost" size="sm">{t("reject")}</Button>
                        </div>
                      </div>
                    ))}
                  </div>
                </>
              )}
            </div>
          </div>
        )
      ) : (
        <WikiGraph t={t} entries={db.wikiEntries} />
      )}
    </div>
  );
}

function WikiGraph({ t, entries }) {
  if (entries.length === 0) {
    return <EmptyState icon={Icon.graph} title="Grafo vacío" sub="Cree entradas de wiki para ver las conexiones entre proyectos y metodologías." />;
  }
  const w = 1200, h = 520, cx = w / 2, cy = h / 2;
  const typeRing = { method: 160, case: 90, comparable: 220, assumption: 140, lesson: 240, source: 280, glossary: 110 };
  const nodes = entries.map((e, i) => {
    const angle = (i / entries.length) * Math.PI * 2;
    const r = typeRing[e.type] || 180;
    return { ...e, x: cx + Math.cos(angle) * r, y: cy + Math.sin(angle) * r };
  });
  const edges = [];
  for (let i = 0; i < nodes.length; i++) {
    for (let j = i + 1; j < nodes.length; j++) {
      const shared = (nodes[i].linkedProjects || []).filter(p => (nodes[j].linkedProjects || []).includes(p));
      if (shared.length > 0) edges.push([nodes[i], nodes[j], shared.length]);
    }
  }
  const typeColor = { method: "var(--oai-accent)", case: "var(--oai-cobalt)", comparable: "var(--oai-violet)", assumption: "var(--oai-amber)", lesson: "var(--oai-coral)", source: "var(--oai-ink-3)", glossary: "var(--oai-ink-2)" };
  return (
    <Card>
      <div className="chart-title">
        <h3>{t("knowledge_graph")}</h3>
        <span className="mono muted" style={{ fontSize: 11 }}>{nodes.length} {t("nodes_label")} · {edges.length} {t("connections_label")}</span>
      </div>
      <svg viewBox={`0 0 ${w} ${h}`} className="graph-svg" style={{ height: 520 }}>
        {edges.map(([a,b,w], i) => (
          <line key={i} x1={a.x} y1={a.y} x2={b.x} y2={b.y} className="edge" strokeWidth={Math.min(3, w * 0.8)} opacity={Math.min(0.8, 0.2 + w * 0.2)}/>
        ))}
        {nodes.map(n => (
          <g key={n.id} className="node" transform={`translate(${n.x},${n.y})`}>
            <circle r={10 + Math.sqrt(n.backlinks || 1) * 2.5} fill={typeColor[n.type]} opacity="0.92"/>
            <text y="4" style={{ fontSize: 10, fill: "white", fontWeight: 600, textAnchor: "middle" }}>{n.backlinks || 0}</text>
            <text y={18 + Math.sqrt(n.backlinks || 1) * 2.5} fill="var(--oai-ink-2)" fontSize="10.5" textAnchor="middle">
              {n.title.length > 24 ? n.title.slice(0,22) + "…" : n.title}
            </text>
          </g>
        ))}
      </svg>
    </Card>
  );
}

// ---------- Data Room ----------
function PageDataRoom({ t, lang, auth }) {
  const db = useDB();
  const [cat, setCat] = React.useState("all");
  const [dragOver, setDragOver] = React.useState(false);
  const [chat, setChat] = React.useState([]);
  const [msg, setMsg] = React.useState("");
  const [sending, setSending] = React.useState(false);

  const cats = Object.keys(t("dr_categories"));
  const docs = cat === "all" ? db.docs : db.docs.filter(d => d.cat === cat);
  const counts = db.docs.reduce((a, d) => { a[d.cat] = (a[d.cat] || 0) + 1; return a; }, {});

  const onDrop = (e) => {
    e.preventDefault(); setDragOver(false);
    const list = Array.from(e.dataTransfer?.files || e.target?.files || []);
    list.forEach(f => {
      const ext = (f.name.split(".").pop() || "").toLowerCase();
      window.DB.addDoc({ name: f.name, size: (f.size / 1e6).toFixed(1) + " MB", ext, cat: "financials" });
    });
  };

  const send = async () => {
    if (!msg.trim() || sending) return;
    const text = msg; setMsg("");
    setSending(true);
    const nextChat = [...chat, { role: "user", text }];
    setChat(nextChat);
    try {
      const system = `Sos un analista financiero senior con acceso al Data Room del proyecto.
Documentos disponibles (metadata):
${db.docs.length > 0
  ? db.docs.map(d => `- ${d.name} (categoría: ${d.cat}, tamaño: ${d.size})`).join("\n")
  : "Sin documentos cargados aún."}

Respondé preguntas sobre los documentos, análisis financiero, due diligence y valuación.
Si preguntás sobre el contenido específico de un documento que no tenés disponible, decilo explícitamente.
Sé conciso y preciso. Respondé en español.`;

      const messages = nextChat.map(m => ({
        role: m.role === "user" ? "user" : "assistant",
        content: m.text,
      }));

      const reply = await window.callAI(system, messages, 600, "claude-haiku-4-5-20251001");
      setChat(prev => [...prev, { role: "assistant", text: reply }]);
    } catch (e) {
      setChat(prev => [...prev, { role: "assistant", text: "Error: " + e.message }]);
    }
    setSending(false);
  };

  return (
    <div>
      <div className="page-header">
        <div className="oai-row">
          <div style={{ flex: 1 }}>
            <h1>{t("dataroom_title")}</h1>
            <p>{t("dataroom_sub")}</p>
          </div>
          <div
            onDragOver={e => { e.preventDefault(); setDragOver(true); }}
            onDragLeave={() => setDragOver(false)}
            onDrop={onDrop}
          >
            <Button kind="outline" icon={Icon.upload} onClick={() => document.getElementById("dr-file-input")?.click()}>
              {t("upload_btn")}
            </Button>
          </div>
          <input id="dr-file-input" type="file" multiple style={{ display: "none" }}
            onChange={e => onDrop({ dataTransfer: { files: e.target.files } })} />
        </div>
      </div>

      <div className="dr-layout">
        <div>
          <div className="oai-nav-section__title">Categorías</div>
          <div className="dr-cat-list">
            <div className={classNames("dr-cat", cat === "all" && "is-on")} onClick={() => setCat("all")}>
              <span className="dr-cat__dot"/><span>{t("all_cats")}</span>
              <span className="dr-cat__count">{db.docs.length}</span>
            </div>
            {cats.map(k => (
              <div key={k} className={classNames("dr-cat", cat === k && "is-on")} onClick={() => setCat(k)}>
                <span className="dr-cat__dot"/><span>{t("dr_categories." + k)}</span>
                <span className="dr-cat__count">{counts[k] || 0}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="oai-grid" style={{ gridTemplateColumns: "1.2fr 1fr", gap: 20 }}>
          <div>
            {docs.length === 0 ? (
              <EmptyState
                icon={Icon.folder}
                title={t("empty_docs")}
                sub={t("empty_docs_sub")}
                action={
                  <Button kind="outline" icon={Icon.upload} onClick={() => document.getElementById("dr-file-input")?.click()}>
                    Subir documentos
                  </Button>
                }
              />
            ) : (
              <>
                <div className="oai-row" style={{ marginBottom: 10 }}>
                  <span className="muted" style={{ fontSize: 12 }}>{docs.length} documentos</span>
                  <div className="grow"/>
                  <Segmented value="newest" onChange={() => {}} options={[
                    { value: "newest", label: t("newest") },
                    { value: "az", label: t("value_az") }
                  ]}/>
                </div>
                <div className="dr-list">
                  {docs.map(d => (
                    <div key={d.id} className="file-row">
                      <div className="file-row__ext" data-ext={d.ext}>{d.ext === "audio" ? "♪" : d.ext}</div>
                      <div className="grow" style={{ minWidth: 0 }}>
                        <div className="file-row__name" style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{d.name}</div>
                        <div className="file-row__meta">{d.size} · {d.added}</div>
                      </div>
                      <Pill tone="lime" icon={Icon.check}>Indexado</Pill>
                      <button className="oai-btn oai-btn--ghost oai-btn--sm" onClick={() => window.DB.deleteDoc(d.id)}>
                        <Icon.trash className="oai-btn__icon"/>
                      </button>
                    </div>
                  ))}
                </div>
              </>
            )}
          </div>

          <Card style={{ display: "flex", flexDirection: "column", height: 560 }}>
            <div className="oai-row" style={{ marginBottom: 8 }}>
              <h3 style={{ flex: 1 }}>{t("chat_title")}</h3>
              <Pill tone={db.docs.length > 0 ? "lime" : "neutral"} icon={Icon.ai}>RAG {db.docs.length > 0 ? "on" : "off"}</Pill>
            </div>
            <div className="chat-container" style={{ flex: 1, minHeight: 0 }}>
              <div className="chat-msgs">
                {chat.length === 0 && (
                  <div style={{ textAlign: "center", padding: "30px 0", color: "var(--oai-ink-3)", fontSize: 13 }}>
                    {db.docs.length === 0
                      ? "Suba documentos para habilitar el chat con el data room."
                      : "Consulte sobre los documentos del proyecto."
                    }
                  </div>
                )}
                {chat.map((m, i) => m.role === "user" ? (
                  <div key={i} className="msg-user">{m.text}</div>
                ) : (
                  <div key={i} className="msg-bot">{m.text}</div>
                ))}
                {sending && <div className="msg-bot" style={{ opacity: 0.5 }}>{t("analyzing")}</div>}
              </div>
              <div className="chat-input">
                <div className="chat-input__wrap">
                  <Input
                    placeholder={t("chat_ph")}
                    value={msg}
                    onChange={e => setMsg(e.target.value)}
                    onKeyDown={e => e.key === "Enter" && send()}
                    disabled={db.docs.length === 0}
                  />
                  <button className="chat-input__send" onClick={send} disabled={!msg.trim() || sending}>
                    <Icon.send style={{ width: 14, height: 14 }}/>
                  </button>
                </div>
              </div>
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
}

// ---------- Research ----------
function PageResearch({ t }) {
  const [query, setQuery] = React.useState("");
  const [steps, setSteps] = React.useState([]);
  const [running, setRunning] = React.useState(false);

  const runResearch = async () => {
    if (!query.trim() || running) return;
    setRunning(true);
    setSteps([]);
    try {
      const system = `Sos un analista de research financiero senior especializado en mercados latinoamericanos.
Ejecutás investigaciones estructuradas usando el método Plan→Act→Observe.
Respondés ÚNICAMENTE con JSON válido, sin texto adicional, sin markdown, sin bloques de código.`;

      const userMsg = `Query de investigación: ${query}

Generá un análisis estructurado completo. Devolvé SOLO este JSON:
{
  "plan": "descripción detallada del plan: qué se investiga, fuentes relevantes (Bloomberg, Merval, BCRA, informes sectoriales), hipótesis de trabajo",
  "act": "análisis sustantivo de 3-5 párrafos: datos clave del sector/empresa, benchmarks comparables, tendencias macroeconómicas relevantes, múltiplos de mercado, riesgos identificados",
  "observe": "hallazgos principales (3-5 bullets), conclusiones accionables y recomendaciones concretas para documentar en la wiki del proyecto"
}`;

      const text = await window.callAI(system, [{ role: "user", content: userMsg }], 1800, "claude-sonnet-4-6");
      const clean = text.replace(/```json\n?|\n?```/g, "").trim();
      const json = JSON.parse(clean);

      const steps = [
        { n: 1, title: "PLAN",    text: json.plan    || "" },
        { n: 2, title: "ACT",     text: json.act     || "" },
        { n: 3, title: "OBSERVE", text: json.observe || "" },
      ];
      steps.forEach((s, i) => {
        setTimeout(() => setSteps(prev => [...prev, s]), i * 150);
      });
    } catch (e) {
      setSteps([{ n: 1, title: "ERROR", text: "Error: " + e.message }]);
    }
    setRunning(false);
  };

  return (
    <div>
      <div className="page-header">
        <div className="oai-row">
          <div style={{ flex: 1 }}>
            <h1>{t("research_title")}</h1>
            <p>{t("research_sub")}</p>
          </div>
          <Pill tone="cobalt" icon={Icon.globe}>{t("plan_act_observe")}</Pill>
        </div>
      </div>

      <Card style={{ marginBottom: 20 }}>
        <h3 style={{ marginBottom: 12 }}>{t("new_research")}</h3>
        <div className="oai-row" style={{ gap: 10 }}>
          <div style={{ flex: 1 }}>
            <Textarea
              placeholder={t("research_query_ph")}
              value={query}
              onChange={e => setQuery(e.target.value)}
              style={{ minHeight: 64 }}
            />
          </div>
          <Button kind="accent" size="lg" icon={Icon.bolt} onClick={runResearch} disabled={!query.trim() || running}>
            {running ? "Investigando…" : "Investigar"}
          </Button>
        </div>
        <div className="oai-row" style={{ marginTop: 10, gap: 6, flexWrap: "wrap" }}>
          <span className="muted" style={{ fontSize: 11.5, marginRight: 4 }}>{t("tools_label")}:</span>
          {["search","scrape","crawl","map","extract","interact","bashExec"].map(k => <Pill key={k}>{k}</Pill>)}
        </div>
      </Card>

      {steps.length > 0 && (
        <Card>
          <h3 style={{ marginBottom: 12 }}>{t("execution_log")}</h3>
          <div className="oai-col" style={{ gap: 8 }}>
            {steps.map(s => (
              <div key={s.n} className="research-step">
                <div className="research-step__num">{s.n}</div>
                <div>
                  <div style={{
                    fontFamily: "var(--oai-font-mono)", fontSize: 11, fontWeight: 600,
                    color: s.title === "PLAN" ? "var(--oai-cobalt)" : s.title === "ACT" ? "var(--oai-accent-ink)" : "var(--oai-coral)",
                    marginBottom: 2
                  }}>{s.title}</div>
                  <div style={{ color: "var(--oai-ink-2)" }}>{s.text}</div>
                </div>
              </div>
            ))}
            {running && (
              <div className="research-step" style={{ opacity: 0.5 }}>
                <div className="research-step__num" style={{ background: "var(--oai-ink-3)" }}>…</div>
                <div style={{ color: "var(--oai-ink-3)" }}>Ejecutando…</div>
              </div>
            )}
          </div>
        </Card>
      )}

      {steps.length === 0 && !running && (
        <EmptyState
          icon={Icon.globe}
          title="Sin investigaciones recientes"
          sub="Escriba una consulta de investigación y el agente ejecutará búsquedas web estructuradas."
        />
      )}
    </div>
  );
}

window.PageProjects  = PageProjects;
window.PageWiki      = PageWiki;
window.PageDataRoom  = PageDataRoom;
window.PageResearch  = PageResearch;