// ESTÚDIO — UI compartilhada + Shell. Exporta em window.UI.
(function () {
  const { useState } = React;
  const D = window.DATA;

  // ── Ícone de plataforma ──
  const PLAT_SVG = {
    instagram: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.3" cy="6.7" r="1.15" fill="currentColor" stroke="none"/></svg>',
    youtube: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M9 7.5v9l7.5-4.5z"/></svg>',
    tiktok: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M14 3c.3 2.3 1.8 4 4 4.2v2.6c-1.4 0-2.8-.4-4-1.1v5.9a5.3 5.3 0 1 1-5.3-5.3c.3 0 .6 0 .9.1v2.8a2.6 2.6 0 1 0 1.8 2.5V3H14z"/></svg>',
    pinterest: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12.3 2C6.9 2 4 5.6 4 9.3c0 1.7 1 3.9 2.5 4.6.3.1.4 0 .5-.2l.2-.9c0-.2 0-.3-.1-.5-.5-.6-.8-1.3-.8-2.2 0-2.8 2.1-5.3 5.5-5.3 3 0 4.6 1.8 4.6 4.3 0 3.2-1.4 5.9-3.5 5.9-1.1 0-2-.9-1.7-2.1.3-1.3 1-2.7 1-3.7 0-.9-.5-1.6-1.4-1.6-1.2 0-2.1 1.2-2.1 2.8 0 1 .4 1.7.4 1.7l-1.4 5.7c-.4 1.7-.1 3.9 0 4.1 0 .1.2.2.3.1.1-.2 1.9-2.3 2.4-4.4l.7-2.6c.4.7 1.5 1.3 2.6 1.3 3.5 0 5.9-3.2 5.9-7.4C20.3 5.1 17.5 2 12.3 2z"/></svg>',
    linkedin: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5A2.5 2.5 0 1 0 5 8.5a2.5 2.5 0 0 0 0-5zM3 9h4v12H3zM9 9h3.8v1.7h.1c.5-1 1.8-2 3.7-2 4 0 4.7 2.6 4.7 6V21h-4v-5.3c0-1.3 0-2.9-1.8-2.9s-2 1.4-2 2.8V21H9z"/></svg>',
    substack: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M4 3h16v2.6H4zM4 7.7h16V21l-8-4.3L4 21z"/></svg>',
    blog: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.6 2.8 2.6 15.2 0 18M12 3c-2.6 2.8-2.6 15.2 0 18"/></svg>',
  };
  function PlatIcon({ plat, size = 22 }) {
    const p = D.plataformas[plat];
    if (!p) return null;
    const svg = PLAT_SVG[plat];
    return React.createElement("span", {
      className: "plat-ic", title: p.nome,
      style: { width: size, height: size, fontSize: size * 0.42, background: p.cor, color: "#fff" },
      dangerouslySetInnerHTML: svg ? { __html: svg } : undefined,
    }, svg ? undefined : p.ic);
  }
  function PlatRow({ plats, size = 22 }) {
    return React.createElement("span", { className: "plat-row" }, plats.map((p) => React.createElement(PlatIcon, { key: p, plat: p, size })));
  }

  // ── Ponto/etiqueta de perfil ──
  function PerfilTag({ id, dot }) {
    const p = D.perfis[id];
    if (!p) return null;
    if (dot) return React.createElement("span", { className: "perfil-dot", title: p.nome, style: { background: p.cor } });
    return React.createElement("span", { className: "perfil-tag", style: { background: p.cor, color: "#fff" } }, p.nome);
  }

  // ── Chip genérico ──
  function Chip({ children, active, onClick, color }) {
    return React.createElement("button", { className: "chip" + (active ? " chip-on" : ""), onClick, style: active && color ? { background: color, borderColor: color, color: "#fff" } : undefined }, children);
  }

  // ── Badge de energia ──
  function EnergiaBadge({ e }) {
    const en = D.energias[e];
    if (!en) return null;
    return React.createElement("span", { className: "ebadge", style: { background: en.cor + "22", color: en.cor } }, en.dot + " " + en.nome);
  }

  // ── Barra de progresso ──
  function Bar({ value, ideal, color = "#FF78B0" }) {
    return React.createElement("div", { className: "bar-wrap" },
      React.createElement("div", { className: "bar-fill", style: { width: Math.min(value, 100) + "%", background: color } }),
      ideal != null && React.createElement("div", { className: "bar-ideal", title: "ideal " + ideal + "%", style: { left: ideal + "%" } })
    );
  }

  // ── Estrelas (ROI editorial) ──
  function Stars({ n, max = 5 }) {
    return React.createElement("span", { className: "stars" }, Array.from({ length: max }, (_, i) => React.createElement("span", { key: i, className: i < n ? "star on" : "star" }, "★")));
  }

  // ── Cabeçalho de página ──
  function PageHead({ titulo, sub, right }) {
    return React.createElement("div", { className: "page-head" },
      React.createElement("div", null,
        React.createElement("h1", { className: "page-title" }, titulo),
        sub && React.createElement("p", { className: "page-sub" }, sub)
      ),
      right && React.createElement("div", { className: "page-head-right" }, right)
    );
  }

  function Card({ children, className = "", ...rest }) {
    return React.createElement("div", { className: "card " + className, ...rest }, children);
  }

  function fmtData(iso) {
    if (!iso) return "—";
    const [y, m, d] = iso.split("-");
    const meses = ["jan", "fev", "mar", "abr", "mai", "jun", "jul", "ago", "set", "out", "nov", "dez"];
    return d + " " + meses[+m - 1];
  }
  function daysDiff(iso) {
    if (!iso) return 0;
    const [y, m, d] = iso.split("-").map(Number);
    const dt = new Date(y, m - 1, d);
    const hoje = new Date(); hoje.setHours(0, 0, 0, 0);
    return Math.round((dt - hoje) / 86400000);
  }
  function hojeLabelBR() {
    const dias = ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado"];
    const meses = ["janeiro", "fevereiro", "março", "abril", "maio", "junho", "julho", "agosto", "setembro", "outubro", "novembro", "dezembro"];
    const n = new Date();
    return dias[n.getDay()] + ", " + n.getDate() + " de " + meses[n.getMonth()] + " de " + n.getFullYear();
  }
  window.hojeLabelBR = hojeLabelBR;

  // ── SIDEBAR ──
  const h = React.createElement;
  const LORENNA = encodeURI("Dashboard Lorenna.html");
  const NAV = [
    { grp: "Visão", items: [["hoje", "Para Hoje", "⚡"], ["dashboard", "Dashboard", "🏠"], ["agentes", "Agentes", "🤖"], ["calendario", "Calendário", "🗓️"], ["kanban", "Produção", "🎬"]] },
    { grp: "Criação", items: [["pautas", "Ideias & Pautas", "💡"], ["prompts", "Prompts", "🤖"], ["repertorio", "Repertório", "📚"], ["experiencias", "Experiências", "✨"], ["conhecimento", "Conhecimento", "🎓"]] },
    { grp: "Base", items: [["perfil", "Sistema da Criadora", "🪞"], ["biblioteca", "Biblioteca", "🗂️"], ["parcerias", "Parcerias", "🤝"], ["aprendizados", "Aprendizados", "📈"]] },
    { grp: "Negócio", items: [["logue", "Agência Logue", "💼"], ["monetizacao", "Monetização", "💰"]] },
    { grp: "Lorenna OS", ext: true, items: [[LORENNA + "#/", "Painel pessoal", "🌸"], [LORENNA + "#/captura", "Baú de Ideias", "🧠"], [LORENNA + "#/tarefas", "Tarefas", "✅"]] },
  ];

  function Sidebar({ rota, setRota, energy, setEnergy, onTrocarPerfil }) {
    const ecfg = (window.ENERGY && window.ENERGY[energy]) || null;
    const elist = window.ENERGY_LIST || [];
    return h("aside", { className: "sidebar" },
      h("div", { className: "brand" },
        h("div", { className: "brand-mark" }, "L"),
        h("div", null,
          h("div", { className: "brand-name" }, "Estúdio"),
          h("div", { className: "brand-sub" }, "OS de Criação")
        )
      ),
      ecfg && h("div", { className: "energy-chip", style: { background: ecfg.color + "1F", borderColor: ecfg.color + "44" } },
        h("div", { className: "energy-chip-label" }, "Modo atual"),
        h("div", { className: "energy-chip-val", style: { color: ecfg.color } }, h("span", null, ecfg.emoji), " ", ecfg.label)
      ),
      h("nav", { className: "nav" },
        NAV.map((g) => h("div", { key: g.grp, className: "nav-grp" + (g.ext ? " nav-grp-ext" : "") },
          h("div", { className: "nav-grp-label" }, g.ext ? "↗ " + g.grp : g.grp),
          g.items.map(([id, label, ic]) => g.ext
            ? h("a", { key: id, className: "nav-item nav-ext", href: id }, h("span", { className: "nav-ic" }, ic), h("span", null, label))
            : h("button", { key: id, className: "nav-item" + (rota === id ? " nav-on" : ""), onClick: () => setRota(id) }, h("span", { className: "nav-ic" }, ic), h("span", null, label))
          )
        ))
      ),
      ecfg && h("div", { className: "energy-switch" },
        h("div", { className: "energy-switch-t" }, "Trocar energia"),
        h("div", { className: "energy-switch-grid" }, elist.map((e) => h("button", { key: e.id, className: energy === e.id ? "eon" : "", title: e.label, onClick: () => setEnergy(e.id) }, e.emoji)))
      ),
      h("div", { className: "side-perfis" },
        Object.values(D.perfis).map((p) => h("div", { key: p.id, className: "side-perfil" },
          h("span", { className: "perfil-dot", style: { background: p.cor } }), h("span", null, p.nome)
        )),
        onTrocarPerfil && h("button", { className: "side-trocar", onClick: onTrocarPerfil }, "↺ Trocar perfil")
      )
    );
  }

  Object.assign(window, { UI: { PlatIcon, PlatRow, PerfilTag, Chip, EnergiaBadge, Bar, Stars, PageHead, Card, fmtData, daysDiff, Sidebar } });
})();