// ESTÚDIO — Páginas C: Repertório, Experiências, Conhecimento, Biblioteca, Parcerias, Aprendizados
(function () {
  const { useState } = React;
  const D = window.DATA;
  const { PlatRow, PlatIcon, PerfilTag, Chip, PageHead, Card, fmtData } = window.UI;
  const h = React.createElement;
  function cont(id) { return D.conteudos.find((c) => c.id === id); }

  // ══════════════════ REPERTÓRIO ══════════════════
  function Repertorio() {
    const [fTipo, setFTipo] = useState("todos");
    const [q, setQ] = useState("");
    const tipos = [...new Set(D.repertorio.map((r) => r.tipo))];
    const icons = { vídeo: "▶", frase: "❝", print: "▢", anúncio: "◪", pesquisa: "✎", case: "★", livro: "📖" };
    const lista = D.repertorio
      .filter((r) => fTipo === "todos" || r.tipo === fTipo)
      .filter((r) => { const s = q.toLowerCase(); return !q || r.titulo.toLowerCase().includes(s) || (r.origem || "").toLowerCase().includes(s) || r.tags.some((t) => t.includes(s)); });
    return h("div", { className: "page" },
      h(PageHead, { titulo: "Repertório", sub: "Você não cria do zero — você coleta. Cada item pode virar conteúdo." }),
      h("div", { className: "cal-filters" },
        h("input", { className: "search", placeholder: "Buscar por título ou tag…", value: q, onChange: (e) => setQ(e.target.value) }),
        h(Chip, { active: fTipo === "todos", onClick: () => setFTipo("todos") }, "Todos"),
        tipos.map((t) => h(Chip, { key: t, active: fTipo === t, onClick: () => setFTipo(t) }, t))
      ),
      h("div", { className: "rep-grid" }, lista.map((r) => h(Card, { key: r.id, className: "rep-card" },
        h("div", { className: "rep-ic" }, icons[r.tipo] || "❖"),
        h("div", { className: "rep-body" },
          h("div", { className: "rep-title" }, r.titulo),
          h("div", { className: "rep-meta" }, h("span", { className: "rep-tipo" }, r.tipo), " · ", r.origem, " · ", h("span", { className: "rep-tema" }, r.tema)),
          r.nota && h("div", { className: "rep-nota" }, r.nota),
          h("div", { className: "rep-tags" }, r.tags.map((t) => h("span", { key: t, className: "tag" }, "#" + t)), h(PerfilTag, { id: r.perfil, dot: true })),
          h("div", { className: r.vira ? "rep-vira on" : "rep-vira" }, r.vira ? "✓ pode virar conteúdo" : "só referência")
        )
      )))
    );
  }

  // ══════════════════ EXPERIÊNCIAS ══════════════════
  function Experiencias() {
    return h("div", { className: "page" },
      h(PageHead, { titulo: "Experiências", sub: "Você vive situações diariamente — e elas geram conteúdo." }),
      h("div", { className: "exp-list" }, D.experiencias.map((e) => {
        const c = e.conteudo && cont(e.conteudo);
        return h(Card, { key: e.id, className: "exp-card" },
          h("div", { className: "exp-head" }, h("h3", { className: "exp-title" }, "✦ " + e.titulo), h("span", { className: "exp-date" }, fmtData(e.quando))),
          h("div", { className: "exp-meta" }, h("span", null, "📍 " + e.onde), h("span", null, "👥 " + e.pessoas), h("span", { className: "exp-emo" }, "♥ " + e.emocao)),
          h("div", { className: "exp-learn" }, h("b", null, "Aprendizado: "), e.aprendizado),
          h("div", { className: "exp-foot" }, e.virou
            ? h("span", { className: "exp-virou on" }, "→ virou conteúdo: " + (c ? c.titulo : ""))
            : h("span", { className: "exp-virou" }, "ainda não virou conteúdo"))
        );
      }))
    );
  }

  // ══════════════════ CONHECIMENTO ══════════════════
  function Conhecimento() {
    const cor = { lido: "#7FB68C", "em andamento": "#E89B4C" };
    return h("div", { className: "page" },
      h(PageHead, { titulo: "Conhecimento", sub: "Livros, cursos e pesquisas — cada aprendizado pode gerar insights e conteúdos." }),
      h("div", { className: "know-grid" }, D.conhecimento.map((k) => h(Card, { key: k.id, className: "know-card" },
        h("div", { className: "know-top" }, h("span", { className: "know-tipo" }, k.tipo), h("span", { className: "status-pill", style: { background: cor[k.status] + "22", color: cor[k.status] } }, k.status)),
        h("h3", { className: "know-title" }, k.titulo),
        h("div", { className: "know-sec" }, h("b", null, "Insights"), h("ul", { className: "vlist" }, k.insights.map((i, x) => h("li", { key: x }, i)))),
        k.gerou.length > 0 && h("div", { className: "know-gerou" }, "gerou " + k.gerou.length + " item(ns) no sistema")
      )))
    );
  }

  // ══════════════════ BIBLIOTECA ══════════════════
  function Biblioteca() {
    const [aba, setAba] = useState("ganchos");
    const abas = [["ganchos", "Ganchos & CTAs"], ["assets", "Assets & templates"], ["materia", "Matéria-prima"]];
    const stCor = { "aguardando edição": "#E89B4C", "em edição": "#A89AC9", finalizado: "#7FB68C" };
    return h("div", { className: "page" },
      h(PageHead, { titulo: "Biblioteca", sub: "Ganchos que funcionaram, assets reutilizáveis e o rastreio de matéria-prima." }),
      h("div", { className: "seg" }, abas.map(([k, l]) => h("button", { key: k, className: "seg-btn" + (aba === k ? " seg-on" : ""), onClick: () => setAba(k) }, l))),
      aba === "ganchos" && h("div", { className: "gancho-list" }, D.ganchos.map((g) => h(Card, { key: g.id, className: "gancho-card" },
        h("div", { className: "gancho-txt" }, "“" + g.texto + "”"),
        h("div", { className: "gancho-meta" }, h(PerfilTag, { id: g.perfil, dot: true }), h(PlatRow, { plats: [g.plat], size: 16 }), h("span", { className: "gancho-nota" }, g.nota))
      ))),
      aba === "assets" && h("div", { className: "rep-grid" }, D.assets.map((a) => h(Card, { key: a.id, className: "asset-card" },
        h("div", { className: "asset-tipo" }, a.tipo),
        h("div", { className: "asset-title" }, a.titulo),
        h("div", { className: "asset-meta" }, h(PerfilTag, { id: a.perfil, dot: true }), h(PlatRow, { plats: [a.plat], size: 16 }))
      ))),
      aba === "materia" && h("div", { className: "mp-list" }, D.materiaPrima.map((m) => h(Card, { key: m.id, className: "mp-card" },
        h("div", { className: "mp-date" }, fmtData(m.data)),
        h("div", { className: "mp-body" }, h("b", null, m.qtd + " itens gravados"), h(PerfilTag, { id: m.perfil, dot: true })),
        h("span", { className: "status-pill", style: { background: stCor[m.status] + "22", color: stCor[m.status] } }, m.status)
      )))
    );
  }

  // ══════════════════ PARCERIAS ══════════════════
  function Parcerias() {
    const cor = { negociação: "#E89B4C", ativa: "#7FB68C", encerrada: "#C0BEBC" };
    const ordem = ["ativa", "negociação", "encerrada"];
    return h("div", { className: "page" },
      h(PageHead, { titulo: "Parcerias", sub: "Colaborações com terceiros — diferente de collab entre os perfis próprios." }),
      h("div", { className: "parc-list" }, [...D.parcerias].sort((a, b) => ordem.indexOf(a.status) - ordem.indexOf(b.status)).map((p) => h(Card, { key: p.id, className: "parc-card" },
        h("div", { className: "parc-left" },
          h("div", { className: "parc-nome" }, p.nome),
          h("div", { className: "parc-nota" }, p.nota),
          h("div", { className: "parc-brief" }, "desde " + p.desde + " · " + p.briefings.length + " briefing(s)")
        ),
        h("span", { className: "status-pill big", style: { background: cor[p.status] + "22", color: cor[p.status] } }, p.status)
      )))
    );
  }

  // ══════════════════ APRENDIZADOS ══════════════════
  function Aprendizados() {
    return h("div", { className: "page" },
      h(PageHead, { titulo: "Aprendizados", sub: "O que funcionou e o que evitar. Campo de métricas reservado para o futuro." }),
      h("div", { className: "learn-list" }, D.aprendizados.map((l) => {
        const c = cont(l.conteudo);
        return h(Card, { key: l.id, className: "learn-card" },
          h("div", { className: "learn-head" }, c && h(PerfilTag, { id: c.perfis[0], dot: true }), h("h3", null, c ? c.titulo : "")),
          h("div", { className: "learn-grid" },
            h("div", { className: "learn-cell good" }, h("b", null, "✓ Funcionou"), h("p", null, l.funcionou)),
            h("div", { className: "learn-cell bad" }, h("b", null, "✕ Não funcionou"), h("p", null, l.naoFuncionou)),
            h("div", { className: "learn-cell rep" }, h("b", null, "↻ Repetir"), h("p", null, l.repetir)),
            h("div", { className: "learn-cell avoid" }, h("b", null, "⃠ Evitar"), h("p", null, l.evitar))
          ),
          h("div", { className: "learn-metrics" }, "Métricas numéricas — reservado (populado quando o módulo de métricas existir)")
        );
      }))
    );
  }

  Object.assign(window, { Repertorio, Experiencias, Conhecimento, Biblioteca, Parcerias, Aprendizados });
})();