// 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.SV_Ideias e window.SV_Design
(function () {
  const { useState } = React;
  const h = React.createElement;
  const D = window.SV_DATA;
  const S = window.SV_STORE;
  const { PageHead, StatusPill, Modal, Dropdown } = window.SV_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 a Sanvi", "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),
  };

  // fundo suave por pilar (azul / laranja / areia / verde — sem rosa)
  const PILAR_BG = {
    "Estilo de vida ativo": "#E7EFF4",
    "Looks & coleções": "#FEECE6",
    "Autoestima & corpo real": "#F3F1E7",
    "Treino & movimento": "#E9F0F4",
    "Bem-estar & rotina": "#F6EFE1",
    "Bastidores Sanvi": "#EDF1F3",
    "Collab Sabrina": "#FDE7DF",
    "Comunidade Sanvi": "#E9F3EC",
    "Provador / Try-on": "#E4EEF3",
    "Divulgação Logue": "#F6E9D6",
  };

  // ════════ 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)
      ))),
      h("div", { className: "modal-sec" }, h("div", { className: "modal-sec-l" }, "Resumo da abordagem"), h("div", { className: "modal-p" }, i.resumo)),
      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)),
      h("div", { className: "modal-sec" }, h("div", { className: "modal-sec-l" }, "Possível estrutura"), h("div", { className: "modal-box" }, i.estrutura)),
      Array.isArray(i.sequencia) && i.sequencia.length ? h("div", { className: "modal-sec" },
        h("div", { className: "modal-sec-l" }, "Sequência de stories · siga na ordem"),
        h("div", { style: { display: "flex", flexDirection: "column", gap: 8 } }, i.sequencia.map((s, k) => h("div", { key: k, style: { display: "flex", gap: 11, alignItems: "flex-start", background: "var(--olive-tint)", border: "1px solid var(--olive-line)", borderRadius: 11, padding: "11px 13px" } },
          h("span", { style: { flexShrink: 0, width: 24, height: 24, borderRadius: "50%", background: "var(--olive)", color: "#fff", display: "grid", placeItems: "center", fontSize: 12.5, fontWeight: 600 } }, k + 1),
          h("span", { style: { fontSize: 13.5, lineHeight: 1.5, color: "var(--ink-soft)" } }, s)
        )))
      ) : null,
      h("div", { className: "modal-sec" }, h("div", { className: "modal-sec-l" }, "CTA sugerido"), h("div", { className: "modal-p" }, "“" + i.cta + "”")),

      // campos editáveis
      h("div", { className: "modal-meta" },
        h("label", { className: "mfield" }, h("span", null, "Formato"),
          h("select", { value: i.formato, onChange: (e) => actions.alterarFormato(i.id, e.target.value) }, D.FORMATOS.map((f) => h("option", { key: f }, f)))),
        h("label", { className: "mfield" }, h("span", null, "Prioridade"),
          h("select", { value: i.prioridade, onChange: (e) => actions.definirPrioridade(i.id, e.target.value) }, D.PRIORIDADES.map((p) => h("option", { key: p }, p)))),
        h("label", { className: "mfield" }, h("span", null, "Campanha"),
          h("select", { value: i.campanha, onChange: (e) => actions.definirCampanha(i.id, e.target.value) },
            h("option", { value: "" }, "Nenhuma"), h("option", null, "Movimento Sanvi"))),
        h("label", { className: "mfield" }, h("span", null, "Mês de produção"),
          h("select", { value: i.dataDesejada, onChange: (e) => actions.definirDataDesejada(i.id, e.target.value) },
            h("option", { value: "" }, "A definir"), MESES.map((m) => h("option", { key: m }, m)))),
        h("div", { className: "mfield" }, h("span", null, "Responsável"), h("b", null, i.responsavel || "—")),
        h("div", { className: "mfield" }, h("span", null, "Criada em"), h("b", null, i.criadaEm))
      ),

      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" },
            // Etapa 1
            h("div", { className: "modal-actions-title" }, "Etapa 1 · Lista de interesse — não autoriza produção"),
            h("div", { className: "mact-row" },
              h("button", { className: "btn btn-sel" + (i.selecionada ? " on" : ""), onClick: () => actions.toggleSelecionar(i.id) },
                i.selecionada ? "★ Selecionada — remover" : "☆ Selecionar (gostei)")
            ),
            // Etapa 2
            h("div", { className: "modal-actions-title", style: { marginTop: 14 } }, "Etapa 2 · Autorizar a agência a produzir"),
            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" : ""), style: { background: PILAR_BG[i.pilar] || "var(--white)" } },
      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, "Movimento Sanvi"); setMenu(false); } }, "❋ Vincular à campanha"),
            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 [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("Movimento Sanvi");
    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.",
        actions: h("div", { className: "view-seg" }, ["cards", "lista", "kanban"].map((v) => h("button", { key: v, className: view === v ? "on" : "", onClick: () => setView(v) }, v === "cards" ? "Cards" : v === "lista" ? "Lista" : "Kanban"))) }),

      h("div", { className: "toolbar" },
        h(Dropdown, { value: quick, options: QUICK.map((q) => ({ value: q.id, label: q.nome })), onChange: setQuick }),
        h("div", { className: "search" }, h("input", { placeholder: "Buscar por palavra-chave…", value: busca, onChange: (e) => setBusca(e.target.value) })),
        h(Dropdown, { value: fPilar, options: [{ value: "", label: "Todos os pilares" }].concat(D.PILARES.map((p) => ({ value: p, label: p }))), onChange: setFPilar }),
        h(Dropdown, { value: fFormato, options: [{ value: "", label: "Todos os formatos" }].concat(D.FORMATOS.map((p) => ({ value: p, label: p }))), onChange: setFFormato }),
        h(Dropdown, { value: fObjetivo, options: [{ value: "", label: "Todos os objetivos" }].concat(D.OBJETIVOS.map((p) => ({ value: p, label: p }))), onChange: setFObjetivo }),
        h(Dropdown, { value: fPrio, options: [{ value: "", label: "Toda prioridade" }].concat(D.PRIORIDADES.map((p) => ({ value: p, label: p }))), onChange: setFPrio })
      ),
      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, "Movimento Sanvi")),
        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 [verHist, setVerHist] = useState(false);
    const d = i.design || {};
    const isoOk = /^\d{4}-\d{2}-\d{2}/.test(d.dataSugerida || "");
    const [agData, setAgData] = useState(isoOk ? d.dataSugerida : "2026-08-04");
    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),
      h("div", { className: "dprev" },
        h("div", { className: "dprev-art" }, h("span", { className: "dprev-badge" }, (d.formato || i.formato) + " · v" + (d.versao || 1)), h("span", { className: "dprev-ph" }, "prévia do post — arte da agência")),
      ),
      h("div", { className: "modal-sec" }, h("div", { className: "modal-sec-l" }, "Legenda proposta"), h("div", { className: "modal-box" }, d.legenda || i.resumo)),
      h("div", { className: "modal-meta" },
        h("div", { className: "mfield" }, h("span", null, "CTA"), h("b", null, d.cta || i.cta || "—")),
        h("div", { className: "mfield" }, h("span", null, "Data sugerida"), h("b", null, d.dataSugerida || "—")),
        h("div", { className: "mfield" }, h("span", null, "Versão atual"), h("b", null, "v" + (d.versao || 1)))
      ),
      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)))),
      verHist && h("div", { className: "modal-sec" }, h("div", { className: "modal-sec-l" }, "Histórico de versões"),
        h("div", { className: "modal-box" }, (d.historicoVersoes || []).join("\n"))),
      // comentar na imagem
      h("div", { className: "mact-row", style: { marginBottom: 12 } },
        h("input", { className: "input", placeholder: "Comentar na arte / legenda…", value: coment, onChange: (e) => setComent(e.target.value) }),
        h("button", { className: "btn btn-sec", disabled: !coment.trim(), onClick: () => { actions.comentarDesign(i.id, coment.trim()); setComent(""); } }, "Comentar")
      ),
      // ETAPA 3 · aprovar design
      h("div", { className: "modal-actions", style: { borderTop: "none", paddingTop: 0 } },
        h("div", { className: "modal-actions-title" }, "Etapa 3 · Aprovar o conteúdo — só isto autoriza agendar ou publicar"),
        h("div", { className: "mact-row", style: { alignItems: "center" } },
          h("input", { className: "input", type: "date", value: agData, onChange: (e) => setAgData(e.target.value), style: { flex: "0 0 auto", minWidth: 150 } }),
          h("button", { className: "btn btn-pri", onClick: () => actions.aprovarEAgendar(i.id, agData) }, "✓ Aprovar e agendar"),
          h("button", { className: "btn btn-ok", onClick: () => actions.aprovarDesign(i.id) }, "Aprovar publicação")
        ),
        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(""); } }, "Solicitar alterações"),
          h("button", { className: "btn btn-ghost", onClick: () => setVerHist((v) => !v) }, verHist ? "Ocultar versões" : "Comparar versões"),
          d.link
            ? h("a", { className: "btn btn-ghost", href: d.link, target: "_blank", rel: "noopener" }, "⤓ Abrir arquivo")
            : h("button", { className: "btn btn-ghost", onClick: () => alert("Baixando arquivo da arte (v" + (d.versao || 1) + ").") }, "⤓ Baixar arquivo")
        )
      )
    );
  }

  function AprovarDesign() {
    const { state } = S.useStore();
    const aguardando = state.ideias.filter((i) => i.status === "Aguardando aprovação final");
    const agendadas = state.ideias.filter((i) => ["Agendada", "Aprovada"].includes(i.status));
    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." }),
      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.SV_Ideias = AprovarIdeias;
  window.SV_Design = AprovarDesign;
})();
