// CENTRAL DA MARCA — Mariana Cabral · Aprovar Ideias + Aprovar Designs.
// SELECIONAR (lista de interesse) ≠ APROVAR IDEIA (autoriza produção) ≠ APROVAR DESIGN (autoriza agendar/publicar).
// Exporta window.MC_Ideias e window.MC_Design
(function () {
  const { useState } = React;
  const h = React.createElement;
  const D = window.MC_DATA;
  const S = window.MC_STORE;
  const { PageHead, StatusPill, Modal } = window.MC_UI;

  const MESES = ["Julho/2026", "Agosto/2026", "Setembro/2026", "Outubro/2026"];
  const AJUSTE_SUGESTOES = ["Alterar o título", "Mudar o formato", "Tornar mais profundo", "Tornar mais prático", "Evitar determinado termo", "Relacionar com o Clube", "Usar outro exemplo", "Transformar em vídeo", "Transformar em carrossel"];

  const inGroup = {
    analise: (s) => ["Nova sugestão", "Em análise"].includes(s),
    producao: (s) => ["Aprovada para produção", "Em roteiro", "Em design", "Em edição"].includes(s),
  };

  // ════════ IDEIA — TAGS ════════
  function ideaTags(i) {
    return h(React.Fragment, null,
      h("span", { className: "tag pilar" }, i.pilar),
      h("span", { className: "tag" }, i.formato),
      h("span", { className: "tag" }, i.objetivo)
    );
  }

  // ════════ MODAL DA IDEIA ════════
  function IdeaModal({ id, onClose }) {
    const { state, actions } = S.useStore();
    const i = state.ideias.find((x) => x.id === id);
    const [ajuste, setAjuste] = useState(false);
    const [ajTexto, setAjTexto] = useState("");
    const [ajTags, setAjTags] = useState([]);
    const [coment, setComent] = useState("");
    if (!i) return null;

    const isNova = inGroup.analise(i.status);
    const step = i.selecionada || !isNova ? 1 : 0;
    const stepIdx = { "Nova sugestão": 1, "Em análise": 1, "Aprovada para produção": 2, "Em roteiro": 2, "Em design": 2, "Em edição": 2, "Aguardando aprovação final": 3, "Ajustes solicitados": 1, "Aprovada": 4, "Agendada": 4, "Publicada": 4, "Não aprovada": 1, "Arquivada": 1 }[i.status] || 1;
    const STEPS = ["Selecionar", "Aprovar ideia", "Em produção", "Aprovar conteúdo", "Publicado"];

    function toggleAjTag(t) { setAjTags((a) => a.includes(t) ? a.filter((x) => x !== t) : a.concat(t)); }
    function enviarAjuste() {
      const txt = (ajTexto.trim() ? ajTexto.trim() : "") ;
      actions.pedirAjuste(i.id, txt, ajTags);
      setAjuste(false); setAjTexto(""); setAjTags([]);
    }

    return h(Modal, { onClose, wide: true },
      h("div", { className: "modal-tags" },
        i.selecionada && h("span", { className: "sel-flag" }, "★ Selecionada"),
        h(StatusPill, { status: i.status, big: true }),
        i.campanha && h("span", { className: "tag pilar" }, "❋ " + i.campanha)
      ),
      h("div", { className: "modal-t" }, i.titulo),
      // fluxo visual
      h("div", { className: "flow-steps" }, STEPS.map((s, idx) => h("div", { key: s, className: "flow-step" + (idx < stepIdx ? " done" : "") + (idx === stepIdx ? " now" : "") },
        h("div", { className: "flow-step-n" }, "Etapa " + (idx + 1)),
        h("div", { className: "flow-step-l" }, s)
      ))),
      i.resumo && h("div", { className: "modal-sec" }, h("div", { className: "modal-sec-l" }, "Resumo da abordagem"), h("div", { className: "modal-p" }, i.resumo)),
      i.porque && h("div", { className: "modal-sec" }, h("div", { className: "modal-sec-l" }, "Por que faz sentido para a marca"), h("div", { className: "modal-box olive" }, i.porque)),
      i.estrutura && h("div", { className: "modal-sec" }, h("div", { className: "modal-sec-l" }, "Possível estrutura"), h("div", { className: "modal-box" }, i.estrutura)),
      i.cta && h("div", { className: "modal-sec" }, h("div", { className: "modal-sec-l" }, "CTA sugerido"), h("div", { className: "modal-p" }, "“" + i.cta + "”")),

      i.comentarioMariana && h("div", { className: "modal-sec" }, h("div", { className: "modal-sec-l" }, "Seu comentário"), h("div", { className: "modal-box terra" }, i.comentarioMariana)),

      // ── AÇÕES: as três etapas separadas ──
      ajuste
        ? h("div", { className: "modal-actions" },
            h("div", { className: "modal-actions-title" }, "O que você gostaria de mudar?"),
            h("div", { className: "adj-tags" }, AJUSTE_SUGESTOES.map((t) => h("button", { key: t, className: "adj-tag" + (ajTags.includes(t) ? " on" : ""), onClick: () => toggleAjTag(t) }, t))),
            h("textarea", { className: "input area", placeholder: "Descreva o ajuste (obrigatório se nenhuma opção acima marcada)…", value: ajTexto, onChange: (e) => setAjTexto(e.target.value) }),
            h("div", { className: "mact-row", style: { marginTop: 12 } },
              h("button", { className: "btn btn-sec", onClick: () => setAjuste(false) }, "Cancelar"),
              h("button", { className: "btn btn-terra", disabled: !ajTexto.trim() && !ajTags.length, onClick: enviarAjuste }, "Enviar ajuste para a agência")
            )
          )
        : h("div", { className: "modal-actions" },
            h("div", { className: "mact-row" },
              h("button", { className: "btn btn-pri", onClick: () => { actions.aprovarIdeia(i.id); onClose(); } }, "✓ Aprovar ideia para criação"),
              h("button", { className: "btn btn-terra", onClick: () => setAjuste(true) }, "Gostei, mas quero alterar")
            ),
            h("div", { className: "mact-row" },
              h("button", { className: "btn btn-ghost", onClick: () => { actions.guardarDepois(i.id); } }, "Guardar para depois"),
              h("button", { className: "btn btn-ghost", onClick: () => { actions.naoAprovar(i.id); onClose(); } }, "Não combina comigo")
            ),
            // comentário
            h("div", { className: "mact-row", style: { marginTop: 6 } },
              h("input", { className: "input", placeholder: "Adicionar comentário para a agência…", value: coment, onChange: (e) => setComent(e.target.value) }),
              h("button", { className: "btn btn-sec", disabled: !coment.trim(), onClick: () => { actions.addComentario(i.id, coment.trim()); setComent(""); } }, "Comentar")
            )
          ),

      // histórico
      i.historico && i.historico.length > 0 && h("div", { className: "modal-sec", style: { marginTop: 22 } },
        h("div", { className: "modal-sec-l" }, "Histórico"),
        h("div", { className: "hist" }, i.historico.slice().reverse().map((hh, k) => h("div", { className: "hist-row", key: k },
          h("span", { className: "hist-when" }, new Date(hh.ts).toLocaleString("pt-BR", { day: "2-digit", month: "2-digit", hour: "2-digit", minute: "2-digit" })),
          h("span", { className: "grow" }, h("span", { className: "hist-who" }, hh.user + " · "), h("span", { className: "hist-act" }, hh.acao))
        )))
      )
    );
  }

  // ════════ CARD ════════
  function IdeaCard({ i, checked, onCheck, onOpen }) {
    const [menu, setMenu] = useState(false);
    const A = S;
    return h("div", { className: "icard" + (i.selecionada ? " sel" : "") },
      h("div", { className: "icard-top" },
        h("button", { className: "chk" + (checked ? " on" : ""), onClick: () => onCheck(i.id), title: "Selecionar em lote" }, checked ? "✓" : ""),
        h("div", { className: "icard-tags" }, i.selecionada && h("span", { className: "sel-flag" }, "★ Selecionada"), h(StatusPill, { status: i.status }))
      ),
      h("div", { className: "icard-t", onClick: onOpen, style: { cursor: "pointer" } }, i.titulo),
      h("div", { className: "icard-r" }, i.resumo),
      h("div", { className: "icard-meta" }, ideaTags(i), h("span", { className: "prio " + i.prioridade }, i.prioridade)),
      h("div", { className: "icard-foot" },
        h("button", { className: "btn btn-sel sm" + (i.selecionada ? " on" : ""), onClick: () => A.toggleSelecionar(i.id) }, i.selecionada ? "★" : "☆ Selecionar"),
        h("button", { className: "btn btn-pri sm grow", onClick: onOpen }, "Abrir e aprovar"),
        h("div", { className: "imenu-wrap" },
          h("button", { className: "imenu-btn", onClick: () => setMenu((m) => !m) }, "⋯"),
          menu && h("div", { className: "imenu", onMouseLeave: () => setMenu(false) },
            h("button", { onClick: () => { A.aprovarIdeia(i.id); setMenu(false); } }, "✓ Aprovar ideia"),
            h("button", { onClick: () => { A.definirCampanha(i.id, "Clube da Maturidade Emocional"); setMenu(false); } }, "❋ Vincular ao Clube"),
            h("div", { className: "imenu-div" }),
            h("button", { onClick: () => { A.duplicar(i.id); setMenu(false); } }, "⧉ Duplicar ideia"),
            h("button", { className: "danger", onClick: () => { A.arquivar(i.id); setMenu(false); } }, "🗑 Arquivar")
          )
        )
      )
    );
  }

  // ════════ KANBAN ════════
  const KB_COLS = [
    { id: "Em análise", nome: "A analisar", cor: "#7E7A9E", match: inGroup.analise },
    { id: "Aprovada para produção", nome: "Aprovada p/ produção", cor: "#5B613F", match: (s) => s === "Aprovada para produção" },
    { id: "Em design", nome: "Em produção", cor: "#6E8B8F", match: (s) => ["Em roteiro", "Em design", "Em edição"].includes(s) },
    { id: "Aguardando aprovação final", nome: "Aguardando design", cor: "#B5623C", match: (s) => s === "Aguardando aprovação final" },
    { id: "Agendada", nome: "Agendada", cor: "#5B7B9E", match: (s) => s === "Agendada" },
    { id: "Publicada", nome: "Publicada", cor: "#4E7A57", match: (s) => s === "Publicada" },
  ];
  function Kanban({ ideias, onOpen }) {
    const [drag, setDrag] = useState(null);
    const [over, setOver] = useState(null);
    function drop(colId) {
      if (drag) moveTo(drag, colId);
      setDrag(null); setOver(null);
    }
    function moveTo(id, colId) {
      // ações semânticas quando fazem sentido; senão, setter direto
      if (colId === "Aprovada para produção") S.aprovarIdeia(id);
      else if (colId === "Agendada") S.aprovarEAgendar(id);
      else if (colId === "Publicada") S.publicar(id);
      else S.setStatus(id, colId);
    }
    return h("div", { className: "kb" }, KB_COLS.map((col) => {
      const items = ideias.filter((i) => col.match(i.status));
      return h("div", { key: col.id, className: "kb-col" + (over === col.id ? " over" : ""),
        onDragOver: (e) => { e.preventDefault(); setOver(col.id); }, onDragLeave: () => setOver(null), onDrop: () => drop(col.id) },
        h("div", { className: "kb-col-h" }, h("span", { className: "kb-dot", style: { background: col.cor } }), col.nome, h("span", { className: "kb-count" }, items.length)),
        h("div", { className: "kb-body" },
          items.length === 0 ? h("div", { className: "kb-empty" }, "—") :
          items.map((i) => h("div", { key: i.id, className: "kb-card" + (drag === i.id ? " dragging" : ""), draggable: true,
            style: { borderLeftColor: col.cor },
            onDragStart: () => setDrag(i.id), onDragEnd: () => setDrag(null), onClick: () => onOpen(i.id) },
            h("div", { className: "kb-card-t" }, i.titulo),
            h("div", { className: "kb-card-m" }, i.selecionada && h("span", { className: "sel-flag" }, "★"), h("span", { className: "tag pilar" }, i.pilar), h("span", { className: "prio " + i.prioridade }, i.prioridade))
          ))
        )
      );
    }));
  }

  // ════════ PÁGINA APROVAR IDEIAS ════════
  const QUICK = [
    { id: "todas", nome: "Todas" },
    { id: "analisar", nome: "Para analisar" },
    { id: "selecionadas", nome: "★ Selecionadas" },
    { id: "producao", nome: "Em produção" },
    { id: "aguardando", nome: "Aguardando design" },
    { id: "ajustes", nome: "Ajustes solicitados" },
  ];

  function AprovarIdeias() {
    const { state } = S.useStore();
    const [view, setView] = useState("cards");
    const [showFilters, setShowFilters] = useState(false);
    const [quick, setQuick] = useState("todas");
    const [busca, setBusca] = useState("");
    const [fPilar, setFPilar] = useState("");
    const [fFormato, setFFormato] = useState("");
    const [fObjetivo, setFObjetivo] = useState("");
    const [fPrio, setFPrio] = useState("");
    const [checked, setChecked] = useState([]);
    const [openId, setOpenId] = useState(null);
    const [bulkCamp, setBulkCamp] = useState("Clube da Maturidade Emocional");
    const [bulkPrio, setBulkPrio] = useState("Alta");
    const [bulkMes, setBulkMes] = useState(MESES[0]);

    function matchQuick(i) {
      if (quick === "todas") return i.status !== "Arquivada";
      if (quick === "analisar") return inGroup.analise(i.status);
      if (quick === "selecionadas") return i.selecionada;
      if (quick === "producao") return inGroup.producao(i.status);
      if (quick === "aguardando") return i.status === "Aguardando aprovação final";
      if (quick === "ajustes") return i.status === "Ajustes solicitados";
      return true;
    }
    const ideias = state.ideias.filter((i) =>
      matchQuick(i) &&
      (!fPilar || i.pilar === fPilar) && (!fFormato || i.formato === fFormato) &&
      (!fObjetivo || i.objetivo === fObjetivo) && (!fPrio || i.prioridade === fPrio) &&
      (!busca || (i.titulo + i.resumo + i.pilar).toLowerCase().includes(busca.toLowerCase()))
    );

    function toggleCheck(id) { setChecked((c) => c.includes(id) ? c.filter((x) => x !== id) : c.concat(id)); }
    function clearBulk() { setChecked([]); }
    function bulk(fn) { return () => { fn(checked); clearBulk(); }; }

    return h("div", { className: "page" },
      h(PageHead, { eyebrow: "Banco de ideias", titulo: "Aprovar ideias",
        sub: "Aprovar a ideia não é aprovar o conteúdo final — são etapas separadas. Selecionar cria sua lista de interesse; aprovar a ideia autoriza a agência a produzir." }),

      (function () {
        const activeCount = (quick !== "todas" ? 1 : 0) + (fPilar ? 1 : 0) + (fFormato ? 1 : 0) + (fObjetivo ? 1 : 0) + (fPrio ? 1 : 0) + (busca ? 1 : 0);
        return h(React.Fragment, null,
          h("div", { className: "controls" },
            h("div", { className: "search" }, h("input", { placeholder: "Buscar por palavra-chave…", value: busca, onChange: (e) => setBusca(e.target.value) })),
            h("button", { className: "btn btn-sec ctrl-btn" + (showFilters ? " on" : ""), onClick: () => setShowFilters((s) => !s) },
              h("span", { className: "ctrl-ic" }, "≡"), "Filtros",
              activeCount > 0 && h("span", { className: "ctrl-badge" }, activeCount)
            ),
            h("div", { className: "vmode" },
              h("span", { className: "vmode-l" }, "Modo de visualização"),
              h("div", { className: "view-seg" }, [["cards", "▦", "Cards"], ["lista", "☰", "Lista"], ["kanban", "▤", "Kanban"]].map((v) => h("button", { key: v[0], className: view === v[0] ? "on" : "", onClick: () => setView(v[0]), title: v[2] }, h("span", { className: "view-seg-ic" }, v[1]), v[2])))
            )
          ),
          showFilters && h("div", { className: "filters-panel" },
            h("div", { className: "filters-row" },
              h("span", { className: "filters-lbl" }, "Situação"),
              h("div", { className: "qfilters" }, QUICK.map((q) => h("button", { key: q.id, className: "chip" + (quick === q.id ? " on" : ""), onClick: () => setQuick(q.id) }, q.nome)))
            ),
            h("div", { className: "filters-row" },
              h("span", { className: "filters-lbl" }, "Refinar"),
              h("div", { className: "filters-selects" },
                h("select", { className: "fsel", value: fPilar, onChange: (e) => setFPilar(e.target.value) }, h("option", { value: "" }, "Todos os pilares"), D.PILARES.map((p) => h("option", { key: p }, p))),
                h("select", { className: "fsel", value: fFormato, onChange: (e) => setFFormato(e.target.value) }, h("option", { value: "" }, "Todos os formatos"), D.FORMATOS.map((p) => h("option", { key: p }, p))),
                h("select", { className: "fsel", value: fObjetivo, onChange: (e) => setFObjetivo(e.target.value) }, h("option", { value: "" }, "Todos os objetivos"), D.OBJETIVOS.map((p) => h("option", { key: p }, p))),
                h("select", { className: "fsel", value: fPrio, onChange: (e) => setFPrio(e.target.value) }, h("option", { value: "" }, "Toda prioridade"), D.PRIORIDADES.map((p) => h("option", { key: p }, p)))
              )
            ),
            activeCount > 0 && h("button", { className: "btn btn-ghost sm filters-clear", onClick: () => { setQuick("todas"); setFPilar(""); setFFormato(""); setFObjetivo(""); setFPrio(""); setBusca(""); } }, "✕ Limpar filtros")
          )
        );
      })(),
      h("div", { className: "count-line" }, h("b", null, ideias.length), " ideia(s) · ", h("b", null, state.ideias.filter((i) => i.selecionada).length), " na sua lista de interesse"),

      ideias.length === 0 ? h("div", { className: "empty" }, "Nenhuma ideia com esses filtros.")
        : view === "cards" ? h("div", { className: "icards" }, ideias.map((i) => h(IdeaCard, { key: i.id, i, checked: checked.includes(i.id), onCheck: toggleCheck, onOpen: () => setOpenId(i.id) })))
        : view === "lista" ? h("div", { className: "ilist" }, ideias.map((i) => h("div", { key: i.id, className: "irow" + (i.selecionada ? " sel" : "") },
            h("button", { className: "chk" + (checked.includes(i.id) ? " on" : ""), onClick: () => toggleCheck(i.id) }, checked.includes(i.id) ? "✓" : ""),
            h("div", { className: "irow-mid" },
              h("div", { className: "irow-t", onClick: () => setOpenId(i.id), style: { cursor: "pointer" } }, i.selecionada ? "★ " : "", i.titulo),
              h("div", { className: "irow-m" }, h(StatusPill, { status: i.status }), h("span", { className: "tag pilar" }, i.pilar), h("span", { className: "tag" }, i.formato), h("span", { className: "prio " + i.prioridade }, i.prioridade))
            ),
            h("div", { className: "irow-actions" },
              h("button", { className: "btn btn-sel sm" + (i.selecionada ? " on" : ""), onClick: () => S.toggleSelecionar(i.id) }, i.selecionada ? "★" : "☆"),
              h("button", { className: "btn btn-pri sm", onClick: () => setOpenId(i.id) }, "Abrir")
            )
          )))
        : h(Kanban, { ideias, onOpen: setOpenId }),

      // barra de lote
      checked.length > 0 && h("div", { className: "bulkbar" },
        h("span", { className: "bulkbar-n" }, h("b", null, checked.length), "selecionada(s)"),
        h("button", { className: "bulk-btn", onClick: bulk(S.aprovarLote) }, "✓ Aprovar ideias"),
        h("button", { className: "bulk-btn", onClick: bulk(S.enviarAgenciaLote) }, "→ Enviar p/ agência"),
        h("select", { className: "bulk-sel", value: bulkCamp, onChange: (e) => setBulkCamp(e.target.value) }, h("option", null, "Clube da Maturidade Emocional")),
        h("button", { className: "bulk-btn", onClick: () => { S.definirCampanhaLote(checked, bulkCamp); clearBulk(); } }, "Definir campanha"),
        h("select", { className: "bulk-sel", value: bulkPrio, onChange: (e) => setBulkPrio(e.target.value) }, D.PRIORIDADES.map((p) => h("option", { key: p }, p))),
        h("button", { className: "bulk-btn", onClick: () => { S.definirPrioridadeLote(checked, bulkPrio); clearBulk(); } }, "Prioridade"),
        h("select", { className: "bulk-sel", value: bulkMes, onChange: (e) => setBulkMes(e.target.value) }, MESES.map((m) => h("option", { key: m }, m))),
        h("button", { className: "bulk-btn", onClick: () => { S.definirMesLote(checked, bulkMes); clearBulk(); } }, "Mês"),
        h("button", { className: "bulk-btn", onClick: bulk(S.arquivarLote) }, "🗑 Arquivar"),
        h("button", { className: "bulk-btn x", onClick: clearBulk }, "✕")
      ),

      openId && h(IdeaModal, { id: openId, onClose: () => setOpenId(null) })
    );
  }

  // ════════ PÁGINA APROVAR DESIGN ════════
  function DesignCard({ i }) {
    const { actions } = S.useStore();
    const [coment, setComent] = useState("");
    const d = i.design || {};
    const hasData = d.dataSugerida && d.dataSugerida !== "A definir";
    return h("div", { className: "card", style: { marginBottom: 18 } },
      h("div", { className: "modal-tags" }, h(StatusPill, { status: i.status, big: true }), i.campanha && h("span", { className: "tag pilar" }, "❋ " + i.campanha), h("span", { className: "tag" }, d.formato || i.formato)),
      h("div", { className: "modal-t", style: { fontSize: 26 } }, i.titulo),
      (d.legenda || i.resumo) && h("div", { className: "modal-sec" }, h("div", { className: "modal-sec-l" }, "Legenda proposta"), h("div", { className: "modal-box" }, d.legenda || i.resumo)),
      hasData && h("div", { className: "modal-meta" },
        h("div", { className: "mfield" }, h("span", null, "Data sugerida"), h("b", null, d.dataSugerida))
      ),
      d.comentarios && d.comentarios.length > 0 && h("div", { className: "modal-sec" },
        h("div", { className: "modal-sec-l" }, "Comentários na arte"),
        h("div", { className: "dcomments" }, d.comentarios.map((c, k) => h("div", { className: "dcomment", key: k }, h("span", null, new Date(c.ts).toLocaleString("pt-BR", { day: "2-digit", month: "2-digit", hour: "2-digit", minute: "2-digit" })), c.texto)))),
      h("div", { className: "modal-actions", style: { borderTop: "none", paddingTop: 0 } },
        h("div", { className: "modal-actions-title" }, "Aprovar o conteúdo autoriza agendar ou publicar"),
        h("div", { className: "mact-row" },
          d.link && h("a", { className: "btn btn-sec", href: d.link, target: "_blank", rel: "noopener" }, "⤓ Abrir arquivo"),
          h("button", { className: "btn btn-pri", onClick: () => actions.aprovarDesign(i.id) }, "✓ Aprovar")
        ),
        h("div", { className: "mact-row" },
          h("button", { className: "btn btn-terra", onClick: () => { const t = coment.trim() || "Solicitação de alteração no design"; actions.solicitarAlteracaoDesign(i.id, t); setComent(""); } }, "Pedir alterações"),
          h("button", { className: "btn btn-danger", onClick: () => { if (window.confirm("Reprovar este conteúdo? A agência será avisada de que não segue para publicação.")) actions.reprovarDesign(i.id, coment.trim()); } }, "Reprovar")
        )
      )
    );
  }

  function AprovarDesign() {
    const { state, actions } = S.useStore();
    const [add, setAdd] = useState(false);
    const [nf, setNf] = useState({ titulo: "", formato: "Carrossel", link: "", legenda: "" });
    const aguardando = state.ideias.filter((i) => i.status === "Aguardando aprovação final");
    const agendadas = state.ideias.filter((i) => ["Agendada", "Aprovada"].includes(i.status));
    function salvarNovo() {
      if (!nf.titulo.trim()) return;
      actions.novoParaAprovacao(nf);
      setNf({ titulo: "", formato: "Carrossel", link: "", legenda: "" });
      setAdd(false);
    }
    return h("div", { className: "page narrow" },
      h(PageHead, { eyebrow: "Aprovação final", titulo: "Aprovar conteúdo",
        sub: "Aqui você aprova a arte que a agência finalizou. Aprovar o conteúdo é o que autoriza agendamento ou publicação — diferente de aprovar a ideia." }),
      h("div", { className: "add-bar" },
        h("button", { className: "btn btn-sec ctrl-btn" + (add ? " on" : ""), onClick: () => setAdd((v) => !v) }, add ? "✕ Cancelar" : "＋ Novo conteúdo para aprovação")
      ),
      add && h("div", { className: "card add-form" },
        h("label", { className: "field-l" }, "Título do conteúdo"),
        h("input", { className: "input", placeholder: "Ex: O que você vai aprender no Clube", value: nf.titulo, onChange: (e) => setNf((f) => ({ ...f, titulo: e.target.value })) }),
        h("label", { className: "field-l" }, "Formato"),
        h("select", { className: "input", value: nf.formato, onChange: (e) => setNf((f) => ({ ...f, formato: e.target.value })) }, D.FORMATOS.map((x) => h("option", { key: x }, x))),
        h("label", { className: "field-l" }, "Link do Drive (arquivo ou pasta)"),
        h("input", { className: "input", placeholder: "https://drive.google.com/…", value: nf.link, onChange: (e) => setNf((f) => ({ ...f, link: e.target.value })) }),
        h("label", { className: "field-l" }, "Legenda proposta (opcional)"),
        h("textarea", { className: "input area", placeholder: "Legenda enviada pela agência…", value: nf.legenda, onChange: (e) => setNf((f) => ({ ...f, legenda: e.target.value })) }),
        h("button", { className: "btn btn-pri full", style: { marginTop: 14 }, disabled: !nf.titulo.trim(), onClick: salvarNovo }, "Enviar para aprovação")
      ),
      aguardando.length === 0
        ? h("div", { className: "empty" }, "Nenhum conteúdo aguardando sua aprovação agora. Quando a agência finalizar uma arte, ele aparece aqui.")
        : h(React.Fragment, null,
            h("div", { className: "mini-label" }, "Aguardando sua aprovação · " + aguardando.length),
            aguardando.map((i) => h(DesignCard, { key: i.id, i }))
          ),
      agendadas.length > 0 && h(React.Fragment, null,
        h("div", { className: "mini-label", style: { marginTop: 30 } }, "Já aprovados"),
        h("div", { className: "ilist" }, agendadas.map((i) => h("div", { key: i.id, className: "irow" },
          h("div", { className: "irow-mid" }, h("div", { className: "irow-t" }, i.titulo), h("div", { className: "irow-m" }, h(StatusPill, { status: i.status }), h("span", { className: "tag" }, (i.design && i.design.dataSugerida) || ""))),
          i.status === "Aprovada" && h("button", { className: "btn btn-pri sm", onClick: () => S.publicar(i.id) }, "Publicar")
        )))
      )
    );
  }

  window.MC_Ideias = AprovarIdeias;
  window.MC_Design = AprovarDesign;
})();