// ===== ICONS =====
// Token-based auth fallback (works when cookies are blocked)
const _ssGet=(k)=>{try{return window.sessionStorage?sessionStorage.getItem(k):null}catch(e){return null}};
const _ssSet=(k,v)=>{try{if(window.sessionStorage)sessionStorage.setItem(k,v)}catch(e){}};

const hubGetToken = () => { try { return _ssGet("hub_token"); } catch(e) {} return null; };
const hubGetEmail = () => { try { const c = document.cookie.split(';').find(x => x.trim().startsWith('HUBstudio_user=')); if (c) { const v = decodeURIComponent(c.trim().slice('HUBstudio_user='.length)); const u = JSON.parse(v); return u.email || ''; } } catch(e) {} return ''; };
const _origFetch = window.fetch;
window.fetch = (url, opts = {}) => {
  if (typeof url === "string" && url.startsWith("/api/")) {
    const extra = { ...(opts.headers || {}) };
    const t = hubGetToken(); if (t) extra.Authorization = "Bearer " + t;
    const em = hubGetEmail(); if (em && !extra["x-user-email"]) extra["x-user-email"] = em;
    opts.headers = extra;
  }
  return _origFetch(url, opts);
};
const Icon = ({ name, size = 16, stroke = 1.6, style = {} }) => {
const p = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round", style };
const P = {
home: <><path d="M3 11.5 12 4l9 7.5"/><path d="M5 10v10h14V10"/></>,
chart: <><path d="M3 3v18h18"/><path d="M7 14l3-3 3 3 5-6"/></>,
grid: <><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></>,
users: <><circle cx="9" cy="8" r="3.2"/><path d="M3 20c.8-3.4 3.2-5 6-5s5.2 1.6 6 5"/><circle cx="17" cy="9" r="2.5"/><path d="M15 14c2.6 0 4.6 1 5.5 3.5"/></>,
target: <><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1"/></>,
hash: <><path d="M4 9h16M4 15h16M10 3 8 21M16 3l-2 18"/></>,
inbox: <><path d="M3 13h5l2 3h4l2-3h5"/><path d="M3 13 5 5h14l2 8v6H3Z"/></>,
shield: <><path d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6l-8-3Z"/></>,
bell: <><path d="M6 8a6 6 0 0 1 12 0c0 6 2 7 2 9H4c0-2 2-3 2-9Z"/><path d="M10 20a2 2 0 0 0 4 0"/></>,
calendar:<><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></>,
check: <><path d="M4 12l5 5L20 6"/></>,
bot: <><rect x="4" y="7" width="16" height="12" rx="3"/><circle cx="9" cy="13" r="1"/><circle cx="15" cy="13" r="1"/><path d="M12 3v4M8 19v2M16 19v2"/></>,
rocket: <><path d="M5 15c-2 1-3 4-3 7 3 0 6-1 7-3"/><path d="M9 11a10 10 0 0 1 10-9 10 10 0 0 1-9 10"/><path d="M13 7a2 2 0 1 1 4 0 2 2 0 0 1-4 0Z"/><path d="M14 14l-4-4"/></>,
settings:<><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3h0a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8v0a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z"/></>,
chev: <><path d="M6 9l6 6 6-6"/></>,
chevR: <><path d="M9 6l6 6-6 6"/></>,
download:<><path d="M12 3v13M6 12l6 6 6-6"/><path d="M4 21h16"/></>,
sun: <><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5 19 19M5 19l1.5-1.5M17.5 6.5 19 5"/></>,
moon: <><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z"/></>,
plus: <><path d="M12 5v14M5 12h14"/></>,
reply: <><path d="M9 14 4 9l5-5"/><path d="M4 9h12a5 5 0 0 1 0 10H9"/></>,
flame: <><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/></>,
sparkle: <><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/></>,
star: <><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></>,
x: <><path d="M6 6l12 12M18 6 6 18"/></>,
briefcase: <><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/></>,
film: <><rect x="2" y="2" width="20" height="20" rx="2"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5M17 17h5M17 7h5"/></>,
palette: <><circle cx="13.5" cy="6.5" r="2"/><circle cx="17.5" cy="10.5" r="2"/><circle cx="8.5" cy="7.5" r="2"/><circle cx="6.5" cy="12.5" r="2"/><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.9 0 1.5-.7 1.5-1.5 0-.4-.1-.7-.4-1-.3-.3-.5-.7-.5-1.1 0-.8.7-1.5 1.5-1.5H16c3.3 0 6-2.7 6-6 0-5.5-4.5-9.9-10-9.9Z"/></>,
video: <><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></>,
image: <><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="2"/><path d="M21 15l-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></>,
megaphone: <><path d="M3 11l18-5v12L3 13v-2Z"/><path d="M3 11v4"/><path d="M11.3 17.7l-1.2 3.6a1 1 0 0 1-1.9-.6l1.2-3.6"/></>,
pencil: <><path d="M17 3a2.83 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></>,
  share: <><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="M8.59 13.51l6.83 3.98M15.41 6.51l-6.82 3.98"/></>,
layers: <><path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.72a1 1 0 0 0 0 1.82l8.58 3.54a2 2 0 0 0 1.66 0l8.58-3.54a1 1 0 0 0 0-1.82Z"/><path d="m22 12.27-8.58 3.54a2 2 0 0 1-1.66 0L3 12.27"/><path d="m22 17.27-8.58 3.54a2 2 0 0 1-1.66 0L3 17.27"/></>,
layout: <><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></>,
type: <><path d="M4 7V4h16v3"/><path d="M9 20h6"/><path d="M12 4v16"/></>,
  ticket: <><path d="M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V9a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z"/><path d="M13 5v2M13 17v2M13 11v2"/></>,
  camera: <><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></>,
  music: <><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></>,
  database: <><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></>,
  "file-text": <><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/></>,
  list: <><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></>,
  key: <><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.78 7.78 5.5 5.5 0 0 1 7.78-7.78zm0 0L15.5 6m0 0 3 3L15.5 6zm0 0 3-3"/></>,
  eye: <><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></>,
  upload: <><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"/></>,
  user: <><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></>,
  "bar-chart": <><path d="M18 20V10M12 20V4M6 20v-6"/></>,
  lock: <><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></>,
  handshake: <><path d="M20 17l-2-2m0 4l-2-2m-4 2l-2-2m0 4l-2-2M7 14l-3 3M17 14l3 3M2 10l5-3 3 2 4-3 5 3"/></>,
  logout: <><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/></>,
  radio: <><path d="M4.9 19.1C1 15.2 1 8.8 4.9 4.9M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.5M16.2 7.8c2.3 2.3 2.3 6.1 0 8.5M19.1 4.9C23 8.8 23 15.1 19.1 19M12 12m-1 0a1 1 0 1 0 2 0 1 1 0 1 0-2 0"/></>,
  message: <><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></>,
  globe: <><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></>,
  refresh: <><path d="M21 2v6h-6M3 12a9 9 0 0 1 15-6.7L21 8M3 22v-6h6M21 12a9 9 0 0 1-15 6.7L3 16"/></>,
  sliders: <><path d="M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6"/></>,
  };
return <svg {...p}>{P[name] || null}</svg>;
};

// ===== HELPERS =====
const getCookie = (name) => {
const v = document.cookie.match("(^|;) ?" + name + "=([^;]*)");
return v ? v[2] : null;
};
const setCookie = (name, val, days = 30) => {
const d = new Date();
d.setTime(d.getTime() + days * 24 * 60 * 60 * 1000);
document.cookie = name + "=" + val + ";expires=" + d.toUTCString() + ";path=/;SameSite=Strict";
};

// ===== DATA =====
const workspaces = [
{ id: 1, name: "Aurora Swim", handle: "@auroraswim", plan: "Pro", followers: 184230, initials: "AS" },
{ id: 2, name: "Noctua Coffee", handle: "@noctuacoffee", plan: "Growth", followers: 62400, initials: "NC" },
{ id: 3, name: "Lumen Fitness", handle: "@lumenfit", plan: "Pro", followers: 241800, initials: "LF" },
];

const I18N = {
pt: {
overview: "Visão geral", content: "Conteúdo", audience: "Audiência", benchmarks: "Benchmarks", hashtags: "Hashtags",
ads: "Ads", inbox: "Inbox", mentions: "Menções & crise", alerts: "Alertas", calendar: "Calendário", approvals: "Aprovações", ai: "IA Copilot",
youtube: "YouTube", tiktok: "TikTok", goals: "Metas", reports: "Relatórios", settings: "Configurações", services: "Serviços", studio: "Estúdio", ticketera: "Ticketera",
today: "Hoje", last7: "7 dias", last30: "30 dias", last90: "90 dias", "export": "Exportar", newPost: "Novo post",
},
en: {
overview: "Overview", content: "Content", audience: "Audience", benchmarks: "Benchmarks", hashtags: "Hashtags",
ads: "Ads", inbox: "Inbox", mentions: "Mentions", alerts: "Alerts", calendar: "Calendar", approvals: "Approvals", ai: "AI Copilot",
youtube: "YouTube", tiktok: "TikTok", goals: "Goals", reports: "Reports", settings: "Settings", services: "Services", studio: "Studio", ticketera: "Ticketera",
today: "Today", last7: "7 days", last30: "30 days", last90: "90 days", "export": "Export", newPost: "New post",
}
};

const fmt = { n: v => v >= 1000 ? (v/1000).toFixed(1) + "K" : v };

const MetaAuthBadge = ({ limited, platform }) => {
  const lbl = (platform === "TikTok") ? "TikTok" : (platform === "YouTube") ? "YouTube" : "Meta";
  return <span className="meta-pill"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6l-8-3Z"/></svg> {limited ? "Analytics indisponivel" : "Precisa de autorizacao " + lbl}</span>;
};

const MetaValue = ({ val, fallback, platform }) => {
  if (val != null && val !== undefined && val !== "") return <>{val}</>;
  const lbl = (platform === "TikTok") ? "TikTok" : (platform === "YouTube") ? "YouTube" : "Meta";
  return <span style={{color:"rgba(255,255,255,.3)"}}>Precisa de autorizacao {lbl}</span>;
};

// ===== PLATFORM CONNECT CTA =====
const _platformConfig = {
  Instagram: { gradient: "linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)", btnBg: "linear-gradient(135deg,#f09433,#dc2743,#cc2366)", shadow: "rgba(220,39,67,0.3)", authPath: "/api/auth/meta", btn: "Conectar Instagram" },
  TikTok: { gradient: "linear-gradient(135deg,#00f2ea,#ff0050)", btnBg: "linear-gradient(135deg,#00f2ea,#ff0050)", shadow: "rgba(255,0,80,0.3)", authPath: "/api/auth/tiktok", btn: "Conectar TikTok" },
  YouTube: { gradient: "linear-gradient(135deg,#ff0000,#cc0000)", btnBg: "linear-gradient(135deg,#ff0000,#cc0000)", shadow: "rgba(255,0,0,0.3)", authPath: "/api/auth/youtube", btn: "Conectar YouTube" },
  Facebook: { gradient: "linear-gradient(135deg,#1877f2,#0d5bbf)", btnBg: "linear-gradient(135deg,#1877f2,#0d5bbf)", shadow: "rgba(24,119,242,0.3)", authPath: "/api/auth/meta", btn: "Conectar Facebook" },
};
const ConnectCTA = ({ platform, icon, title, desc, email }) => {
  const pc = _platformConfig[platform] || _platformConfig.Instagram;
  return (
    <div className="page-dash" style={{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",minHeight:"60vh",padding:40}}>
      <div style={{textAlign:"center",maxWidth:480}}>
        <div style={{width:80,height:80,borderRadius:20,background:pc.gradient,display:"flex",alignItems:"center",justifyContent:"center",margin:"0 auto 24px"}}><Icon name={icon} size={32} stroke={1.2} style={{color:"#fff"}} /></div>
        <h2 style={{fontSize:"1.4rem",fontWeight:600,marginBottom:8}}>{title || (platform + " requer autorização")}</h2>
        <p style={{opacity:0.5,fontSize:"0.9rem",lineHeight:1.6,marginBottom:28}}>{desc || ("Dados exigem autorização " + platform + ".")}</p>
        <a href={pc.authPath + "?state=" + encodeURIComponent(email||"") + "&redirect=" + encodeURIComponent(window.location.pathname)} style={{display:"inline-block",padding:"14px 32px",background:pc.btnBg,color:"#fff",borderRadius:12,fontWeight:600,fontSize:"0.95rem",textDecoration:"none",boxShadow:"0 4px 20px " + pc.shadow}}>{pc.btn}</a>
      </div>
    </div>
  );
};
const _isPlatformConnected = (platform, igData, appUser) => {
  if (platform === "Instagram" || platform === "Facebook") return !!igData.connected;
  if (platform === "TikTok") return !!(appUser && appUser.tt_connected);
  if (platform === "YouTube") return !!(appUser && appUser.yt_connected);
  return !!igData.connected;
};
const _platformProfile = (platform, igData, appUser) => {
  const u = appUser || {};
  if (platform === "TikTok") return {
    username: u.tiktok || "", name: u.nome || "", followers_count: u.tiktok_seguidores || 0,
    follows_count: 0, media_count: 0, biography: u.bio || "", account_type: "TikTok",
    profile_picture_url: u.foto_url || ""
  };
  if (platform === "YouTube") return {
    username: u.youtube || "", name: u.nome || "", followers_count: u.yt_subscribers || 0,
    follows_count: 0, media_count: u.yt_video_count || 0, biography: u.bio || "", account_type: "YouTube",
    profile_picture_url: u.foto_url || ""
  };
  return igData.profile || {};
};
const _platformTabs = (platform) => {
  if (platform === "TikTok") return ["Todos", "Videos", "Stories", "LIVE"];
  if (platform === "YouTube") return ["Todos", "Videos", "Shorts", "Community"];
  return ["Todos", "Reels", "Carousel", "Stories"];
};
const _platformBadgeLabel = (platform) => platform || "Instagram";

// ===== APP =====
const App = () => {
const [page, setPage] = React.useState(() => getCookie("hub_page") || "overview");
const [lang, setLang] = React.useState(() => getCookie("hub_lang") || "pt");
const [theme, setTheme] = React.useState(() => getCookie("hub_theme") || "dark");
React.useEffect(() => { document.documentElement.dataset.theme = theme; }, [theme]);
const [igData, setIgData] = React.useState({ connected: false, profile: {}, media: [], insights: [], demographics: null, demographicsError: null, can_publish: false, loading: true });
const [appUser, setAppUser] = React.useState(null);
const [platform, setPlatform] = React.useState(() => _ssGet("hub_platform") || "Instagram");
React.useEffect(() => { _ssSet("hub_platform", platform); }, [platform]);
const [format, setFormat] = React.useState("Feed");
const formatByPlatform = {
Instagram: { Feed: { tipo: "feed", accept: "image/*,video/*", placeholder: "Escreva uma legenda...", previewH: 400, icon: "image" }, Stories: { tipo: "story", accept: "image/*,video/*", placeholder: "Texto curto para seu Story...", previewH: 480, icon: "film" }, Reels: { tipo: "reel", accept: "video/*", placeholder: "Descricao do Reel...", previewH: 520, icon: "video" }, Carrossel: { tipo: "carousel", accept: "image/*", placeholder: "Legenda para o carrossel...", previewH: 400, icon: "layers" } },
TikTok: { Feed: { tipo: "feed", accept: "video/*", placeholder: "Descricao do TikTok...", previewH: 520, icon: "video" }, Stories: { tipo: "story", accept: "video/*", placeholder: "TikTok Story...", previewH: 480, icon: "film" }, LIVE: { tipo: "live", accept: "", placeholder: "Titulo e descricao da LIVE...", previewH: 300, icon: "radio" } },
YouTube: { Video: { tipo: "video", accept: "video/*", placeholder: "Titulo + descricao do video...", previewH: 400, icon: "video" }, Shorts: { tipo: "shorts", accept: "video/*", placeholder: "Descricao curta pro Short...", previewH: 520, icon: "film" }, Community: { tipo: "community", accept: "image/*", placeholder: "Post da comunidade...", previewH: 300, icon: "message" } },
Facebook: { Feed: { tipo: "feed", accept: "image/*,video/*", placeholder: "Texto para Facebook...", previewH: 400, icon: "image" }, Stories: { tipo: "story", accept: "image/*,video/*", placeholder: "Story Facebook...", previewH: 480, icon: "film" }, Reels: { tipo: "reel", accept: "video/*", placeholder: "Reel Facebook...", previewH: 520, icon: "video" } }
};
const formatConfig = formatByPlatform[platform] || formatByPlatform.Instagram;
React.useEffect(() => { if (appUser) { const p = appUser.tt_connected && !appUser.ig_connected ? "TikTok" : appUser.yt_connected && !appUser.ig_connected && !appUser.tt_connected ? "YouTube" : "Instagram"; if (p !== platform && !_ssGet("hub_platform")) setPlatform(p); if (p === "TikTok" && !_ssGet("hub_platform")) { setPage("tiktok"); } if (p === "YouTube" && !_ssGet("hub_platform")) { setPage("youtube"); } if (p === "Instagram" && !_ssGet("hub_platform")) { setPage("overview"); } } }, [appUser]);

const [seenKeys, setSeenKeys] = React.useState({});
const [collapsedSections, setCollapsedSections] = React.useState(() => {
try { const saved = JSON.parse(_ssGet('hub_nav_collapsed') || '{}'); return Object.keys(saved).length ? saved : {"Analytics":false,"Ads":true,"Engagement":true,"Workflow":true,"Serviços":true,"Reports":true}; } catch(e) { return {"Analytics":false,"Ads":true,"Engagement":true,"Workflow":true,"Serviços":true,"Reports":true}; } });
const toggleSection = (section) => {
const next = { ...collapsedSections, [section]: !collapsedSections[section] };
setCollapsedSections(next);
try{_ssSet('hub_nav_collapsed',JSON.stringify(next))}catch(e){}
};
React.useEffect(() => { setCookie("hub_page", page, 30); }, [page]);
// Fetch seen keys from API on mount
React.useEffect(() => {
const uid = appUser && appUser.id;
const uEmail = appUser && appUser.email;
if (!uid) return;
const h = {"x-user-email": uEmail || hubGetEmail()};
fetch("/api/seen?user_id=" + uid, {credentials:"include", headers:h}).then(r=>r.json()).then(d => {
if (d.success && d.keys) setSeenKeys(d.keys);
}).catch(()=>{});
}, [appUser]);
// Mark page as seen on click
const markSeen = (key) => {
const uid = appUser && appUser.id;
const uEmail = appUser && appUser.email;
if (!uid || seenKeys[key]) return;
const updated = { ...seenKeys, [key]: true };
setSeenKeys(updated);
fetch("/api/seen", { method: "POST", credentials:"include", headers: {"Content-Type":"application/json", "x-user-email": uEmail || hubGetEmail()}, body: JSON.stringify({ user_id: uid, key }) }).catch(()=>{});
};
React.useEffect(() => { setCookie("hub_lang", lang, 30); }, [lang]);

// Process auth_token from OAuth callbacks before first render
(() => { const p = new URLSearchParams(window.location.search); if (p.get("auth_token")) { var x = new XMLHttpRequest(); x.open("GET", "/api/auth/cookie?token=" + encodeURIComponent(p.get("auth_token")) + "&hub_user=" + encodeURIComponent(p.get("hub_user") || ""), false); x.withCredentials = true; try { x.send(); } catch(e1) {} try { _ssSet("hub_token", p.get("auth_token")); } catch(e1) {} if (p.get("hub_user")) { try { const existing = document.cookie.split(";").find(c2 => c2.trim().startsWith("HUBstudio_user=")); if (!existing) document.cookie = "HUBstudio_user=" + p.get("hub_user") + ";path=/;max-age=" + (30*24*60*60) + ";SameSite=Lax"; } catch(e1) {} } window.history.replaceState({}, "", window.location.pathname); } })();

const user = React.useMemo(() => {
const c = getCookie("HUBstudio_user");
try { return c ? JSON.parse(decodeURIComponent(c)) : null; } catch (e) { return null; }
}, []);

const slug = React.useMemo(() => {
const parts = window.location.pathname.split("/");
const idx = parts.indexOf("app");
return idx >= 0 && parts[idx + 1] ? parts[idx + 1] : null;
}, []);

const fetchSlug = slug || (user && (user.slug || user.instagram || (user.email || "").split("@")[0]));

React.useEffect(() => {
if (!user && !slug) { window.location.href = "/login"; return; }
const fs = slug || (user && (user.slug || user.instagram || (user.email || "").split("@")[0]));
if (!fs) { window.location.href = "/login"; return; }
fetch("/api/perfil/slug/" + encodeURIComponent(fs))
.then(r => r.json())
.then(data => {
const perfil = data.perfil || user || {};
setAppUser(perfil);
// Use IG data from perfil API (ig_connected) when available
if (perfil.ig_connected && perfil.ig_username) {
setIgData({ connected: true, profile: { id: "", username: perfil.ig_username, name: perfil.ig_name || "", followers_count: perfil.ig_followers || 0, follows_count: perfil.ig_follows_count || 0, biography: perfil.ig_bio || "", media_count: perfil.ig_media_count || 0, account_type: perfil.ig_account_type || "" }, media: perfil.ig_media || [], insights: [], demographics: null, demographicsError: null, can_publish: !!perfil.can_publish, analyticsLimited: false, loading: false });
// Always set HUBstudio_user cookie so hubGetEmail() works for auth
const email = perfil.email || (user && user.email) || "";
if (email) setCookie("HUBstudio_user", encodeURIComponent(JSON.stringify({ id:perfil.id, nome:perfil.nome, email, instagram: perfil.instagram, slug: perfil.slug || fs })), 30);
if (email) fetch("/api/ig/profile?email=" + encodeURIComponent(email), {credentials:"include"}).then(r => r.json()).then(ig => { if (ig && ig.success && ig.connected) setIgData(prev => ({ ...prev, profile: ig.profile || prev.profile, media: ig.media && ig.media.length ? ig.media : prev.media, insights: ig.insights || [], demographics: ig.demographics, demographicsError: ig.demographicsError, analyticsLimited: ig.analyticsLimited || false })); }).catch(() => {});
} else {
const email = perfil.email || (user && user.email) || "";
if (email) {
setCookie("HUBstudio_user", encodeURIComponent(JSON.stringify({ id:perfil.id, nome:perfil.nome, email, instagram: perfil.instagram, slug: perfil.slug || fs })), 30);
return fetch("/api/ig/profile?email=" + encodeURIComponent(email), {credentials:"include"}).then(r => r.json()).then(ig => { if (ig && ig.success && ig.connected) { setIgData({ connected: true, profile: ig.profile || {}, media: ig.media || [], insights: ig.insights || [], demographics: ig.demographics, demographicsError: ig.demographicsError, can_publish: !!ig.can_publish, analyticsLimited: ig.analyticsLimited || false, loading: false }); } else { setIgData(prev => ({ ...prev, loading: false })); } }).catch(() => { setIgData(prev => ({ ...prev, loading: false })); });
}
setIgData(prev => ({ ...prev, loading: false }));
return null;
}
})
.catch(() => { setIgData(prev => ({ ...prev, loading: false })); });
}, [slug]);

const logout = () => {
try{localStorage.removeItem("hub_user")}catch(e){}
document.cookie = "hub_user=;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/;";
document.cookie = "HUBstudio_user=;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/;";
window.location.href = "/login";
};

if (!user && !slug) return null;
if (igData.loading) return <div style={{display:"flex",alignItems:"center",justifyContent:"center",height:"100vh",color:"var(--muted)"}}>Carregando...</div>;
const t = I18N[lang];
const p = _platformProfile(platform, igData, appUser);
const brandName = p.name || (appUser && appUser.nome) || p.username || (user && user.nome) || "Hub";
const brandHandle = p.username ? "@" + p.username : ((appUser && appUser.instagram) ? (appUser.instagram.startsWith("@") ? appUser.instagram : "@" + appUser.instagram) : "");
const profileSlug = fetchSlug || "";

  const navGroups = [
{ section: "Analytics", items: [
{ key: "overview", label: t.overview, icon: "home" , novidade: true },
{ key: "content", label: t.content, icon: "grid" , novidade: true },
{ key: "audience", label: t.audience, icon: "users" , novidade: true },
{ key: "benchmarks", label: t.benchmarks, icon: "target" , novidade: true },
{ key: "hashtags", label: t.hashtags, icon: "hash" , novidade: true },
]},
{ section: "Ads", items: [
{ key: "ads", label: t.ads, icon: "rocket" , novidade: true },
]},
{ section: "Engagement", items: [
{ key: "inbox", label: t.inbox, icon: "inbox" , novidade: true },
{ key: "mentions", label: t.mentions, icon: "shield" , novidade: true },
{ key: "alerts", label: t.alerts, icon: "bell" , novidade: true },
]},
{ section: "Workflow", items: [
{ key: "calendar", label: t.calendar, icon: "calendar" , novidade: true },
{ key: "approvals", label: t.approvals, icon: "check" , novidade: true },
{ key: "ai", label: t.ai, icon: "bot" , novidade: true },
]},
{ section: "Serviços", items: [
{ key: "services", label: t.services, icon: "briefcase", novidade: true },
{ key: "studio", label: t.studio, icon: "film", novidade: true },
  { key: "ticketera", label: t.ticketera, icon: "ticket", novidade: true },
]},
{ section: "Reports", items: [
{ key: "goals", label: t.goals, icon: "target" , novidade: true },
{ key: "reports", label: t.reports, icon: "download" , novidade: true },
]},
{ section: null, items: [
{ key: "settings", label: t.settings, icon: "settings" , novidade: true },
]},
];

const navAvatarContent = (appUser && appUser.foto_url)
  ? <img src={appUser.foto_url} alt="" />
  : (brandName ? brandName.charAt(0).toUpperCase() : "H");

  const currentLabel = (() => {
    for (const g of navGroups) for (const it of g.items) if (it.key === page) return it.label;
    return page;
  })();

      return (
        <div className="app">
          <aside className="sidebar">
        <div className="brand">
 <div className="brand-mark" onClick={() => window.location.href = "/app/" + profileSlug}><img src="/fotos/logo.jpg" alt="HUB" style={{width:"100%",height:"100%",borderRadius:8}} /></div>
          <div className="brand-name">hub<em>.io</em></div>
        </div>
        {navGroups.map((g, gi) => (
          <div key={gi}>
            {g.section && <div className="nav-section" style={{cursor:"pointer",display:"flex",justifyContent:"space-between",alignItems:"center"}} onClick={()=>toggleSection(g.section)}>{g.section} <span style={{fontSize:10,opacity:.4,transform:collapsedSections[g.section]?"rotate(-90deg)":"",transition:".15s",display:"inline-block"}}>▼</span></div>}
{(!g.section || !collapsedSections[g.section]) && g.items.map(it => (
<React.Fragment key={it.key}>
<div className={"nav-item" + (page === it.key ? " active" : "")} onClick={() => { setPage(it.key); markSeen(it.key); if (it.platform) { setPlatform(it.platform); setFormat(Object.keys(formatByPlatform[it.platform]||formatByPlatform.Instagram)[0]); } if (it.children) { const next = { ...collapsedSections, ['_sub_'+it.key]: !collapsedSections['_sub_'+it.key] }; setCollapsedSections(next); try { _ssSet('hub_nav_collapsed', JSON.stringify(next)); } catch(e) {} } }}>
<Icon name={it.icon} />
<span>{it.label}</span>
{it.children && <span style={{fontSize:10,opacity:.4,transform:collapsedSections['_sub_'+it.key]?"rotate(-90deg)":"",transition:".15s",display:"inline-block",marginLeft:"auto"}}>&#9660;</span>}
{!it.children && it.badge ? <span className="nav-badge">{it.badge}</span> : (!it.children && it.novidade && !seenKeys[it.key] ? <span className="nav-badge-dot" /> : null)}
</div>
{it.children && !collapsedSections['_sub_'+it.key] && it.children.map(ch => (
<div key={ch.key} className={"nav-item" + (page === ch.key ? " active" : "")} style={{paddingLeft:36,fontSize:11}} onClick={() => { setPage(ch.key); markSeen(ch.key); if (it.platform) { setPlatform(it.platform); setFormat(Object.keys(formatByPlatform[it.platform]||formatByPlatform.Instagram)[0]); } }}>
<Icon name={ch.icon} size={13} />
<span>{ch.label}</span>
</div>
))}
</React.Fragment>
))}
          </div>
        ))}
        <div style={{ flex: 1 }} />
        <div style={{ padding: "12px", borderTop: "1px solid var(--border)" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
            <div style={{ width: 28, height: 28, borderRadius: "50%", background: "var(--accent)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 11, fontWeight: 700, color: "#000", flexShrink: 0, overflow: "hidden" }}>
              {navAvatarContent}
            </div>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontSize: 12, fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{brandName}</div>
              <div style={{ fontSize: 10, color: "var(--muted)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{brandHandle}</div>
            </div>
          </div>
          {(appUser && appUser.tipo_conta === "admin") && <div className="nav-item" onClick={() => window.location.href = "/admin"} style={{ padding: "6px 8px", marginBottom: 4 }}><Icon name="shield" size={14} /><span style={{ fontSize: 12 }}>Admin</span></div>}
          <div className="nav-item" onClick={logout} style={{ padding: "6px 8px", marginBottom: 0 }}>
            <Icon name="logout" size={14} />
            <span style={{ fontSize: 12 }}>Sair</span>
          </div>
        </div>
      </aside>
      <div className="main">
        <div className="topbar">
          <div className="crumbs">
            <span>Analytics</span>
            <Icon name="chevR" size={12} style={{ opacity: 0.5 }} />
            <strong>{currentLabel}</strong>
          </div>
          <div className="spacer" />
          <div className="chip live"><span className="live-dot" /><span className="mono" style={{ fontSize: 11 }}>{platform}</span></div>
          <div className="sep-v" />
          <button className="btn ghost icon" onClick={() => { const next = theme === "dark" ? "light" : "dark"; setTheme(next); setCookie("hub_theme", next, 30); }}>
            <Icon name={theme === "dark" ? "sun" : "moon"} size={14} />
          </button>
        </div>
        <div className="content">
          <PageContent page={page} t={t} igData={igData} appUser={appUser || user} brandName={brandName} brandHandle={brandHandle} profileSlug={profileSlug} formatConfig={formatConfig} format={format} setFormat={setFormat} setPlatform={setPlatform} formatByPlatform={formatByPlatform} platform={platform} />
      </div>
</div>
</div>
);
};


const ProfileSection = ({ igData, appUser, brandName, brandHandle, profileSlug, platform, platformProfile: extProfile, ttData, ytChannelData }) => {
const fallbackProfile = _platformProfile(platform, igData, appUser);
const p = extProfile || fallbackProfile;
const connected = _isPlatformConnected(platform, igData, appUser);
const followers = p.followers_count || 0;
const follows = p.follows_count || 0;
const mediaCount = p.media_count || (igData.media || []).length || 0;
const bio = p.biography || (appUser && appUser.bio) || "";
const accountType = p.account_type || "";
const photoUrl = p.profile_picture_url || (ttData && ttData.avatar_url) || (ytChannelData && ytChannelData.snippet && ytChannelData.snippet.thumbnails && ((ytChannelData.snippet.thumbnails.high || ytChannelData.snippet.thumbnails.default || {}).url)) || (appUser && appUser.foto_url) || "";
const role = (appUser && appUser.tipo_conta) || "usuario";
const roleLabel = role === "admin" ? "ADMIN" : (role === "influencer" ? "Influencer" : "Usuário");
const roleClass = role === "admin" ? "role-admin" : (role === "influencer" ? "role-influencer" : "role-usuario");
const cidade = appUser && appUser.cidade;
const estado = appUser && appUser.estado;
const pais = appUser && appUser.pais;
const instagram = appUser && appUser.instagram;
const tiktok = appUser && appUser.tiktok;
const youtube = appUser && appUser.youtube;
const twitter = appUser && appUser.twitter;
const site = appUser && appUser.site;
const fmtN = v => v >= 1e6 ? (v/1e6).toFixed(1)+"M" : v >= 1e3 ? (v/1e3).toFixed(1)+"K" : String(v||0);
const photoHTML = photoUrl
? <div className="profile-photo"><img src={photoUrl} alt="" /></div>
: <div className="profile-photo">{brandName ? brandName.charAt(0).toUpperCase() : "H"}</div>;

return (
<div className="profile-head">
{photoHTML}
<div className="profile-info">
<div className="profile-row">
<span className="profile-name">{brandName}</span>
<span className={"role-badge " + roleClass}>{roleLabel}</span>
</div>
<div className="profile-stats">
<div className="profile-stat">
<span className="profile-stat-num">{fmtN(mediaCount)}</span>
<div className="profile-stat-label">posts</div>
</div>
<div className="profile-stat">
<span className="profile-stat-num">{connected && followers ? fmtN(followers) : <MetaValue platform={platform} limited={igData.analyticsLimited} />}</span>
<div className="profile-stat-label">seguidores</div>
</div>
<div className="profile-stat">
<span className="profile-stat-num">{connected && follows ? fmtN(follows) : <MetaValue platform={platform} limited={igData.analyticsLimited} />}</span>
<div className="profile-stat-label">seguindo</div>
</div>
</div>
{bio && <div className="profile-bio">{bio}</div>}
{(cidade || estado || pais) && <div className="profile-meta">{[cidade, estado, pais].filter(Boolean).join(", ")}</div>}
{accountType && <div className="profile-meta">{accountType}</div>}
<div className="profile-social">
{instagram && <a href={"https://instagram.com/" + instagram.replace("@","")} target="_blank">Instagram</a>}
{tiktok && <a href={"https://tiktok.com/" + tiktok.replace("@","")} target="_blank">TikTok</a>}
{youtube && <a href={youtube.startsWith("http") ? youtube : "https://youtube.com/" + youtube} target="_blank">YouTube</a>}
{twitter && <a href={"https://x.com/" + twitter.replace("@","")} target="_blank">X</a>}
{site && <a href={site} target="_blank">Site</a>}
</div>
{!_isPlatformConnected(platform, igData, appUser) && (
<div className="profile-actions">
<a href={((_platformConfig[platform]||_platformConfig.Instagram).authPath) + "?state=" + encodeURIComponent((appUser && appUser.email) || "") + "&redirect=" + encodeURIComponent(window.location.pathname)} className="btn-ig-connect" style={{background:((_platformConfig[platform]||_platformConfig.Instagram).btnBg)}}>{((_platformConfig[platform]||_platformConfig.Instagram).btn)}</a>
</div>
)}
{connected && (platform === "Instagram" || platform === "Facebook") && !igData.can_publish && (
  <div className="profile-actions" style={{marginTop:8}}>
  <a href={"/api/auth/facebook?state=" + encodeURIComponent((appUser && appUser.email) || "") + "&redirect=" + encodeURIComponent(window.location.pathname)} style={{display:"inline-block",padding:"8px 20px",background:"#1877F2",color:"#fff",borderRadius:8,fontWeight:600,fontSize:"0.85rem",textDecoration:"none"}}>Conectar Facebook para publicar</a>
  </div>
)}
</div>
{profileSlug && (
<div className="profile-actions" style={{marginTop:8}}>
<a href={"/mediakit/" + profileSlug} target="_blank" className="btn-ig-connect" style={{background:"linear-gradient(135deg,var(--accent-dim),var(--accent))"}}>Compartilhar Mediakit</a>
</div>
)}
</div>
);
};

const PageContent = ({ page, t, igData, appUser, brandName, brandHandle, profileSlug, formatConfig, format, setFormat, setPlatform, formatByPlatform, platform }) => {
switch(page) {
case "overview": return <PageOverview t={t} igData={igData} appUser={appUser} brandName={brandName} brandHandle={brandHandle} profileSlug={profileSlug} platform={platform} />;
  case "instagram": break;
  case "ig-graph-api": case "ig-pages-read-content": case "ig-pages-show-list": return <PageMeta t={t} igData={igData} appUser={appUser} subPage={page} />;
case "content": return <iframe src="/conteudo.html" style={{width:"100%",height:"100%",border:"none",flex:1,minHeight:"100vh"}} />;
case "audience": return <PageAudience t={t} igData={igData} appUser={appUser} platform={platform} />;
case "benchmarks": return <PageBenchmarks t={t} igData={igData} appUser={appUser} platform={platform} />;
case "hashtags": return <PageHashtags t={t} igData={igData} appUser={appUser} platform={platform} />;
case "ads": return <PageAds t={t} igData={igData} appUser={appUser} platform={platform} />;
case "inbox": return <PageInbox t={t} igData={igData} appUser={appUser} platform={platform} />;
case "mentions": return <PageMentions t={t} igData={igData} appUser={appUser} platform={platform} />;
case "alerts": return <PageAlerts t={t} igData={igData} appUser={appUser} />;
case "calendar": return <PageCalendar t={t} igData={igData} appUser={appUser} />;
case "approvals": return <PageApprovals t={t} igData={igData} appUser={appUser} />;
case "ai": return <PageAI t={t} igData={igData} appUser={appUser} />;
case "goals": return <PageGoals t={t} igData={igData} appUser={appUser} />;
case "reports": return <PageReports t={t} igData={igData} appUser={appUser} />;
case "settings": return <PageSettings t={t} igData={igData} appUser={appUser} />;
case "services": return <PageServices t={t} igData={igData} appUser={appUser} />;
case "studio": return <PageStudio t={t} igData={igData} appUser={appUser} />;
  case "ticketera": return <PageTicketeraApp t={t} appUser={appUser} profileSlug={profileSlug} />;
case "youtube": return <PageYouTube t={t} igData={igData} appUser={appUser} />;
  case "yt-data-api": case "yt-oauth": case "yt-scope-readonly": case "yt-scope-upload": case "yt-scope-force-ssl": case "yt-scope-partner": case "yt-scope-userinfo": return <PageYouTube t={t} igData={igData} appUser={appUser} subPage={page} />;
case "tiktok": return <PageTikTok t={t} igData={igData} appUser={appUser} />;
  case "tt-login-kit": case "tt-share-kit": case "tt-display-api": case "tt-content-posting": case "tt-scope-profile": case "tt-scope-stats": case "tt-scope-video-list": return <PageTikTok t={t} igData={igData} appUser={appUser} subPage={page} />;
default: return <PageOverview t={t} igData={igData} appUser={appUser} />;
}
};

const PageOverview = ({ t, igData, appUser, brandName, brandHandle, profileSlug, platform }) => {
const p = _platformProfile(platform, igData, appUser);
const media = igData.media || [];
const connected = _isPlatformConnected(platform, igData, appUser);
const userEmail = (appUser && appUser.email) || "";

// Platform-specific data loading
const [ttData, setTtData] = React.useState(null);
const [ytData, setYtData] = React.useState(null);
const [ytChannelData, setYtChannelData] = React.useState(null);

React.useEffect(() => {
  if (platform === "TikTok" && appUser && appUser.tt_connected) {
    fetch("/api/tt/status", { credentials:"include", headers:{"x-user-email":userEmail} })
      .then(r => r.json()).then(d => { if (d.connected) setTtData(d); }).catch(()=>{});
  }
  if (platform === "YouTube" && appUser && appUser.yt_connected) {
    fetch("/api/yt/status", { credentials:"include", headers:{"x-user-email":userEmail} })
      .then(r => r.json()).then(d => {
        if (d.connected) {
          setYtData(d);
          if (d.channelId) {
            fetch("/api/yt/channels?id=" + encodeURIComponent(d.channelId) + "&part=snippet,statistics", { credentials:"include", headers:{"x-user-email":userEmail} })
              .then(r2 => r2.json()).then(ch => { if (ch.items && ch.items[0]) setYtChannelData(ch.items[0]); }).catch(()=>{});
          }
        }
      }).catch(()=>{});
  }
}, [platform, userEmail, appUser && appUser.tt_connected, appUser && appUser.yt_connected]);

// Build unified profile from platform data
const platformProfile = (() => {
  if (platform === "TikTok" && ttData) return {
    username: ttData.display_name || (appUser && appUser.tiktok) || "", name: ttData.display_name || "",
    followers_count: ttData.followers_count || 0, follows_count: ttData.following_count || 0,
    media_count: ttData.video_count || 0, account_type: "TikTok",
    biography: ttData.biography || "", profile_picture_url: ttData.profile_picture_url || (appUser && appUser.foto_url) || ""
  };
  if (platform === "YouTube" && ytChannelData) {
    const s = ytChannelData.statistics || {};
    return {
      username: (ytChannelData.snippet && ytChannelData.snippet.title) || (appUser && appUser.youtube) || "", name: (ytChannelData.snippet && ytChannelData.snippet.title) || "",
      followers_count: +(s.subscriberCount||0), follows_count: 0,
      media_count: +(s.videoCount||0), account_type: "YouTube",
      biography: (ytChannelData.snippet && ytChannelData.snippet.description) || "", profile_picture_url: (ytChannelData.snippet && ytChannelData.snippet.thumbnails && ytChannelData.snippet.thumbnails.default && ytChannelData.snippet.thumbnails.default.url) || (appUser && appUser.foto_url) || ""
    };
  }
  return p;
})();

const username = platformProfile.username || (appUser && appUser.instagram) || "";
const handle = username.startsWith("@") ? username : "@" + username;
const accountType = platformProfile.account_type || "";
const followers = platformProfile.followers_count || 0;
const follows = platformProfile.follows_count || 0;
const mediaCount = platformProfile.media_count || media.length || 0;
const bio = p.biography || "";
const fmtN = v => v >= 1e6 ? (v/1e6).toFixed(1)+"M" : v >= 1e3 ? (v/1e3).toFixed(1)+"K" : String(v||0);
const getInsight = (name) => {
const m = (igData.insights || []).find(x => x.name === name);
if (!m || !m.values || !m.values.length) return null;
return m.values.reduce((s, v) => s + (v.value || 0), 0);
};
const reachVal = getInsight("reach");
const impressionsVal = getInsight("impressions");
const profileViewsVal = getInsight("profile_views");
const followerCountVal = getInsight("follower_count");
const totalLikes = media.reduce((s, m) => s + (m.like_count || 0), 0);
const totalComments = media.reduce((s, m) => s + (m.comments_count || 0), 0);
const engagementVal = totalLikes + totalComments;

// Not connected: show CTA
if (!_isPlatformConnected(platform, igData, appUser)) return <ConnectCTA platform={platform} icon="flame" title={"Conecte " + (platform||"Instagram")} desc={"Vincule sua conta para analytics em tempo real."} email={appUser&&appUser.email} />;
// Sort media by like_count for top posts
const topPosts = [...media].sort((a,b) => (b.like_count||0) - (a.like_count||0)).slice(0, 5);

return (
<>
<ProfileSection igData={igData} appUser={appUser} brandName={brandName} brandHandle={brandHandle} profileSlug={profileSlug} platform={platform} platformProfile={platformProfile} ttData={ttData} ytChannelData={ytChannelData} />
<div className="page-dash">
<div className="page-head">
<div>
<h1 className="page-title">{t.overview}</h1>
<p className="page-sub">{handle} · {accountType} · últimos 30 dias</p>
</div>
<div className="page-actions">
<div className="tabs">
<span className="tab active">{_platformTabs(platform)[0]}</span>
<span className="tab">{_platformTabs(platform)[1]}</span>
<span className="tab">{_platformTabs(platform)[2]}</span>
<span className="tab">{_platformTabs(platform)[3]}</span>
</div>
</div>
</div>

<div className="kpi-grid">
<div className="kpi">
<div className="kpi-label">Seguidores</div>
<div className="kpi-value">{fmtN(followers)}</div>
<div className="kpi-delta"><span className="pill muted">{_platformBadgeLabel(platform)}</span></div>
</div>
<div className="kpi">
<div className="kpi-label">Alcance 30d</div>
<div className="kpi-value"><MetaValue platform={platform} val={reachVal != null ? fmtN(reachVal) : null} /></div>
<div className="kpi-delta">{reachVal != null ? <MetaAuthBadge platform={platform} limited={false} /> : <MetaAuthBadge platform={platform} limited={igData.analyticsLimited} />}</div>
</div>
<div className="kpi">
<div className="kpi-label">Impressões 30d</div>
<div className="kpi-value"><MetaValue platform={platform} val={impressionsVal != null ? fmtN(impressionsVal) : null} /></div>
<div className="kpi-delta">{impressionsVal != null ? <MetaAuthBadge platform={platform} limited={false} /> : <MetaAuthBadge platform={platform} limited={igData.analyticsLimited} />}</div>
</div>
<div className="kpi">
<div className="kpi-label">Visitas perfil 30d</div>
<div className="kpi-value"><MetaValue platform={platform} val={profileViewsVal != null ? fmtN(profileViewsVal) : null} /></div>
<div className="kpi-delta">{profileViewsVal != null ? <MetaAuthBadge platform={platform} limited={false} /> : <MetaAuthBadge platform={platform} limited={igData.analyticsLimited} />}</div>
</div>
<div className="kpi">
<div className="kpi-label">Engajamento total</div>
<div className="kpi-value"><MetaValue platform={platform} val={engagementVal > 0 ? fmtN(engagementVal) : null} /></div>
<div className="kpi-delta"><span className="pill muted">{media.length} posts</span></div>
</div>
<div className="kpi">
<div className="kpi-label">Curtidas totais</div>
<div className="kpi-value">{fmtN(totalLikes)}</div>
<div className="kpi-delta"><span className="pill muted">likes</span></div>
</div>
<div className="kpi">
<div className="kpi-label">Comentários totais</div>
<div className="kpi-value">{fmtN(totalComments)}</div>
<div className="kpi-delta"><span className="pill muted">comentários</span></div>
</div>
<div className="kpi">
<div className="kpi-label">Seguidores (live)</div>
<div className="kpi-value"><MetaValue platform={platform} val={followerCountVal != null ? fmtN(followerCountVal) : null} /></div>
<div className="kpi-delta">{followerCountVal != null ? <MetaAuthBadge platform={platform} limited={false} /> : <MetaAuthBadge platform={platform} limited={igData.analyticsLimited} />}</div>
</div>
</div>

<div className="chart-area">
<div className="chart-title">
<span>Orgânico vs. Pago</span>
<MetaAuthBadge platform={platform} limited={igData.analyticsLimited} />
</div>
<div className="chart-placeholder" style={{opacity:0.3,textAlign:"center",padding:"60px 0"}}>
<p style={{color:"rgba(255,255,255,.3)",fontSize:12}}>Precisa de autorizacao {_platformBadgeLabel(platform)} para dados de alcance orgânico vs pago</p>
</div>
</div>

<div style={{ marginTop: 18 }}>
<div className="card">
<div className="card-hd">
<h3>Top posts · últimos 30 dias</h3>
</div>
<div className="card-body tight">
<table className="tbl">
<thead>
<tr><th>Post</th><th>Tipo</th><th>Data</th><th>Curtidas</th><th>Coment.</th></tr>
</thead>
<tbody>
{topPosts.length > 0 ? topPosts.map((m, i) => (
<tr key={m.id || i}>
<td><a href={m.permalink || "#"} target="_blank" style={{color:"var(--accent)",textDecoration:"none"}}>{m.caption ? m.caption.substring(0,30) + (m.caption.length > 30 ? "..." : "") : "Post " + (i+1)}</a></td>
<td><span className={"pill " + (m.media_type === "VIDEO" ? "accent" : m.media_type === "CAROUSEL_ALBUM" ? "pos" : "muted")}>{m.media_type === "VIDEO" ? "Reel" : m.media_type === "CAROUSEL_ALBUM" ? "Carousel" : "Foto"}</span></td>
<td className="num">{m.timestamp ? new Date(m.timestamp).toLocaleDateString("pt-BR") : "—"}</td>
<td className="num">{fmtN(m.like_count || 0)}</td>
<td className="num">{fmtN(m.comments_count || 0)}</td>
</tr>
)) : <tr><td colSpan={5} style={{textAlign:"center",padding:20,opacity:0.5}}>Nenhum post encontrado</td></tr>}
</tbody>
</table>
</div>
</div>
</div>
</div>
</>
);
};



const PageContent_ = ({ t, igData, appUser, formatConfig, format, setFormat, setPlatform, formatByPlatform, platform }) => {
  const conn = igData.connected;
  const media = igData.media || [];
  const email = appUser && appUser.email;
  const fmtN = v => v >= 1e6 ? (v/1e6).toFixed(1)+"M" : v >= 1e3 ? (v/1e3).toFixed(1)+"K" : String(v||0);
  const totalLikes = media.reduce((s,m) => s + (m.like_count||0), 0);
  const totalComments = media.reduce((s,m) => s + (m.comments_count||0), 0);
  const totalMedia = media.length || 1;
  const engagementRate = totalLikes > 0 ? ((totalLikes + totalComments) / (igData.profile?.followers_count || 1) * 100).toFixed(1) : "0";
  const growthRate = "+18%";

  const getInsight = (name) => { const m = (igData.insights || []).find(x => x.name === name); if (!m || !m.values || !m.values.length) return null; return m.values.reduce((s, v) => s + (v.value || 0), 0); };
  const reachVal = getInsight("reach") || 18900;
  const impressionsVal = getInsight("impressions") || 2100;

  const fc = formatConfig[format] || formatConfig.Feed;
  const [showCreate, setShowCreate] = React.useState(false);
  const [newPost, setNewPost] = React.useState({ conteudo: "", tipo: "feed", media_url: "" });
  const [creating, setCreating] = React.useState(false);
  const [igPublishStatus, setIgPublishStatus] = React.useState({});
  const [selectedMedia, setSelectedMedia] = React.useState(null);
  const [postComments, setPostComments] = React.useState({});
  const [replyTo, setReplyTo] = React.useState(null);
  const [replyText, setReplyText] = React.useState("");
  const [tab, setTab] = React.useState("create");
  const [insightFilter, setInsightFilter] = React.useState("Todos");
  const [insightSearch, setInsightSearch] = React.useState("");
  const [insightLoading, setInsightLoading] = React.useState(false);
  const [insightError, setInsightError] = React.useState("");
  const [insightResults, setInsightResults] = React.useState([]);
  const [recreateUrl, setRecreateUrl] = React.useState("");
  const [recreatePlatform, setRecreatePlatform] = React.useState("Instagram");
  const [recreateFormat, setRecreateFormat] = React.useState("Reels");
  const [recreateLoading, setRecreateLoading] = React.useState(false);
  const [recreateError, setRecreateError] = React.useState("");
  const [recreateResult, setRecreateResult] = React.useState(null);

  const fetchInsights = async () => {
    setInsightLoading(true);
    setInsightError("");
    try {
      const profileNiche = brandName || "lifestyle";
      const filterCtx = insightFilter !== "Todos" ? " com foco em " + insightFilter : "";
      const searchCtx = insightSearch ? " sobre: " + insightSearch : "";
      const prompt = "Analise tendências atuais de conteúdo para o nicho de " + profileNiche + searchCtx + filterCtx + ". Retorne JSON array com 6 objetos: {titulo, descricao (2 frases), tipo (trending|formato|nicho), potencial (alto|medio), hashtags (array 3-5 items sem #), sugestao (legenda curta sugerida)}. Seja específico e atual.";
      const res = await fetch("/api/ai/generate", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ briefing: prompt, tone: "Analítico", count: 1, format: "json" }) });
      if (!res.ok) throw new Error("Erro " + res.status);
      const data = await res.json();
      let items = [];
      try { const txt = (data.captions && data.captions[0]) || "[]"; const match = txt.match(/\[[\s\S]*\]/); items = match ? JSON.parse(match[0]) : []; } catch(e) { items = []; }
      setInsightResults(items.length ? items : [{ titulo: "Conteúdo autêntico", descricao: "Publicações que mostram bastidores e processo criativo tendem a ter 2-3x mais engagement.", tipo: "trending", potencial: "alto", hashtags: ["bastidores","processo","autentico"], sugestao: "Mostrando como criamos cada peça — swipe pra ver o antes e depois" }]);
    } catch(e) { setInsightError(e.message || "Erro ao buscar tendências"); }
    finally { setInsightLoading(false); }
  };

  const fetchRecreate = async () => {
    if (!recreateUrl.trim()) return;
    setRecreateLoading(true);
    setRecreateError("");
    setRecreateResult(null);
    try {
      const prompt = "Analise esta publicação: " + recreateUrl + "\n\nCrie conteúdo similar adaptado para " + recreatePlatform + " no formato " + recreateFormat + " para a marca " + (brandName||"") + ". Retorne JSON: {legenda (string), hashtags (array de strings sem #), hook (string - abertura impactante), cta (string - call to action), imagem_prompt (string - descrição visual para gerar imagem), dicas (array de 3 strings com dicas de performance)}. Seja criativo e adaptado ao nicho.";
      const res = await fetch("/api/ai/generate", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ briefing: prompt, tone: "Descontraído", count: 1, format: "json" }) });
      if (!res.ok) throw new Error("Erro " + res.status);
      const data = await res.json();
      let result = null;
      try { const txt = (data.captions && data.captions[0]) || "{}"; const match = txt.match(/\{[\s\S]*\}/); result = match ? JSON.parse(match[0]) : null; } catch(e) { result = null; }
      if (!result) result = { legenda: data.captions && data.captions[0] ? data.captions[0] : "Conteúdo recriado", hashtags: ["recreate","trending","viral"], hook: "Você precisa ver isso!", cta: "Comenta 'EU QUERO' pra saber mais", imagem_prompt: "Visual impactante no estilo da marca", dicas: ["Poste no horário de pico","Use áudio trending","Responda todos os comentários na primeira hora"] };
      setRecreateResult(result);
    } catch(e) { setRecreateError(e.message || "Erro ao recriar conteúdo"); }
    finally { setRecreateLoading(false); }
  };
  const [publishDate, setPublishDate] = React.useState("");
  const [publishTime, setPublishTime] = React.useState("");
const [previewMode, setPreviewMode] = React.useState("feed");
 const [aiCaptionResult, setAiCaptionResult] = React.useState(null);
 const [aiCaptionLoading, setAiCaptionLoading] = React.useState(false);
 const [aiInsightResults, setAiInsightResults] = React.useState({});
 const [aiInsightLoading, setAiInsightLoading] = React.useState({});
 const aiGenerateCaption = async () => {
  if (!newPost.media_url && !newPost.conteudo) return;
  setAiCaptionLoading(true);
  try {
   const emailOrUsername = email || (appUser && appUser.instagram) || "";
  const res = await fetch("/api/ai/generate", { method: "POST", headers: {"Content-Type":"application/json", "x-user-email": emailOrUsername}, credentials:"include",
    body: JSON.stringify({ briefing: (newPost.conteudo || "Post de " + format + " para " + platform).trim(), tone: "Descontraido", count: 3, platform, format }) });
   const d = await res.json();
   setAiCaptionResult(d.captions || []);
  } catch(e) { setAiCaptionResult([{text:"Erro ao gerar legendas. Tente novamente.",predicted_er:"—"}]); }
  setAiCaptionLoading(false);
 };
 const aiGetInsight = async (type) => {
  setAiInsightLoading({...aiInsightLoading, [type]: true});
  const prompts = {
   "Use hashtags relevantes": `Gere 8-12 hashtags relevantes para um post de ${format} no ${platform} sobre: ${(newPost.conteudo || "marketing digital").substring(0,100)}. Retorne APENAS as hashtags separadas por espaço.`,
   "Melhor horario para postar": `Qual o melhor horario para postar ${format} no ${platform} considerando audiencia brasileira? Responda em 2-3 linhas com horarios especificos.`,
   "Texto com maior desempenho": `Reescreva esta legenda para maximizar engagement no ${platform}: "${(newPost.conteudo || "Post incrivel").substring(0,150)}". Retorne 2 opcoes curtas.`,
   "Marque pessoas relevantes": `Sugira 5 tipos de contas relevantes para marcar num post de ${format} no ${platform} sobre: ${(newPost.conteudo || "lifestyle").substring(0,80)}. Seja especifico (ex: criadores de conteudo X, marcas Y).`
  };
  try {
 const emailOrUsername = email || (appUser && appUser.instagram) || "";
  const res = await fetch("/api/ai/generate", { method: "POST", headers: {"Content-Type":"application/json", "x-user-email": emailOrUsername}, credentials:"include",
  body: JSON.stringify({ briefing: prompts[type], tone: "Descontraido", count: 1 }) });
   const d = await res.json();
   setAiInsightResults({...aiInsightResults, [type]: (d.captions && d.captions[0] && d.captions[0].text) || d.text || "Sem sugestoes disponiveis"});
  } catch(e) { setAiInsightResults({...aiInsightResults, [type]: "Erro. Tente novamente."}); }
  setAiInsightLoading({...aiInsightLoading, [type]: false});
 };

 const handlePublish = async () => {
  if (!newPost.media_url && platform !== "TikTok") return;
  if (!newPost.conteudo && platform === "TikTok") return;
  setCreating(true);
  const emailOrUsername = email || (appUser && appUser.instagram) || "";
  const endpoints = { Instagram: "/api/ig/publish", Facebook: "/api/fb/publish", TikTok: "/api/tt/publish" };
  const body = { caption: newPost.conteudo, image_url: newPost.media_url, platform: platform.toLowerCase() };
  const r = await fetch(endpoints[platform] || endpoints.Instagram, { method: "POST", headers: {"Content-Type":"application/json", "x-user-email": emailOrUsername}, body: JSON.stringify(body) });
  const d = await r.json();
  if (d.success) { setIgPublishStatus({ok: true, msg: "Publicado no " + platform + "!"}); setNewPost({ conteudo: "", tipo: "feed", media_url: "" }); setShowCreate(false); }
  else { setIgPublishStatus({ok: false, msg: d.error || "Erro ao publicar no " + platform}); }
  setCreating(false);
 };

  const fetchComments = async (mediaId) => {
    const emailOrUsername = email || (appUser && appUser.instagram) || "";
    const r = await fetch("/api/ig/post-comments?media_id=" + mediaId + "&email=" + encodeURIComponent(emailOrUsername));
    const data = await r.json();
    setPostComments({...postComments, [mediaId]: data.comments || []});
    setSelectedMedia(mediaId);
  };

  const handleReply = async (commentId) => {
    if (!replyText.trim()) return;
    const emailOrUsername = email || (appUser && appUser.instagram) || "";
    const r = await fetch("/api/ig/comments/" + commentId + "/reply?email=" + encodeURIComponent(emailOrUsername), { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ message: replyText }) });
    const data = await r.json();
    if (data.success) { setReplyText(""); setReplyTo(null); if(selectedMedia) fetchComments(selectedMedia); }
  };

  const tabs = ["Criar conteudo", "Insights", "Recriar", "Rascunhos", "Publicados"];
  const formatButtons = ["Feed", "Stories", "Reels", "Carrossel"];

  const cardStyle = { background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 24, padding: 24 };
  const goldBtn = { background: "linear-gradient(135deg, #d97706, #f59e0b)", color: "#000", fontWeight: 700, border: "none", borderRadius: 16, cursor: "pointer" };
  const ghostBtn = { background: "var(--surface-2)", color: "var(--muted)", fontWeight: 600, border: "1px solid var(--border)", borderRadius: 16, cursor: "pointer" };
  const inputBox = { background: "var(--bg)", border: "1px solid var(--border-strong)", borderRadius: 12, padding: 14, color: "var(--text)", fontSize: ".85rem", width: "100%" };
  const brandName = (appUser && appUser.nome) || (igData.profile && igData.profile.username) || "User";
  const brandInitials = brandName.slice(0,2).toUpperCase();

if (!_isPlatformConnected(platform, igData, appUser)) return <ConnectCTA platform={platform} icon="grid" title={t.content + " requer " + (platform||"Instagram") + " conectado"} desc={"Vincule sua conta para criar e agendar posts."} email={email} />;

  return (
    <div className="page-dash">
      {/* HEADER */}
      <div className="page-head" style={{flexDirection:"column",alignItems:"flex-start",marginBottom:24}}>
        <h1 className="page-title" style={{fontSize:"2rem"}}>Conteudo</h1>
        <p className="page-sub">Crie, gerencie e publique conteudos de alto impacto.</p>
        <div style={{display:"flex",gap:32,marginTop:20}}>
          {tabs.map((item, i) => (
            <div key={item} onClick={() => setTab(i === 0 ? "create" : i === 1 ? "insights" : i === 2 ? "recreate" : i === 3 ? "drafts" : "media")}
              style={{paddingBottom:8,cursor:"pointer",fontSize:".88rem",
                color: (tab === "create" && i === 0) || (tab === "insights" && i === 1) || (tab === "recreate" && i === 2) || (tab === "drafts" && i === 3) || (tab === "media" && i === 4) ? "#d97706" : "var(--muted)",
                borderBottom: (tab === "create" && i === 0) || (tab === "insights" && i === 1) || (tab === "recreate" && i === 2) || (tab === "drafts" && i === 3) || (tab === "media" && i === 4) ? "2px solid #d97706" : "2px solid transparent",
                fontWeight: 500, transition: ".15s"}}>
              {item}
            </div>
          ))}
        </div>
      </div>

      {tab === "create" ? (
        <div style={{display:"grid",gridTemplateColumns:"1fr 1fr 1fr",gap:18}}>
 {/* LEFT — Editor (espelha o card Instagram identico ao preview) */}
 <div style={cardStyle}>
  <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:18}}>
   <h3 style={{fontWeight:700,fontSize:"1.1rem",margin:0}}>EDITOR DE CONTEUDO</h3>
   <div style={{display:"flex",gap:6}}>
    {formatButtons.map((item) => (
     <button key={item} onClick={() => { setFormat(item); setNewPost({...newPost, tipo: (formatConfig[item] || formatConfig.Feed).tipo}); }}
      style={{padding:"6px 14px",borderRadius:12,fontSize:".72rem",fontWeight:600,border:"none",cursor:"pointer",
      background: format === item ? "#d97706" : "var(--surface-2)",
      color: format === item ? "#000" : "var(--muted)"}}>
      {item}
     </button>
    ))}
   </div>
  </div>
  <div style={{background:"var(--bg)",border:"1px solid var(--border-strong)",borderRadius:28,padding:18}}>
   {/* Avatar + username === preview */}
   <div style={{display:"flex",alignItems:"center",gap:12,marginBottom:16}}>
    <div style={{width:48,height:48,borderRadius:"50%",background:"var(--accent)",display:"flex",alignItems:"center",justifyContent:"center",fontWeight:700,fontSize:"1.1rem",color:"#000",overflow:"hidden"}}>
     {(appUser && appUser.foto_url) ? <img src={appUser.foto_url} style={{width:"100%",height:"100%",objectFit:"cover"}} /> : brandInitials}
    </div>
    <div>
     <h4 style={{fontWeight:600,fontSize:".88rem",margin:0}}>@{(igData.profile && igData.profile.username) || (appUser && appUser.instagram) || "user"}</h4>
     <p style={{fontSize:".72rem",color:"var(--muted)",margin:0}}>{[appUser && appUser.cidade, appUser && appUser.estado].filter(Boolean).join(", ")}</p>
    </div>
   </div>
   {/* Media area === preview */}
   <div style={{position:"relative"}}>
    <span style={{position:"absolute",top:12,left:12,zIndex:2,padding:"4px 10px",borderRadius:8,fontSize:".68rem",fontWeight:600,background:"rgba(0,0,0,.6)",color:"#d97706",backdropFilter:"blur(8px)"}}>{format}</span>
    {newPost.media_url ? (
     <img src={newPost.media_url} onClick={() => { var el = document.getElementById("file-upload"); if(el) el.click(); }} style={{borderRadius:24,height:fc.previewH,objectFit:"cover",width:"100%",cursor:"pointer"}} />
    ) : (
     <div onClick={() => { var el = document.getElementById("file-upload"); if(el) el.click(); }} style={{borderRadius:24,height:fc.previewH,background:"var(--bg-2)",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",color:"var(--muted)",cursor:"pointer"}}>
      <Icon name={fc.icon} size={48} stroke={1} style={{marginBottom:12,opacity:.4}} />
      <span style={{fontSize:".88rem",opacity:.5}}>Clique para adicionar midia</span>
     </div>
    )}
    <input id="file-upload" type="file" accept={fc.accept} style={{display:"none"}}
     onChange={async e => { const file = e.target.files[0]; if(!file) return; const fd = new FormData(); fd.append('image', file); const r = await fetch('/api/upload', {method:'POST', body:fd}); const d = await r.json(); if(d.url) setNewPost({...newPost, media_url: d.url}); }} />
   </div>
   {/* Action icons === preview */}
   <div style={{display:"flex",justifyContent:"space-between",marginTop:14,fontSize:"1.2rem"}}>
    <div style={{display:"flex",gap:14}}>
     <span>&#9825;</span><span>&#128172;</span><span>&#10148;</span>
    </div>
    <span>&#128278;</span>
   </div>
 {/* Caption area inline === preview */}
 <div style={{marginTop:14}}>
  <div style={{display:"flex",justifyContent:"space-between",alignItems:"center"}}>
   <span style={{fontWeight:600,color:"var(--text)",fontSize:".85rem"}}> @{(igData.profile && igData.profile.username) || "user"} </span>
   <button onClick={aiGenerateCaption} disabled={aiCaptionLoading} title="Gerar legenda com IA"
    style={{background:"var(--surface-2)",border:"1px solid rgba(217,119,6,.3)",color:"#d97706",padding:"4px 10px",borderRadius:8,fontSize:".72rem",fontWeight:600,cursor:aiCaptionLoading?"not-allowed":"pointer",display:"flex",alignItems:"center",gap:4}}>
    <span>🔖</span> {aiCaptionLoading ? "..." : "IA"}
   </button>
  </div>
  <textarea value={newPost.conteudo} onChange={e => setNewPost({...newPost, conteudo: e.target.value})} rows={3} placeholder={fc.placeholder}
   style={{background:"transparent",border:"none",outline:"none",color:"var(--text-2)",fontSize:".85rem",lineHeight:1.6,width:"100%",resize:"vertical",padding:0,marginTop:2,fontFamily:"inherit"}} />
 </div>
   <p style={{color:"var(--muted)",fontSize:".72rem",marginTop:10}}>Ha 2 horas</p>
  </div>

  {igPublishStatus.msg && (
   <div style={{marginTop:12,padding:"10px 14px",borderRadius:10,fontSize:".78rem",
    background: igPublishStatus.ok ? "rgba(0,200,83,.08)" : "rgba(255,61,113,.08)",
    color: igPublishStatus.ok ? "#00c853" : "#ff1744",
    border: igPublishStatus.ok ? "1px solid rgba(0,200,83,.15)" : "1px solid rgba(255,61,113,.15)"}}>
    {igPublishStatus.msg}
   </div>
  )}
 </div>

          {/* CENTER — Preview */}
          <div style={cardStyle}>
            <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:18}}>
              <h3 style={{fontWeight:700,fontSize:"1.1rem",margin:0}}>PRE-VISUALIZACAO</h3>
 <div style={{display:"flex",gap:6}}>
  {["feed","mobile"].map(m => (
   <button key={m} onClick={() => setPreviewMode(m)}
    style={{background:previewMode===m?"#d97706":"var(--surface-2)",color:previewMode===m?"#000":"var(--muted)",padding:"6px 14px",borderRadius:12,fontSize:".72rem",fontWeight:600,border:"none",cursor:"pointer"}}>{m==="feed"?"Feed":"Mobile"}</button>
  ))}
 </div>
 </div>
 <div style={{background:previewMode==="mobile"?"#111":"var(--bg)",borderRadius:previewMode==="mobile"?40:28,padding:previewMode==="mobile"?14:18,display:previewMode==="mobile"?"flex":undefined,justifyContent:previewMode==="mobile"?"center":undefined,position:"relative",border:previewMode==="mobile"?"none":"1px solid var(--border-strong)",maxWidth:previewMode==="mobile"?375:undefined,width:previewMode==="mobile"?"100%":undefined}}>
  {previewMode==="mobile" && <div style={{position:"absolute",top:8,left:"50%",transform:"translateX(-50%)",width:60,height:4,borderRadius:2,background:"#333"}}></div>}
  <div style={{background:"var(--bg)",borderRadius:28,padding:18,border:previewMode==="mobile"?"1px solid var(--border-strong)":"none"}}>
  <div style={{display:"flex",alignItems:"center",gap:12,marginBottom:16}}>
   <div style={{width:48,height:48,borderRadius:"50%",background:"var(--accent)",display:"flex",alignItems:"center",justifyContent:"center",fontWeight:700,fontSize:"1.1rem",color:"#000",overflow:"hidden"}}>
    {(appUser && appUser.foto_url) ? <img src={appUser.foto_url} style={{width:"100%",height:"100%",objectFit:"cover"}} /> : brandInitials}
   </div>
   <div>
    <h4 style={{fontWeight:600,fontSize:".88rem",margin:0}}>@{(igData.profile && igData.profile.username) || (appUser && appUser.instagram) || "user"}</h4>
    <p style={{fontSize:".72rem",color:"var(--muted)",margin:0}}>{[appUser && appUser.cidade, appUser && appUser.estado].filter(Boolean).join(", ")}</p>
   </div>
  </div>
  <div style={{position:"relative"}}>
   <span style={{position:"absolute",top:12,left:12,zIndex:2,padding:"4px 10px",borderRadius:8,fontSize:".68rem",fontWeight:600,background:"rgba(0,0,0,.6)",color:"#d97706",backdropFilter:"blur(8px)"}}>{format}</span>
   {newPost.media_url ? (
    <img src={newPost.media_url} style={{borderRadius:24,height:fc.previewH,objectFit:"cover",width:"100%"}} />
   ) : (
    <div style={{borderRadius:24,height:fc.previewH,background:"var(--bg-2)",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",color:"var(--muted)"}}>
     <Icon name={fc.icon} size={48} stroke={1} style={{marginBottom:12,opacity:.4}} />
     <span style={{fontSize:".88rem",opacity:.5}}>Preview {format}</span>
    </div>
   )}
  </div>
  <div style={{display:"flex",justifyContent:"space-between",marginTop:14,fontSize:"1.2rem"}}>
   <div style={{display:"flex",gap:14}}>
    <span>&#9825;</span><span>&#128172;</span><span>&#10148;</span>
   </div>
   <span>&#128278;</span>
  </div>
  <div style={{marginTop:14,fontSize:".85rem",lineHeight:1.6,color:"var(--text-2)"}}>
   <span style={{fontWeight:600,color:"var(--text)"}}> @{(igData.profile && igData.profile.username) || "user"} </span>
   {newPost.conteudo || "Viver momentos unicos em lugares incriveis..."}
  </div>
  <p style={{color:"var(--muted)",fontSize:".72rem",marginTop:10}}>Ha 2 horas</p>
  </div>
 </div>
 </div>

          {/* RIGHT — Publish + Performance */}
          <div style={{display:"flex",flexDirection:"column",gap:18}}>
            <div style={cardStyle}>
              <h3 style={{fontWeight:700,fontSize:"1.1rem",margin:"0 0 18px"}}>PUBLICACAO</h3>
              <div style={{marginBottom:14}}>
     <label style={{fontSize:".72rem",color:"var(--muted)",display:"block",marginBottom:6}}>Publicar em</label>
     <div style={{display:"flex",gap:8,flexWrap:"wrap"}}>
      {["Instagram","TikTok","YouTube","Facebook"].map(p => (
       <button key={p} onClick={() => { setPlatform(p); setFormat(Object.keys(formatByPlatform[p]||formatByPlatform.Instagram)[0]); }}
        style={{padding:"10px 16px",borderRadius:12,fontSize:".78rem",fontWeight:600,cursor:"pointer",border:"none",
        background:platform===p?"#d97706":"var(--surface-2)",
        color:platform===p?"#000":"var(--muted)",
        display:"flex",alignItems:"center",gap:6}}>
        {p==="Instagram"&&<span style={{fontSize:"1rem"}}>&#128247;</span>}
        {p==="Facebook"&&<span style={{fontSize:"1rem"}}>&#10226;</span>}
        {p==="TikTok"&&<span style={{fontSize:"1rem"}}>&#9835;</span>}
        {p}
       </button>
      ))}
     </div>
              </div>
              <div>
                <label style={{fontSize:".72rem",color:"var(--muted)",display:"block",marginBottom:6}}>Quando publicar</label>
                <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:10}}>
                  <input type="date" value={publishDate} onChange={e => setPublishDate(e.target.value)} style={inputBox} />
                  <input type="time" value={publishTime} onChange={e => setPublishTime(e.target.value)} style={inputBox} />
                </div>
              </div>
              <button onClick={handlePublish} disabled={!newPost.media_url || creating}
                style={{...goldBtn, width:"100%",marginTop:20,padding:"14px 0",fontSize:".88rem",
                  background: newPost.media_url ? "linear-gradient(135deg,#d97706,#f59e0b)" : "var(--surface-2)",
                  color: newPost.media_url ? "#000" : "var(--muted)",
                  cursor: newPost.media_url ? "pointer" : "not-allowed",
                  boxShadow: newPost.media_url ? "0 4px 20px rgba(217,119,6,.3)" : "none"}}>
                {creating ? "Publicando..." : publishDate ? "AGENDAR " + format.toUpperCase() : "PUBLICAR " + format.toUpperCase()}
              </button>
              <button style={{...ghostBtn, width:"100%",marginTop:10,padding:"14px 0"}}>SALVAR COMO RASCUNHO</button>
            </div>

            <div style={cardStyle}>
              <h3 style={{fontWeight:700,fontSize:"1.1rem",margin:"0 0 18px"}}>PREVISAO DE DESEMPENHO</h3>
              <div style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:10,marginBottom:18}}>
                {[["18.2K - 24.8K","Alcance"],["2.1K - 3.4K","Engajamento"],["6.2% - 8.7%","Taxa"]].map(([value,label]) => (
                  <div key={label}>
                    <p style={{color:"var(--muted)",fontSize:".68rem",margin:0}}>{label}</p>
                    <h4 style={{fontSize:"1rem",fontWeight:700,margin:"6px 0 0"}}>{value}</h4>
                  </div>
                ))}
              </div>
              <div style={{height:180,background:"var(--bg)",borderRadius:16,padding:14,display:"flex",alignItems:"flex-end",gap:5,border:"1px solid var(--border-strong)"}}>
                {[40,50,70,65,80,60,90].map((h,i) => (
                  <div key={i} style={{flex:1,height:h+"%",background:"linear-gradient(to top, #d97706, #f59e0b)",borderRadius:"4px 4px 0 0"}} />
                ))}
              </div>
            </div>
          </div>

 {/* BOTTOM — Insights com IA em tempo real */}
 <div style={{gridColumn:"1 / -1",display:"grid",gridTemplateColumns:"repeat(5,1fr)",gap:14}}>
  {/* 🔖 Sugestao de legenda por IA */}
  <div style={{...cardStyle,gridColumn:"1 / -1",marginBottom:4}}>
   <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:12}}>
    <div style={{display:"flex",alignItems:"center",gap:8}}>
     <span style={{fontSize:"1.2rem"}}>🔖</span>
     <div>
      <h3 style={{fontSize:".88rem",fontWeight:600,margin:0}}>Sugestao de legenda por IA</h3>
      <p style={{color:"var(--muted)",fontSize:".72rem",margin:"4px 0 0"}}>Gerado por NVIDIA NIM — baseado na sua midia</p>
     </div>
    </div>
    <button onClick={aiGenerateCaption} disabled={aiCaptionLoading}
     style={{background:"#d97706",color:"#000",padding:"8px 16px",borderRadius:12,fontSize:".72rem",fontWeight:600,border:"none",cursor:aiCaptionLoading?"not-allowed":"pointer",opacity:aiCaptionLoading ? .6 : 1}}>
     {aiCaptionLoading ? "Gerando..." : "Gerar legendas"}
    </button>
   </div>
   {aiCaptionResult && aiCaptionResult.length > 0 && (
    <div style={{display:"flex",flexDirection:"column",gap:10}}>
     {aiCaptionResult.map((cap, ci) => (
      <div key={ci} style={{padding:12,background:"var(--bg)",borderRadius:12,border:"1px solid var(--border)",display:"flex",justifyContent:"space-between",alignItems:"flex-start",gap:12}}>
       <div style={{flex:1,fontSize:".78rem",whiteSpace:"pre-wrap",lineHeight:1.5,color:"var(--text-2)"}}>{cap.text}</div>
       <div style={{display:"flex",flexDirection:"column",gap:4,flexShrink:0}}>
        <span style={{fontSize:".68rem",color:cap.predicted_er && parseFloat(cap.predicted_er) >= 7 ? "var(--pos)" : "var(--muted)",fontWeight:600}}>ER {cap.predicted_er || "—"}</span>
        <button onClick={() => { setNewPost({...newPost, conteudo: cap.text}); setAiCaptionResult(null); }}
         style={{padding:"4px 10px",borderRadius:8,fontSize:".68rem",fontWeight:600,cursor:"pointer",border:"1px solid rgba(217,119,6,.3)",background:"var(--surface-2)",color:"#d97706"}}>Usar</button>
        <button onClick={() => { navigator.clipboard.writeText(cap.text); }}
         style={{padding:"4px 10px",borderRadius:8,fontSize:".68rem",fontWeight:600,cursor:"pointer",border:"1px solid var(--border)",background:"var(--surface-2)",color:"var(--muted)"}}>Copiar</button>
       </div>
      </div>
     ))}
    </div>
   )}
  </div>
  {/* 4 insight cards com IA em tempo real */}
  {["Use hashtags relevantes","Melhor horario para postar","Texto com maior desempenho","Marque pessoas relevantes","Pontuacao geral"].map((item,i) => (
   <div key={item} style={cardStyle}>
    <h3 style={{fontSize:".88rem",fontWeight:600,margin:0}}>{item}</h3>
    <p style={{color:"var(--muted)",fontSize:".72rem",margin:"8px 0 0"}}>Insights inteligentes para melhorar seu conteudo.</p>
    {i === 4 ? (
     <div style={{marginTop:16,display:"flex",alignItems:"center",justifyContent:"center"}}>
      <div style={{width:96,height:96,borderRadius:"50%",border:"8px solid var(--pos)",display:"flex",alignItems:"center",justifyContent:"center",fontSize:"1.8rem",fontWeight:700}}>82</div>
     </div>
    ) : aiInsightResults[item] ? (
     <div style={{marginTop:12,padding:10,background:"var(--bg)",borderRadius:10,fontSize:".72rem",lineHeight:1.5,color:"var(--text-2)",whiteSpace:"pre-wrap",maxHeight:120,overflow:"auto"}}>{aiInsightResults[item]}</div>
    ) : (
     <button onClick={() => aiGetInsight(item)} disabled={aiInsightLoading[item]}
      style={{marginTop:16,background:aiInsightLoading[item]?"var(--border)":"var(--surface-2)",border:"1px solid rgba(217,119,6,.3)",color:"#d97706",padding:"8px 14px",borderRadius:12,fontSize:".72rem",fontWeight:600,cursor:aiInsightLoading[item]?"not-allowed":"pointer"}}>
      {aiInsightLoading[item] ? "Carregando..." : "VER SUGESTOES"}
     </button>
    )}
   </div>
  ))}
 </div>
 </div>
      ) : tab === "media" ? (
        /* Media Grid */
        <div style={{padding:20}}>
          {media.length > 0 ? (
            <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(320px,1fr))",gap:16}}>
              {media.map(function(m, i) { return (
                <div key={m.id||i} style={{background:"var(--surface)",borderRadius:16,border:"1px solid var(--border)",overflow:"hidden"}}
                  onMouseEnter={e => { e.currentTarget.style.borderColor = "rgba(217,119,6,.3)"; }} onMouseLeave={e => { e.currentTarget.style.borderColor = "var(--border)"; }}>
                  {m.media_url && (<div style={{height:220,overflow:"hidden",background:"var(--bg)"}}>
                    <img src={m.media_type==="VIDEO"&&m.thumbnail_url?m.thumbnail_url:m.media_url} alt="" style={{width:"100%",height:"100%",objectFit:"cover"}} onError={e => { e.target.parentElement.style.display="none"; }} />
                  </div>)}
                  <div style={{padding:14}}>
                    <div style={{display:"flex",justifyContent:"space-between",marginBottom:10}}>
                      <span style={{padding:"3px 8px",borderRadius:6,fontSize:".65rem",fontWeight:600,
                        background: m.media_type === "VIDEO" ? "rgba(217,119,6,.1)" : m.media_type === "CAROUSEL_ALBUM" ? "rgba(108,92,231,.1)" : "var(--glass)",
                        color: m.media_type === "VIDEO" ? "#d97706" : m.media_type === "CAROUSEL_ALBUM" ? "#6c5ce7" : "var(--muted)"}}>
                        {m.media_type === "VIDEO" ? "Reel" : m.media_type === "CAROUSEL_ALBUM" ? "Carousel" : "Foto"}
                      </span>
                      <span style={{fontSize:".7rem",color:"var(--muted)"}}>{new Date(m.timestamp).toLocaleDateString("pt-BR",{day:"2-digit",month:"short"})}</span>
                    </div>
                    {m.caption && <p style={{fontSize:".8rem",lineHeight:1.5,opacity:.7,display:"-webkit-box",WebkitLineClamp:2,WebkitBoxOrient:"vertical",overflow:"hidden",margin:"0 0 12px"}}>{m.caption}</p>}
                    <div style={{display:"flex",gap:12,marginBottom:10}}>
                      <span style={{display:"flex",alignItems:"center",gap:5,fontSize:".8rem",color:"var(--muted)"}}>&#9829; {fmtN(m.like_count||0)}</span>
                      <span style={{display:"flex",alignItems:"center",gap:5,fontSize:".8rem",color:"var(--muted)"}}>&#128172; {fmtN(m.comments_count||0)}</span>
                    </div>
                    <div style={{display:"flex",gap:8}}>
                      {m.permalink && <a href={m.permalink} target="_blank" style={{flex:1,textAlign:"center",padding:"8px 0",borderRadius:8,background:"rgba(217,119,6,.08)",border:"1px solid rgba(217,119,6,.2)",color:"#d97706",fontSize:".72rem",fontWeight:600,textDecoration:"none"}}>Ver no IG</a>}
                      <button onClick={() => fetchComments(m.id)} style={{flex:1,padding:"8px 0",borderRadius:8,background:"var(--glass)",border:"1px solid var(--border)",color:"var(--muted)",fontSize:".72rem",fontWeight:600,cursor:"pointer"}}>Comentarios</button>
                    </div>
                  </div>
                </div>
              );})}
            </div>
          ) : (
            <div style={{textAlign:"center",padding:60,opacity:.4}}>
              <p style={{fontSize:".88rem"}}>Nenhum post do Instagram encontrado</p>
            </div>
          )}
        </div>
      ) : (
        <div style={{textAlign:"center",padding:60,opacity:.4}}>
          <p style={{fontSize:".88rem"}}>Em breve</p>
        </div>
      )}

      {/* Comments Modal */}
      {selectedMedia && postComments[selectedMedia] && (
        <div className="modal-overlay" onClick={() => setSelectedMedia(null)}>
          <div className="modal" style={{width:480,background:"var(--surface)",borderRadius:16,border:"1px solid var(--border)",padding:20}} onClick={e => e.stopPropagation()}>
            <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:16}}>
              <h3 style={{fontWeight:700,fontSize:".95rem"}}>Comentarios</h3>
              <button onClick={() => setSelectedMedia(null)} style={{background:"none",border:"none",color:"var(--muted)",cursor:"pointer",fontSize:"1.2rem"}}>x</button>
            </div>
            {(postComments[selectedMedia]||[]).length > 0 ? (postComments[selectedMedia]||[]).map((c,ci) => (
              <div key={ci} style={{padding:"12px 0",borderBottom:"1px solid var(--border)"}}>
                <div style={{display:"flex",alignItems:"flex-start",gap:10}}>
                  <div style={{width:32,height:32,borderRadius:"50%",background:"linear-gradient(135deg,#f58529,#e1306c)",display:"flex",alignItems:"center",justifyContent:"center",fontSize:11,fontWeight:700,color:"#fff",flexShrink:0}}>
                    {(c.from?.username || "U").slice(0,2).toUpperCase()}
                  </div>
                  <div style={{flex:1}}>
                    <span style={{fontWeight:600,fontSize:".78rem",color:"#d97706"}}>@{c.from?.username || "user"}</span>
                    <p style={{fontSize:".82rem",margin:0,marginTop:4,lineHeight:1.5}}>{c.text}</p>
                    {replyTo === c.id ? (
                      <div style={{display:"flex",gap:6,marginTop:8}}>
                        <input value={replyText} onChange={e => setReplyText(e.target.value)} placeholder="Responder..."
                          style={{flex:1,padding:"8px 12px",borderRadius:16,border:"1px solid #d97706",background:"var(--bg)",color:"#fff",fontSize:".78rem",outline:"none"}}
                          onKeyDown={e => { if(e.key==="Enter") handleReply(c.id); }} />
                        <button onClick={() => setReplyTo(null)} style={{padding:"8px 10px",borderRadius:16,border:"1px solid var(--border)",background:"transparent",color:"var(--muted)",cursor:"pointer",fontSize:".72rem"}}>x</button>
                        <button onClick={() => handleReply(c.id)} style={{padding:"8px 14px",borderRadius:16,border:"none",background:"linear-gradient(135deg,#5851db,#833ab4)",color:"#fff",fontWeight:600,cursor:"pointer",fontSize:".72rem"}}>Enviar</button>
                      </div>
                    ) : (
                      <button onClick={() => { setReplyTo(c.id); setReplyText(""); }} style={{marginTop:8,background:"none",border:"none",color:"#d97706",fontSize:".72rem",cursor:"pointer"}}>Responder</button>
                    )}
                  </div>
                </div>
                <p style={{fontSize:".65rem",color:"var(--muted)",margin:0,marginTop:6,marginLeft:42}}>{c.timestamp ? new Date(c.timestamp).toLocaleDateString("pt-BR") : ""}</p>
              </div>
            )) : (
              <p style={{opacity:.4,textAlign:"center",padding:20,fontSize:".82rem"}}>Nenhum comentario ou permissao nao aprovada</p>
            )}
          </div>
        </div>
      )}
    </div>
  );
};
const PageAudience = ({ t, igData, appUser, platform }) => {
const connected = igData.connected;
if (!_isPlatformConnected(platform, igData, appUser)) return <ConnectCTA platform={platform} icon="users" title={"Audiencia requer " + (platform||"Instagram") + " API"} desc={"Demograficos e insights de audiencia exigem autorizacao " + (platform||"Instagram") + "."} email={appUser&&appUser.email} />;
  const p = _platformProfile(platform, igData, appUser);
  const followers = p.followers_count || 0;
  const demo = igData.demographics;
  return (
    <div className="page-dash">
      <div className="page-head">
        <div>
          <h1 className="page-title">{t.audience}</h1>
          <p className="page-sub">@{p.username || (appUser && appUser.instagram)} · seguidores {followers.toLocaleString("pt-BR")}</p>
        </div>
      </div>
      <div className="kpi-grid">
        <div className="kpi"><div className="kpi-label">Seguidores</div><div className="kpi-value">{followers.toLocaleString("pt-BR")}</div><div className="kpi-delta"><MetaAuthBadge platform={platform} limited={igData.analyticsLimited} /></div></div>
        <div className="kpi"><div className="kpi-label">Idioma principal</div><div className="kpi-value"><MetaValue platform={platform} val={demo && demo.locale ? demo.locale : null} /></div><div className="kpi-delta"><MetaAuthBadge platform={platform} limited={igData.analyticsLimited} /></div></div>
        <div className="kpi"><div className="kpi-label">Cidade principal</div><div className="kpi-value"><MetaValue platform={platform} val={demo && demo.city ? demo.city : null} /></div><div className="kpi-delta"><MetaAuthBadge platform={platform} limited={igData.analyticsLimited} /></div></div>
        <div className="kpi"><div className="kpi-label">Pais principal</div><div className="kpi-value"><MetaValue platform={platform} val={demo && demo.country ? demo.country : null} /></div><div className="kpi-delta"><MetaAuthBadge platform={platform} limited={igData.analyticsLimited} /></div></div>
      </div>
      {igData.demographicsError && <div className="card" style={{marginBottom:18}}><div className="card-body"><p style={{color:"var(--warn)",fontSize:".82rem"}}>{igData.demographicsError}</p></div></div>}
      <div className="card"><div className="card-hd"><h3>Distribuicao por genero</h3></div><div className="card-body"><div style={{textAlign:"center",padding:40,opacity:.4}}><p>Requer autorizacao {_platformBadgeLabel(platform)} para dados demograficos</p></div></div></div>
    </div>
  );
};
const PageBenchmarks = ({ t, igData, appUser, platform }) => {
const p = _platformProfile(platform, igData, appUser);
const connected = igData.connected;
if (!_isPlatformConnected(platform, igData, appUser)) return <ConnectCTA platform={platform} icon="target" title={"Benchmarks requerem " + (platform||"Instagram") + " API"} desc={"Posicionamento competitivo e oportunidades exigem autorizacao " + (platform||"Instagram") + "."} email={appUser&&appUser.email} />;
return (
<div className="page-dash">
<div className="page-head"><div><h1 className="page-title">{t.benchmarks}</h1><p className="page-sub">Health Check · {p.username ? "@"+p.username : ""}</p></div></div>
<div className="kpi-grid">
<div className="kpi"><div className="kpi-label">Engajamento vs mercado <MetaAuthBadge platform={platform} limited={igData.analyticsLimited} /></div><div className="kpi-value"><MetaValue platform={platform} limited={igData.analyticsLimited} /></div><div className="kpi-delta"><MetaAuthBadge platform={platform} limited={igData.analyticsLimited} /></div></div>
<div className="kpi"><div className="kpi-label">Freq. Reels vs mercado <MetaAuthBadge platform={platform} limited={igData.analyticsLimited} /></div><div className="kpi-value"><MetaValue platform={platform} limited={igData.analyticsLimited} /></div><div className="kpi-delta"><MetaAuthBadge platform={platform} limited={igData.analyticsLimited} /></div></div>
<div className="kpi"><div className="kpi-label">Gap de horários <MetaAuthBadge platform={platform} limited={igData.analyticsLimited} /></div><div className="kpi-value"><MetaValue platform={platform} limited={igData.analyticsLimited} /></div><div className="kpi-delta"><MetaAuthBadge platform={platform} limited={igData.analyticsLimited} /></div></div>
<div className="kpi"><div className="kpi-label">Oportunidades IA <MetaAuthBadge platform={platform} limited={igData.analyticsLimited} /></div><div className="kpi-value"><MetaValue platform={platform} limited={igData.analyticsLimited} /></div><div className="kpi-delta"><MetaAuthBadge platform={platform} limited={igData.analyticsLimited} /></div></div>
</div>
<div className="card" style={{marginBottom:16}}><div className="card-hd"><h3>Posicionamento competitivo</h3><MetaAuthBadge platform={platform} limited={igData.analyticsLimited} /></div><div className="card-body" style={{padding:40,textAlign:"center"}}><div style={{opacity:0.3,marginBottom:8}}><Icon name="target" size={32} /></div><p style={{color:"rgba(255,255,255,.3)",fontSize:12}}>Precisa de autorizacao {_platformBadgeLabel(platform)} para dados de seguidores</p></div></div>
<div className="card"><div className="card-hd"><h3>Gaps e oportunidades (IA)</h3><MetaAuthBadge platform={platform} limited={igData.analyticsLimited} /></div><div className="card-body" style={{padding:40,textAlign:"center"}}><div style={{opacity:0.3,marginBottom:8}}><Icon name="sparkle" size={32} /></div><p style={{color:"rgba(255,255,255,.3)",fontSize:12}}>Precisa de autorizacao {_platformBadgeLabel(platform)} para analise de oportunidades</p></div></div>
</div>
);
};

const PageHashtags = ({ t, igData, appUser, platform }) => {
const p = _platformProfile(platform, igData, appUser);
const connected = igData.connected;
if (!_isPlatformConnected(platform, igData, appUser)) return <ConnectCTA platform={platform} icon="hash" title={"Hashtags requerem " + (platform||"Instagram") + " API"} desc={"Descoberta e performance de hashtags exigem autorizacao " + (platform||"Instagram") + "."} email={appUser&&appUser.email} />;
return (
<div className="page-dash">
<div className="page-head"><div><h1 className="page-title">{t.hashtags}</h1><p className="page-sub">Descoberta, performance e tendências · {p.username ? "@"+p.username : ""}</p></div></div>
<div className="kpi-grid">
<div className="kpi"><div className="kpi-label">Hashtags monitoradas <MetaAuthBadge platform={platform} limited={igData.analyticsLimited} /></div><div className="kpi-value"><MetaValue platform={platform} limited={igData.analyticsLimited} /></div><div className="kpi-delta"><MetaAuthBadge platform={platform} limited={igData.analyticsLimited} /></div></div>
<div className="kpi"><div className="kpi-label">Em alta (7d) <MetaAuthBadge platform={platform} limited={igData.analyticsLimited} /></div><div className="kpi-value"><MetaValue platform={platform} limited={igData.analyticsLimited} /></div><div className="kpi-delta"><MetaAuthBadge platform={platform} limited={igData.analyticsLimited} /></div></div>
<div className="kpi"><div className="kpi-label">Alcance via hashtags <MetaAuthBadge platform={platform} limited={igData.analyticsLimited} /></div><div className="kpi-value"><MetaValue platform={platform} limited={igData.analyticsLimited} /></div><div className="kpi-delta"><MetaAuthBadge platform={platform} limited={igData.analyticsLimited} /></div></div>
</div>
<div className="card" style={{marginBottom:16}}><div className="card-hd"><h3>Nuvem de hashtags</h3><MetaAuthBadge platform={platform} limited={igData.analyticsLimited} /></div><div className="card-body" style={{padding:40,textAlign:"center"}}><div style={{opacity:0.3,marginBottom:8}}><Icon name="hash" size={32} /></div><p style={{color:"rgba(255,255,255,.3)",fontSize:12}}>Precisa de autorizacao {_platformBadgeLabel(platform)} para dados de hashtags</p></div></div>
<div className="card"><div className="card-hd"><h3>Performance por hashtag</h3><MetaAuthBadge platform={platform} limited={igData.analyticsLimited} /></div><div className="card-body" style={{padding:40,textAlign:"center"}}><p style={{color:"rgba(255,255,255,.3)",fontSize:12}}>Precisa de autorizacao {_platformBadgeLabel(platform)}</p></div></div>
</div>
);
};

const PageAds = ({ t, igData, appUser, platform }) => {
const p = _platformProfile(platform, igData, appUser);
const connected = igData.connected;
if (!_isPlatformConnected(platform, igData, appUser)) return <ConnectCTA platform={platform} icon="rocket" title={"Ads requerem " + (platform||"Instagram") + " API"} desc={"ROAS, spend e atribuicao exigem autorizacao " + (platform||"Instagram") + " Ads API."} email={appUser&&appUser.email} />;
return (
<div className="page-dash">
<div className="page-head"><div><h1 className="page-title">{t.ads}</h1><p className="page-sub">Instagram Ads + Facebook Ads · {p.username ? "@"+p.username : ""}</p></div></div>
<div className="kpi-grid">
<div className="kpi"><div className="kpi-label">ROAS tempo real <MetaAuthBadge platform={platform} limited={igData.analyticsLimited} /></div><div className="kpi-value"><MetaValue platform={platform} limited={igData.analyticsLimited} /></div><div className="kpi-delta"><MetaAuthBadge platform={platform} limited={igData.analyticsLimited} /></div></div>
<div className="kpi"><div className="kpi-label">Spend 30d <MetaAuthBadge platform={platform} limited={igData.analyticsLimited} /></div><div className="kpi-value"><MetaValue platform={platform} limited={igData.analyticsLimited} /></div><div className="kpi-delta"><MetaAuthBadge platform={platform} limited={igData.analyticsLimited} /></div></div>
<div className="kpi"><div className="kpi-label">Receita atribuída <MetaAuthBadge platform={platform} limited={igData.analyticsLimited} /></div><div className="kpi-value"><MetaValue platform={platform} limited={igData.analyticsLimited} /></div><div className="kpi-delta"><MetaAuthBadge platform={platform} limited={igData.analyticsLimited} /></div></div>
<div className="kpi"><div className="kpi-label">CPA médio <MetaAuthBadge platform={platform} limited={igData.analyticsLimited} /></div><div className="kpi-value"><MetaValue platform={platform} limited={igData.analyticsLimited} /></div><div className="kpi-delta"><MetaAuthBadge platform={platform} limited={igData.analyticsLimited} /></div></div>
</div>
<div className="card" style={{marginBottom:16}}><div className="card-hd"><h3>Spend × Receita × ROAS</h3><MetaAuthBadge platform={platform} limited={igData.analyticsLimited} /></div><div className="card-body" style={{padding:40,textAlign:"center"}}><div style={{opacity:0.3,marginBottom:8}}><Icon name="rocket" size={32} /></div><p style={{color:"rgba(255,255,255,.3)",fontSize:12}}>Precisa de autorizacao {_platformBadgeLabel(platform)} para dados de ads</p></div></div>
<div className="card"><div className="card-hd"><h3>Análise de criativos</h3><MetaAuthBadge platform={platform} limited={igData.analyticsLimited} /></div><div className="card-body" style={{padding:40,textAlign:"center"}}><p style={{color:"rgba(255,255,255,.3)",fontSize:12}}>Precisa de autorizacao {_platformBadgeLabel(platform)} para dados de criativos</p></div></div>
</div>
);
};

const PageInbox = ({ t, igData, appUser, platform }) => {
const [inboxData, setInboxData] = React.useState(null);
const [inboxLoading, setInboxLoading] = React.useState(true);
const [activeConvo, setActiveConvo] = React.useState(null);
const [inboxTab, setInboxTab] = React.useState("conversas");
const [aiOn, setAiOn] = React.useState(true);
const [replyingTo, setReplyingTo] = React.useState(null);
const [replyText, setReplyText] = React.useState("");
const email = appUser && appUser.email;

const handleReply = async (commentId) => {
  if (!replyText.trim()) return;
  try {
    const r = await fetch("/api/ig/comments/" + commentId + "/reply?email=" + encodeURIComponent(email), {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ message: replyText })
    });
    const data = await r.json();
    if (data.success) {
      setReplyText("");
      setReplyingTo(null);
      // Refresh comments
      const comRes = await fetch("/api/ig/comments?email=" + encodeURIComponent(email));
      const comData = await comRes.json();
      setInboxData(prev => ({ ...prev, comments: comData.comments || [] }));
    }
  } catch (e) { console.error(e); }
};

const handleHideComment = async (commentId) => {
  try {
    const r = await fetch("/api/ig/comments/" + commentId + "?email=" + encodeURIComponent(email), { method: 'DELETE' });
    const data = await r.json();
    if (data.success) {
      // Remove from UI
      setInboxData(prev => ({ ...prev, comments: (prev.comments || []).filter(c => c.id !== commentId) }));
    }
  } catch (e) { console.error(e); }
};

React.useEffect(() => {
if (!email) { setInboxLoading(false); return; }
setInboxLoading(true);
Promise.all([
  fetch("/api/ig/conversations?email=" + encodeURIComponent(email)),
  fetch("/api/ig/comments?email=" + encodeURIComponent(email))
])
.then(([convRes, comRes]) => Promise.all([convRes.json(), comRes.json()]))
.then(([convData, comData]) => { setInboxData({ conversations: convData.conversations || [], comments: comData.comments || [], error: convData.error || comData.error }); setInboxLoading(false); })
.catch(() => setInboxLoading(false));
}, [email]);

const connected = igData.connected;
const convos = (inboxData && inboxData.conversations) || [];
const comments = (inboxData && inboxData.comments) || [];
const convosError = inboxData && inboxData.error;
const commentsError = inboxData && inboxData.commentsError;
const hasConvos = convos.length > 0;
const hasComments = comments.length > 0;

// Not connected
if (!_isPlatformConnected(platform, igData, appUser)) return <ConnectCTA platform={platform} icon="inbox" title={"Inbox requer " + (platform||"Instagram") + " API"} desc={"DMs e comentarios exigem autorizacao " + (platform||"Instagram") + " com permissao de mensagens."} email={email} />;

if (inboxLoading) return <div className="page-dash" style={{display:"flex",alignItems:"center",justifyContent:"center",minHeight:"40vh",color:"rgba(255,255,255,.3)"}}>Carregando inbox...</div>;

// Demo data for when Meta hasn't approved permissions yet
const demoConvos = [
{ id: "d1", updated_time: new Date(Date.now()-120000).toISOString(), unread_count: 2, snippet: "Oi! Vi seu novo drop, adorei a coleção! 😍", participants: { data: [{name:"@maria_style"}] } },
{ id: "d2", updated_time: new Date(Date.now()-1800000).toISOString(), unread_count: 0, snippet: "Vocês fazem entrega pra SP?", participants: { data: [{name:"@carlos.dev"}] } },
{ id: "d3", updated_time: new Date(Date.now()-7200000).toISOString(), unread_count: 1, snippet: "Queria saber o preço do look completo", participants: { data: [{name:"@ana.mods"}] } },
{ id: "d4", updated_time: new Date(Date.now()-86400000).toISOString(), unread_count: 0, snippet: "Parabéns pelo trabalho, muito top!", participants: { data: [{name:"@pedro_foto"}] } },
{ id: "d5", updated_time: new Date(Date.now()-172800000).toISOString(), unread_count: 0, snippet: "Tem como fazer encomenda personalizada?", participants: { data: [{name:"@lu.brand"}] } },
];
const demoComments = [
{ id: "dc1", text: "Que coleção linda! Quero tudo 😍", timestamp: new Date(Date.now()-300000).toISOString(), from: { username:"@fashionista_sp" }, media_id:"m1" },
{ id: "dc2", text: "Preço?", timestamp: new Date(Date.now()-3600000).toISOString(), from: { username:"@vitor.mg" }, media_id:"m1" },
{ id: "dc3", text: "Já comprei, chegou rápido!", timestamp: new Date(Date.now()-7200000).toISOString(), from: { username:"@buyer_rj" }, media_id:"m2" },
{ id: "dc4", text: "Tem como personalizar?", timestamp: new Date(Date.now()-14400000).toISOString(), from: { username:"@custom_make" }, media_id:"m1" },
{ id: "dc5", text: "Adorei as cores ðŸ¥", timestamp: new Date(Date.now()-28800000).toISOString(), from: { username:"@design.cores" }, media_id:"m3" },
{ id: "dc6", text: "Vocês entregam pro Nordeste?", timestamp: new Date(Date.now()-43200000).toISOString(), from: { username:"@nordeste_shop" }, media_id:"m2" },
];
const demoMessages = {
d1: [
{ from:"@maria_style", text:"Oi! Vi seu novo drop, adorei a coleção! 😍", time: new Date(Date.now()-120000).toISOString(), direction:"in" },
{ from:"voce", text:"Obrigado Maria!! 🙏 A coleção nova ficou incrível", time: new Date(Date.now()-90000).toISOString(), direction:"out" },
{ from:"@maria_style", text:"Qual o preço do look completo?", time: new Date(Date.now()-60000).toISOString(), direction:"in" },
],
d2: [
{ from:"@carlos.dev", text:"Vocês fazem entrega pra SP?", time: new Date(Date.now()-1800000).toISOString(), direction:"in" },
{ from:"voce", text:"Sim! Entregamos pra todo Brasil via Correios 🗦", time: new Date(Date.now()-1700000).toISOString(), direction:"out" },
{ from:"@carlos.dev", text:"Show, vou fazer o pedido agora", time: new Date(Date.now()-1600000).toISOString(), direction:"in" },
],
d3: [
{ from:"@ana.mods", text:"Queria saber o preço do look completo", time: new Date(Date.now()-7200000).toISOString(), direction:"in" },
],
d4: [
{ from:"@pedro_foto", text:"Parabéns pelo trabalho, muito top!", time: new Date(Date.now()-86400000).toISOString(), direction:"in" },
{ from:"voce", text:"Valeu Pedro! Bora criar algo juntos? 🎨", time: new Date(Date.now()-80000000).toISOString(), direction:"out" },
],
d5: [
{ from:"@lu.brand", text:"Tem como fazer encomenda personalizada?", time: new Date(Date.now()-172800000).toISOString(), direction:"in" },
],
};
const isDemo = connected && !hasConvos && !hasComments;
const useConvos = hasConvos ? convos : (isDemo ? demoConvos : []);
const useComments = hasComments ? comments : (isDemo ? demoComments : []);
const useHasConvos = useConvos.length > 0;
const useHasComments = useComments.length > 0;


const selected = activeConvo || (useConvos[0] || null);
const selectedMsgs = selected && demoMessages[selected.id] ? demoMessages[selected.id] : [];
const fmtTime = ts => { if (!ts) return ''; const d = new Date(ts); const now = new Date(); const diff = (now-d)/60000; if (diff < 60) return Math.round(diff)+'min'; if (diff < 1440) return Math.round(diff/60)+'h'; return d.toLocaleDateString('pt-BR',{day:'2-digit',month:'2-digit'}); };
const getName = c => (c.participants && c.participants.data && c.participants.data[0] && c.participants.data[0].name) || 'Contato';
const hashGrad = name => { let h=0; for(let i=0;i<name.length;i++) h=name.charCodeAt(i)+((h<<5)-h); const grads=[['#f58529','#f09433','#e1306c','#c13584','#833ab4','#5851db'],['#405de6','#5851db','#833ab4','#c13584','#e1306c'],['#fcaf45','#f58529','#f09433'],['#fd1d1d','#f56040','#f77737','#fcaf45'],['#833ab4','#c13584','#e1306c'],['#5851db','#405de6','#6a82fb'],['#0061ff','#0088ff','#00b2ff'],['#11998e','#38ef7d']]; return grads[Math.abs(h)%grads.length]; };
const Grav = ({name,size}) => { const g=hashGrad(name); const ini=name.slice(0,2).toUpperCase(); return <div style={{width:size,height:size,borderRadius:'50%',background:'linear-gradient(135deg,'+g.join(',')+')',display:'flex',alignItems:'center',justifyContent:'center',fontSize:size*.34,fontWeight:700,color:'#fff',flexShrink:0,letterSpacing:'.02em',boxShadow:'0 2px 8px '+g[0]+'44'}}>{ini}</div>; };

return (
<div className="page-dash">
<div className="page-head">
<div>
<h1 className="page-title">{t.inbox}</h1>
<p className="page-sub">@{(appUser && appUser.instagram) || 'seu Instagram'} · DMs + comentarios · classificacao IA</p>
</div>
<div className="page-actions" style={{display:'flex',gap:8,alignItems:'center'}}>
{isDemo && <span style={{padding:'3px 10px',borderRadius:6,background:'linear-gradient(135deg,#ffc107,#ff9800)',color:'#000',fontSize:'.65rem',fontWeight:700,letterSpacing:'.06em'}}>PREVIEW</span>}
<button onClick={function(){setAiOn(!aiOn);}} style={{display:'inline-flex',alignItems:'center',gap:6,padding:'6px 14px',borderRadius:20,border:'1px solid '+(aiOn?'rgba(0,200,83,.3)':'var(--border)'),background:aiOn?'rgba(0,200,83,.1)':'transparent',color:aiOn?'#00c853':'var(--muted)',cursor:'pointer',fontSize:'.78rem',fontWeight:600,transition:'all .2s'}}>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><rect x="4" y="7" width="16" height="12" rx="3"/><circle cx="9" cy="13" r="1"/><circle cx="15" cy="13" r="1"/><path d="M12 3v4M8 19v2M16 19v2"/></svg>
Auto-resposta IA
<span style={{width:7,height:7,borderRadius:'50%',background:aiOn?'#00c853':'var(--muted)',boxShadow:aiOn?'0 0 6px #00c853':'none',transition:'all .2s'}}></span>
</button>
</div>
</div>

{isDemo && <div style={{padding:'10px 16px',background:'linear-gradient(135deg,rgba(255,193,7,.08),rgba(255,152,0,.06))',border:'1px solid rgba(255,193,7,.18)',borderRadius:10,marginBottom:14,fontSize:'.78rem',color:'#ffc107',display:'flex',alignItems:'center',gap:10}}>
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
Preview " dados simulados. Apos autorizacao {_platformBadgeLabel(platform)}, dados reais aparecerao aqui.
</div>}

<div className="tabs" style={{gap:6}}>
<div className={'tab'+(inboxTab==='conversas'?' active':'')} onClick={function(){setInboxTab('conversas');}}>
<span style={{marginRight:6}}>Conversas</span>
<span style={{display:'inline-flex',alignItems:'center',justifyContent:'center',minWidth:20,height:20,borderRadius:10,padding:'0 6px',fontSize:'.65rem',fontWeight:700,background:useHasConvos?'rgba(0,200,83,.15)':'var(--surface-2)',color:useHasConvos?'#00c853':'var(--muted)'}}>{useConvos.length}</span>
</div>
<div className={'tab'+(inboxTab==='comentários'?' active':'')} onClick={function(){setInboxTab('comentários');}}>
<span style={{marginRight:6}}>Comentarios</span>
<span style={{display:'inline-flex',alignItems:'center',justifyContent:'center',minWidth:22,height:20,borderRadius:10,padding:'0 7px',fontSize:'.65rem',fontWeight:700,background:useHasComments?'rgba(0,200,83,.12)':'var(--surface-2)',color:useHasComments?'#00c853':'var(--muted)'}}>{Math.min(useComments.length,50)}</span>
</div>
</div>

{inboxTab === 'conversas' ? (
<div style={{display:'flex',gap:0,borderRadius:12,overflow:'hidden',border:'1px solid var(--border)',background:'var(--surface-2)',minHeight:460}}>
{/* Conversation List */}
<div style={{width:320,minWidth:320,borderRight:'1px solid var(--border)',overflowY:'auto',display:'flex',flexDirection:'column'}}>
<div style={{padding:'10px 14px',borderBottom:'1px solid var(--border)',display:'flex',alignItems:'center',gap:8}}>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--muted)" strokeWidth="2"><circle cx="11" cy="11" r="7"/><line x1="16.5" y1="16.5" x2="21" y2="21"/></svg>
<input placeholder="Buscar conversa..." style={{flex:1,background:'transparent',border:'none',color:'#fff',fontSize:'.8rem',outline:'none'}} />
</div>
{useHasConvos ? useConvos.map(function(c, i) {
const name = getName(c);
const unread = c.unread_count || 0;
const isActive = selected && selected.id === c.id;
return (
<div key={c.id} onClick={function(){setActiveConvo(c);}} style={{display:'flex',alignItems:'center',gap:10,padding:'12px 14px',cursor:'pointer',background:isActive?'rgba(255,255,255,.06)':'transparent',borderLeft:isActive?'3px solid var(--accent)':'3px solid transparent',transition:'all .15s',borderBottom:'1px solid rgba(255,255,255,.03)'}} onMouseEnter={function(e){if(!isActive)e.currentTarget.style.background='rgba(255,255,255,.03)';}} onMouseLeave={function(e){if(!isActive)e.currentTarget.style.background='transparent';}}>
<div style={{position:'relative'}}>
<Grav name={name} size={42} />
{unread > 0 && <span style={{position:'absolute',top:-2,right:-2,minWidth:18,height:18,borderRadius:9,background:'linear-gradient(135deg,#ff1744,#f50057)',color:'#fff',fontSize:'.6rem',fontWeight:700,display:'flex',alignItems:'center',justifyContent:'center',padding:'0 5px',border:'2px solid var(--surface-2)',boxShadow:'0 2px 6px rgba(255,23,68,.4)'}}>{unread}</span>}
</div>
<div style={{flex:1,minWidth:0}}>
<div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:2}}>
<span style={{fontSize:'.82rem',fontWeight:600,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{name}</span>
<span style={{fontSize:'.65rem',color:'rgba(255,255,255,.3)',flexShrink:0,marginLeft:8}}>{fmtTime(c.updated_time)}</span>
</div>
<div style={{fontSize:'.74rem',color:'rgba(255,255,255,.3)',overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap',maxHeight:18}}>{c.snippet || ''}</div>
</div>
</div>
);
}) : (
<div style={{padding:40,textAlign:'center'}}>
<div style={{opacity:.2,marginBottom:12}}><Icon name="inbox" size={36} /></div>
<p style={{color:'rgba(255,255,255,.3)',fontSize:'.8rem'}}>Nenhuma conversa encontrada</p>
</div>
)}
</div>

{/* Chat Pane */}
<div style={{flex:1,display:'flex',flexDirection:'column',minWidth:0}}>
{selected ? (
<>
{/* Chat Header */}
<div style={{display:'flex',alignItems:'center',gap:10,padding:'12px 18px',borderBottom:'1px solid var(--border)',background:'var(--surface)'}}>
<Grav name={getName(selected)} size={36} />
<div style={{flex:1}}>
<div style={{fontSize:'.88rem',fontWeight:700}}>{getName(selected)}</div>
<div style={{fontSize:'.68rem',color:'rgba(255,255,255,.3)',display:'flex',alignItems:'center',gap:4}}>
{isDemo && <><span style={{width:6,height:6,borderRadius:'50%',background:'#00c853',display:'inline-block'}}></span> Instagram DM</>}
</div>
</div>
<button style={{background:'transparent',border:'none',color:'rgba(255,255,255,.3)',cursor:'pointer',padding:6,borderRadius:8,transition:'all .15s'}} onMouseEnter={function(e){e.currentTarget.style.background='var(--surface-2)';e.currentTarget.style.color='var(--text)';}} onMouseLeave={function(e){e.currentTarget.style.background='transparent';e.currentTarget.style.color='var(--muted)';}}>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
</button>
</div>

{/* Chat Messages */}
<div style={{flex:1,padding:16,overflowY:'auto',display:'flex',flexDirection:'column',gap:10,maxHeight:340}}>
{(isDemo ? selectedMsgs : [{from:'contact',text:selected.snippet||'Sem mensagens',time:selected.updated_time,direction:'in'}]).map(function(msg, mi){
var isOut = msg.direction === 'out';
return (
<div key={mi} style={{display:'flex',justifyContent:isOut?'flex-end':'flex-start',alignItems:'flex-end',gap:6}}>
{!isOut && <Grav name={msg.from} size={24} />}
<div style={{maxWidth:'70%',padding:'10px 14px',borderRadius:isOut?'18px 18px 4px 18px':'18px 18px 18px 4px',background:isOut?'linear-gradient(135deg,#5851db,#833ab4)':'var(--surface-2)',color:isOut?'#fff':'var(--text)',boxShadow:isOut?'0 2px 12px rgba(88,81,219,.25)':'none',transition:'transform .1s'}} onMouseEnter={function(e){e.currentTarget.style.transform='scale(1.01)';}} onMouseLeave={function(e){e.currentTarget.style.transform='scale(1)';}}>
<div style={{fontSize:'.82rem',lineHeight:1.5}}>{msg.text}</div>
<div style={{fontSize:'.6rem',opacity:.45,marginTop:4,textAlign:isOut?'right':'left'}}>{fmtTime(msg.time)}</div>
</div>
{isOut && <div style={{width:24,height:24,borderRadius:'50%',background:'linear-gradient(135deg,#5851db,#833ab4)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:'.52rem',fontWeight:700,color:'#fff',flexShrink:0}}>VC</div>}
</div>
);
})}
</div>

{/* Chat Input */}
<div style={{display:'flex',alignItems:'center',gap:8,padding:'10px 14px',borderTop:'1px solid var(--border)',background:'var(--surface)'}}>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--muted)" strokeWidth="1.8" style={{cursor:'pointer',flexShrink:0}}><rect x="3" y="3" width="18" height="18" rx="3"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>
<input placeholder="Digite uma mensagem..." style={{flex:1,padding:'10px 14px',borderRadius:22,border:'1px solid var(--border)',background:'var(--surface)',color:'#fff',fontSize:'.82rem',outline:'none',transition:'border-color .2s'}} onFocus={function(e){e.currentTarget.style.borderColor='var(--accent)';}} onBlur={function(e){e.currentTarget.style.borderColor='var(--border)';}} />
<button style={{width:38,height:38,borderRadius:'50%',border:'none',background:'linear-gradient(135deg,#5851db,#833ab4,#e1306c)',color:'#fff',cursor:'pointer',display:'flex',alignItems:'center',justifyContent:'center',boxShadow:'0 2px 10px rgba(131,58,180,.35)',transition:'transform .15s,box-shadow .15s'}} onMouseEnter={function(e){e.currentTarget.style.transform='scale(1.08)';e.currentTarget.style.boxShadow='0 4px 16px rgba(131,58,180,.5)';}} onMouseLeave={function(e){e.currentTarget.style.transform='scale(1)';e.currentTarget.style.boxShadow='0 2px 10px rgba(131,58,180,.35)';}}>
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
</button>
</div>
</>
) : (
<div style={{display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',height:'100%',gap:12,color:'rgba(255,255,255,.3)'}}>
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" opacity=".2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
<span style={{fontSize:'.85rem'}}>Selecione uma conversa</span>
</div>
)}
</div>
</div>
) : (
<div style={{borderRadius:12,overflow:'hidden',border:'1px solid var(--border)',background:'var(--surface-2)'}}>
{/* Comments Header */}
<div style={{display:'flex',alignItems:'center',justifyContent:'space-between',padding:'14px 18px',borderBottom:'1px solid var(--border)'}}>
<div style={{display:'flex',alignItems:'center',gap:8}}>
<h3 style={{fontSize:'.92rem',fontWeight:700,margin:0}}>Comentarios recentes</h3>
<span style={{display:'inline-flex',alignItems:'center',justifyContent:'center',minWidth:22,height:20,borderRadius:10,padding:'0 7px',fontSize:'.65rem',fontWeight:700,background:'rgba(0,200,83,.12)',color:'#00c853'}}>{useComments.length}</span>
</div>
</div>
<div style={{padding:12,display:'grid',gap:8}}>
{useComments.slice(0,10).map(function(c, i){
const username = (c.from && c.from.username) || 'Usuario';
const isReplying = replyingTo === c.id;
return (
<div key={c.id||i} style={{padding:'12px 14px',borderRadius:10,border:'1px solid var(--border)',background:'var(--surface)',transition:'all .15s'}}>
<div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:8}}>
<div style={{display:'flex',alignItems:'center',gap:8}}>
<c className={(() => {/* Grav name={username} size={30} */ return null; })()}>{(function(){ const g=hashGrad(username); const ini=username.slice(0,2).toUpperCase(); return <div style={{width:30,height:30,borderRadius:'50%',background:'linear-gradient(135deg,'+g.join(',')+')',display:'flex',alignItems:'center',justifyContent:'center',fontSize:10,fontWeight:700,color:'#fff',flexShrink:0}}>{ini}</div>; })()}</c>
<span style={{fontSize:'.78rem',fontWeight:600}}>{username}</span>
</div>
<span style={{fontSize:'.65rem',color:'rgba(255,255,255,.3)'}}>{fmtTime(c.timestamp)}</span>
</div>
{c.media_permalink && <a href={c.media_permalink} target="_blank" style={{fontSize:'.65rem',color:'var(--accent)',marginBottom:4,display:'block'}}>{c.media_caption || 'Ver post'}</a>}
<div style={{fontSize:'.8rem',lineHeight:1.55,paddingLeft:0,color:'rgba(255,255,255,.7)'}}>{c.text || ''}</div>
{isReplying ? (
<div style={{display:'flex',gap:6,marginTop:8}}>
<input value={replyText} onChange={function(e){setReplyText(e.target.value);}} placeholder="Digite sua resposta..." style={{flex:1,padding:'8px 12px',borderRadius:16,border:'1px solid var(--accent)',background:'var(--surface-2)',color:'#fff',fontSize:'.78rem',outline:'none'}} onKeyDown={function(e){if(e.key==='Enter')handleReply(c.id);}} />
<button onClick={function(){setReplyingTo(null);setReplyText('');}} style={{padding:'8px 12px',borderRadius:16,border:'1px solid var(--border)',background:'transparent',color:'var(--muted)',cursor:'pointer',fontSize:'.78rem'}}>Cancelar</button>
<button onClick={function(){handleReply(c.id);}} style={{padding:'8px 16px',borderRadius:16,border:'none',background:'linear-gradient(135deg,#5851db,#833ab4)',color:'#fff',cursor:'pointer',fontSize:'.78rem',fontWeight:600}}>Enviar</button>
</div>
) : (
<div style={{display:'flex',gap:6,marginTop:8}}>
<button onClick={function(){setReplyingTo(c.id);setReplyText('');}} style={{display:'inline-flex',alignItems:'center',gap:4,padding:'4px 10px',borderRadius:14,border:'1px solid var(--border)',background:'transparent',color:'rgba(255,255,255,.3)',cursor:'pointer',fontSize:'.68rem',fontWeight:500,transition:'all .15s'}} onMouseEnter={function(e){e.currentTarget.style.borderColor='var(--accent)';e.currentTarget.style.color='var(--accent)';}} onMouseLeave={function(e){e.currentTarget.style.borderColor='var(--border)';e.currentTarget.style.color='var(--muted)';}}>
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
Responder
</button>
<button onClick={function(){handleHideComment(c.id);}} style={{display:'inline-flex',alignItems:'center',gap:4,padding:'4px 10px',borderRadius:14,border:'1px solid var(--border)',background:'transparent',color:'rgba(255,255,255,.3)',cursor:'pointer',fontSize:'.68rem',fontWeight:500,transition:'all .15s'}} onMouseEnter={function(e){e.currentTarget.style.borderColor='#e1306c';e.currentTarget.style.color='#e1306c';e.currentTarget.style.background='rgba(225,48,108,.06)';}} onMouseLeave={function(e){e.currentTarget.style.borderColor='var(--border)';e.currentTarget.style.color='var(--muted)';e.currentTarget.style.background='transparent';}}>
<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
Esconder
</button>
</div>
)}
</div>
);
})}
</div>
</div>
)}
</div>
);
};

const PageMentions = ({ t, igData, appUser, platform }) => {
const [mentionsData, setMentionsData] = React.useState(null);
const [mentionsLoading, setMentionsLoading] = React.useState(true);
const email = appUser && appUser.email;

React.useEffect(() => {
if (!email) return;
setMentionsLoading(true);
fetch("/api/ig/mentions?email=" + encodeURIComponent(email))
.then(r => r.json())
.then(data => { setMentionsData(data); setMentionsLoading(false); })
.catch(() => setMentionsLoading(false));
}, [email]);

const connected = igData.connected;
const mentions = (mentionsData && mentionsData.mentions) || [];
const commentMentions = (mentionsData && mentionsData.commentMentions) || [];
const mentionsError = mentionsData && mentionsData.mentionsError;
const hasMentions = mentions.length > 0;
const hasCommentMentions = commentMentions.length > 0;
const allMentions = [...mentions, ...commentMentions].sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
const totalMentions = allMentions.length;

if (!_isPlatformConnected(platform, igData, appUser)) return <ConnectCTA platform={platform} icon="shield" title={"Mencoes requer " + (platform||"Instagram") + " API"} desc={"Monitoramento de mencoes exige autorizacao " + (platform||"Instagram") + "."} email={email} />;
if (mentionsLoading) return <div className="page-dash" style={{display:"flex",alignItems:"center",justifyContent:"center",minHeight:"40vh",color:"rgba(255,255,255,.3)"}}>Carregando menções...</div>;

const fmtTime = ts => { if (!ts) return ""; const d = new Date(ts); const now = new Date(); const diff = (now-d)/60000; if (diff < 60) return "há "+Math.round(diff)+"min"; if (diff < 1440) return "há "+Math.round(diff/60)+"h"; return d.toLocaleDateString("pt-BR",{day:"2-digit",month:"2-digit"}); };

return (
<div className="page-dash">
<div className="page-head">
<div>
<h1 className="page-title">Menções & crise</h1>
<p className="page-sub">Monitoramento em tempo real · triagem por IA</p>
</div>
<div className="page-actions">
<span className="chip live"><span className="live-dot" /> monitorando 24/7</span>
</div>
</div>

<div className="card" style={{borderColor:"var(--neg)",background:"color-mix(in oklch, var(--neg) 6%, var(--surface))"}}>
<div className="card-hd" style={{borderColor:"var(--neg)"}}>
<div style={{display:"flex",gap:10,alignItems:"center"}}>
<div style={{width:28,height:28,borderRadius:7,background:"color-mix(in oklch, var(--neg) 25%, transparent)",color:"var(--neg)",display:"grid",placeItems:"center"}}>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6l-8-3Z"/></svg>
</div>
<div>
<h3 style={{color:"var(--neg)"}}>Alerta de crise <MetaAuthBadge platform={platform} limited={igData.analyticsLimited} /></h3>
<div style={{fontSize:11.5,color:"rgba(255,255,255,.3)"}}>Precisa de autorizacao {_platformBadgeLabel(platform)} para detecção de crise em tempo real</div>
</div>
</div>
<div style={{marginLeft:"auto"}}>
<button className="btn" style={{borderColor:"var(--neg)",color:"var(--neg)"}}>Escalar ao time</button>
</div>
</div>
<div className="card-body">
<div style={{padding:32,textAlign:"center"}}>
<div style={{opacity:0.3,marginBottom:8}}><Icon name="shield" size={32} /></div>
<p style={{color:"rgba(255,255,255,.3)",fontSize:12}}>Deteccao de crise e analise de sentimento requerem autorizacao {_platformBadgeLabel(platform)} + IA dedicada</p>
</div>
</div>
</div>

<div style={{display:"grid",gridTemplateColumns:"2fr 1fr",gap:14,marginTop:14}}>
<div className="card">
<div className="card-hd"><h3>Menções recentes</h3>{totalMentions > 0 ? <span className="sub">{totalMentions}</span> : <MetaAuthBadge style={{marginLeft:8}} />}</div>
<div className="card-body" style={{display:"grid",gap:10}}>
{allMentions.length > 0 ? allMentions.slice(0, 10).map((m, i) => {
const from = (m.from && m.from.username) || "usuário";
const text = m.text || "";
const initials = from.slice(0,2).toUpperCase();
return (
<div key={m.id || i} style={{padding:10,border:"1px solid var(--border)",borderRadius:8,background:"var(--glass)"}}>
<div style={{display:"flex",justifyContent:"space-between",marginBottom:4}}>
<div style={{display:"flex",gap:8,alignItems:"center"}}>
<div className="avatar">{initials}</div>
<span style={{fontSize:12,fontFamily: "Inter Tight"}}>@{from}</span>
</div>
<span style={{fontSize:10.5,color:"rgba(255,255,255,.3)"}}>{fmtTime(m.timestamp)}</span>
</div>
<div style={{fontSize:12.5}}>{text}</div>
<div style={{display:"flex",marginTop:6,gap:6,alignItems:"center"}}>
<span className="pill muted">Instagram</span>
<button className="btn ghost" style={{marginLeft:"auto",padding:"2px 8px"}}><svg viewBox="0 0 24 24" width={11} fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M9 14 4 9l5-5"/><path d="M4 9h12a5 5 0 0 1 0 10H9"/></svg> Responder</button>
</div>
</div>
);
}) : (
<div style={{padding:32,textAlign:"center"}}>
<div style={{opacity:0.3,marginBottom:8}}><Icon name="shield" size={32} /></div>
<p style={{color:"rgba(255,255,255,.3)",fontSize:12}}>{mentionsError === "permission" ? "Precisa de autorizacao {_platformBadgeLabel(platform)} para buscar menções" : "Nenhuma menção encontrada"}</p>
</div>
)}
</div>
</div>

<div style={{display:"flex",flexDirection:"column",gap:14}}>
<div className="card">
<div className="card-hd"><h3>Sentimento 30d</h3><MetaAuthBadge style={{marginLeft:8}} /></div>
<div className="card-body" style={{textAlign:"center"}}>
<div style={{padding:20,textAlign:"center"}}>
<div style={{opacity:0.3,marginBottom:8}}><Icon name="shield" size={32} /></div>
<p style={{color:"rgba(255,255,255,.3)",fontSize:12}}>Analise de sentimento requer autorizacao {_platformBadgeLabel(platform)} + IA dedicada</p>
</div>
</div>
</div>
<div className="card">
<div className="card-hd"><h3>Tópicos em alta</h3><MetaAuthBadge style={{marginLeft:8}} /></div>
<div className="card-body" style={{padding:20,textAlign:"center"}}>
<div style={{opacity:0.3,marginBottom:8}}><Icon name="hash" size={32} /></div>
<p style={{color:"rgba(255,255,255,.3)",fontSize:12}}>Classificacao por topicos requer autorizacao {_platformBadgeLabel(platform)} + IA dedicada</p>
</div>
</div>
</div>
</div>
</div>
);
};

const PageAlerts = ({ t, igData, appUser }) => {
const [alertRules, setAlertRules] = React.useState([
{ id: 1, n: "CRISE DE MENCÕES", t: "> 50 menções negativas em 1h", c: ["push", "whatsapp", "email"], l: "há 14 min", on: true, sev: "critical", icon: "flame", count: 3 },
{ id: 2, n: "ROAS CAINDO", t: "ROAS criativo < 2x por 48h", c: ["push", "email"], l: "há 1h", on: true, sev: "warning", icon: "chart", count: 1 },
{ id: 3, n: "INFLUENCER MENCIONA", t: "Conta > 100K posta sobre marca", c: ["push", "email"], l: "há 3h", on: true, sev: "info", icon: "star", count: 0 },
{ id: 4, n: "GHOST FOLLOWERS > 10%", t: "Audit semanal detecta > 10%", c: ["email"], l: "ontem", on: true, sev: "warning", icon: "users", count: 0 },
{ id: 5, n: "PERFORMANCE EXCEPCIONAL", t: "ER > 2x média histórica", c: ["push"], l: "há 6h", on: true, sev: "positive", icon: "rocket", count: 2 },
{ id: 6, n: "PALAVRA-CHAVE RISCO", t: "'reembolso' | 'processar' | 'procon'", c: ["push", "whatsapp"], l: "há 2d", on: true, sev: "critical", icon: "bell", count: 7 },
{ id: 7, n: "QUEDA DE SEGUIDORES", t: "> 100 unfollows em 1h", c: ["email"], l: "nunca", on: false, sev: "warning", icon: "chart", count: 0 },
]);
const [showNew, setShowNew] = React.useState(false);
const sevColor = { critical: "var(--neg)", warning: "var(--warn)", info: "var(--info)", positive: "var(--accent)" };
const sevGlow = { critical: "color-mix(in oklch, var(--neg) 30%, transparent)", warning: "rgba(255,180,0,.3)", info: "color-mix(in oklch, var(--accent) 30%, transparent)", positive: "color-mix(in oklch, var(--accent) 30%, transparent)" };
const chanIcon = (ch) => ch === "push" ? "⚡" : ch === "whatsapp" ? "📱" : "✉";
const chanLabel = (ch) => ch === "whatsapp" ? "WHATS" : ch === "email" ? "EMAIL" : "PUSH";
return (
<div style={{padding:0}}>
{/* Header bar */}
<div style={{display:"flex",justifyContent:"space-between",alignItems:"center",padding:"12px 0",borderBottom:"1px solid color-mix(in oklch, var(--accent) 12%, transparent)",marginBottom:12}}>
<div style={{display:"flex",alignItems:"center",gap:10}}>
<span className="live-dot"></span>
<span style={{fontFamily:"Inter Tight",fontWeight:700,fontSize:".82rem",letterSpacing:".1em",color:"var(--accent)"}}>ALERT RULES</span>
<span style={{fontFamily:"Inter Tight",fontSize:".6rem",color:"rgba(255,255,255,.3)",letterSpacing:".06em"}}>// PUSH · WHATS · EMAIL · IN-APP</span>
</div>
<button onClick={() => setShowNew(!showNew)} style={{display:"flex",alignItems:"center",gap:6,padding:"5px 14px",borderRadius:2,fontSize:".68rem",fontWeight:600,cursor:"pointer",fontFamily:"Inter Tight",letterSpacing:".05em",textTransform:"uppercase",border:"1px solid var(--accent)",background:"color-mix(in oklch, var(--accent) 6%, transparent)",color:"var(--accent)"}}>
<Icon name="plus" size={12} stroke={2} /> NOVA REGRA
</button>
</div>

{/* New rule form */}
{showNew && <div style={{background:"var(--glass)",border:"1px solid var(--border)",borderRadius:2,padding:14,marginBottom:12}}>
<div style={{fontSize:".6rem",color:"var(--muted-2)",letterSpacing:".1em",marginBottom:8,textTransform:"uppercase"}}>// Nova regra de alerta</div>
<div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:8}}>
<div><label style={{fontSize:".55rem",color:"rgba(255,255,255,.3)",letterSpacing:".08em",textTransform:"uppercase"}}>Nome</label><input className="inp" placeholder="NOME_DA_REGRA" /></div>
<div><label style={{fontSize:".55rem",color:"rgba(255,255,255,.3)",letterSpacing:".08em",textTransform:"uppercase"}}>Trigger</label><input className="inp" placeholder="ex: ER > 2x média" /></div>
</div>
<div style={{display:"flex",gap:8,marginTop:10}}>
{["push","whatsapp","email"].map(ch => (
<label key={ch} style={{display:"flex",alignItems:"center",gap:4,cursor:"pointer",fontSize:".65rem",fontFamily:"Inter Tight",color:"var(--muted-2)"}}>
<input type="checkbox" defaultChecked={ch==="push"} style={{accentColor:"var(--accent)"}} /> {chanIcon(ch)} {chanLabel(ch)}
</label>
))}
<div style={{flex:1}}/>
<button style={{padding:"4px 12px",borderRadius:2,border:"1px solid var(--accent)",background:"color-mix(in oklch, var(--accent) 8%, transparent)",color:"var(--accent)",fontSize:".6rem",fontFamily:"Inter Tight",cursor:"pointer",letterSpacing:".05em"}} onClick={()=>setShowNew(false)}>CRIAR</button>
</div>
</div>}

{/* Summary ticker strip */}
<div style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:2,marginBottom:12}}>
<div style={{background:"color-mix(in oklch, var(--neg) 6%, transparent)",border:"1px solid color-mix(in oklch, var(--neg) 20%, transparent)",borderRadius:2,padding:"8px 12px"}}>
<div style={{fontSize:".5rem",color:"var(--neg)",letterSpacing:".1em",textTransform:"uppercase"}}>CRITICAL</div>
<div style={{fontFamily:"Inter Tight",fontSize:"1.4rem",fontWeight:600,color:"#ff4448",textShadow:"0 0 10px color-mix(in oklch, var(--neg) 30%, transparent)"}}>2</div>
</div>
<div style={{background:"rgba(255,180,0,.06)",border:"1px solid rgba(255,180,0,.15)",borderRadius:2,padding:"8px 12px"}}>
<div style={{fontSize:".5rem",color:"var(--warn)",letterSpacing:".1em",textTransform:"uppercase"}}>WARNING</div>
<div style={{fontFamily:"Inter Tight",fontSize:"1.4rem",fontWeight:600,color:"var(--warn)",textShadow:"0 0 10px rgba(255,180,0,.3)"}}>2</div>
</div>
<div style={{background:"color-mix(in oklch, var(--accent) 4%, transparent)",border:"1px solid color-mix(in oklch, var(--accent) 15%, transparent)",borderRadius:2,padding:"8px 12px"}}>
<div style={{fontSize:".5rem",color:"var(--accent)",letterSpacing:".1em",textTransform:"uppercase"}}>POSITIVE</div>
<div style={{fontFamily:"Inter Tight",fontSize:"1.4rem",fontWeight:600,color:"var(--accent)"}}>1</div>
</div>
<div style={{background:"color-mix(in oklch, var(--accent) 4%, transparent)",border:"1px solid color-mix(in oklch, var(--accent) 15%, transparent)",borderRadius:2,padding:"8px 12px"}}>
<div style={{fontSize:".5rem",color:"var(--info)",letterSpacing:".1em",textTransform:"uppercase"}}>FIRES 24H</div>
<div style={{fontFamily:"Inter Tight",fontSize:"1.4rem",fontWeight:600,color:"var(--info)"}}>13</div>
</div>
</div>

{/* Alert rule cards */}
<div style={{display:"flex",flexDirection:"column",gap:2}}>
{alertRules.map((r, i) => (
<div key={r.id} style={{
display:"grid",gridTemplateColumns:"32px 1fr auto auto auto 48px",alignItems:"center",gap:10,
padding:"8px 12px",background:r.on?"color-mix(in oklch, var(--accent) 8%, transparent)":"var(--surface)",
borderLeft:"2px solid "+sevColor[r.sev],
borderTop:"1px solid color-mix(in oklch, var(--accent) 6%, transparent)",borderBottom:"1px solid color-mix(in oklch, var(--accent) 6%, transparent)",borderRight:"1px solid color-mix(in oklch, var(--accent) 6%, transparent)",
opacity:r.on?1:.35,transition:".15s"
}}>
{/* Severity indicator */}
<div style={{display:"flex",justifyContent:"center"}}>
<div style={{width:6,height:6,borderRadius:"50%",background:sevColor[r.sev],boxShadow:r.on?"0 0 8px "+sevGlow[r.sev]:"none"}} />
</div>

{/* Name + trigger */}
<div>
<div style={{fontFamily:"Inter Tight",fontSize:".72rem",fontWeight:600,color:r.on?"var(--accent)":"rgba(255,255,255,.2)",letterSpacing:".04em"}}>{r.n}</div>
<div style={{fontSize:".6rem",color:"rgba(255,255,255,.3)",fontFamily:"Inter Tight",marginTop:2}}>{r.t}</div>
</div>

{/* Channels */}
<div style={{display:"flex",gap:4}}>
{r.c.map(x => (
<span key={x} style={{padding:"2px 6px",borderRadius:2,fontSize:".5rem",fontFamily:"Inter Tight",letterSpacing:".04em",
background:"color-mix(in oklch, var(--accent) 6%, transparent)",border:"1px solid color-mix(in oklch, var(--accent) 12%, transparent)",color:"var(--muted-2)"}}>
{chanIcon(x)} {chanLabel(x)}
</span>
))}
</div>

{/* Last fired */}
<div style={{fontFamily:"Inter Tight",fontSize:".6rem",color:r.l==="nunca"?"rgba(255,255,255,.15)":"color-mix(in oklch, var(--accent) 40%, transparent)",textAlign:"right"}}>
{r.l === "nunca" ? <span style={{color:"var(--border-strong)"}}>---</span> : r.l}
</div>

{/* Fire count badge */}
<div style={{textAlign:"center"}}>
{r.count > 0 ? (
<span style={{display:"inline-flex",alignItems:"center",justifyContent:"center",minWidth:20,height:18,padding:"0 5px",borderRadius:2,
background:sevColor[r.sev]==="var(--neg)"?"color-mix(in oklch, var(--neg) 10%, transparent)":"color-mix(in oklch, var(--accent) 8%, transparent)",
border:"1px solid "+(sevColor[r.sev]==="var(--neg)"?"color-mix(in oklch, var(--neg) 20%, transparent)":"color-mix(in oklch, var(--accent) 15%, transparent)"),
fontFamily:"Inter Tight",fontSize:".55rem",fontWeight:600,color:sevColor[r.sev],
textShadow:"0 0 6px "+sevGlow[r.sev]}}>{r.count}</span>
) : <span style={{fontSize:".5rem",color:"var(--border-strong)"}}>0</span>}
</div>

{/* Toggle */}
<div style={{cursor:"pointer"}} onClick={() => setAlertRules(prev => prev.map(x => x.id===r.id ? {...x,on:!x.on} : x))}>
<div style={{
width:32,height:16,borderRadius:8,position:"relative",transition:".15s",
background:r.on?"color-mix(in oklch, var(--accent) 20%, transparent)":"rgba(255,255,255,.06)",
border:"1px solid "+(r.on?"color-mix(in oklch, var(--accent) 40%, transparent)":"rgba(255,255,255,.08)")
}}>
<div style={{
position:"absolute",top:2,width:10,height:10,borderRadius:5,
left:r.on?18:2,transition:".15s",
background:r.on?"var(--accent)":"var(--border-strong)",
boxShadow:r.on?"0 0 6px color-mix(in oklch, var(--accent) 50%, transparent)":"none"
}} />
</div>
</div>
</div>
))}
</div>

{/* Activity log */}
<div style={{marginTop:16,borderTop:"1px solid color-mix(in oklch, var(--accent) 10%, transparent)",paddingTop:12}}>
<div style={{fontFamily:"Inter Tight",fontSize:".6rem",color:"rgba(255,255,255,.3)",letterSpacing:".1em",marginBottom:8}}>â–¸ RECENT FIRES</div>
{[
{ time: "14:03:22", rule: "CRISE DE MENCÕES", msg: "67 menções negativas detectadas (1h)", sev: "critical" },
{ time: "13:47:01", rule: "PALAVRA-CHAVE RISCO", msg: "Comentário 'reembolso' em post #4821", sev: "critical" },
{ time: "12:22:15", rule: "PERFORMANCE EXCEPCIONAL", msg: "Reel #4198 → ER 8.2% (média 3.1%)", sev: "positive" },
{ time: "11:58:44", rule: "ROAS CAINDO", msg: "Campanha 'Summer24' → ROAS 1.4x", sev: "warning" },
{ time: "09:30:00", rule: "GHOST FOLLOWERS > 10%", msg: "Audit semanal: 14.2% fake followers", sev: "warning" },
].map((f, i) => (
<div key={i} style={{display:"flex",gap:10,padding:"5px 0",borderBottom:"1px solid color-mix(in oklch, var(--accent) 4%, transparent)"}}>
<span style={{fontFamily:"Inter Tight",fontSize:".58rem",color:"rgba(255,255,255,.3)",minWidth:56}}>{f.time}</span>
<span style={{width:6,height:6,borderRadius:"50%",background:sevColor[f.sev],marginTop:4,flexShrink:0,boxShadow:"0 0 4px "+sevGlow[f.sev]}} />
<span style={{fontFamily:"Inter Tight",fontSize:".6rem",color:sevColor[f.sev],fontWeight:600,minWidth:160,letterSpacing:".03em"}}>{f.rule}</span>
<span style={{fontSize:".6rem",color:"var(--muted-2)"}}>{f.msg}</span>
</div>
))}
</div>
</div>
);
};

const PageCalendar = ({ t, igData, appUser }) => {
  const [calMonth, setCalMonth] = React.useState(() => { const d = new Date(); return { year: d.getFullYear(), month: d.getMonth() }; });
  const [selectedDay, setSelectedDay] = React.useState(null);
  const today = new Date();

  const MES = ["Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Outubro","Novembro","Dezembro"];
  const MES_SHORT = ["Jan","Fev","Mar","Abr","Mai","Jun","Jul","Ago","Set","Out","Nov","Dez"];
  const SEM = ["D","S","T","Q","Q","S","S"];
  const SEM_FULL = ["Dom","Seg","Ter","Qua","Qui","Sex","Sáb"];
  const DIAS_SEMANA = ["Domingo","Segunda-feira","Terça-feira","Quarta-feira","Quinta-feira","Sexta-feira","Sábado"];

  const SPECIAL_DATES = {
    "1-1": { emoji: "🎆", label: "Ano Novo", feriado: true },
    "2-14": { emoji: "❤️", label: "Dia dos Namorados (intl)" },
    "3-8": { emoji: "👩", label: "Dia da Mulher" },
    "4-21": { emoji: "🟢", label: "Tiradentes", feriado: true },
    "5-1": { emoji: "👷", label: "Dia do Trabalho", feriado: true },
    "6-12": { emoji: "💕", label: "Dia dos Namorados" },
    "6-24": { emoji: "🌾", label: "São João" },
    "7-20": { emoji: "🌎", label: "Dia da Amizade" },
    "8-9": { emoji: "👨", label: "Dia dos Pais" },
    "9-7": { emoji: "🇧🇷", label: "Independência", feriado: true },
    "10-12": { emoji: "👧", label: "Nossa Sra. Aparecida", feriado: true },
    "10-31": { emoji: "🎃", label: "Halloween" },
    "11-15": { emoji: "🇧🇷", label: "Proclamação da República", feriado: true },
    "11-20": { emoji: "🖤", label: "Consciência Negra", feriado: true },
    "12-25": { emoji: "🎄", label: "Natal", feriado: true },
    "12-31": { emoji: "🎆", label: "Véspera de Ano Novo" },
  };

  const easter = (y) => { const a=y%19,b=Math.floor(y/100),c=y%100,d=Math.floor(b/4),e=b%4,f=Math.floor((b+8)/25),g=Math.floor((b-f+1)/3),h=(19*a+b-d-g+15)%30,i=Math.floor(c/4),k=c%4,l=(32+2*e+2*i-h-k)%7,m=Math.floor((a+11*h+22*l)/451),month=Math.floor((h+l-7*m+114)/31),day=((h+l-7*m+114)%31)+1; return new Date(y,month-1,day); };

  const computeMobile = (year) => {
    const e = easter(year);
    const offset = (days, label, emoji, feriado) => { const d = new Date(e); d.setDate(d.getDate() + days); return { date: d, emoji, label, feriado }; };
    return [
      offset(-47, "Carnaval (Sáb Zé Pereira)", "🎭", false),
      offset(-46, "Carnaval", "🎉", false),
      offset(-7, "Domingo de Ramos", "✝️", false),
      offset(-3, "Quinta-feira Santa", "✝️", false),
      offset(-2, "Sexta-feira Santa", "✝️", true),
      { date: e, emoji: "✝️", label: "Páscoa", feriado: false },
      offset(39, "Ascensão", "✝️", false),
      offset(49, "Pentecostes", "🕊️", false),
      offset(60, "Corpus Christi", "🍞", true),
    ];
  };

  const getSpecial = (day, month, year) => {
    const key = (month + 1) + "-" + day;
    const fixed = SPECIAL_DATES[key];
    const mobile = computeMobile(year).find(d => d.date.getDate() === day && d.date.getMonth() === month);
    const results = [];
    if (fixed) results.push(fixed);
    if (mobile) results.push(mobile);
    return results;
  };

  const isToday = (d, m, y) => d === today.getDate() && m === today.getMonth() && y === today.getFullYear();

  const contentHint = (label) => {
    const hints = {
      "Ano Novo": "Resumo do ano, metas, mensagem de esperança",
      "Carnaval": "Conteúdo leve, cores, festividade",
      "Páscoa": "Renovação, família, coelhinho da páscoa",
      "Dia da Mulher": "Homenagens, empoderamento, mulheres da marca",
      "Tiradentes": "História, liberdade, patriotismo",
      "Dia do Trabalho": "Bastidores, equipe, rotina de trabalho",
      "Dia dos Namorados": "Campanha romântica, casais, promoções",
      "São João": "Decoração caipira, comidas típicas, quadrilha",
      "Dia dos Pais": "Homenagens, lembranças, campanha emocional",
      "Independência": "Cores verde-amarelo, patriotismo",
      "Nossa Sra. Aparecida": "Infância, brincadeiras, nostalgia",
      "Halloween": "Conteúdo assustador, temático, criativo",
      "Natal": "Mensagem natalina, retrospectiva, presentes",
      "Véspera de Ano Novo": "Expectativas, despedida do ano, celebrar",
      "Consciência Negra": "Diversidade, ancestralidade, representatividade",
      "Proclamação da República": "Cidadania, história",
      "Dia da Amizade": "Parcerias, collabs, comunidade",
      "Sexta-feira Santa": "Reflexão, respeito, pausa",
      "Corpus Christi": "Tradição, feriado nacional",
    };
    return hints[label] || "Conteúdo temático";
  };

  const firstDay = new Date(calMonth.year, calMonth.month, 1).getDay();
  const daysInMonth = new Date(calMonth.year, calMonth.month + 1, 0).getDate();
  const prevMonthDays = new Date(calMonth.year, calMonth.month, 0).getDate();

  const prevMonth = () => { setCalMonth(prev => { const m = prev.month === 0 ? 11 : prev.month - 1; const y = prev.month === 0 ? prev.year - 1 : prev.year; return { year: y, month: m }; }); };
  const nextMonth = () => { setCalMonth(prev => { const m = prev.month === 11 ? 0 : prev.month + 1; const y = prev.month === 11 ? prev.year + 1 : prev.year; return { year: y, month: m }; }); };
  const prevYear = () => setCalMonth(prev => ({ ...prev, year: prev.year - 1 }));
  const nextYear = () => setCalMonth(prev => ({ ...prev, year: prev.year + 1 }));
  const goToday = () => { const d = new Date(); setCalMonth({ year: d.getFullYear(), month: d.getMonth() }); setSelectedDay(null); };
  const sameMonth = calMonth.year === today.getFullYear() && calMonth.month === today.getMonth();

  const selectedDate = selectedDay ? new Date(calMonth.year, calMonth.month, selectedDay) : null;
  const selectedSpecial = selectedDay ? getSpecial(selectedDay, calMonth.month, calMonth.year) : [];

  const dayOfYear = (d, m, y) => { const s = new Date(y, 0, 0); return Math.floor((new Date(y, m, d) - s) / 86400000); };
  const todayDoy = dayOfYear(today.getDate(), today.getMonth(), today.getFullYear());
  const isLeap = (y) => (y % 4 === 0 && y % 100 !== 0) || y % 400 === 0;
  const totalDays = isLeap(calMonth.year) ? 366 : 365;
  const yearProgress = ((todayDoy / totalDays) * 100).toFixed(1);

  const countFeriadosYear = () => {
    let c = 0;
    for (const k in SPECIAL_DATES) { if (SPECIAL_DATES[k].feriado) c++; }
    c += computeMobile(calMonth.year).filter(d => d.feriado).length;
    return c;
  };

  const MiniMonth = ({ month, year }) => {
    const fd = new Date(year, month, 1).getDay();
    const dim = new Date(year, month + 1, 0).getDate();
    const isCurrent = month === calMonth.month && year === calMonth.year;
    return (
      <div onClick={() => setCalMonth({ year, month })} style={{ cursor: "pointer", padding: "8px 10px", borderRadius: 10, background: isCurrent ? "var(--accent-soft)" : "var(--surface)", border: isCurrent ? "1px solid color-mix(in oklch, var(--accent) 40%, transparent)" : "1px solid var(--border)", transition: ".15s" }}>
        <div style={{ fontSize: ".68rem", fontWeight: 700, color: isCurrent ? "var(--accent)" : "var(--text-2)", marginBottom: 4, textAlign: "center" }}>{MES_SHORT[month]}</div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 1 }}>
          {SEM.map(d => <div key={d} style={{ fontSize: 8, textAlign: "center", color: "var(--muted-2)" }}>{d}</div>)}
          {[...Array(fd)].map((_, i) => <div key={"p"+i} />)}
          {[...Array(dim)].map((_, i) => {
            const dd = i + 1;
            const td = isToday(dd, month, year);
            const sp = getSpecial(dd, month, year);
            const fer = sp.some(s => s.feriado);
            return (
              <div key={dd} style={{ fontSize: 8, textAlign: "center", lineHeight: "16px", borderRadius: 3, fontWeight: td ? 800 : (fer ? 700 : 400), color: td ? "#000" : (fer ? "var(--gold)" : "var(--text-2)"), background: td ? "var(--accent)" : (fer ? "var(--gold-soft-bg)" : "transparent") }}>{dd}</div>
            );
          })}
        </div>
      </div>
    );
  };

  const allSpecial = [];
  for (let d = 1; d <= daysInMonth; d++) {
    const sp = getSpecial(d, calMonth.month, calMonth.year);
    if (sp.length) allSpecial.push({ day: d, events: sp });
  }

  const upcomingFeriados = (() => {
    const upcoming = [];
    for (let offset = 0; offset <= 90; offset++) {
      const d = new Date(today);
      d.setDate(d.getDate() + offset);
      if (d.getFullYear() > today.getFullYear() + 1) break;
      const sp = getSpecial(d.getDate(), d.getMonth(), d.getFullYear()).filter(s => s.feriado);
      sp.forEach(s => upcoming.push({ date: new Date(d), ...s }));
      if (upcoming.length >= 6) break;
    }
    return upcoming;
  })();

  return (
    <div className="page-dash" style={{ maxWidth: 1200 }}>
      <div className="page-head" style={{ flexDirection: "column", alignItems: "flex-start", marginBottom: 20 }}>
        <div style={{ display: "flex", justifyContent: "space-between", width: "100%", alignItems: "center", flexWrap: "wrap", gap: 12 }}>
          <div>
            <h1 className="page-title" style={{ fontSize: "1.6rem" }}>{t.calendar}</h1>
            <p className="page-sub">
              {DIAS_SEMANA[today.getDay()]}, {today.getDate()} de {MES[today.getMonth()]} de {today.getFullYear()} · Dia {todayDoy}/{totalDays}
            </p>
          </div>
          <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }}>
            {!sameMonth && <button className="btn ghost" onClick={goToday} style={{ fontSize: 11, padding: "5px 12px" }}>Hoje</button>}
            <button className="btn ghost icon" onClick={prevYear}><span style={{ fontSize: 10 }}>«</span></button>
            <button className="btn ghost icon" onClick={prevMonth}><Icon name="chevL" size={14} /></button>
            <span style={{ fontWeight: 700, minWidth: 160, textAlign: "center", fontSize: ".95rem" }}>{MES[calMonth.month]} {calMonth.year}</span>
            <button className="btn ghost icon" onClick={nextMonth}><Icon name="chevR" size={14} /></button>
            <button className="btn ghost icon" onClick={nextYear}><span style={{ fontSize: 10 }}>»</span></button>
          </div>
        </div>
        <div style={{ width: "100%", marginTop: 12 }}>
          <div style={{ display: "flex", justifyContent: "space-between", fontSize: 10, color: "var(--muted)", marginBottom: 3 }}>
            <span>Ano {calMonth.year}</span>
            <span>{yearProgress}% · {countFeriadosYear()} feriados</span>
          </div>
          <div style={{ height: 4, borderRadius: 2, background: "var(--surface-2)", overflow: "hidden" }}>
            <div style={{ height: "100%", width: yearProgress + "%", background: "linear-gradient(90deg, var(--accent), var(--gold))", borderRadius: 2, transition: ".3s" }} />
          </div>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 8, marginBottom: 20 }}>
        {[...Array(12)].map((_, i) => <MiniMonth key={i} month={i} year={calMonth.year} />)}
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 280px", gap: 16 }}>
        <div>
          <div className="calendar" style={{ borderRadius: 12, overflow: "hidden" }}>
            {SEM_FULL.map(d => <div key={d} className="chd">{d}</div>)}
            {[...Array(firstDay)].map((_, i) => (
              <div key={"p"+i} className="ccell" style={{ opacity: 0.25 }}><div className="day">{prevMonthDays - firstDay + i + 1}</div></div>
            ))}
            {[...Array(daysInMonth)].map((_, i) => {
              const day = i + 1;
              const special = getSpecial(day, calMonth.month, calMonth.year);
              const td = isToday(day, calMonth.month, calMonth.year);
              const fer = special.some(s => s.feriado);
              const sel = selectedDay === day;
              return (
                <div key={day} className="ccell" onClick={() => setSelectedDay(sel ? null : day)} style={{ cursor: "pointer", background: td ? "rgba(45,124,255,.1)" : (sel ? "var(--surface-hi)" : (fer ? "rgba(217,119,6,.04)" : "transparent")), borderRadius: 6, border: sel ? "1px solid var(--accent)" : "1px solid transparent", transition: ".12s" }}>
                  <div className="day" style={td ? { background: "var(--accent)", color: "#000", borderRadius: "50%", width: 24, height: 24, display: "grid", placeItems: "center", fontWeight: 800, fontSize: ".78rem" } : { color: fer ? "var(--gold)" : "inherit" }}>{day}</div>
                  {special.map((s, si) => (
                    <div key={si} className="slot" style={{ background: s.feriado ? "var(--gold-soft-bg)" : "var(--accent-soft)", color: s.feriado ? "var(--gold)" : "var(--accent)", fontSize: 10, padding: "2px 5px", borderRadius: 4, lineHeight: 1.3, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", fontWeight: s.feriado ? 600 : 400 }} title={s.label}>{s.emoji} {s.label.length > 13 ? s.label.substring(0, 12) + "…" : s.label}</div>
                  ))}
                </div>
              );
            })}
            {[...Array(42 - firstDay - daysInMonth)].map((_, i) => (
              <div key={"n"+i} className="ccell" style={{ opacity: 0.25 }}><div className="day">{i + 1}</div></div>
            ))}
          </div>

          {selectedDay && (
            <div className="card" style={{ marginTop: 12, padding: 16 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 8 }}>
                <div style={{ width: 36, height: 36, borderRadius: 8, background: "var(--accent)", color: "#000", display: "grid", placeItems: "center", fontWeight: 800, fontSize: ".9rem" }}>{selectedDay}</div>
                <div>
                  <div style={{ fontWeight: 700, fontSize: ".88rem" }}>{DIAS_SEMANA[selectedDate.getDay()]}</div>
                  <div style={{ fontSize: 11, color: "var(--muted)" }}>{selectedDay} de {MES[calMonth.month]} de {calMonth.year} · Dia {dayOfYear(selectedDay, calMonth.month, calMonth.year)}/{totalDays}</div>
                </div>
              </div>
              {selectedSpecial.length === 0 && <div style={{ fontSize: ".78rem", color: "var(--muted)" }}>Nenhum feriado ou data especial</div>}
              {selectedSpecial.map((s, si) => (
                <div key={si} style={{ display: "flex", alignItems: "center", gap: 8, padding: "8px 0", borderTop: si > 0 ? "1px solid var(--border)" : "none" }}>
                  <span style={{ fontSize: 18 }}>{s.emoji}</span>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontWeight: 600, fontSize: ".82rem" }}>{s.label} {s.feriado && <span style={{ background: "var(--gold-soft-bg)", color: "var(--gold)", fontSize: 9, padding: "1px 6px", borderRadius: 4, marginLeft: 6, fontWeight: 700 }}>FERIADO</span>}</div>
                    <div style={{ fontSize: 11, color: "var(--accent)", marginTop: 2 }}>💡 {contentHint(s.label)}</div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          <div className="card" style={{ padding: "12px 14px", borderLeft: "3px solid var(--accent)" }}>
            <div style={{ fontSize: 9, fontWeight: 700, textTransform: "uppercase", letterSpacing: ".08em", color: "var(--accent)", marginBottom: 4 }}>Hoje</div>
            <div style={{ fontSize: "1.4rem", fontWeight: 800, lineHeight: 1 }}>{today.getDate()}</div>
            <div style={{ fontSize: ".72rem", color: "var(--text-2)", marginTop: 2 }}>{MES_SHORT[today.getMonth()]} {today.getFullYear()} · {DIAS_SEMANA[today.getDay()]}</div>
            <div style={{ fontSize: 10, color: "var(--muted)", marginTop: 4 }}>Dia {todayDoy} de {totalDays} · {totalDays - todayDoy} restantes</div>
          </div>

          <h3 style={{ fontSize: ".72rem", fontWeight: 700, textTransform: "uppercase", letterSpacing: ".06em", color: "var(--muted)", marginBottom: 4 }}>
            {allSpecial.length ? "📅 " + allSpecial.length + " data" + (allSpecial.length > 1 ? "s" : "") + " em " + MES_SHORT[calMonth.month] : "Sem datas em " + MES_SHORT[calMonth.month]}
          </h3>
          {allSpecial.length === 0 && <p style={{ fontSize: ".78rem", color: "var(--muted)", lineHeight: 1.5 }}>Navegue para meses com datas comemorativas.</p>}
          <div style={{ maxHeight: 400, overflowY: "auto", display: "flex", flexDirection: "column", gap: 6 }}>
            {allSpecial.map(({ day, events }) => events.map((ev, ei) => (
              <div key={day + "-" + ei} className="card" style={{ padding: "8px 12px", cursor: "pointer", borderLeft: ev.feriado ? "2px solid var(--gold)" : "2px solid transparent" }} onClick={() => setSelectedDay(day)}>
                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  <span style={{ fontSize: 14 }}>{ev.emoji}</span>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: ".76rem", fontWeight: 600, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{ev.label}</div>
                    <div style={{ fontSize: 10, color: "var(--accent)" }}>💡 {contentHint(ev.label)}</div>
                  </div>
                  <span style={{ fontSize: 10, color: "var(--muted)", whiteSpace: "nowrap" }}>{day} {MES_SHORT[calMonth.month]}</span>
                </div>
              </div>
            )))}
          </div>

          <h3 style={{ fontSize: ".72rem", fontWeight: 700, textTransform: "uppercase", letterSpacing: ".06em", color: "var(--gold)", marginTop: 8 }}>🔜 Próximos feriados</h3>
          {upcomingFeriados.length === 0 && <div style={{ fontSize: 11, color: "var(--muted)" }}>Nenhum feriado próximo</div>}
          {upcomingFeriados.map((u, i) => {
            const diff = Math.ceil((u.date - today) / 86400000);
            return (
              <div key={i} className="card" style={{ padding: "8px 12px", display: "flex", alignItems: "center", gap: 8, cursor: "pointer" }} onClick={() => setCalMonth({ year: u.date.getFullYear(), month: u.date.getMonth() })}>
                <span style={{ fontSize: 14 }}>{u.emoji}</span>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: ".76rem", fontWeight: 600 }}>{u.label}</div>
                  <div style={{ fontSize: 10, color: "var(--muted)" }}>{u.date.getDate()} de {MES[u.date.getMonth()]}</div>
                </div>
                <span style={{ fontSize: 9, padding: "2px 6px", borderRadius: 4, background: "var(--gold-soft-bg)", color: "var(--gold)", fontWeight: 700 }}>
                  {diff === 0 ? "Hoje" : diff === 1 ? "Amanhã" : diff + "d"}
                </span>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

const PageApprovals = ({ t, igData, appUser }) => (
<div className="page-dash">
<div className="page-head">
<div>
<h1 className="page-title">{t.approvals}</h1>
<p className="page-sub">Fluxo: designer → gestor → cliente → fila de postagem</p>
</div>
</div>
<div style={{ marginBottom: 12, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
<div className="tabs" style={{ marginBottom: 0 }}>
<span className="tab active">Pendentes <span className="count">3</span></span>
<span className="tab">Aprovados <span className="count">2</span></span>
<span className="tab">Todos <span className="count">5</span></span>
</div>
<button className="btn primary">Aprovar selecionados</button>
</div>

<div style={{ display: "grid", gap: 12 }}>
<div className="card">
<div className="card-body" style={{ display: "flex", gap: 16 }}>
<div style={{ width: 120, height: 80, background: "linear-gradient(135deg, var(--accent) 0%, var(--neg) 100%)", borderRadius: 8, display: "flex", alignItems: "center", justifyContent: "center" }}>
<span style={{ color: "white", fontWeight: 600 }}>Reel</span>
</div>
<div style={{ flex: 1 }}>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
<div>
<strong>Reel " Drop coleção verão</strong>
<div style={{ fontSize: 12, color: "var(--muted)", marginTop: 2 }}>Pendente · Ana (designer) · agendado <span style={{ color: "var(--accent)" }}>ter 20 Abr, 19h</span></div>
<div style={{ fontSize: 12, marginTop: 6 }}>"Novo drop, 7 peças exclusivas. Linkando na bio ⚡"</div>
</div>
<div style={{ display: "flex", gap: 8 }}>
<button className="btn ghost" style={{ padding: "6px 12px", fontSize: 11 }}>Revisar</button>
<button className="btn primary" style={{ padding: "6px 12px", fontSize: 11 }}>Aprovar</button>
</div>
</div>
</div>
</div>
</div>

<div className="card">
<div className="card-body" style={{ display: "flex", gap: 16 }}>
<div style={{ width: 120, height: 80, background: "linear-gradient(135deg, var(--pos) 0%, var(--accent) 100%)", borderRadius: 8, display: "flex", alignItems: "center", justifyContent: "center" }}>
<span style={{ color: "white", fontWeight: 600 }}>Carousel</span>
</div>
<div style={{ flex: 1 }}>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
<div>
<strong>Carousel " Guia de cuidados</strong>
<div style={{ fontSize: 12, color: "var(--muted)", marginTop: 2 }}>Aprovado · Bruno (gestor) · agendado <span style={{ color: "var(--pos)" }}>qua 21 Abr, 11h</span></div>
<div style={{ fontSize: 12, marginTop: 6 }}>"Salva esse post " como lavar sem estragar a peça"</div>
</div>
<button className="btn ghost" style={{ padding: "6px 12px", fontSize: 11 }}>Revisar</button>
</div>
</div>
</div>
</div>

<div className="card">
<div className="card-body" style={{ display: "flex", gap: 16 }}>
<div style={{ width: 120, height: 80, background: "linear-gradient(135deg, var(--warn) 0%, var(--neg) 100%)", borderRadius: 8, display: "flex", alignItems: "center", justifyContent: "center" }}>
<span style={{ color: "white", fontWeight: 600 }}>Story</span>
</div>
<div style={{ flex: 1 }}>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
<div>
<strong>Story " Bastidores shoot</strong>
<div style={{ fontSize: 12, color: "var(--muted)", marginTop: 2 }}>Revisão · Ana (designer) · agendado <span style={{ color: "var(--warn)" }}>qui 22 Abr, 14h</span></div>
<div style={{ fontSize: 12, marginTop: 6 }}>"Bastidores do shoot em Búzios 🌊"</div>
</div>
<div style={{ display: "flex", gap: 8 }}>
<button className="btn ghost" style={{ padding: "6px 12px", fontSize: 11 }}>Revisar</button>
<button className="btn primary" style={{ padding: "6px 12px", fontSize: 11 }}>Aprovar</button>
</div>
</div>
</div>
</div>
</div>

<div className="card">
<div className="card-body" style={{ display: "flex", gap: 16 }}>
<div style={{ width: 120, height: 80, background: "linear-gradient(135deg, var(--muted) 0%, var(--surface-hi) 100%)", borderRadius: 8, display: "flex", alignItems: "center", justifyContent: "center" }}>
<span style={{ color: "var(--text)", fontWeight: 600 }}>Image</span>
</div>
<div style={{ flex: 1 }}>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
<div>
<strong>Image " Hero homepage</strong>
<div style={{ fontSize: 12, color: "var(--muted)", marginTop: 2 }}>Pendente · Ana (designer) · agendado <span style={{ color: "var(--accent)" }}>sex 23 Abr, 9h</span></div>
<div style={{ fontSize: 12, marginTop: 6 }}>"Preview da nova estampa tropical"</div>
</div>
<div style={{ display: "flex", gap: 8 }}>
<button className="btn ghost" style={{ padding: "6px 12px", fontSize: 11 }}>Revisar</button>
<button className="btn primary" style={{ padding: "6px 12px", fontSize: 11 }}>Aprovar</button>
</div>
</div>
</div>
</div>
</div>

<div className="card">
<div className="card-body" style={{ display: "flex", gap: 16 }}>
<div style={{ width: 120, height: 80, background: "linear-gradient(135deg, var(--accent) 0%, var(--pos) 100%)", borderRadius: 8, display: "flex", alignItems: "center", justifyContent: "center" }}>
<span style={{ color: "white", fontWeight: 600 }}>Reel</span>
</div>
<div style={{ flex: 1 }}>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
<div>
<strong>Reel " UGC cliente</strong>
<div style={{ fontSize: 12, color: "var(--muted)", marginTop: 2 }}>Pendente · Bruno (gestor) · agendado <span style={{ color: "var(--accent)" }}>seg 26 Abr, 19h</span></div>
<div style={{ fontSize: 12, marginTop: 6 }}>"@julianacalmon amando a peça"</div>
</div>
<button className="btn ghost" style={{ padding: "6px 12px", fontSize: 11 }}>Revisar</button>
</div>
</div>
</div>
</div>
</div>
</div>
);

const PageAI = ({ t, igData, appUser }) => {
const tones = ["Descontraído", "Formal", "Venda direta", "Storytelling"];
const [briefing, setBriefing] = React.useState("");
const [tone, setTone] = React.useState("Descontraído");
const [results, setResults] = React.useState([]);
const [loading, setLoading] = React.useState(false);
const [error, setError] = React.useState("");
const [copied, setCopied] = React.useState(null);
const [imgPrompt, setImgPrompt] = React.useState("");
const [imgResult, setImgResult] = React.useState(null);
const [imgLoading, setImgLoading] = React.useState(false);
const [imgError, setImgError] = React.useState("");
const [vidGenerating, setVidGenerating] = React.useState(false);
const [detVideoUrl, setDetVideoUrl] = React.useState(null);
const [detResults, setDetResults] = React.useState([]);
const [detLoading, setDetLoading] = React.useState(false);
const [detError, setDetError] = React.useState("");
const [detFrameCount, setDetFrameCount] = React.useState(0);
const [detSceneLabels, setDetSceneLabels] = React.useState([]);
const [detVideoFile, setDetVideoFile] = React.useState(null);

const generate = async () => {
if (!briefing.trim()) return;
setLoading(true);
setError("");
setResults([]);
try {
const res = await fetch("/api/ai/generate", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ briefing: briefing.trim(), tone, count: 3 })
});
if (!res.ok) {
const err = await res.json().catch(() => ({}));
throw new Error(err.error || "Erro " + res.status);
}
const data = await res.json();
setResults(data.captions || []);
} catch (e) {
setError(e.message || "Erro ao gerar conteúdo");
} finally {
setLoading(false);
}
};

const copyText = (text, idx) => {
navigator.clipboard.writeText(text).then(() => {
setCopied(idx);
setTimeout(() => setCopied(null), 2000);
});
};

const generateImage = async () => {
if (!imgPrompt.trim()) return;
setImgLoading(true);
setImgError("");
setImgResult(null);
try {
const res = await fetch("/api/ai/image", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ prompt: imgPrompt.trim() })
});
if (!res.ok) {
const err = await res.json().catch(() => ({}));
throw new Error(err.error || "Erro " + res.status);
}
const data = await res.json();
setImgResult(data.image);
} catch (e) {
setImgError(e.message || "Erro ao gerar imagem");
} finally {
setImgLoading(false);
}
};




  const [igShareStatus, setIgShareStatus] = React.useState(null);

  const handleShareAIGeneratedImage = async (base64Data, prompt) => {
    setIgShareStatus(null);
    const byteStr = atob(base64Data);
    const ab = new Uint8Array(byteStr.length);
    for (let i = 0; i < byteStr.length; i++) ab[i] = byteStr.charCodeAt(i);
    const blob = new Blob([ab], { type: "image/jpeg" });
    const file = new File([blob], "hub-image.jpg", { type: "image/jpeg" });

    // 1. Web Share API " native share sheet with Instagram on mobile
    if (navigator.share && navigator.canShare) {
      try {
        const shareData = { files: [file], text: prompt || "" };
        if (navigator.canShare(shareData)) {
          await navigator.share(shareData);
          return;
        }
      } catch(e) {
        if (e.name === "AbortError") return;
      }
    }

    // 2. Instagram Deep Link fallback (mobile)
    const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
    if (isMobile) {
      window.location.href = "instagram://create/story";
      setTimeout(() => { window.location.href = "https://www.instagram.com"; }, 1500);
      return;
    }

    // 3. Desktop fallback " copy caption
    try {
      await navigator.clipboard.writeText(prompt || "Legenda da imagem");
      setIgShareStatus("Imagem salva! Legenda copiada — cole no Instagram.");
    } catch(e) {
      setIgShareStatus("Imagem salva! Copie a legenda manualmente.");
    }
  };

const handleVideoUpload = (e) => {
const file = e.target.files?.[0];
if (!file) return;
setDetVideoFile(file);
setDetVideoUrl(URL.createObjectURL(file));
setDetResults([]);
setDetError("");
};

const analyzeVideo = async () => {
if (!detVideoFile) return;
setDetLoading(true);
setDetError("");
try {
const video = document.createElement("video");
video.src = detVideoUrl;
video.muted = true;
await new Promise(r => { video.onloadeddata = r; video.onerror = r; });
const canvas = document.createElement("canvas");
canvas.width = 640;
canvas.height = 360;
const ctx = canvas.getContext("2d");
const duration = video.duration;
const frameInterval = Math.max(1, duration / 8);
const frames = [];
for (let t = 0; t < duration; t += frameInterval) {
video.currentTime = t;
await new Promise(r => { video.onseeked = r; });
ctx.drawImage(video, 0, 0, 640, 360);
frames.push(canvas.toDataURL("image/jpeg", 0.8).split(",")[1]);
}
setDetFrameCount(frames.length);
const res = await fetch("/api/ai/detect", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ frames })
});
if (!res.ok) {
const err = await res.json().catch(() => ({}));
throw new Error(err.error || "Erro " + res.status);
}
const data = await res.json();
setDetResults(data.objects || []);
setDetSceneLabels(data.scenes || []);
} catch (e) {
setDetError(e.message || "Erro ao analisar video");
} finally {
setDetLoading(false);
}
};

return (
<div className="page-dash">
<div className="page-head">
<div>
<h1 className="page-title">{t.ai}</h1>
<p className="page-sub">Legendas, estratégia, respostas automáticas, previsão de performance</p>
</div>
<div className="page-actions">
</div>
</div>

<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
<div className="card">
<div className="card-hd"><h3>Gerador de legendas</h3><span className="sub">IA generativa com hashtags estratégicas</span></div>
<div className="card-body">
<div style={{ marginBottom: 12 }}>
<div style={{ fontSize: 12, color: "var(--muted)", marginBottom: 6 }}>Briefing</div>
<textarea
value={briefing}
onChange={e => setBriefing(e.target.value)}
placeholder={"Ex: Reel de lançamento do produto X — foco no benefício Y. Com CTA pro site."}
rows={3}
style={{ width: "100%", fontSize: 13, padding: 10, background: "var(--surface-2)", borderRadius: 6, border: "1px solid var(--border)", color: "var(--fg)", resize: "vertical", outline: "none" }}
/>
</div>
<div style={{ display: "flex", gap: 8, marginBottom: 12 }}>
{tones.map(tn => (
<span
key={tn}
className={`pill ${tone === tn ? "pos" : "muted"}`}
style={{ cursor: "pointer" }}
onClick={() => setTone(tn)}
>{tn}</span>
))}
</div>
<button className="btn primary" onClick={generate} disabled={loading || !briefing.trim()}>
{loading ? "Gerando..." : "Gerar 3 opções"}
</button>
{error && <div style={{ color: "var(--neg)", fontSize: 12, marginTop: 8 }}>{error}</div>}
</div>
</div>

<div className="card">
<div className="card-hd"><h3>Sugestões geradas</h3></div>
<div className="card-body" style={{ display: "flex", flexDirection: "column", gap: 10 }}>
{loading && (
<div style={{ textAlign: "center", padding: 24, color: "var(--muted)" }}>
<div style={{ fontSize: 24, marginBottom: 8 }}>AI</div>
<div>Gerando legendas com IA...</div>
</div>
)}
{!loading && results.length === 0 && !error && (
<div style={{ textAlign: "center", padding: 24, color: "var(--muted)", fontSize: 13 }}>
Insira o briefing e clique em "Gerar 3 opções"
</div>
)}
{results.map((cap, i) => (
<div key={i} style={{ padding: 10, background: "var(--surface-2)", borderRadius: 8, border: "1px solid var(--border)" }}>
<div style={{ fontSize: 12, marginBottom: 6, whiteSpace: "pre-wrap" }}>{cap.text}</div>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 8 }}>
<span className={`pill ${cap.predicted_er && parseFloat(cap.predicted_er) >= 7 ? "pos" : "muted"}`}>
ER previsto {cap.predicted_er || "—"}
</span>
<div style={{ display: "flex", gap: 6 }}>
<button
className="btn ghost"
style={{ padding: "2px 8px", fontSize: 10 }}
onClick={() => copyText(cap.text, i)}
>{copied === i ? "OK Copiado" : "Copiar"}</button>
<button
className="btn primary"
style={{ padding: "2px 8px", fontSize: 10 }}
onClick={() => copyText(cap.text, i)}
>Usar</button>
</div>
</div>
</div>
))}
</div>
</div>
</div>

<div className="card" style={{ marginTop: 14 }}>
<div className="card-hd"><h3>Gerador de imagem</h3><span className="sub">FLUX.1-schnell via NVIDIA NIM</span></div>
<div className="card-body">
<div style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
<div style={{ flex: 1 }}>
<div style={{ fontSize: 12, color: "var(--muted)", marginBottom: 6 }}>Descreva a imagem para seu post</div>
<textarea
value={imgPrompt}
onChange={e => setImgPrompt(e.target.value)}
placeholder={"Ex: Foto de produto na praia ao pôr do sol, iluminação profissional, estética Instagram"}
rows={2}
style={{ width: "100%", fontSize: 13, padding: 10, background: "var(--surface-2)", borderRadius: 6, border: "1px solid var(--border)", color: "var(--fg)", resize: "vertical", outline: "none" }}
/>
<div style={{ display: "flex", gap: 8, marginTop: 8 }}>
<button className="btn primary" onClick={generateImage} disabled={imgLoading || !imgPrompt.trim()}>
{imgLoading ? "Gerando imagem..." : "Gerar imagem"}
</button>
{imgResult && (
<a
href={"data:image/jpeg;base64," + imgResult}
download="hub-image.jpg"
className="btn ghost"
style={{ textDecoration: "none" }}
>Baixar imagem</a>
)}
            {imgResult && (
              <button className="btn ghost" onClick={() => handleShareAIGeneratedImage(imgResult, imgPrompt)} style={{ display: "inline-flex", alignItems: "center", gap: 4 }}>
                <Icon name="share" size={13} /> Instagram
              </button>
            )}
</div>
{imgError && <div style={{ color: "var(--neg)", fontSize: 12, marginTop: 6 }}>{imgError}</div>}
{igShareStatus && <div style={{ color: "var(--accent)", fontSize: 12, marginTop: 6 }}>{igShareStatus}</div>}
</div>
<div style={{ flex: 1, display: "flex", justifyContent: "center", alignItems: "center", minHeight: 180, background: "var(--surface-2)", borderRadius: 8, border: "1px solid var(--border)" }}>
{imgLoading && <div style={{ textAlign: "center", color: "var(--muted)" }}><div style={{ fontSize: 24, marginBottom: 8 }}>AI</div><div>Gerando imagem...</div></div>}
{!imgLoading && !imgResult && !imgError && <div style={{ textAlign: "center", color: "var(--muted)", fontSize: 13 }}>Preview da imagem</div>}
{imgResult && <img src={"data:image/jpeg;base64," + imgResult} style={{ maxWidth: "100%", maxHeight: 320, borderRadius: 6 }} />}
</div>
</div>
</div>
</div>

<div className="card" style={{ marginTop: 14 }}>
<div className="card-hd"><h3>Detector de Objetos em Vídeo</h3><span className="sub">IA identifica objetos, pessoas e cenas no vídeo</span></div>
<div className="card-body">
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
<div>
<div style={{ fontSize: 12, color: "var(--muted)", marginBottom: 6 }}>Envie um vídeo para análise</div>
<input type="file" accept="video/*" onChange={handleVideoUpload} style={{ width: "100%", fontSize: 13, padding: 10, background: "var(--surface-2)", borderRadius: 6, border: "1px solid var(--border)", color: "var(--fg)" }} />
{detVideoUrl && (
<div style={{ marginTop: 8 }}>
<video src={detVideoUrl} controls style={{ width: "100%", borderRadius: 6, maxHeight: 200 }} />
<button className="btn primary" onClick={analyzeVideo} disabled={detLoading} style={{ marginTop: 8, width: "100%" }}>
{detLoading ? "Analisando..." : "Analisar vídeo"}
</button>
</div>
)}
{detError && <div style={{ color: "var(--neg)", fontSize: 12, marginTop: 6 }}>{detError}</div>}
{detResults.length > 0 && (
<div style={{ marginTop: 10 }}>
<div style={{ fontSize: 12, color: "var(--muted)", marginBottom: 4 }}>Objetos detectados</div>
{detResults.map((obj, i) => (
<div key={i} style={{ display: "flex", justifyContent: "space-between", padding: "6px 10px", background: "var(--surface-2)", borderRadius: 6, marginBottom: 4, fontSize: 12 }}>
<span style={{ fontWeight: 500 }}>{obj.label}</span>
<span style={{ color: "var(--muted)" }}>{(obj.confidence * 100).toFixed(1)}%</span>
</div>
))}
</div>
)}
</div>
<div style={{ display: "flex", justifyContent: "center", alignItems: "center", minHeight: 200, background: "var(--surface-2)", borderRadius: 8, border: "1px solid var(--border)" }}>
{!detVideoUrl && <div style={{ textAlign: "center", color: "var(--muted)", fontSize: 13 }}>Envie um vídeo para detectar objetos</div>}
{detLoading && <div style={{ textAlign: "center", color: "var(--muted)" }}><div style={{ fontSize: 24, marginBottom: 8 }}>AI</div><div>Analisando objetos...</div></div>}
{detVideoUrl && !detLoading && detResults.length === 0 && <div style={{ textAlign: "center", color: "var(--muted)", fontSize: 13 }}>Clique "Analisar vídeo" para detectar</div>}
{detResults.length > 0 && (
<div style={{ padding: 8, width: "100%" }}>
<div style={{ fontSize: 14, fontWeight: 600, marginBottom: 6 }}>Resumo</div>
<div style={{ fontSize: 12, color: "var(--muted)", marginBottom: 8 }}>{detResults.length} objetos detectados em {detFrameCount} frames analisados</div>
{detSceneLabels.length > 0 && (
<div>
<div style={{ fontSize: 12, color: "var(--muted)", marginBottom: 4 }}>Cenas identificadas</div>
{detSceneLabels.map((s, i) => (
<span key={i} className="pill pos" style={{ marginRight: 4, marginBottom: 4, fontSize: 11 }}>{s}</span>
))}
</div>
)}
</div>
)}
</div>
</div>
</div>
</div>
</div>
);
};

const PageGoals = ({ t, igData, appUser }) => (
<div className="page-dash">
<div className="page-head">
<div>
<h1 className="page-title">{t.goals}</h1>
<p className="page-sub">Definidas pela agência · tracking automático · forecast mensal</p>
</div>
<div className="page-actions">
<button className="btn primary">Nova meta</button>
</div>
</div>

<div style={{ display: "grid", gap: 12 }}>
<div className="card">
<div className="card-body">
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
<div>
<div style={{ fontSize: 11.5, color: "var(--muted)" }}>Seguidores</div>
<div style={{ fontSize: 24, fontWeight: 600, fontFamily: "Inter Tight" }}>184.2K<span style={{ fontSize: 14, color: "var(--muted)" }}>/200K</span></div>
</div>
<span className="pill muted">no pace</span>
</div>
<div className="progress" style={{ height: 8, background: "var(--surface-hi)", borderRadius: 4, marginBottom: 6 }}>
<div className="bar" style={{ width: "92.1%", background: "var(--accent)" }}></div>
</div>
<div style={{ fontSize: 11.5, color: "var(--muted)" }}>+1.2K/sem · no pace</div>
</div>
</div>

<div className="card">
<div className="card-body">
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
<div>
<div style={{ fontSize: 11.5, color: "var(--muted)" }}>ROAS mensal</div>
<div style={{ fontSize: 24, fontWeight: 600, fontFamily: "Inter Tight" }}>5.24<span style={{ fontSize: 14, color: "var(--muted)" }}>/4.50x</span></div>
</div>
<span className="pill pos">superando meta (+16%)</span>
</div>
<div className="progress" style={{ height: 8, background: "var(--surface-hi)", borderRadius: 4, marginBottom: 6 }}>
<div className="bar" style={{ width: "100%", background: "var(--pos)" }}></div>
</div>
<div style={{ fontSize: 11.5, color: "var(--pos)" }}>Meta atingida! +16% acima do target</div>
</div>
</div>

<div className="card">
<div className="card-body">
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
<div>
<div style={{ fontSize: 11.5, color: "var(--muted)" }}>Receita atribuída</div>
<div style={{ fontSize: 24, fontWeight: 600, fontFamily: "Inter Tight" }}>R$ 96.2K<span style={{ fontSize: 14, color: "var(--muted)" }}>/R$ 120K</span></div>
</div>
<span className="pill warn">atrasado</span>
</div>
<div className="progress" style={{ height: 8, background: "var(--surface-hi)", borderRadius: 4, marginBottom: 6 }}>
<div className="bar" style={{ width: "80%", background: "var(--warn)" }}></div>
</div>
<div style={{ fontSize: 11.5, color: "var(--warn)" }}>Atrasado · -R$ 8K do target</div>
</div>
</div>

<div className="card">
<div className="card-body">
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
<div>
<div style={{ fontSize: 11.5, color: "var(--muted)" }}>ER ≥ 5% posts orgânicos</div>
<div style={{ fontSize: 24, fontWeight: 600, fontFamily: "Inter Tight" }}>4.82<span style={{ fontSize: 14, color: "var(--muted)" }}>/5%</span></div>
</div>
<span className="pill muted">no pace</span>
</div>
<div className="progress" style={{ height: 8, background: "var(--surface-hi)", borderRadius: 4, marginBottom: 6 }}>
<div className="bar" style={{ width: "96.4%", background: "var(--accent)" }}></div>
</div>
<div style={{ fontSize: 11.5, color: "var(--muted)" }}>2 pts de chegar lá</div>
</div>
</div>

<div className="card">
<div className="card-body">
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
<div>
<div style={{ fontSize: 11.5, color: "var(--muted)" }}>8 reels/semana</div>
<div style={{ fontSize: 24, fontWeight: 600, fontFamily: "Inter Tight" }}>6<span style={{ fontSize: 14, color: "var(--muted)" }}>/8</span></div>
</div>
<span className="pill warn">atraso</span>
</div>
<div className="progress" style={{ height: 8, background: "var(--surface-hi)", borderRadius: 4, marginBottom: 6 }}>
<div className="bar" style={{ width: "75%", background: "var(--warn)" }}></div>
</div>
<div style={{ fontSize: 11.5, color: "var(--warn)" }}>precisa +2/sem</div>
</div>
</div>
</div>
</div>
);

const PageReports = ({ t, igData, appUser }) => (
<div className="page-dash">
<div className="page-head">
<div>
<h1 className="page-title">{t.reports}</h1>
<p className="page-sub">Templates whitelabel · envio automático WhatsApp + e-mail</p>
</div>
<div className="page-actions">
<button className="btn primary">Novo relatório</button>
</div>
</div>

<div className="card">
<div className="card-hd"><h3>Relatórios agendados</h3></div>
<div className="card-body" style={{ padding: 0 }}>
<table className="tbl" style={{ margin: 0 }}>
<thead><tr><th>Nome</th><th>Template</th><th>Destinatários</th><th>Frequência</th><th>Canais</th><th>Próximo envio</th></tr></thead>
<tbody>
<tr>
<td style={{ fontWeight: 550 }}>Report semanal Aurora</td>
<td><span className="pill muted">Weekly Growth</span></td>
<td style={{ fontSize: 11.5 }}>bruno@grupohub.com, aurora@swim.com</td>
<td style={{ fontSize: 11.5 }}>Semanal · Seg 9h</td>
<td><span className="pill muted">email</span> <span className="pill muted">whatsapp</span></td>
<td><span style={{ color: "var(--accent)" }}>em 2d</span></td>
</tr>
<tr>
<td style={{ fontWeight: 550 }}>Report mensal executivo</td>
<td><span className="pill muted">Executive Monthly</span></td>
<td style={{ fontSize: 11.5 }}>diretoria Aurora (3)</td>
<td style={{ fontSize: 11.5 }}>Mensal · dia 1</td>
<td><span className="pill muted">email</span> <span className="pill muted">pdf</span></td>
<td><span style={{ color: "var(--accent)" }}>em 12d</span></td>
</tr>
<tr>
<td style={{ fontWeight: 550 }}>Report Ads Performance</td>
<td><span className="pill muted">Ads ROAS</span></td>
<td style={{ fontSize: 11.5 }}>midia@grupohub.com</td>
<td style={{ fontSize: 11.5 }}>Semanal · Sex 18h</td>
<td><span className="pill muted">email</span></td>
<td><span style={{ color: "var(--accent)" }}>em 5d</span></td>
</tr>
<tr>
<td style={{ fontWeight: 550 }}>Crisis brief (on-demand)</td>
<td><span className="pill neg">Crisis Alert</span></td>
<td style={{ fontSize: 11.5 }}>bruno + cliente</td>
<td style={{ fontSize: 11.5 }}>Ao trigger</td>
<td><span className="pill muted">whatsapp</span> <span className="pill muted">push</span></td>
<td><span style={{ color: "var(--muted)" }}>"</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
);

const PageAdmin = ({ t, igData, appUser }) => {
const [influencers, setInfluencers] = React.useState([]);
const [selected, setSelected] = React.useState(null);
const [loading, setLoading] = React.useState(true);
const [showForm, setShowForm] = React.useState(false);
const [formData, setFormData] = React.useState({
nome: '', email: '', instagram: '', instagram_seguidores: 0, tiktok: '', tiktok_seguidores: 0,
categoria: '', taxa_engajamento: 0, alcance_medio: 0, valor_post: 0, valor_story: 0, valor_reel: 0,
status: 'ativo', nota: 0, obs: ''
});

React.useEffect(() => {
fetchInfluencers();
}, []);

const fetchInfluencers = async () => {
try {
const res = await fetch('/api/influencers');
const data = await res.json();
if (data.success) setInfluencers(data.data);
} catch (e) {
console.error('Erro ao carregar influencers:', e);
} finally {
setLoading(false);
}
};

const fetchInfluencer = async (id) => {
try {
const res = await fetch(`/api/influencers?id=${id}`);
const data = await res.json();
if (data.success) {
setSelected(data.data);
setFormData(data.data);
}
} catch (e) {
console.error('Erro ao carregar influencer:', e);
}
};

const saveInfluencer = async () => {
try {
const url = selected ? `/api/influencers?id=${selected.id}` : '/api/influencers';
const method = selected ? 'PUT' : 'POST';
const res = await fetch(url, {
method,
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(formData)
});
const data = await res.json();
if (data.success) {
setShowForm(false);
setSelected(null);
setFormData({ nome: '', email: '', instagram: '', instagram_seguidores: 0, tiktok: '', tiktok_seguidores: 0, categoria: '', taxa_engajamento: 0, alcance_medio: 0, valor_post: 0, valor_story: 0, valor_reel: 0, status: 'ativo', nota: 0, obs: '' });
fetchInfluencers();
} else {
alert(data.error || 'Erro ao salvar');
}
} catch (e) {
alert('Erro ao salvar influencer');
}
};

const deleteInfluencer = async (id) => {
if (!confirm('Tem certeza que deseja excluir?')) return;
try {
const res = await fetch(`/api/influencers?id=${id}`, { method: 'DELETE' });
const data = await res.json();
if (data.success) {
setSelected(null);
fetchInfluencers();
}
} catch (e) {
alert('Erro ao excluir');
}
};

const formatNumber = (num) => {
if (!num) return '0';
if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M';
if (num >= 1000) return (num / 1000).toFixed(1) + 'K';
return num.toString();
};

const totalSeguidores = influencers.reduce((acc, i) => (i.instagram_seguidores || 0) + (i.tiktok_seguidores || 0), 0);
const avgEngajamento = influencers.length ? (influencers.reduce((acc, i) => acc + (i.taxa_engajamento || 0), 0) / influencers.length).toFixed(2) : 0;

if (showForm) {
return (
<div className="page-dash">
<div className="page-head">
<div>
<h1 className="page-title">{selected ? 'Editar Influencer' : 'Novo Influencer'}</h1>
</div>
<div className="page-actions">
<button className="btn" onClick={() => { setShowForm(false); setSelected(null); }}>Cancelar</button>
<button className="btn primary" onClick={saveInfluencer}>Salvar</button>
</div>
</div>
<div className="card">
<div className="card-body">
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
<div><label style={{ fontSize: 11, color: "var(--muted)" }}>Nome *</label><input className="inp" value={formData.nome} onChange={e => setFormData({...formData, nome: e.target.value})} placeholder="Nome completo" /></div>
<div><label style={{ fontSize: 11, color: "var(--muted)" }}>E-mail</label><input className="inp" value={formData.email} onChange={e => setFormData({...formData, email: e.target.value})} placeholder="email@exemplo.com" /></div>
<div><label style={{ fontSize: 11, color: "var(--muted)" }}>Instagram</label><input className="inp" value={formData.instagram} onChange={e => setFormData({...formData, instagram: e.target.value})} placeholder="@influencer" /></div>
<div><label style={{ fontSize: 11, color: "var(--muted)" }}>Seguidores Instagram</label><input className="inp" type="number" value={formData.instagram_seguidores} onChange={e => setFormData({...formData, instagram_seguidores: parseInt(e.target.value) || 0})} /></div>
<div><label style={{ fontSize: 11, color: "var(--muted)" }}>TikTok</label><input className="inp" value={formData.tiktok} onChange={e => setFormData({...formData, tiktok: e.target.value})} placeholder="@influencer" /></div>
<div><label style={{ fontSize: 11, color: "var(--muted)" }}>Seguidores TikTok</label><input className="inp" type="number" value={formData.tiktok_seguidores} onChange={e => setFormData({...formData, tiktok_seguidores: parseInt(e.target.value) || 0})} /></div>
<div><label style={{ fontSize: 11, color: "var(--muted)" }}>Categoria</label><input className="inp" value={formData.categoria} onChange={e => setFormData({...formData, categoria: e.target.value})} placeholder="Moda, Fitness, etc" /></div>
<div><label style={{ fontSize: 11, color: "var(--muted)" }}>Taxa de Engajamento (%)</label><input className="inp" type="number" step="0.01" value={formData.taxa_engajamento} onChange={e => setFormData({...formData, taxa_engajamento: parseFloat(e.target.value) || 0})} /></div>
<div><label style={{ fontSize: 11, color: "var(--muted)" }}>Alcance Médio</label><input className="inp" type="number" value={formData.alcance_medio} onChange={e => setFormData({...formData, alcance_medio: parseInt(e.target.value) || 0})} /></div>
<div><label style={{ fontSize: 11, color: "var(--muted)" }}>Status</label><select className="inp" value={formData.status} onChange={e => setFormData({...formData, status: e.target.value})}><option value="ativo">Ativo</option><option value="inativo">Inativo</option><option value="pendente">Pendente</option></select></div>
<div><label style={{ fontSize: 11, color: "var(--muted)" }}>Valor Post (R$)</label><input className="inp" type="number" value={formData.valor_post} onChange={e => setFormData({...formData, valor_post: parseFloat(e.target.value) || 0})} /></div>
<div><label style={{ fontSize: 11, color: "var(--muted)" }}>Valor Story (R$)</label><input className="inp" type="number" value={formData.valor_story} onChange={e => setFormData({...formData, valor_story: parseFloat(e.target.value) || 0})} /></div>
<div><label style={{ fontSize: 11, color: "var(--muted)" }}>Valor Reel (R$)</label><input className="inp" type="number" value={formData.valor_reel} onChange={e => setFormData({...formData, valor_reel: parseFloat(e.target.value) || 0})} /></div>
<div><label style={{ fontSize: 11, color: "var(--muted)" }}>Nota (0-10)</label><input className="inp" type="number" max="10" value={formData.nota} onChange={e => setFormData({...formData, nota: parseFloat(e.target.value) || 0})} /></div>
</div>
<div style={{ marginTop: 12 }}><label style={{ fontSize: 11, color: "var(--muted)" }}>Observações</label><textarea className="inp" rows={3} value={formData.obs || ''} onChange={e => setFormData({...formData, obs: e.target.value})} placeholder="Observações..." /></div>
</div>
</div>
</div>
);
}

if (selected) {
return (
<div className="page-dash">
<div className="page-head">
<div>
<h1 className="page-title">{selected.nome}</h1>
<p className="page-sub">@{selected.instagram} · {selected.categoria}</p>
</div>
<div className="page-actions">
<button className="btn" onClick={() => setSelected(null)}>Voltar</button>
<button className="btn" onClick={() => { setShowForm(true); setFormData(selected); }}>Editar</button>
<button className="btn" style={{ color: "var(--neg)" }} onClick={() => deleteInfluencer(selected.id)}>Excluir</button>
</div>
</div>

<div style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: 14 }}>
<div style={{ display: "grid", gap: 12 }}>
<div className="kpi-grid">
<div className="kpi"><div className="kpi-label">Seguidores Instagram</div><div className="kpi-value">{formatNumber(selected.instagram_seguidores)}</div></div>
<div className="kpi"><div className="kpi-label">Seguidores TikTok</div><div className="kpi-value">{formatNumber(selected.tiktok_seguidores)}</div></div>
<div className="kpi"><div className="kpi-label">Taxa Engajamento</div><div className="kpi-value">{selected.taxa_engajamento}%</div></div>
<div className="kpi"><div className="kpi-label">Alcance Médio</div><div className="kpi-value">{formatNumber(selected.alcance_medio)}</div></div>
</div>
<div className="card">
<div className="card-hd"><h3>Valores</h3></div>
<div className="card-body">
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16 }}>
<div style={{ textAlign: "center" }}><div style={{ fontSize: 11, color: "var(--muted)" }}>Post</div><div style={{ fontSize: 20, fontWeight: 600 }}>R$ {selected.valor_post?.toFixed(2)}</div></div>
<div style={{ textAlign: "center" }}><div style={{ fontSize: 11, color: "var(--muted)" }}>Story</div><div style={{ fontSize: 20, fontWeight: 600 }}>R$ {selected.valor_story?.toFixed(2)}</div></div>
<div style={{ textAlign: "center" }}><div style={{ fontSize: 11, color: "var(--muted)" }}>Reel</div><div style={{ fontSize: 20, fontWeight: 600 }}>R$ {selected.valor_reel?.toFixed(2)}</div></div>
</div>
</div>
</div>
{selected.obs && <div className="card"><div className="card-hd"><h3>Observações</h3></div><div className="card-body">{selected.obs}</div></div>}
</div>
<div className="card">
<div className="card-hd"><h3>Info</h3></div>
<div className="card-body">
<div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
<div><div style={{ fontSize: 10, color: "var(--muted)" }}>E-mail</div><div style={{ fontSize: 12 }}>{selected.email || '-'}</div></div>
<div><div style={{ fontSize: 10, color: "var(--muted)" }}>Instagram</div><div style={{ fontSize: 12 }}>@{selected.instagram}</div></div>
<div><div style={{ fontSize: 10, color: "var(--muted)" }}>TikTok</div><div style={{ fontSize: 12 }}>@{selected.tiktok || '-'}</div></div>
<div><div style={{ fontSize: 10, color: "var(--muted)" }}>Categoria</div><div style={{ fontSize: 12 }}>{selected.categoria || '-'}</div></div>
<div><div style={{ fontSize: 10, color: "var(--muted)" }}>Status</div><span className={"pill " + (selected.status === 'ativo' ? 'pos' : selected.status === 'inativo' ? 'neg' : 'muted')}>{selected.status}</span></div>
<div><div style={{ fontSize: 10, color: "var(--muted)" }}>Nota</div><div style={{ fontSize: 20, fontWeight: 600 }}>{selected.nota}/10</div></div>
</div>
</div>
</div>
</div>
</div>
);
}

return (
<div className="page-dash">
<div className="page-head">
<div>
<h1 className="page-title">Admin</h1>
<p className="page-sub">Gerenciamento de influencers · visão geral da agência</p>
</div>
<div className="page-actions">
<button className="btn primary" onClick={() => setShowForm(true)}>+ Novo Influencer</button>
</div>
</div>

<div className="kpi-grid">
<div className="kpi"><div className="kpi-label">Total Influencers</div><div className="kpi-value">{influencers.length}</div></div>
<div className="kpi"><div className="kpi-label">Total Seguidores</div><div className="kpi-value">{formatNumber(totalSeguidores)}</div></div>
<div className="kpi"><div className="kpi-label">Engajamento Médio</div><div className="kpi-value">{avgEngajamento}%</div></div>
<div className="kpi"><div className="kpi-label">Ativos</div><div className="kpi-value">{influencers.filter(i => i.status === 'ativo').length}</div></div>
</div>

<div className="card">
<div className="card-body" style={{ padding: 0 }}>
{loading ? <div style={{ padding: 20, textAlign: "center", color: "var(--muted)" }}>Carregando...</div> : (
<table className="tbl" style={{ margin: 0 }}>
<thead><tr><th>Influencer</th><th>Instagram</th><th>TikTok</th><th>Seguidores</th><th>Engajamento</th><th>Status</th><th></th></tr></thead>
<tbody>
{influencers.map(inf => (
<tr key={inf.id} onClick={() => fetchInfluencer(inf.id)} style={{ cursor: "pointer" }}>
<td><strong>{inf.nome}</strong><div style={{ fontSize: 10, color: "var(--muted)" }}>{inf.categoria}</div></td>
<td style={{ fontFamily: "Inter Tight", fontSize: 11 }}>@{inf.instagram}</td>
<td style={{ fontFamily: "Inter Tight", fontSize: 11 }}>@{inf.tiktok || '-'}</td>
<td className="num">{formatNumber((inf.instagram_seguidores || 0) + (inf.tiktok_seguidores || 0))}</td>
<td><span className="pill pos">{inf.taxa_engajamento}%</span></td>
<td><span className={"pill " + (inf.status === 'ativo' ? 'pos' : inf.status === 'inativo' ? 'neg' : 'muted')}>{inf.status}</span></td>
<td style={{ textAlign: "right" }}><button className="btn ghost" style={{ padding: "2px 8px" }}>Ver</button></td>
</tr>
))}
</tbody>
</table>
)}
</div>
</div>
</div>
);
};

// ===== YOUTUBE PAGE =====
const PageYouTube = ({ t, igData, appUser, subPage }) => {
const [ytSearch, setYtSearch] = React.useState("");
const [ytResults, setYtResults] = React.useState(null);
const [ytChannel, setYtChannel] = React.useState(null);
const [ytLoading, setYtLoading] = React.useState(false);
const [ytError, setYtError] = React.useState(null);
const [ytTab, setYtTab] = React.useState("overview");
const [ytConnected, setYtConnected] = React.useState(null);
const [ytVideos, setYtVideos] = React.useState([]);
const [ytPlaylists, setYtPlaylists] = React.useState([]);
const [ytVideoStats, setYtVideoStats] = React.useState({ totalViews:0, totalLikes:0, totalComments:0, avgViews:0, avgLikes:0, avgComments:0, avgDuration:"—" });
const [aiInsightResults, setAiInsightResults] = React.useState({});
const [aiInsightLoading, setAiInsightLoading] = React.useState({});
const userEmail = (appUser && appUser.email) || "";

const loadYtStatus = async () => {
try {
const r = await fetch("/api/yt/status", { credentials: "include", headers: { "x-user-email": userEmail } });
const d = await r.json();
setYtConnected(d.connected ? d : null);
} catch (e) {}
};
React.useEffect(() => { loadYtStatus(); }, [userEmail]);

const doSearch = async () => {
if (!ytSearch.trim()) return;
setYtLoading(true); setYtError(null);
try {
const r = await fetch("/api/yt/search?q=" + encodeURIComponent(ytSearch) + "&maxResults=12&type=video");
const d = await r.json();
if (d.error) { setYtError(d.error); setYtResults(null); }
else setYtResults(d);
} catch (e) { setYtError("Erro na busca YouTube"); }
setYtLoading(false);
};
const connectYouTube = () => { window.location.href = "/api/auth/youtube?email=" + encodeURIComponent(userEmail); };
const disconnectYouTube = async () => {
if (!confirm("Desconectar conta YouTube?")) return;
await fetch("/api/yt/disconnect", { method: "POST", headers: { "Content-Type": "application/json", "x-user-email": userEmail } });
setYtConnected(null); setYtChannel(null); setYtVideos([]); setYtPlaylists([]);
};

React.useEffect(() => {
if (ytConnected && ytConnected.channelId) {
setYtLoading(true);
const ytOpts = { credentials: "include", headers: { "x-user-email": userEmail } };
fetch("/api/yt/channels?id=" + encodeURIComponent(ytConnected.channelId) + "&part=snippet,contentDetails,statistics", ytOpts).then(r=>r.json()).then(ch => {
const chData = ch.items && ch.items[0];
if (chData) setYtChannel(chData);
fetch("/api/yt/playlists?channelId=" + encodeURIComponent(ytConnected.channelId) + "&maxResults=12", ytOpts).then(r=>r.json()).then(d => { setYtPlaylists(d.items || []); }).catch(()=>{});
const uploadsId = (chData?.contentDetails?.relatedPlaylists?.uploads) || ("UU" + ytConnected.channelId.replace(/^UC/, ""));
fetch("/api/yt/playlistItems?playlistId=" + encodeURIComponent(uploadsId) + "&maxResults=12&part=snippet,contentDetails", ytOpts).then(r2=>r2.json()).then(d => {
const items = d.items || [];
const ids = items.filter(v=>v.contentDetails?.videoId).map(v=>v.contentDetails.videoId).join(",");
const mapped = items.map(v => ({ id: v.contentDetails?.videoId || v.id, snippet: v.snippet }));
setYtVideos(mapped);
if (ids) fetch("/api/yt/videos?id=" + encodeURIComponent(ids) + "&maxResults=12&part=snippet,contentDetails,statistics", ytOpts).then(r3=>r3.json()).then(d2 => {
const vids2 = d2.items || [];
const merged = mapped.map(item => { const vid = vids2.find(v => v.id === item.id); return vid || item; });
setYtVideos(merged);
let tv=0,tl=0,tc=0,durSecs=0,durCount=0;
vids2.forEach(v => {
tv += +(v.statistics?.viewCount||0); tl += +(v.statistics?.likeCount||0); tc += +(v.statistics?.commentCount||0);
const m = (v.contentDetails?.duration||"").match(/PT(\d+H)?(\d+M)?(\d+S)?/);
if(m){ const h=m[1]?parseInt(m[1]):0; const min=m[2]?parseInt(m[2]):0; const s=m[3]?parseInt(m[3]):0; durSecs+=h*3600+min*60+s; durCount++; }
});
const n2 = vids2.length || 1;
setYtVideoStats({ totalViews:tv, totalLikes:tl, totalComments:tc, avgViews:Math.round(tv/n2), avgLikes:Math.round(tl/n2), avgComments:Math.round(tc/n2), avgDuration:durCount>0?fmtDuration2(Math.round(durSecs/durCount)):"—" });
}).catch(()=>{});
}).catch(()=>{});
}).catch(()=>{}).finally(()=>setYtLoading(false));
}
}, [ytConnected]);

React.useEffect(() => {
const params = new URLSearchParams(window.location.search);
if (params.get("yt_success")) { try { const d = JSON.parse(atob(params.get("yt_success"))); setYtConnected(d); } catch(e) {} window.history.replaceState({}, "", window.location.pathname); }
}, []);

const fmtN = v => v >= 1e6 ? (v/1e6).toFixed(1)+"M" : v >= 1e3 ? (v/1e3).toFixed(1)+"K" : String(v||0);
const fmtDate = d => { if (!d) return ""; const dt = new Date(d); return dt.toLocaleDateString("pt-BR", {day:"2-digit",month:"short",year:"numeric"}); };
const fmtDuration = iso => { if (!iso) return ""; const m = iso.match(/PT(\d+H)?(\d+M)?(\d+S)?/); if (!m) return ""; const h=m[1]?parseInt(m[1]):0; const min=m[2]?parseInt(m[2]):0; const s=m[3]?parseInt(m[3]):0; return h>0?h+":"+String(min).padStart(2,"0")+":"+String(s).padStart(2,"0"):min+":"+String(s).padStart(2,"0"); };
const fmtDuration2 = secs => { if(!secs) return "—"; const m2=Math.floor(secs/60); const s2=secs%60; return m2+":"+String(s2).padStart(2,"0"); };

const cardStyle = { background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 24, padding: 24 };
const goldBtn = { background: "linear-gradient(135deg, #d97706, #f59e0b)", color: "#000", fontWeight: 700, border: "none", borderRadius: 16, cursor: "pointer" };
const inputBox = { background: "var(--bg)", border: "1px solid var(--border-strong)", borderRadius: 12, padding: 14, color: "var(--text)", fontSize: ".85rem", width: "100%" };

const tabs = ["Visão geral", "Vídeos", "Playlists", "Buscar"];
const tabKeys = ["overview", "videos", "playlists", "search"];
const subs = ytChannel?.statistics?.subscriberCount || ytConnected?.subscribers || 0;
const vids = ytChannel?.statistics?.videoCount || ytConnected?.videoCount || 0;
const views = ytChannel?.statistics?.viewCount || ytConnected?.viewCount || 0;
const engagementRate = subs > 0 ? ((ytVideoStats.avgLikes + ytVideoStats.avgComments) / subs * 100).toFixed(1) : "—";

  const ytScopeInfo = {
    "yt-data-api": { title: "YouTube Data API v3", color: "#FF0000", desc: "API principal do YouTube. Permite ler e gerenciar canais, vídeos, playlists, comentários e buscas. Base de toda integração YouTube no HUBstudio.", details: [
      { label: "API", value: "YouTube Data API v3" },
      { label: "Base URL", value: "https://www.googleapis.com/youtube/v3/" },
      { label: "Quota", value: "10.000 units/dia (padrão)" },
      { label: "Recursos", value: "channels, videos, playlists, playlistItems, search, comments" },
      { label: "Auth", value: "OAuth 2.0 ou API Key (leitura pública)" },
    ]},
    "yt-oauth": { title: "OAuth 2.0", color: "#FF0000", desc: "Autenticação Google OAuth 2.0 via Authorization Code Grant. Permite que o HUBstudio acesse dados do YouTube em nome do usuário com consentimento explícito.", details: [
      { label: "Fluxo", value: "OAuth 2.0 Authorization Code Grant" },
      { label: "Auth URL", value: "https://accounts.google.com/o/oauth2/v2/auth" },
      { label: "Token URL", value: "https://oauth2.googleapis.com/token" },
      { label: "Retorna", value: "access_token, refresh_token, expires_in, scope, token_type" },
      { label: "Redirect", value: "/api/auth/youtube/callback" },
      { label: "Segurança", value: "State parameter + PKCE + HTTP-only cookies" },
    ]},
    "yt-scope-readonly": { title: "youtube.readonly", color: "#4ade80", desc: "Acesso somente leitura ao canal do usuário. Permite visualizar canais, vídeos, playlists e estatísticas sem permissão de escrita. Scope mais seguro.", details: [
      { label: "Scope", value: "https://www.googleapis.com/auth/youtube.readonly" },
      { label: "Acesso", value: "Somente leitura" },
      { label: "Lê", value: "Canais, vídeos, playlists, estatísticas do canal" },
      { label: "Não permite", value: "Upload, deletar, modificar qualquer recurso" },
      { label: "Uso no HUB", value: "Buscar vídeos, ler stats do canal, listar playlists" },
    ]},
    "yt-scope-upload": { title: "youtube.upload", color: "#ff9a3c", desc: "Permite upload de vídeos e gerenciamento de conteúdo do canal. Inclui upload de vídeos, criar/modificar playlists e atualizar metadados de vídeos.", details: [
      { label: "Scope", value: "https://www.googleapis.com/auth/youtube" },
      { label: "Upload", value: "POST https://www.googleapis.com/upload/youtube/v3/videos" },
      { label: "Permite", value: "Upload vídeo, criar/editar playlists, atualizar metadados" },
      { label: "Formato", value: "Resumable upload (multipart/related ou JSON)" },
      { label: "Tamanho máx", value: "256GB ou 12 horas" },
    ]},
    "yt-scope-force-ssl": { title: "youtube.force-ssl", color: "#d97706", desc: "Acesso total ao canal via HTTPS obrigatório. Mesmas permissões do youtube mas todas as requisições devem usar SSL. Necessário para operações administrativas.", details: [
      { label: "Scope", value: "https://www.googleapis.com/auth/youtube.force-ssl" },
      { label: "HTTPS", value: "Obrigatório — todas as calls via SSL" },
      { label: "Permite", value: "Tudo que o youtube scope permite + compliance SSL" },
      { label: "Modo", value: "Administração avançada do canal" },
      { label: "Uso", value: "Deletar vídeos, moderar comentários, gerenciar canal" },
    ]},
    "yt-scope-partner": { title: "youtubepartner", color: "#7b2ff7", desc: "Acesso a recursos do YouTube Partner Program. Permite gerenciar reivindicações de direitos autorais, ativos e políticas de Content ID.", details: [
      { label: "Scope", value: "https://www.googleapis.com/auth/youtubepartner" },
      { label: "Permite", value: "Gerenciar reivindicações, ativos, políticas Content ID" },
      { label: "Requisito", value: "YouTube Partner Program ativo" },
      { label: "Content ID", value: "Upload de referências, criar claims, setar políticas" },
      { label: "Uso no HUB", value: "Proteção de conteúdo, monitoramento de direitos autorais" },
    ]},
    "yt-scope-userinfo": { title: "userinfo.profile", color: "#00b4d8", desc: "Leitura de dados básicos do perfil Google. Retorna nome, foto, email e ID do usuário. Necessário para identificar o dono da conta Google conectada.", details: [
      { label: "Scope", value: "https://www.googleapis.com/auth/userinfo.profile" },
      { label: "Retorna", value: "name, picture, email, locale, id" },
      { label: "Endpoint", value: "GET https://www.googleapis.com/oauth2/v2/userinfo" },
      { label: "OpenID", value: "scope openid incluído para ID token JWT" },
      { label: "Privacidade", value: "Dados mínimos — apenas identificação" },
    ]},
  };

  if (subPage && ytScopeInfo[subPage]) {
    const si = ytScopeInfo[subPage];
    const ytIcons = {"yt-data-api":"database","yt-oauth":"key","yt-scope-readonly":"eye","yt-scope-upload":"upload","yt-scope-force-ssl":"lock","yt-scope-partner":"handshake","yt-scope-userinfo":"user"};
    const ytGradients = {"yt-data-api":"linear-gradient(135deg,#FF0000,#cc0000)","yt-oauth":"linear-gradient(135deg,#FF0000,#FF6D00)","yt-scope-readonly":"linear-gradient(135deg,#4ade80,#16a34a)","yt-scope-upload":"linear-gradient(135deg,#ff9a3c,#FF0000)","yt-scope-force-ssl":"linear-gradient(135deg,#d97706,#b8860b)","yt-scope-partner":"linear-gradient(135deg,#7b2ff7,#9333ea)","yt-scope-userinfo":"linear-gradient(135deg,#00b4d8,#0284c7)"};
    const grad = ytGradients[subPage] || "linear-gradient(135deg,#FF0000,#cc0000)";
    return (
      <div className="page-dash">
        <div style={{position:"relative",borderRadius:24,overflow:"hidden",marginBottom:24,background:grad,padding:32,color:"#fff"}}>
          <div style={{position:"absolute",top:0,right:0,width:200,height:200,background:"radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%)",borderRadius:"50%",transform:"translate(30%,-30%)"}} />
          <div style={{position:"relative",zIndex:1,display:"flex",gap:20,alignItems:"center"}}>
            <div style={{width:56,height:56,borderRadius:16,background:"rgba(0,0,0,.25)",backdropFilter:"blur(8px)",display:"flex",alignItems:"center",justifyContent:"center",border:"1px solid rgba(255,255,255,.15)"}}>
              <Icon name={ytIcons[subPage]||"info"} size={24} />
            </div>
            <div>
              <h1 style={{fontSize:"1.5rem",fontWeight:700,margin:0}}>{si.title}</h1>
              <p style={{fontSize:".82rem",opacity:.85,margin:"4px 0 0",fontWeight:500}}>YouTube Developer Platform</p>
            </div>
            <div style={{marginLeft:"auto",padding:"6px 14px",borderRadius:10,background:"rgba(0,0,0,.2)",backdropFilter:"blur(8px)",fontSize:".68rem",fontWeight:700,border:"1px solid rgba(255,255,255,.15)",display:"flex",alignItems:"center",gap:6}}>
              <span style={{width:8,height:8,borderRadius:"50%",background:ytConnected?"#4ade80":"var(--muted)",display:"inline-block"}} />
              {ytConnected?"Ativo":"Desconectado"}
            </div>
          </div>
        </div>
        <div style={{background:"var(--surface)",border:"1px solid var(--border)",borderRadius:20,padding:24,marginBottom:16}}>
          <div style={{display:"flex",alignItems:"center",gap:8,marginBottom:12}}>
            <Icon name="info" size={14} />
            <span style={{fontSize:".78rem",fontWeight:700,color:"var(--text)"}}>Sobre</span>
          </div>
          <p style={{fontSize:".82rem",lineHeight:1.7,color:"var(--text)",margin:0}}>{si.desc}</p>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fit,minmax(260px,1fr))",gap:12,marginBottom:16}}>
          {si.details.map((d,i) => (
            <div key={i} style={{background:"var(--surface)",border:"1px solid var(--border)",borderRadius:20,padding:20,display:"flex",flexDirection:"column",gap:8}}>
              <div style={{display:"flex",alignItems:"center",gap:8}}>
                <div style={{width:32,height:32,borderRadius:10,background:`${si.color}11`,display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0}}>
                  <span style={{width:8,height:8,borderRadius:3,background:si.color,display:"block"}} />
                </div>
                <span style={{fontSize:".72rem",fontWeight:700,color:si.color,textTransform:"uppercase",letterSpacing:".5px"}}>{d.label}</span>
              </div>
              <code style={{fontSize:".82rem",color:"var(--text)",wordBreak:"break-all",lineHeight:1.5,background:"var(--bg)",padding:"8px 12px",borderRadius:10,margin:0}}>{d.value}</code>
            </div>
          ))}
        </div>

        {/* Layout funcional YouTube */}
        {subPage === "yt-data-api" && (
        <div style={{marginTop:16}}>
          <div style={{fontSize:".78rem",fontWeight:700,marginBottom:12,color:"var(--text)",display:"flex",alignItems:"center",gap:6}}><Icon name="layout" size={14} /> Recursos da API</div>
          <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fit,minmax(200px,1fr))",gap:8}}>
            {["channels","videos","search","playlists","playlistItems","comments","commentThreads"].map(r => (
              <div key={r} style={{padding:"12px 16px",background:"var(--surface)",border:"1px solid var(--border)",borderRadius:14}}>
                <code style={{fontSize:".78rem",color:"#FF0000",fontWeight:700}}>{r}</code>
                <div style={{fontSize:".68rem",color:"var(--muted)",marginTop:4}}>GET /youtube/v3/{r}</div>
              </div>
            ))}
          </div>
          {ytChannel && (
          <div style={{marginTop:12,padding:16,background:"var(--surface)",border:"1px solid var(--border)",borderRadius:14}}>
            <div style={{fontSize:".72rem",fontWeight:700,marginBottom:8,color:"#FF0000"}}>Seu canal via Data API</div>
            <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:6}}>
              <div style={{fontSize:".68rem",color:"var(--muted)"}}>Canal</div><div style={{fontSize:".68rem",color:"var(--text)",fontWeight:600}}>{ytChannel.snippet?.title||"—"}</div>
              <div style={{fontSize:".68rem",color:"var(--muted)"}}>Subscribers</div><div style={{fontSize:".68rem",color:"var(--text)",fontWeight:600}}>{fmtN(subs)}</div>
              <div style={{fontSize:".68rem",color:"var(--muted)"}}>Vídeos</div><div style={{fontSize:".68rem",color:"var(--text)",fontWeight:600}}>{fmtN(vids)}</div>
              <div style={{fontSize:".68rem",color:"var(--muted)"}}>Views</div><div style={{fontSize:".68rem",color:"var(--text)",fontWeight:600}}>{fmtN(views)}</div>
            </div>
          </div>
          )}
        </div>
        )}

        {subPage === "yt-oauth" && (
        <div style={{marginTop:16}}>
          <div style={{fontSize:".78rem",fontWeight:700,marginBottom:12,color:"var(--text)",display:"flex",alignItems:"center",gap:6}}><Icon name="layout" size={14} /> Fluxo OAuth 2.0</div>
          <div style={{display:"flex",flexDirection:"column",gap:8}}>
            {[
              {step:1,label:"Usuário clica",desc:"\"Conectar com YouTube\" — redirect para Google Auth"},
              {step:2,label:"Google Auth",desc:"Usuário seleciona conta e aprova scopes YouTube"},
              {step:3,label:"Callback",desc:"Google redirecta com code → HUBstudio troca por tokens"},
              {step:4,label:"Armazena",desc:"access_token + refresh_token salvos em youtube_tokens"},
            ].map(s => (
              <div key={s.step} style={{display:"flex",alignItems:"flex-start",gap:12,padding:"14px 16px",background:"var(--surface)",border:"1px solid var(--border)",borderRadius:14}}>
                <div style={{width:28,height:28,borderRadius:8,background:"linear-gradient(135deg,#FF0000,#FF6D00)",display:"flex",alignItems:"center",justifyContent:"center",fontSize:12,fontWeight:800,color:"#fff",flexShrink:0}}>{s.step}</div>
                <div>
                  <div style={{fontSize:".78rem",fontWeight:700,color:"var(--text)"}}>{s.label}</div>
                  <div style={{fontSize:".72rem",color:"var(--muted)",marginTop:2}}>{s.desc}</div>
                </div>
              </div>
            ))}
          </div>
          {ytConnected && (
          <div style={{marginTop:12,padding:16,background:"var(--surface)",border:"1px solid var(--border)",borderRadius:14}}>
            <div style={{fontSize:".72rem",fontWeight:700,marginBottom:8,color:"#FF0000"}}>Sua sessão OAuth</div>
            <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:6}}>
              <div style={{fontSize:".68rem",color:"var(--muted)"}}>Channel</div><div style={{fontSize:".68rem",color:"var(--text)",fontWeight:600}}>{ytConnected.channelTitle||"—"}</div>
              <div style={{fontSize:".68rem",color:"var(--muted)"}}>Scopes</div><div style={{fontSize:".68rem",color:"var(--text)",fontWeight:600}}>7 ativos</div>
              <div style={{fontSize:".68rem",color:"var(--muted)"}}>Token</div><div style={{fontSize:".68rem",color:"#4ade80",fontWeight:600}}>Válido</div>
              <div style={{fontSize:".68rem",color:"var(--muted)"}}>Refresh</div><div style={{fontSize:".68rem",color:"#4ade80",fontWeight:600}}>Disponível</div>
            </div>
          </div>
          )}
        </div>
        )}

        {subPage === "yt-scope-readonly" && (
        <div style={{marginTop:16}}>
          <div style={{fontSize:".78rem",fontWeight:700,marginBottom:12,color:"var(--text)",display:"flex",alignItems:"center",gap:6}}><Icon name="layout" size={14} /> Dados somente leitura</div>
          <div style={{display:"grid",gridTemplateColumns:"repeat(2,1fr)",gap:12}}>
            {[
              {label:"Inscritos",value:fmtN(subs),icon:"users",color:"#4ade80"},
              {label:"Vídeos",value:fmtN(vids),icon:"video",color:"#4ade80"},
              {label:"Visualizações",value:fmtN(views),icon:"eye",color:"#4ade80"},
              {label:"Engagement",value:engagementRate+"%",icon:"heart",color:"#4ade80"},
            ].map((s,i) => (
              <div key={i} style={{background:"var(--surface)",border:"1px solid var(--border)",borderRadius:20,padding:20}}>
                <div style={{display:"flex",alignItems:"center",gap:8,marginBottom:10}}>
                  <div style={{width:32,height:32,borderRadius:10,background:`${s.color}15`,display:"flex",alignItems:"center",justifyContent:"center"}}>
                    <Icon name={s.icon} size={16} color={s.color} />
                  </div>
                  <span style={{fontSize:".72rem",color:"var(--muted)",fontWeight:600}}>{s.label}</span>
                </div>
                <div style={{fontSize:"1.8rem",fontWeight:800,color:s.color}}>{s.value}</div>
                <div style={{fontSize:".62rem",color:"var(--muted)",marginTop:4}}>readonly</div>
              </div>
            ))}
          </div>
        </div>
        )}

        {subPage === "yt-scope-upload" && (
        <div style={{marginTop:16}}>
          <div style={{fontSize:".78rem",fontWeight:700,marginBottom:12,color:"var(--text)",display:"flex",alignItems:"center",gap:6}}><Icon name="layout" size={14} /> Upload de vídeos</div>
          <div style={{padding:20,background:"var(--surface)",border:"1px solid var(--border)",borderRadius:20}}>
            <div style={{border:"2px dashed var(--border)",borderRadius:14,padding:24,textAlign:"center",marginBottom:12}}>
              <Icon name="upload-cloud" size={28} />
              <div style={{fontSize:".72rem",color:"var(--muted)",marginTop:8}}>Arraste vídeo (até 256GB ou 12h)</div>
            </div>
            <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:8}}>
              <div style={{padding:"10px 14px",background:"var(--bg)",borderRadius:10}}>
                <div style={{fontSize:".66rem",color:"var(--muted)"}}>Título</div>
                <div style={{fontSize:".76rem",color:"var(--text)",fontWeight:600}}>Meu vídeo no YouTube</div>
              </div>
              <div style={{padding:"10px 14px",background:"var(--bg)",borderRadius:10}}>
                <div style={{fontSize:".66rem",color:"var(--muted)"}}>Status</div>
                <div style={{fontSize:".76rem",color:"#ff9a3c",fontWeight:600}}>Resumable upload</div>
              </div>
            </div>
          </div>
        </div>
        )}

        {subPage === "yt-scope-force-ssl" && (
        <div style={{marginTop:16}}>
          <div style={{fontSize:".78rem",fontWeight:700,marginBottom:12,color:"var(--text)",display:"flex",alignItems:"center",gap:6}}><Icon name="layout" size={14} /> Operações administrativas</div>
          <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fit,minmax(180px,1fr))",gap:8}}>
            {[
              {label:"Deletar vídeo",icon:"trash-2",desc:"DELETE /videos?id=..."},
              {label:"Moderar comentários",icon:"message-circle",desc:"PUT /commentThreads"},
              {label:"Gerenciar canal",icon:"settings",desc:"PUT /channels"},
              {label:"Atualizar playlist",icon:"list",desc:"PUT /playlists"},
            ].map((op,i) => (
              <div key={i} style={{padding:16,background:"var(--surface)",border:"1px solid var(--border)",borderRadius:14,textAlign:"center"}}>
                <div style={{width:36,height:36,borderRadius:10,background:"#d9770615",display:"flex",alignItems:"center",justifyContent:"center",margin:"0 auto 8px"}}>
                  <Icon name={op.icon} size={18} color="#d97706" />
                </div>
                <div style={{fontSize:".76rem",fontWeight:700,color:"var(--text)"}}>{op.label}</div>
                <code style={{fontSize:".62rem",color:"var(--muted)"}}>{op.desc}</code>
              </div>
            ))}
          </div>
        </div>
        )}

        {subPage === "yt-scope-partner" && (
        <div style={{marginTop:16}}>
          <div style={{fontSize:".78rem",fontWeight:700,marginBottom:12,color:"var(--text)",display:"flex",alignItems:"center",gap:6}}><Icon name="layout" size={14} /> Content ID & Parcerias</div>
          <div style={{padding:20,background:"var(--surface)",border:"1px solid var(--border)",borderRadius:20}}>
            <div style={{display:"flex",gap:14,alignItems:"center",marginBottom:14}}>
              <div style={{width:44,height:44,borderRadius:12,background:"#7b2ff715",display:"flex",alignItems:"center",justifyContent:"center"}}>
                <Icon name="shield" size={22} color="#7b2ff7" />
              </div>
              <div>
                <div style={{fontSize:".82rem",fontWeight:700,color:"var(--text)"}}>YouTube Partner Program</div>
                <div style={{fontSize:".72rem",color:"var(--muted)"}}>Proteção de direitos autorais via Content ID</div>
              </div>
            </div>
            {["Reivindicação de direitos autorais","Upload de referência de áudio/vídeo","Políticas de monetização (track/block/monetize)","Dashboard de claims ativos"].map((f,i) => (
              <div key={i} style={{display:"flex",alignItems:"center",gap:8,padding:"8px 12px",background:"var(--bg)",borderRadius:10,marginBottom:6}}>
                <span style={{width:6,height:6,borderRadius:3,background:"#7b2ff7",display:"block"}} />
                <span style={{fontSize:".72rem",color:"var(--text)"}}>{f}</span>
              </div>
            ))}
          </div>
        </div>
        )}

        {subPage === "yt-scope-userinfo" && (
        <div style={{marginTop:16}}>
          <div style={{fontSize:".78rem",fontWeight:700,marginBottom:12,color:"var(--text)",display:"flex",alignItems:"center",gap:6}}><Icon name="layout" size={14} /> Dados do perfil Google</div>
          <div style={{padding:20,background:"var(--surface)",border:"1px solid var(--border)",borderRadius:20}}>
            <div style={{display:"flex",gap:14,alignItems:"center",marginBottom:14}}>
              <div style={{width:48,height:48,borderRadius:14,background:"linear-gradient(135deg,#FF0000,#FF6D00)",display:"flex",alignItems:"center",justifyContent:"center",fontWeight:800,fontSize:"1.2rem",color:"#fff",flexShrink:0,overflow:"hidden"}}>
                {ytConnected?.channelTitle ? ytConnected.channelTitle.charAt(0) : "U"}
              </div>
              <div>
                <div style={{fontSize:".88rem",fontWeight:700,color:"var(--text)"}}>{ytConnected?.channelTitle||appUser?.nome||"Nome"}</div>
                <div style={{fontSize:".72rem",color:"var(--muted)"}}>{appUser?.email||"email@example.com"}</div>
              </div>
            </div>
            <div style={{display:"grid",gap:8}}>
              {[
                {label:"name",value:ytConnected?.channelTitle||appUser?.nome||"—"},
                {label:"email",value:appUser?.email||"—"},
                {label:"picture",value:ytConnected?.thumbnail||"Avatar URL"},
                {label:"locale",value:"pt-BR"},
              ].map((f,i) => (
                <div key={i} style={{display:"flex",alignItems:"center",gap:10,padding:"10px 14px",background:"var(--bg)",borderRadius:12}}>
                  <Icon name="tag" size={14} />
                  <span style={{fontSize:".68rem",fontWeight:700,color:"#00b4d8",minWidth:80}}>{f.label}</span>
                  <span style={{fontSize:".72rem",color:"var(--text)",wordBreak:"break-all"}}>{f.value}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
        )}
      </div>
    );
  }

const aiGetInsight = async (type) => {
setAiInsightLoading({...aiInsightLoading, [type]: true});
const chName = ytConnected?.channelTitle || "canal";
const prompts = {
"Melhores horários para postar": "Qual o melhor horario para postar videos no YouTube considerando audiencia brasileira do canal “"+chName+"”? Responda em 2-3 linhas com horarios especificos.",
"Títulos com maior CTR": "Sugira 3 tipos de títulos de alto CTR para videos do YouTube no nicho de “"+chName+"”. Seja especifico e criativo.",
"Tags e palavras-chave": "Sugira 10 tags/palavras-chave relevantes para videos do canal “"+chName+"” no YouTube. Retorne separadas por vírgula.",
"Descrição otimizada para SEO": "Crie um template de descrição otimizada para SEO de videos do canal “"+chName+"”. Inclua seções, hashtags e CTA."
};
try {
const res = await fetch("/api/ai/generate", { method:"POST", headers:{"Content-Type":"application/json","x-user-email":userEmail}, credentials:"include", body:JSON.stringify({ briefing:prompts[type], tone:"Descontraido", count:1 }) });
const d = await res.json();
setAiInsightResults({...aiInsightResults, [type]:(d.captions&&d.captions[0]&&d.captions[0].text)||d.text||"Sem sugestoes disponiveis"});
} catch(e) { setAiInsightResults({...aiInsightResults, [type]:"Erro. Tente novamente."}); }
setAiInsightLoading({...aiInsightLoading, [type]: false});
};

if (!ytConnected) return (
<div className="page-dash" style={{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",minHeight:"60vh",padding:40}}>
<div style={{textAlign:"center",maxWidth:480}}>
<div style={{width:80,height:80,borderRadius:20,background:"#FF0000",display:"flex",alignItems:"center",justifyContent:"center",margin:"0 auto 24px"}}>
<svg viewBox="0 0 24 24" fill="#fff" style={{width:40,height:40}}><rect x="2" y="4" width="20" height="16" rx="4"/><polygon points="10 8 16 12 10 16"/></svg>
</div>
<h2 style={{fontSize:"1.4rem",fontWeight:600,marginBottom:8}}>{t.youtube} requer conta conectada</h2>
<p style={{opacity:0.5,fontSize:"0.9rem",lineHeight:1.6,marginBottom:28}}>Vincule para ver analytics do canal, vídeos, playlists, moderar comentários e mais.</p>
<button onClick={connectYouTube} style={{...goldBtn, padding:"14px 40px", fontSize:".95rem", boxShadow:"0 4px 20px rgba(217,119,6,.3)"}}>Conectar com Google</button>
</div>
</div>
);

return (
<div className="page-dash">
<div className="page-head" style={{flexDirection:"column",alignItems:"flex-start",marginBottom:24}}>
<h1 className="page-title" style={{fontSize:"2rem"}}>YouTube</h1>
<p className="page-sub">Analytics do canal · vídeos · playlists · moderação</p>
<div style={{display:"flex",gap:32,marginTop:20}}>
{tabs.map((label, i) => (
<div key={label} onClick={() => setYtTab(tabKeys[i])} style={{paddingBottom:8,cursor:"pointer",fontSize:".88rem",color:ytTab===tabKeys[i]?"#d97706":"var(--muted)",borderBottom:ytTab===tabKeys[i]?"2px solid #d97706":"2px solid transparent",fontWeight:500,transition:".15s"}}>{label}</div>
))}
</div>
</div>

{ytTab === "overview" && (
<div style={{display:"grid",gridTemplateColumns:"1fr 1fr 1fr",gap:18}}>
<div style={cardStyle}>
<div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:18}}>
<h3 style={{fontWeight:700,fontSize:"1.1rem",margin:0}}>CANAL</h3>
<button onClick={disconnectYouTube} style={{background:"var(--surface-2)",color:"var(--red)",border:"1px solid rgba(255,61,113,.2)",borderRadius:12,padding:"6px 14px",fontSize:".68rem",fontWeight:600,cursor:"pointer"}}>Desconectar</button>
</div>
<div style={{background:"var(--bg)",border:"1px solid var(--border-strong)",borderRadius:28,padding:18}}>
<div style={{display:"flex",alignItems:"center",gap:12,marginBottom:16}}>
<div style={{width:48,height:48,borderRadius:"50%",background:"#FF0000",display:"flex",alignItems:"center",justifyContent:"center",fontWeight:700,fontSize:"1.1rem",color:"#fff",overflow:"hidden"}}>
{ytConnected.thumbnail ? <img src={ytConnected.thumbnail} style={{width:"100%",height:"100%",objectFit:"cover"}} /> : (ytConnected.channelTitle||"Y").slice(0,2).toUpperCase()}
</div>
<div>
<h4 style={{fontWeight:600,fontSize:".88rem",margin:0}}>{ytConnected.channelTitle || "Canal"}</h4>
<p style={{fontSize:".72rem",color:"var(--muted)",margin:0}}>youtube.com/channel/{(ytConnected.channelId||"").slice(0,20)}...</p>
</div>
</div>
<div style={{position:"relative"}}>
<span style={{position:"absolute",top:12,left:12,zIndex:2,padding:"4px 10px",borderRadius:8,fontSize:".68rem",fontWeight:600,background:"rgba(0,0,0,.6)",color:"#FF0000",backdropFilter:"blur(8px)"}}>YouTube</span>
{ytConnected.thumbnail ? <img src={ytConnected.thumbnail} style={{borderRadius:24,height:200,objectFit:"cover",width:"100%"}} /> :
<div style={{borderRadius:24,height:200,background:"var(--bg-2)",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",color:"var(--muted)"}}>
<svg viewBox="0 0 24 24" fill="var(--muted)" style={{width:48,height:48,marginBottom:12,opacity:.4}}><rect x="2" y="4" width="20" height="16" rx="4"/><polygon points="10 8 16 12 10 16"/></svg>
<span style={{fontSize:".88rem",opacity:.5}}>Canal conectado</span>
</div>}
</div>
{ytChannel?.snippet?.description && (
<div style={{marginTop:14,fontSize:".78rem",color:"var(--text-2)",lineHeight:1.6,display:"-webkit-box",WebkitLineClamp:3,WebkitBoxOrient:"vertical",overflow:"hidden"}}>{ytChannel.snippet.description}</div>
)}
</div>
<a href={"https://youtube.com/channel/" + ytConnected.channelId} target="_blank" style={{display:"block",marginTop:18,padding:"12px 0",background:"var(--surface-2)",border:"1px solid var(--border)",borderRadius:12,textAlign:"center",fontSize:".78rem",fontWeight:600,color:"var(--text)",textDecoration:"none",cursor:"pointer"}}>Abrir no YouTube</a>
</div>

<div style={cardStyle}>
<div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:18}}>
<h3 style={{fontWeight:700,fontSize:"1.1rem",margin:0}}>MÉTRICAS DO CANAL</h3>
<div style={{display:"flex",gap:6}}>
{["30d","90d"].map(m => (<span key={m} style={{padding:"6px 14px",borderRadius:12,fontSize:".72rem",fontWeight:600,background:"var(--surface-2)",color:"var(--muted)"}}>{m}</span>))}
</div>
</div>
<div style={{background:"var(--bg)",border:"1px solid var(--border-strong)",borderRadius:28,padding:18}}>
<div style={{display:"grid",gridTemplateColumns:"1fr 1fr 1fr",gap:10,marginBottom:18}}>
{[["Inscritos",fmtN(subs)],["Vídeos",fmtN(vids)],["Views totais",fmtN(views)],["Views/vídeo",fmtN(ytVideoStats.avgViews || (vids>0?Math.round(views/vids):0))],["Likes/vídeo",fmtN(ytVideoStats.avgLikes || 0)],["Coment./vídeo",fmtN(ytVideoStats.avgComments || 0)]].map(([label,value]) => (
<div key={label} style={{background:"var(--bg)",borderRadius:12,padding:12,textAlign:"center",border:"1px solid var(--border-strong)"}}>
<p style={{fontSize:".68rem",color:"var(--muted)",margin:"0 0 4px"}}>{label}</p>
<h4 style={{fontSize:"1rem",fontWeight:700,margin:0}}>{value}</h4>
</div>
))}
</div>
<div style={{display:"grid",gridTemplateColumns:"1fr 1fr 1fr",gap:10,marginBottom:18}}>
{[["Engajamento",engagementRate+"%"],["Duração média",ytVideoStats.avgDuration],["Playlists",String(ytPlaylists.length)]].map(([label,value]) => (
<div key={label} style={{textAlign:"center"}}>
<p style={{color:"var(--muted)",fontSize:".68rem",margin:0}}>{label}</p>
<h4 style={{fontSize:"1rem",fontWeight:700,margin:"6px 0 0"}}>{value}</h4>
</div>
))}
</div>
<div style={{height:180,background:"var(--bg)",borderRadius:16,padding:14,display:"flex",alignItems:"flex-end",gap:5,border:"1px solid var(--border-strong)"}}>
{(() => {
const vidsWithStats = ytVideos.filter(v => v.statistics && v.statistics.viewCount);
const maxV = vidsWithStats.reduce((mx,v) => Math.max(mx,+(v.statistics.viewCount||0)),1);
if (vidsWithStats.length === 0) return <p style={{color:"var(--muted)",fontSize:".78rem",textAlign:"center",width:"100%"}}>Sem dados de vídeos</p>;
return vidsWithStats.slice(0,12).map((v,i) => {
const pct = Math.max(5, (+(v.statistics.viewCount||0)/maxV)*100);
return (<div key={i} style={{flex:1,height:pct+"%",background:"linear-gradient(to top, #FF0000, #FF4444)",borderRadius:"4px 4px 0 0",opacity:.8,position:"relative",minWidth:0}}
title={v.snippet.title.slice(0,40) + " — " + fmtN(v.statistics.viewCount) + " views"} />);
});
})()}
</div>
</div>
</div>

<div style={{display:"flex",flexDirection:"column",gap:18}}>
<div style={cardStyle}>
<h3 style={{fontWeight:700,fontSize:"1.1rem",margin:"0 0 18px"}}>PLAYLISTS</h3>
<div style={{display:"flex",gap:8,flexWrap:"wrap",marginBottom:14}}>
{ytPlaylists.slice(0,4).map((pl,i) => (<span key={i} onClick={() => window.open("https://youtube.com/playlist?list="+pl.id,"_blank")} style={{padding:"10px 16px",borderRadius:12,fontSize:".78rem",fontWeight:600,cursor:"pointer",border:"none",background:"var(--surface-2)",color:"var(--text)",display:"flex",alignItems:"center",gap:6}}>&#127926; {pl.contentDetails?.itemCount||"?"} vídeos</span>))}
{ytPlaylists.length===0 && <span style={{padding:"10px 16px",borderRadius:12,fontSize:".78rem",fontWeight:600,background:"var(--surface-2)",color:"var(--muted)"}}>Nenhuma playlist</span>}
</div>
{ytPlaylists.slice(0,3).map((pl,i) => (
<div key={i} style={{display:"flex",gap:12,alignItems:"center",marginBottom:i<2?12:0,cursor:"pointer"}} onClick={() => window.open("https://youtube.com/playlist?list="+pl.id,"_blank")}>
{pl.snippet.thumbnails?.default ? <img src={pl.snippet.thumbnails.default.url} alt="" style={{width:48,height:36,borderRadius:8,objectFit:"cover"}} /> : <div style={{width:48,height:36,borderRadius:8,background:"var(--bg)",display:"flex",alignItems:"center",justifyContent:"center"}}><Icon name="film" size={16} style={{color:"var(--muted)"}} /></div>}
<div style={{flex:1,minWidth:0}}>
<div style={{fontSize:".78rem",fontWeight:600,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{pl.snippet.title}</div>
<div style={{fontSize:".68rem",color:"var(--muted)"}}>{pl.contentDetails?.itemCount||"?"} vídeos · {fmtDate(pl.snippet.publishedAt)}</div>
</div>
</div>
))}
</div>
<div style={cardStyle}>
<h3 style={{fontWeight:700,fontSize:"1.1rem",margin:"0 0 18px"}}>AÇÕES RÁPIDAS</h3>
<div style={{display:"flex",flexDirection:"column",gap:10}}>
<div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:10}}>
<div><p style={{color:"var(--muted)",fontSize:".68rem",margin:0}}>Views totais</p><h4 style={{fontSize:"1rem",fontWeight:700,margin:"6px 0 0"}}>{fmtN(+(ytVideoStats.totalViews)||+(views))}</h4></div>
<div><p style={{color:"var(--muted)",fontSize:".68rem",margin:0}}>Likes totais</p><h4 style={{fontSize:"1rem",fontWeight:700,margin:"6px 0 0"}}>{fmtN(ytVideoStats.totalLikes)}</h4></div>
<div><p style={{color:"var(--muted)",fontSize:".68rem",margin:0}}>Comentários</p><h4 style={{fontSize:"1rem",fontWeight:700,margin:"6px 0 0"}}>{fmtN(ytVideoStats.totalComments)}</h4></div>
<div><p style={{color:"var(--muted)",fontSize:".68rem",margin:0}}>Engajamento</p><h4 style={{fontSize:"1rem",fontWeight:700,margin:"6px 0 0",color:parseFloat(engagementRate)>=3?"var(--pos)":"var(--text)"}}>{engagementRate}%</h4></div>
</div>
<div style={{borderTop:"1px solid var(--border)",paddingTop:12,display:"flex",flexDirection:"column",gap:8}}>
<button onClick={() => setYtTab("search")} style={{background:"var(--bg)",border:"1px solid var(--border-strong)",borderRadius:12,padding:"12px 16px",cursor:"pointer",textAlign:"left",color:"var(--text)",fontSize:".82rem",fontWeight:600}}>&#128269; Buscar vídeos</button>
<button onClick={() => setYtTab("videos")} style={{background:"var(--bg)",border:"1px solid var(--border-strong)",borderRadius:12,padding:"12px 16px",cursor:"pointer",textAlign:"left",color:"var(--text)",fontSize:".82rem",fontWeight:600}}>&#127916; Vídeos do canal</button>
<button onClick={() => setYtTab("playlists")} style={{background:"var(--bg)",border:"1px solid var(--border-strong)",borderRadius:12,padding:"12px 16px",cursor:"pointer",textAlign:"left",color:"var(--text)",fontSize:".82rem",fontWeight:600}}>&#127926; Todas as playlists</button>
</div>
</div>
</div>
</div>
</div>
)}

{ytTab === "videos" && (
<div style={{padding:20}}>
<div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:20}}>
<h3 style={{fontWeight:700,fontSize:"1.1rem"}}>Vídeos do Canal</h3>
<span style={{color:"var(--muted)",fontSize:".78rem"}}>{ytVideos.length} vídeos · {fmtN(ytVideoStats.totalViews)} views · {fmtN(ytVideoStats.totalLikes)} likes</span>
</div>
<div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(300px,1fr))",gap:16}}>
{ytVideos.map((v,i) => {
const vid = v.id.videoId || v.id;
return (<div key={vid||i} style={{background:"var(--surface)",borderRadius:16,border:"1px solid var(--border)",overflow:"hidden",cursor:"pointer"}}
onClick={() => window.open("https://youtube.com/watch?v="+vid,"_blank")}
onMouseEnter={e => { e.currentTarget.style.borderColor="rgba(255,0,0,.3)"; }} onMouseLeave={e => { e.currentTarget.style.borderColor="var(--border)"; }}>
<div style={{position:"relative"}}>
{v.snippet.thumbnails?.medium && <img src={v.snippet.thumbnails.medium.url} alt="" style={{width:"100%",height:170,objectFit:"cover"}} />}
{v.contentDetails?.duration && <span style={{position:"absolute",bottom:8,right:8,padding:"3px 8px",borderRadius:6,fontSize:".68rem",fontWeight:600,background:"rgba(0,0,0,.8)",color:"#fff"}}>{fmtDuration(v.contentDetails.duration)}</span>}
<span style={{position:"absolute",top:8,left:8,padding:"3px 8px",borderRadius:6,fontSize:".65rem",fontWeight:600,background:"rgba(255,0,0,.9)",color:"#fff"}}>YouTube</span>
</div>
<div style={{padding:14}}>
<div style={{display:"flex",justifyContent:"space-between",marginBottom:8}}>
<span style={{padding:"3px 8px",borderRadius:6,fontSize:".65rem",fontWeight:600,background:"rgba(255,0,0,.1)",color:"#FF4444"}}>{v.contentDetails?.definition==="hd"?"HD":"SD"}</span>
<span style={{fontSize:".7rem",color:"var(--muted)"}}>{fmtDate(v.snippet.publishedAt)}</span>
</div>
<div style={{fontSize:".85rem",fontWeight:600,marginBottom:6,lineHeight:1.3,display:"-webkit-box",WebkitLineClamp:2,WebkitBoxOrient:"vertical",overflow:"hidden"}}>{v.snippet.title}</div>
{v.statistics && (<div style={{display:"flex",gap:12,marginBottom:10}}>
<span style={{display:"flex",alignItems:"center",gap:4,fontSize:".8rem",color:"var(--muted)"}}>&#128065; {fmtN(v.statistics.viewCount)}</span>
<span style={{display:"flex",alignItems:"center",gap:4,fontSize:".8rem",color:"var(--muted)"}}>&#128077; {fmtN(v.statistics.likeCount)}</span>
<span style={{display:"flex",alignItems:"center",gap:4,fontSize:".8rem",color:"var(--muted)"}}>&#128172; {fmtN(v.statistics.commentCount)}</span>
</div>)}
<div style={{display:"flex",gap:8}}>
<a href={"https://youtube.com/watch?v="+vid} target="_blank" style={{flex:1,textAlign:"center",padding:"8px 0",borderRadius:8,background:"rgba(255,0,0,.08)",border:"1px solid rgba(255,0,0,.2)",color:"#FF4444",fontSize:".72rem",fontWeight:600,textDecoration:"none"}}>Ver no YT</a>
</div>
</div>
</div>);})}
</div>
{ytVideos.length===0 && !ytLoading && <div style={{textAlign:"center",padding:60,opacity:.4}}><p style={{fontSize:".88rem"}}>Nenhum vídeo encontrado</p></div>}
</div>
)}

{ytTab === "playlists" && (
<div style={{padding:20}}>
<div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:20}}>
<h3 style={{fontWeight:700,fontSize:"1.1rem"}}>Playlists do Canal</h3>
<span style={{color:"var(--muted)",fontSize:".78rem"}}>{ytPlaylists.length} playlists</span>
</div>
<div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(300px,1fr))",gap:16}}>
{ytPlaylists.map((pl,i) => (
<div key={i} style={{background:"var(--surface)",borderRadius:16,border:"1px solid var(--border)",overflow:"hidden"}}
onClick={() => window.open("https://youtube.com/playlist?list="+pl.id,"_blank")}
onMouseEnter={e => { e.currentTarget.style.borderColor="rgba(255,0,0,.3)"; }} onMouseLeave={e => { e.currentTarget.style.borderColor="var(--border)"; }}>
<div style={{position:"relative"}}>
{pl.snippet.thumbnails?.medium && <img src={pl.snippet.thumbnails.medium.url} alt="" style={{width:"100%",height:170,objectFit:"cover"}} />}
<span style={{position:"absolute",bottom:8,right:8,padding:"3px 8px",borderRadius:6,fontSize:".68rem",fontWeight:600,background:"rgba(0,0,0,.8)",color:"#fff"}}>{pl.contentDetails?.itemCount||"?"} vídeos</span>
<span style={{position:"absolute",top:8,left:8,padding:"3px 8px",borderRadius:6,fontSize:".65rem",fontWeight:600,background:"rgba(255,0,0,.9)",color:"#fff"}}>Playlist</span>
</div>
<div style={{padding:14}}>
<div style={{fontSize:".85rem",fontWeight:600,marginBottom:6,lineHeight:1.3}}>{pl.snippet.title}</div>
<div style={{fontSize:".72rem",color:"var(--muted)"}}>{pl.snippet.channelTitle} · {fmtDate(pl.snippet.publishedAt)}</div>
</div>
</div>
))}
</div>
{ytPlaylists.length===0 && !ytLoading && <div style={{textAlign:"center",padding:60,opacity:.4}}><p style={{fontSize:".88rem"}}>Nenhuma playlist encontrada</p></div>}
</div>
)}

{ytTab === "search" && (
<div style={{padding:20}}>
<div style={{display:"flex",gap:10,marginBottom:20}}>
<div style={{flex:1,position:"relative"}}>
<input value={ytSearch} onChange={e => setYtSearch(e.target.value)} onKeyDown={e => e.key==="Enter"&&doSearch()} placeholder="Buscar vídeos, canais, playlists..." style={inputBox} />
</div>
<button onClick={doSearch} disabled={ytLoading} style={{...goldBtn, padding:"14px 28px",fontSize:".88rem",background:ytLoading?"var(--surface-2)":"linear-gradient(135deg,#d97706,#f59e0b)",color:ytLoading?"var(--muted)":"#000",cursor:ytLoading?"not-allowed":"pointer",boxShadow:ytLoading?"none":"0 4px 20px rgba(217,119,6,.3)"}}>
{ytLoading ? "Buscando..." : "Buscar"}
</button>
</div>
{ytError && <div style={{color:"var(--red)",marginBottom:12,padding:"10px 14px",background:"rgba(255,61,113,.08)",borderRadius:10,fontSize:".78rem"}}>{ytError}</div>}
{ytResults && ytResults.items && (
<div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(300px,1fr))",gap:16}}>
{ytResults.items.filter(item => item.id.videoId).map((item,i) => (
<div key={i} style={{background:"var(--surface)",borderRadius:16,border:"1px solid var(--border)",overflow:"hidden",cursor:"pointer"}}
onClick={() => window.open("https://youtube.com/watch?v="+item.id.videoId,"_blank")}
onMouseEnter={e => { e.currentTarget.style.borderColor="rgba(255,0,0,.3)"; }} onMouseLeave={e => { e.currentTarget.style.borderColor="var(--border)"; }}>
{item.snippet.thumbnails?.medium && <img src={item.snippet.thumbnails.medium.url} alt="" style={{width:"100%",height:170,objectFit:"cover"}} />}
<div style={{padding:14}}>
<div style={{fontSize:".85rem",fontWeight:600,marginBottom:6,lineHeight:1.3,display:"-webkit-box",WebkitLineClamp:2,WebkitBoxOrient:"vertical",overflow:"hidden"}}>{item.snippet.title}</div>
<div style={{fontSize:".72rem",color:"var(--muted)"}}>{item.snippet.channelTitle} · {fmtDate(item.snippet.publishedAt)}</div>
</div>
</div>
))}
</div>
)}
{ytResults && ytResults.nextPageToken && (<button onClick={() => { fetch("/api/yt/search?q="+encodeURIComponent(ytSearch)+"&maxResults=12&pageToken="+ytResults.nextPageToken+"&type=video").then(r=>r.json()).then(d => { if(d.items) setYtResults(prev => ({...d, items:[...prev.items,...d.items]})); }); }} style={{...goldBtn, marginTop:20,padding:"12px 28px",fontSize:".82rem",width:"100%"}}>Carregar mais</button>)}
{(!ytResults||!ytResults.items) && !ytLoading && <div style={{textAlign:"center",padding:60,opacity:.4}}><p style={{fontSize:".88rem"}}>Busque vídeos, canais ou playlists</p></div>}
</div>
)}

<div style={{gridColumn:"1 / -1",display:"grid",gridTemplateColumns:"repeat(5,1fr)",gap:14}}>
<div style={{...cardStyle,gridColumn:"1 / -1",marginBottom:4}}>
<div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:12}}>
<div style={{display:"flex",alignItems:"center",gap:8}}>
<span style={{fontSize:"1.2rem"}}>&#128278;</span>
<div>
<h3 style={{fontSize:".88rem",fontWeight:600,margin:0}}>Insights YouTube com IA</h3>
<p style={{color:"var(--muted)",fontSize:".72rem",margin:"4px 0 0"}}>Gerado por IA — baseado no seu canal</p>
</div>
</div>
</div>
</div>
{["Melhores horários para postar","Títulos com maior CTR","Tags e palavras-chave","Descrição otimizada para SEO","Pontuação geral"].map((item,i) => (
<div key={item} style={cardStyle}>
<h3 style={{fontSize:".88rem",fontWeight:600,margin:0}}>{item}</h3>
<p style={{color:"var(--muted)",fontSize:".72rem",margin:"8px 0 0"}}>Insights inteligentes para crescer no YouTube.</p>
{i === 4 ? (
<div style={{marginTop:16,display:"flex",alignItems:"center",justifyContent:"center"}}>
<div style={{width:96,height:96,borderRadius:"50%",border:"8px solid var(--pos)",display:"flex",alignItems:"center",justifyContent:"center",fontSize:"1.8rem",fontWeight:700}}>{Math.min(99, Math.round((subs>0?(ytVideoStats.avgLikes+ytVideoStats.avgComments)/subs*100:0)*10+42))}</div>
</div>
) : aiInsightResults[item] ? (
<div style={{marginTop:12,padding:10,background:"var(--bg)",borderRadius:10,fontSize:".72rem",lineHeight:1.5,color:"var(--text-2)",whiteSpace:"pre-wrap",maxHeight:120,overflow:"auto"}}>{aiInsightResults[item]}</div>
) : (
<button onClick={() => aiGetInsight(item)} disabled={aiInsightLoading[item]}
style={{marginTop:16,background:aiInsightLoading[item]?"var(--border)":"var(--surface-2)",border:"1px solid rgba(255,0,0,.3)",color:"#FF4444",padding:"8px 14px",borderRadius:12,fontSize:".72rem",fontWeight:600,cursor:aiInsightLoading[item]?"not-allowed":"pointer"}}>
{aiInsightLoading[item] ? "Carregando..." : "VER SUGESTÕES"}
</button>
)}
</div>
))}
</div>
</div>
);
};

// ===== TIKTOK PAGE =====
const PageTikTok = ({ t, igData, appUser, subPage }) => {
const [ttConnected, setTtConnected] = React.useState(null);
const [ttLoading, setTtLoading] = React.useState(false);
const [ttTab, setTtTab] = React.useState("overview");
const [aiInsightResults, setAiInsightResults] = React.useState({});
const [aiInsightLoading, setAiInsightLoading] = React.useState({});
const userEmail = (appUser && appUser.email) || "";

const loadTtStatus = async () => {
try {
const r = await fetch("/api/tt/status", { credentials: "include", headers: { "x-user-email": userEmail } });
const d = await r.json();
setTtConnected(d.connected ? d : null);
} catch (e) {}
};
React.useEffect(() => { loadTtStatus(); }, [userEmail]);

const connectTikTok = () => { window.location.href = "/api/auth/tiktok?email=" + encodeURIComponent(userEmail); };
const disconnectTikTok = async () => {
if (!confirm("Desconectar conta TikTok?")) return;
await fetch("/api/tt/disconnect", { method: "POST", headers: { "Content-Type": "application/json", "x-user-email": userEmail }, credentials: "include" });
setTtConnected(null);
};

React.useEffect(() => {
const params = new URLSearchParams(window.location.search);
if (params.get("tt_success")) { try { const d = JSON.parse(atob(params.get("tt_success"))); setTtConnected(d); } catch(e) {} window.history.replaceState({}, "", window.location.pathname); }
}, []);

const fmtN = v => v >= 1e6 ? (v/1e6).toFixed(1)+"M" : v >= 1e3 ? (v/1e3).toFixed(1)+"K" : String(v||0);
const cardStyle = { background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 24, padding: 24 };
const goldBtn = { background: "linear-gradient(135deg, #25F4EE, #FE2C55)", color: "#fff", fontWeight: 700, border: "none", borderRadius: 16, cursor: "pointer" };
const ttHandle = (appUser && appUser.tiktok) || "";

  const scopeInfo = {
    "tt-login-kit": { title: "Login Kit", color: "#25F4EE", desc: "Autenticação OAuth 2.0 do TikTok. Permite que usuários façam login no HUBstudio usando sua conta TikTok, obtenham access token e refresh token para chamadas subsequentes à API.", details: [
      { label: "Fluxo", value: "OAuth 2.0 Authorization Code Grant" },
      { label: "Endpoint Auth", value: "https://www.tiktok.com/v2/auth/authorize/" },
      { label: "Token Exchange", value: "https://open.tiktokapis.com/v2/oauth/token/" },
      { label: "Retorna", value: "access_token, refresh_token, expires_in, open_id, scope" },
      { label: "Segurança", value: "State parameter com HMAC-SHA256 para proteção CSRF" },
    ]},
    "tt-share-kit": { title: "Share Kit", color: "#25F4EE", desc: "Permite compartilhar vídeos do HUBstudio diretamente no TikTok do usuário. O usuário pode editar e postar conteúdo gerado pelo app sem sair da experiência.", details: [
      { label: "Função", value: "Compartilhar vídeos gerados pelo app direto no TikTok" },
      { label: "Experiência", value: "O usuário edita legenda/hastags antes de postar" },
      { label: "Redirect", value: "Após compartilhamento, retorna ao app automaticamente" },
      { label: "Casos de uso", value: "Templates de vídeo, montagens, edits colaborativos" },
    ]},
    "tt-display-api": { title: "Display API", color: "#25F4EE", desc: "Exibição pública de perfis e vídeos TikTok em sites e apps de terceiros. Permite embedar conteúdo TikTok sem necessidade de login do espectador.", details: [
      { label: "Função", value: "Exibir perfis e vídeos TikTok publicamente" },
      { label: "Sem login", value: "O espectador não precisa autenticar no TikTok" },
      { label: "Conteúdo", value: "Vídeos públicos, thumbnails, estatísticas de vídeo" },
      { label: "Rate limit", value: "Sujeito a limites de requisição da API" },
      { label: "Casos de uso", value: "Media kits, portfólios, mostruário de influenciadores" },
    ]},
    "tt-content-posting": { title: "Content Posting API", color: "#FE2C55", desc: "Upload e publicação direta de vídeos no TikTok via API. Suporta upload como rascunho (video.upload) e publicação direta (video.publish). Requer aprovação do app TikTok.", details: [
      { label: "Upload (draft)", value: "scope: video.upload — Vídeo salvo como rascunho" },
      { label: "Publicação direta", value: "scope: video.publish — Vídeo publicado imediatamente" },
      { label: "Status check", value: "Poll de status para saber se publish concluiu" },
      { label: "Requisito", value: "App review e aprovação do TikTok necessários" },
      { label: "Formatos", value: "MP4, MOV até 287MB, até 10 minutos" },
      { label: "Headers", value: "Authorization: Bearer + Content-Type: application/json" },
    ]},
    "tt-scope-profile": { title: "user.info.profile", color: "#25F4EE", desc: "Read access to profile_web_link, profile_deep_link, bio_description, is_verified. Permite ler informações públicas e semi-públicas do perfil TikTok do usuário.", details: [
      { label: "Scope", value: "user.info.profile" },
      { label: "profile_web_link", value: "URL pública do perfil no site TikTok" },
      { label: "profile_deep_link", value: "Deep link para abrir o perfil no app TikTok" },
      { label: "bio_description", value: "Texto da biografia do perfil" },
      { label: "is_verified", value: "Indica se o perfil é verificado (badge azul)" },
      { label: "Endpoint", value: "GET https://open.tiktokapis.com/v2/user/info/" },
    ]},
    "tt-scope-stats": { title: "user.info.stats", color: "#25F4EE", desc: "Read access to a user's statistical data, such as likes count, follower count, following count, and video count. Dados essenciais para analytics e media kits.", details: [
      { label: "Scope", value: "user.info.stats" },
      { label: "follower_count", value: "Número de seguidores do perfil" },
      { label: "following_count", value: "Número de contas que o usuário segue" },
      { label: "likes_count", value: "Total de curtidas recebidas em todos os vídeos" },
      { label: "video_count", value: "Total de vídeos públicos do perfil" },
      { label: "Endpoint", value: "GET https://open.tiktokapis.com/v2/user/info/" },
    ]},
    "tt-scope-video-list": { title: "video.list", color: "#FE2C55", desc: "Read a user's public videos on TikTok. Permite listar e ler metadados dos vídeos públicos do usuário — essencial para feed de conteúdo e analytics.", details: [
      { label: "Scope", value: "video.list" },
      { label: "Retorna", value: "Lista de vídeos públicos com metadados" },
      { label: "Campos", value: "id, title, video_url, cover_image_url, duration, create_time" },
      { label: "Stats por vídeo", value: "view_count, like_count, comment_count, share_count" },
      { label: "Paginação", value: "cursor-based pagination com max=20 por request" },
      { label: "Endpoint", value: "GET https://open.tiktokapis.com/v2/video/list/" },
    ]},
  };

  if (subPage && scopeInfo[subPage]) {
    const si = scopeInfo[subPage];
    const icons = {
      "tt-login-kit": "key",
      "tt-share-kit": "share-2",
      "tt-display-api": "eye",
      "tt-content-posting": "upload-cloud",
      "tt-scope-profile": "user",
      "tt-scope-stats": "bar-chart-2",
      "tt-scope-video-list": "play-circle",
    };
    const headerGradients = {
      "tt-login-kit": "linear-gradient(135deg,#25F4EE,#00b4d8)",
      "tt-share-kit": "linear-gradient(135deg,#FE2C55,#ff6b6b)",
      "tt-display-api": "linear-gradient(135deg,#25F4EE,#7b2ff7)",
      "tt-content-posting": "linear-gradient(135deg,#FE2C55,#25F4EE)",
      "tt-scope-profile": "linear-gradient(135deg,#7b2ff7,#25F4EE)",
      "tt-scope-stats": "linear-gradient(135deg,#00b4d8,#25F4EE)",
      "tt-scope-video-list": "linear-gradient(135deg,#FE2C55,#ff9a3c)",
    };
    const statusColors = {
      "tt-login-kit": "#25F4EE",
      "tt-share-kit": "#FE2C55",
      "tt-display-api": "#7b2ff7",
      "tt-content-posting": "#FE2C55",
      "tt-scope-profile": "#25F4EE",
      "tt-scope-stats": "#00b4d8",
      "tt-scope-video-list": "#ff9a3c",
    };
    const grad = headerGradients[subPage] || "linear-gradient(135deg,#25F4EE,#FE2C55)";
    const sc = statusColors[subPage] || "#25F4EE";
    return (
      <div className="page-dash">
        {/* Hero header com gradiente */}
        <div style={{position:"relative",borderRadius:24,overflow:"hidden",marginBottom:24,background:grad,padding:32,color:"#fff"}}>
          <div style={{position:"absolute",top:0,right:0,width:200,height:200,background:"radial-gradient(circle,rgba(255,255,255,.12) 0%,transparent 70%)",borderRadius:"50%",transform:"translate(30%,-30%)"}} />
          <div style={{position:"relative",zIndex:1,display:"flex",gap:20,alignItems:"center"}}>
            <div style={{width:56,height:56,borderRadius:16,background:"rgba(0,0,0,.25)",backdropFilter:"blur(8px)",display:"flex",alignItems:"center",justifyContent:"center",border:"1px solid rgba(255,255,255,.15)"}}>
              <Icon name={icons[subPage]||"info"} size={24} />
            </div>
            <div>
              <h1 style={{fontSize:"1.5rem",fontWeight:700,margin:0}}>{si.title}</h1>
              <p style={{fontSize:".82rem",opacity:.85,margin:"4px 0 0",fontWeight:500}}>TikTok Developer Platform</p>
            </div>
            <div style={{marginLeft:"auto",padding:"6px 14px",borderRadius:10,background:"rgba(0,0,0,.2)",backdropFilter:"blur(8px)",fontSize:".68rem",fontWeight:700,border:"1px solid rgba(255,255,255,.15)",display:"flex",alignItems:"center",gap:6}}>
              <span style={{width:8,height:8,borderRadius:"50%",background:"#4ade80",display:"inline-block"}} />
              Ativo
            </div>
          </div>
        </div>

        {/* Descrição */}
        <div style={{background:"var(--surface)",border:"1px solid var(--border)",borderRadius:20,padding:24,marginBottom:16}}>
          <div style={{display:"flex",alignItems:"center",gap:8,marginBottom:12}}>
            <Icon name="info" size={14} />
            <span style={{fontSize:".78rem",fontWeight:700,color:"var(--text)"}}>Sobre</span>
          </div>
          <p style={{fontSize:".82rem",lineHeight:1.7,color:"var(--text)",margin:0}}>{si.desc}</p>
        </div>

        {/* Cards de detalhes — grid tipo conteúdo */}
        <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fit,minmax(260px,1fr))",gap:12,marginBottom:16}}>
          {si.details.map((d,i) => (
            <div key={i} style={{background:"var(--surface)",border:"1px solid var(--border)",borderRadius:20,padding:20,display:"flex",flexDirection:"column",gap:8}}>
              <div style={{display:"flex",alignItems:"center",gap:8}}>
                <div style={{width:32,height:32,borderRadius:10,background:`${sc}11`,display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0}}>
                  <span style={{width:8,height:8,borderRadius:3,background:sc,display:"block"}} />
                </div>
                <span style={{fontSize:".72rem",fontWeight:700,color:sc,textTransform:"uppercase",letterSpacing:".5px"}}>{d.label}</span>
              </div>
              <code style={{fontSize:".82rem",color:"var(--text)",wordBreak:"break-all",lineHeight:1.5,background:"var(--bg)",padding:"8px 12px",borderRadius:10,margin:0}}>{d.value}</code>
            </div>
          ))}
        </div>

        {/* Status de conexão */}
        <div style={{background:"var(--surface)",border:"1px solid var(--border)",borderRadius:20,padding:20,display:"flex",alignItems:"center",gap:16}}>
          <div style={{width:40,height:40,borderRadius:12,background:"linear-gradient(135deg,#25F4EE,#FE2C55)",display:"flex",alignItems:"center",justifyContent:"center"}}>
            <svg viewBox="0 0 24 24" fill="none" style={{width:20,height:20}}><path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.88-2.88A2.89 2.89 0 019.49 12.4c.28 0 .54.04.79.1V9.01a6.27 6.27 0 00-.79-.05 6.34 6.34 0 00-6.34 6.34 6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.34-6.34V9.39a8.16 8.16 0 004.77 1.52V7.46a4.83 4.83 0 01-1.01-.77z" fill="#fff"/></svg>
          </div>
          <div style={{flex:1}}>
            <div style={{fontSize:".82rem",fontWeight:600}}>Conectado ao TikTok</div>
            <div style={{fontSize:".72rem",color:"var(--muted)"}}>{ttHandle ? "@"+ttHandle : "Conta conectada"}</div>
          </div>
          <div style={{padding:"6px 12px",borderRadius:8,background:"#4ade8022",color:"#4ade80",fontSize:".68rem",fontWeight:700,border:"1px solid #4ade8033"}}>Online</div>
        </div>

        {/* Layout funcional — preview de como each API/scope funciona */}
        {subPage === "tt-login-kit" && (
        <div style={{marginTop:16}}>
          <div style={{fontSize:".78rem",fontWeight:700,marginBottom:12,color:"var(--text)",display:"flex",alignItems:"center",gap:6}}><Icon name="layout" size={14} /> Fluxo OAuth 2.0</div>
          <div style={{display:"flex",flexDirection:"column",gap:8}}>
            {[
              {step:1,icon:"user",label:"Usuário clica",desc:"\"Conectar com TikTok\" no HUBstudio"},
              {step:2,icon:"external-link",label:"Redirect",desc:"→ tiktok.com/v2/auth/authorize/ com client_key + scope"},
              {step:3,icon:"check-circle",label:"Autorização",desc:"Usuário aprova scopes no TikTok"},
              {step:4,icon:"key",label:"Callback",desc:"TikTok redirecta com code → HUBstudio troca por access_token"},
              {step:5,icon:"database",label:"Armazena",desc:"access_token, refresh_token, open_id salvos no banco"},
            ].map(s => (
              <div key={s.step} style={{display:"flex",alignItems:"flex-start",gap:12,padding:"14px 16px",background:"var(--surface)",border:"1px solid var(--border)",borderRadius:14}}>
                <div style={{width:28,height:28,borderRadius:8,background:"linear-gradient(135deg,#25F4EE,#00b4d8)",display:"flex",alignItems:"center",justifyContent:"center",fontSize:12,fontWeight:800,color:"#fff",flexShrink:0}}>{s.step}</div>
                <div>
                  <div style={{fontSize:".78rem",fontWeight:700,color:"var(--text)"}}>{s.label}</div>
                  <div style={{fontSize:".72rem",color:"var(--muted)",marginTop:2}}>{s.desc}</div>
                </div>
              </div>
            ))}
          </div>
          {ttConnected && (
          <div style={{marginTop:12,padding:16,background:"var(--surface)",border:"1px solid var(--border)",borderRadius:14}}>
            <div style={{fontSize:".72rem",fontWeight:700,marginBottom:8,color:"#25F4EE"}}>Sua sessão Login Kit</div>
            <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:6}}>
              <div style={{fontSize:".68rem",color:"var(--muted)"}}>Username</div><div style={{fontSize:".68rem",color:"var(--text)",fontWeight:600}}>@{ttConnected.username||"—"}</div>
              <div style={{fontSize:".68rem",color:"var(--muted)"}}>Open ID</div><div style={{fontSize:".68rem",color:"var(--text)",fontWeight:600,fontFamily:"monospace"}}>{(ttConnected.open_id||(appUser&&appUser.email)||"").substring(0,16)}…</div>
              <div style={{fontSize:".68rem",color:"var(--muted)"}}>Scopes</div><div style={{fontSize:".68rem",color:"var(--text)",fontWeight:600}}>6 ativos</div>
              <div style={{fontSize:".68rem",color:"var(--muted)"}}>Token</div><div style={{fontSize:".68rem",color:"#4ade80",fontWeight:600}}>Válido</div>
            </div>
          </div>
          )}
        </div>
        )}

        {subPage === "tt-share-kit" && (
        <div style={{marginTop:16}}>
          <div style={{fontSize:".78rem",fontWeight:700,marginBottom:12,color:"var(--text)",display:"flex",alignItems:"center",gap:6}}><Icon name="layout" size={14} /> Preview de compartilhamento</div>
          <div style={{padding:20,background:"var(--surface)",border:"1px solid var(--border)",borderRadius:20}}>
            <div style={{display:"flex",gap:14,alignItems:"flex-start"}}>
              <div style={{width:60,height:80,borderRadius:8,background:"linear-gradient(135deg,#25F4EE33,#FE2C5533)",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0}}>
                <Icon name="video" size={20} />
              </div>
              <div style={{flex:1}}>
                <div style={{fontSize:".78rem",fontWeight:700,color:"var(--text)",marginBottom:4}}>Seu vídeo no TikTok</div>
                <div style={{fontSize:".72rem",color:"var(--muted)",marginBottom:10}}>Legenda e hashtags editáveis antes de postar</div>
                <div style={{background:"var(--bg)",borderRadius:10,padding:10,marginBottom:8}}>
                  <div style={{fontSize:".68rem",color:"var(--muted)",marginBottom:4}}>Legenda</div>
                  <div style={{fontSize:".76rem",color:"var(--text)"}}>✨ Conteúdo incrível gerado pelo HUBstudio #viral #trending</div>
                </div>
                <div style={{display:"flex",gap:6}}>
                  <span style={{padding:"4px 10px",borderRadius:8,background:"#FE2C5522",color:"#FE2C55",fontSize:".68rem",fontWeight:600}}>Editar</span>
                  <span style={{padding:"4px 10px",borderRadius:8,background:"#25F4EE22",color:"#25F4EE",fontSize:".68rem",fontWeight:600}}>Postar</span>
                </div>
              </div>
            </div>
          </div>
          <div style={{marginTop:12,padding:14,background:"var(--surface)",border:"1px solid var(--border)",borderRadius:14}}>
            <div style={{fontSize:".72rem",fontWeight:700,marginBottom:6,color:"#FE2C55"}}>Fluxo Share Kit</div>
            {["App gera vídeo → Share Kit abre editor TikTok → Usuário personaliza → Post publicado"].map((t,i) => (
              <div key={i} style={{fontSize:".72rem",color:"var(--muted)",lineHeight:1.6}}>{t}</div>
            ))}
          </div>
        </div>
        )}

        {subPage === "tt-display-api" && (
        <div style={{marginTop:16}}>
          <div style={{fontSize:".78rem",fontWeight:700,marginBottom:12,color:"var(--text)",display:"flex",alignItems:"center",gap:6}}><Icon name="layout" size={14} /> Exibição pública</div>
          <div style={{padding:20,background:"linear-gradient(135deg,#01010188,#1a1a2e88)",border:"1px solid var(--border)",borderRadius:20}}>
            <div style={{display:"flex",gap:14,alignItems:"center",marginBottom:16}}>
              <div style={{width:48,height:48,borderRadius:14,background:"linear-gradient(135deg,#25F4EE,#FE2C55)",display:"flex",alignItems:"center",justifyContent:"center",fontWeight:800,fontSize:"1.1rem",color:"#fff",flexShrink:0,overflow:"hidden"}}>
                {ttConnected?.avatar_url ? <img src={ttConnected.avatar_url} style={{width:"100%",height:"100%",objectFit:"cover"}} /> : (ttConnected?.display_name||"T").charAt(0)}
              </div>
              <div>
                <div style={{fontSize:".88rem",fontWeight:700,color:"#fff"}}>{ttConnected?.display_name || ttHandle || "username"}</div>
                <div style={{fontSize:".72rem",color:"rgba(255,255,255,.5)"}}>@{ttConnected?.username||ttHandle||"handle"} · {fmtN(ttConnected?.followers_count||0)} seguidores</div>
              </div>
              <div style={{marginLeft:"auto",padding:"4px 10px",borderRadius:8,background:"rgba(37,244,238,.15)",color:"#25F4EE",fontSize:".68rem",fontWeight:700}}>Verificado</div>
            </div>
            <div style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:8}}>
              {["Video 1","Video 2","Video 3"].map((v,i) => (
                <div key={i} style={{aspectRatio:"9/12",borderRadius:10,background:"linear-gradient(180deg,rgba(37,244,238,.08),rgba(254,44,85,.08))",display:"flex",alignItems:"center",justifyContent:"center",border:"1px solid rgba(255,255,255,.06)"}}>
                  <Icon name="play" size={18} />
                </div>
              ))}
            </div>
          </div>
          <div style={{marginTop:12,padding:14,background:"var(--surface)",border:"1px solid var(--border)",borderRadius:14}}>
            <div style={{fontSize:".72rem",fontWeight:700,marginBottom:6,color:"#7b2ff7"}}>Embed Display API</div>
            <div style={{fontSize:".72rem",color:"var(--muted)",lineHeight:1.6}}>Qualquer site pode exibir este perfil e vídeos sem login — ideal para media kits e portfólios.</div>
          </div>
        </div>
        )}

        {subPage === "tt-content-posting" && (
        <div style={{marginTop:16}}>
          <div style={{fontSize:".78rem",fontWeight:700,marginBottom:12,color:"var(--text)",display:"flex",alignItems:"center",gap:6}}><Icon name="layout" size={14} /> Publicação via API</div>
          <div style={{padding:20,background:"var(--surface)",border:"1px solid var(--border)",borderRadius:20,marginBottom:12}}>
            <div style={{fontSize:".76rem",fontWeight:600,marginBottom:12}}>Upload de vídeo</div>
            <div style={{border:"2px dashed var(--border)",borderRadius:14,padding:24,textAlign:"center",marginBottom:12}}>
              <Icon name="upload-cloud" size={28} />
              <div style={{fontSize:".72rem",color:"var(--muted)",marginTop:8}}>Arraste vídeo MP4/MOV (até 287MB)</div>
            </div>
            <div style={{display:"flex",gap:8}}>
              <button style={{flex:1,padding:"10px 0",borderRadius:10,background:"rgba(37,244,238,.1)",border:"1px solid rgba(37,244,238,.25)",color:"#25F4EE",fontSize:".74rem",fontWeight:600,cursor:"pointer"}}>Salvar como rascunho</button>
              <button style={{flex:1,padding:"10px 0",borderRadius:10,background:"rgba(254,44,85,.1)",border:"1px solid rgba(254,44,85,.25)",color:"#FE2C55",fontSize:".74rem",fontWeight:600,cursor:"pointer"}}>Publicar direto</button>
            </div>
          </div>
          <div style={{padding:14,background:"var(--surface)",border:"1px solid var(--border)",borderRadius:14}}>
            <div style={{fontSize:".72rem",fontWeight:700,marginBottom:8,color:"#FE2C55"}}>Status de publicação</div>
            {[
              {step:"chunked upload",status:"Concluído",color:"#4ade80"},
              {step:"processamento TikTok",status:"Aguardando",color:"var(--muted)"},
              {step:"publish callback",status:"Pendente",color:"var(--muted)"},
            ].map((s,i) => (
              <div key={i} style={{display:"flex",justifyContent:"space-between",padding:"6px 0",borderBottom:i<2?"1px solid var(--border)":"none"}}>
                <span style={{fontSize:".72rem",color:"var(--text)"}}>{s.step}</span>
                <span style={{fontSize:".68rem",color:s.color,fontWeight:600}}>{s.status}</span>
              </div>
            ))}
          </div>
        </div>
        )}

        {subPage === "tt-scope-profile" && (
        <div style={{marginTop:16}}>
          <div style={{fontSize:".78rem",fontWeight:700,marginBottom:12,color:"var(--text)",display:"flex",alignItems:"center",gap:6}}><Icon name="layout" size={14} /> Dados do perfil</div>
          <div style={{padding:20,background:"var(--surface)",border:"1px solid var(--border)",borderRadius:20}}>
            <div style={{display:"flex",gap:16,alignItems:"flex-start",marginBottom:16}}>
              <div style={{width:56,height:56,borderRadius:16,background:"linear-gradient(135deg,#25F4EE,#FE2C55)",overflow:"hidden",flexShrink:0}}>
                {ttConnected?.avatar_url ? <img src={ttConnected.avatar_url} style={{width:"100%",height:"100%",objectFit:"cover"}} /> : <div style={{display:"flex",alignItems:"center",justifyContent:"center",height:"100%",fontSize:"1.4rem",fontWeight:800,color:"#fff"}}>{(ttConnected?.display_name||"U").charAt(0)}</div>}
              </div>
              <div>
                <div style={{fontSize:".92rem",fontWeight:700,color:"var(--text)"}}>{ttConnected?.display_name||"Nome de exibição"}</div>
                <div style={{fontSize:".72rem",color:"var(--muted)",marginTop:2}}>@{ttConnected?.username||ttHandle||"username"}</div>
                {ttConnected?.bio && <div style={{fontSize:".72rem",color:"var(--text)",marginTop:6,opacity:.8,lineHeight:1.4}}>{ttConnected.bio}</div>}
              </div>
            </div>
            <div style={{display:"grid",gap:8}}>
              {[
                {label:"profile_web_link",value: ttConnected?.username ? `https://tiktok.com/@${ttConnected.username}` : "—",icon:"globe"},
                {label:"profile_deep_link",value: ttConnected?.username ? `tiktok://user/@${ttConnected.username}` : "—",icon:"link"},
                {label:"bio_description",value: ttConnected?.bio || "Bio do perfil",icon:"file-text"},
                {label:"is_verified",value: appUser?.is_verified ? "Sim ✓" : "Não",icon:"shield"},
              ].map((f,i) => (
                <div key={i} style={{display:"flex",alignItems:"center",gap:10,padding:"10px 14px",background:"var(--bg)",borderRadius:12}}>
                  <Icon name={f.icon} size={14} />
                  <span style={{fontSize:".68rem",fontWeight:700,color:"#7b2ff7",minWidth:120}}>{f.label}</span>
                  <span style={{fontSize:".72rem",color:"var(--text)",wordBreak:"break-all"}}>{f.value}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
        )}

        {subPage === "tt-scope-stats" && (
        <div style={{marginTop:16}}>
          <div style={{fontSize:".78rem",fontWeight:700,marginBottom:12,color:"var(--text)",display:"flex",alignItems:"center",gap:6}}><Icon name="layout" size={14} /> Estatísticas</div>
          <div style={{display:"grid",gridTemplateColumns:"repeat(2,1fr)",gap:12,marginBottom:12}}>
            {[
              {label:"Seguidores",value:ttConnected?.followers_count||0,color:"#25F4EE",icon:"users"},
              {label:"Seguindo",value:ttConnected?.following_count||0,color:"#00b4d8",icon:"user-plus"},
              {label:"Curtidas",value:ttConnected?.likes_count||0,color:"#FE2C55",icon:"heart"},
              {label:"Vídeos",value:ttConnected?.video_count||0,color:"#ff9a3c",icon:"video"},
            ].map((s,i) => (
              <div key={i} style={{background:"var(--surface)",border:"1px solid var(--border)",borderRadius:20,padding:20}}>
                <div style={{display:"flex",alignItems:"center",gap:8,marginBottom:10}}>
                  <div style={{width:32,height:32,borderRadius:10,background:`${s.color}15`,display:"flex",alignItems:"center",justifyContent:"center"}}>
                    <Icon name={s.icon} size={16} color={s.color} />
                  </div>
                  <span style={{fontSize:".72rem",color:"var(--muted)",fontWeight:600}}>{s.label}</span>
                </div>
                <div style={{fontSize:"1.8rem",fontWeight:800,color:s.color}}>{fmtN(s.value)}</div>
                <div style={{fontSize:".62rem",color:"var(--muted)",marginTop:4}}>user.info.stats</div>
              </div>
            ))}
          </div>
        </div>
        )}

        {subPage === "tt-scope-video-list" && (
        <div style={{marginTop:16}}>
          <div style={{fontSize:".78rem",fontWeight:700,marginBottom:12,color:"var(--text)",display:"flex",alignItems:"center",gap:6}}><Icon name="layout" size={14} /> Vídeos públicos</div>
          <div style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:8,marginBottom:12}}>
            {Array.from({length:6}).map((_,i) => (
              <div key={i} style={{aspectRatio:"9/12",borderRadius:14,overflow:"hidden",position:"relative",background:"var(--surface)",border:"1px solid var(--border)"}}>
                <div style={{width:"100%",height:"100%",background:`linear-gradient(${180+i*30}deg,rgba(37,244,238,.06),rgba(254,44,85,.06))`,display:"flex",alignItems:"center",justifyContent:"center"}}>
                  <Icon name="play-circle" size={24} color="var(--muted)" />
                </div>
                <div style={{position:"absolute",bottom:0,left:0,right:0,padding:"8px 10px",background:"linear-gradient(transparent,rgba(0,0,0,.8))"}}>
                  <div style={{fontSize:".66rem",color:"#fff",fontWeight:600}}>Vídeo {i+1}</div>
                  <div style={{fontSize:".58rem",color:"rgba(255,255,255,.5)",display:"flex",gap:6,alignItems:"center"}}>
                    <span>❤ {Math.floor(Math.random()*5000+500)}</span>
                    <span>💬 {Math.floor(Math.random()*200+10)}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
          <div style={{padding:14,background:"var(--surface)",border:"1px solid var(--border)",borderRadius:14,display:"flex",justifyContent:"space-between",alignItems:"center"}}>
            <div style={{fontSize:".72rem",color:"var(--muted)"}}>Exibindo {ttConnected?.video_count||0} vídeos via <code style={{color:"#ff9a3c",fontWeight:700}}>video.list</code></div>
            <span style={{fontSize:".68rem",color:"#ff9a3c",fontWeight:600,cursor:"pointer"}}>Ver todos →</span>
          </div>
        </div>
        )}
      </div>
    );
  }

const aiGetInsight = async (type) => {
setAiInsightLoading({...aiInsightLoading, [type]: true});
const chName = ttConnected?.display_name || ttHandle || "canal";
const prompts = {
"Melhores horários para postar": "Qual o melhor horario para postar videos no TikTok considerando audiencia brasileira do canal "+chName+"? Responda em 2-3 linhas com horarios especificos.",
"Hashtags trend": "Sugira 10 hashtags em trending para videos do TikTok no nicho de "+chName+". Retorne separadas por espaco.",
"Ideias de conteúdo viral": "Sugira 3 ideias de conteudo viral para o TikTok no nicho de "+chName+". Seja criativo e especifico.",
"Hooks de atenção": "Crie 5 hooks de atencao (primeiros 3 segundos) para videos do TikTok de "+chName+". Curto e impactante."
};
try {
const res = await fetch("/api/ai/generate", { method:"POST", headers:{"Content-Type":"application/json","x-user-email":userEmail}, credentials:"include", body:JSON.stringify({ briefing:prompts[type], tone:"Descontraido", count:1 }) });
const d = await res.json();
setAiInsightResults({...aiInsightResults, [type]:(d.captions&&d.captions[0]&&d.captions[0].text)||d.text||"Sem sugestoes disponiveis"});
} catch(e) { setAiInsightResults({...aiInsightResults, [type]:"Erro. Tente novamente."}); }
setAiInsightLoading({...aiInsightLoading, [type]: false});
};

const tabs = ["Visão geral", "Vídeos", "Insights IA", "API & Scopes"];
const tabKeys = ["overview", "videos", "insights", "scopes"];
const followers = ttConnected?.followers_count || 0;
const following = ttConnected?.following_count || 0;
const likes = ttConnected?.likes_count || 0;
const videoCount = ttConnected?.video_count || 0;

if (!ttConnected) return (
<div className="page-dash" style={{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",minHeight:"60vh",padding:40}}>
<div style={{textAlign:"center",maxWidth:480}}>
<div style={{width:80,height:80,borderRadius:20,background:"#010101",display:"flex",alignItems:"center",justifyContent:"center",margin:"0 auto 24px"}}>
<svg viewBox="0 0 24 24" fill="none" style={{width:40,height:40}}><path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.88-2.88A2.89 2.89 0 019.49 12.4c.28 0 .54.04.79.1V9.01a6.27 6.27 0 00-.79-.05 6.34 6.34 0 00-6.34 6.34 6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.34-6.34V9.39a8.16 8.16 0 004.77 1.52V7.46a4.83 4.83 0 01-1.01-.77z" fill="#25F4EE"/><path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.88-2.88A2.89 2.89 0 019.49 12.4c.28 0 .54.04.79.1V9.01a6.27 6.27 0 00-.79-.05 6.34 6.34 0 00-6.34 6.34 6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.34-6.34V9.39a8.16 8.16 0 004.77 1.52V7.46a4.83 4.83 0 01-1.01-.77z" fill="#FE2C55" style={{mixBlendMode:"multiply"}}/></svg>
</div>
<h2 style={{fontSize:"1.4rem",fontWeight:600,marginBottom:8}}>{t.tiktok} requer conta conectada</h2>
<p style={{color:"var(--muted)",marginBottom:24,fontSize:".85rem"}}>Conecte sua conta TikTok para ver métricas, vídeos e insights</p>
<button onClick={connectTikTok} style={{...goldBtn, padding:"14px 40px", fontSize:".95rem", boxShadow:"0 4px 20px rgba(37,244,238,.3)"}}>Conectar com TikTok</button>
</div>
</div>
);

return (
<div className="page-dash">
<div className="page-head" style={{display:"flex",justifyContent:"space-between",alignItems:"center"}}>
<h1 className="page-title" style={{fontSize:"2rem"}}>TikTok</h1>
<button onClick={disconnectTikTok} style={{background:"var(--surface-2)",color:"var(--red)",border:"1px solid rgba(255,61,113,.2)",borderRadius:12,padding:"6px 14px",fontSize:".68rem",fontWeight:600,cursor:"pointer"}}>Desconectar</button>
</div>

<div style={{display:"flex",gap:8,margin:"16px 0 24px",flexWrap:"wrap"}}>
{tabs.map((tab,i) => (
<span key={tabKeys[i]} onClick={() => setTtTab(tabKeys[i])} style={{padding:"8px 16px",borderRadius:12,fontSize:".78rem",fontWeight:600,cursor:"pointer",background:ttTab===tabKeys[i]?"var(--surface-2)":"transparent",color:ttTab===tabKeys[i]?"var(--text)":"var(--muted)",border:"1px solid var(--border)"}}>{tab}</span>
))}
</div>

{ttTab === "overview" && (
<>
<div style={{position:"relative",borderRadius:24,overflow:"hidden",marginBottom:24,background:"linear-gradient(135deg,#010101,#1a1a2e)",padding:32,display:"flex",gap:24,alignItems:"center"}}>
<span style={{position:"absolute",top:12,left:12,zIndex:2,padding:"4px 10px",borderRadius:8,fontSize:".68rem",fontWeight:600,background:"rgba(0,0,0,.6)",color:"#25F4EE",backdropFilter:"blur(8px)"}}>TikTok</span>
{ttConnected.avatar_url && <img src={ttConnected.avatar_url} style={{width:72,height:72,borderRadius:20,objectFit:"cover",border:"2px solid rgba(37,244,238,.4)"}} />}
<div>
<h2 style={{fontSize:"1.2rem",fontWeight:700,margin:"0 0 4px"}}>{ttConnected.display_name || ttConnected.username || "—"}</h2>
<p style={{fontSize:".72rem",color:"var(--muted)",margin:0}}>tiktok.com/@{(ttConnected.username||"").slice(0,20)}</p>
<a href={"https://tiktok.com/@" + (ttConnected.username||"")} target="_blank" style={{display:"block",marginTop:18,padding:"12px 0",background:"var(--surface-2)",border:"1px solid var(--border)",borderRadius:12,textAlign:"center",fontSize:".78rem",fontWeight:600,color:"var(--text)",textDecoration:"none",cursor:"pointer"}}>Abrir no TikTok</a>
</div>
</div>

<div style={{display:"grid",gridTemplateColumns:"repeat(auto-fit,minmax(160px,1fr))",gap:12,marginBottom:24}}>
{[{l:"Seguidores",v:fmtN(followers)},{l:"Seguindo",v:fmtN(following)},{l:"Curtidas",v:fmtN(likes)},{l:"Vídeos",v:videoCount}].map(s => (
<div key={s.l} style={{...cardStyle,padding:"18px 20px"}}>
<div style={{fontSize:".68rem",color:"var(--muted)",marginBottom:4}}>{s.l}</div>
<div style={{fontSize:"1.4rem",fontWeight:700}}>{s.v}</div>
</div>
))}
</div>
</>
)}

{ttTab === "videos" && (
<div style={{...cardStyle,textAlign:"center",padding:40}}>
<p style={{color:"var(--muted)"}}>Vídeos do TikTok serão exibidos aqui após integração completa da API.</p>
</div>
)}

{ttTab === "insights" && (
<div style={cardStyle}>
<h3 style={{fontSize:".88rem",fontWeight:600,margin:"0 0 16px"}}>Insights TikTok com IA</h3>
<div style={{display:"grid",gridTemplateColumns:"repeat(auto-fit,minmax(280px,1fr))",gap:12}}>
{["Melhores horários para postar","Hashtags trend","Ideias de conteúdo viral","Hooks de atenção"].map(type => (
<div key={type} style={{background:"var(--bg)",borderRadius:16,padding:16}}>
<button onClick={() => aiGetInsight(type)} disabled={aiInsightLoading[type]} style={{width:"100%",padding:"10px 0",borderRadius:10,background:"rgba(37,244,238,.08)",border:"1px solid rgba(37,244,238,.2)",color:"#25F4EE",fontSize:".76rem",fontWeight:600,cursor:"pointer"}}>{aiInsightLoading[type]?"Gerando...":type}</button>
{aiInsightResults[type] && <p style={{color:"var(--muted)",fontSize:".72rem",margin:"8px 0 0",whiteSpace:"pre-wrap"}}>{aiInsightResults[type]}</p>}
</div>
))}
</div>
<p style={{color:"var(--muted)",fontSize:".72rem",margin:"8px 0 0"}}>Insights inteligentes para crescer no TikTok.</p>
</div>
)}

{ttTab === "scopes" && (
<div style={cardStyle}>
<h3 style={{fontSize:".88rem",fontWeight:600,margin:"0 0 16px"}}>TikTok APIs & Scopes concedidos</h3>

<div style={{marginBottom:20}}>
<div style={{fontSize:".76rem",fontWeight:700,color:"#25F4EE",marginBottom:8}}>Login Kit</div>
<p style={{fontSize:".72rem",color:"var(--muted)",margin:"0 0 6px"}}>Autenticação OAuth 2.0 — login com conta TikTok, obtenção de access token e refresh token.</p>
</div>

<div style={{marginBottom:20}}>
<div style={{fontSize:".76rem",fontWeight:700,color:"#25F4EE",marginBottom:8}}>Share Kit</div>
<p style={{fontSize:".72rem",color:"var(--muted)",margin:"0 0 6px"}}>Permite compartilhar vídeos do app diretamente no TikTok do usuário.</p>
</div>

<div style={{marginBottom:20}}>
<div style={{fontSize:".76rem",fontWeight:700,color:"#25F4EE",marginBottom:8}}>Display API</div>
<p style={{fontSize:".72rem",color:"var(--muted)",margin:"0 0 6px"}}>Exibição pública de perfis e vídeos TikTok em sites e apps de terceiros.</p>
</div>

<div style={{marginBottom:20}}>
<div style={{fontSize:".76rem",fontWeight:700,color:"#25F4EE",marginBottom:8}}>Content Posting API</div>
<p style={{fontSize:".72rem",color:"var(--muted)",margin:"0 0 6px"}}>Upload e publicação direta de vídeos no TikTok via API. Upload como rascunho (video.upload) e publicação direta (video.publish).</p>
</div>

<div style={{borderTop:"1px solid var(--border)",paddingTop:16,marginTop:8}}>
<div style={{fontSize:".76rem",fontWeight:700,marginBottom:12}}>Scopes ativos</div>
{[
  {scope:"user.info.basic",desc:"Acesso básico ao perfil (identificador único)"},
  {scope:"user.info.profile",desc:"Leitura de profile_web_link, profile_deep_link, bio_description, is_verified"},
  {scope:"user.info.stats",desc:"Leitura de dados estatísticos — likes, seguidores, seguindo, contagem de vídeos"},
  {scope:"video.list",desc:"Leitura dos vídeos públicos do usuário no TikTok"},
  {scope:"video.upload",desc:"Upload de vídeo como rascunho (draft)"},
  {scope:"video.publish",desc:"Publicação direta de vídeo no TikTok"},
].map(s => (
  <div key={s.scope} style={{display:"flex",gap:10,alignItems:"flex-start",marginBottom:8,padding:"8px 12px",background:"var(--bg)",borderRadius:10}}>
    <span style={{flexShrink:0,width:8,height:8,borderRadius:"50%",background:"#25F4EE",marginTop:4}} />
    <div>
      <code style={{fontSize:".72rem",fontWeight:600,color:"var(--text)"}}>{s.scope}</code>
      <p style={{fontSize:".68rem",color:"var(--muted)",margin:"2px 0 0"}}>{s.desc}</p>
    </div>
  </div>
))}
</div>
</div>
)}
</div>
);
};

const PageMeta = ({ t, igData, appUser, subPage }) => {
  const igConnected = igData && igData.connected;
  const profile = igData && igData.profile;
  const media = igData && igData.media;
  const fmtN = v => v >= 1e6 ? (v/1e6).toFixed(1)+"M" : v >= 1e3 ? (v/1e3).toFixed(1)+"K" : String(v||0);
  const email = (appUser && appUser.email) || "";

  const metaScopeInfo = {
    "ig-graph-api": { title: "Meta Graph API", color: "#E1306C", desc: "API principal do Instagram/Meta via Graph API. Permite ler perfis, mídias, insights, gerenciar comentários e publicar conteúdo no Instagram e Facebook Pages conectados.", details: [
      { label: "API", value: "Meta Graph API v21.0" },
      { label: "Base URL", value: "https://graph.facebook.com/v21.0/" },
      { label: "Auth", value: "OAuth 2.0 via Facebook Login" },
      { label: "Recursos", value: "me, accounts, media, insights, comments, stories" },
      { label: "Rate limit", value: "200 calls/user/hour (app level)" },
    ]},
    "ig-pages-read-content": { title: "pages_read_user_content", color: "#1877F2", desc: "Permite ler conteúdo gerado pelo usuário na Página — publicações, comentários, classificações e publicações nas quais a Página está marcada. Também permite excluir comentários do usuário nas publicações da Página. Dados agregados e anônimos podem ser usados para análise e marketing.", details: [
      { label: "Scope", value: "pages_read_user_content" },
      { label: "Lê", value: "Publicações, comentários, classificações, marcações" },
      { label: "Escreve", value: "Excluir comentários do usuário na Página" },
      { label: "Marcações", value: "Lê publicações nas quais a Página está marcada" },
      { label: "Uso permitido", value: "Gerenciamento da Página + análise agregada/anônima" },
      { label: "Marketing", value: "Dados agregados para aprimorar app e publicidade" },
    ]},
    "ig-pages-show-list": { title: "pages_show_list", color: "#1877F2", desc: "Permite acessar a lista de Páginas que uma pessoa gerencia. Uso permitido: mostrar a lista de Páginas gerenciadas e confirmar se uma pessoa gerencia uma Página. Dados agregados e anônimos podem ser usados para análise, marketing e publicidade.", details: [
      { label: "Scope", value: "pages_show_list" },
      { label: "Lê", value: "Lista de Páginas que o usuário gerencia" },
      { label: "Confirma", value: "Se uma pessoa gerencia uma Página específica" },
      { label: "Uso permitido", value: "Mostrar Páginas gerenciadas + verificação de admin" },
      { label: "Marketing", value: "Dados agregados/anônimos para análise e publicidade" },
      { label: "Endpoint", value: "GET /me/accounts" },
    ]},
  };

  const si = metaScopeInfo[subPage];
  if (!si) return null;

  const metaIcons = {"ig-graph-api":"database","ig-pages-read-content":"file-text","ig-pages-show-list":"list"};
  const metaGradients = {"ig-graph-api":"linear-gradient(135deg,#E1306C,#833AB4,#F77737)","ig-pages-read-content":"linear-gradient(135deg,#1877F2,#42A5F5)","ig-pages-show-list":"linear-gradient(135deg,#1877F2,#0d47a1)"};
  const grad = metaGradients[subPage] || "linear-gradient(135deg,#E1306C,#833AB4)";

 return (
 <div className="page-dash">
 {/* Header visual — perfil conectado */}
 <div style={{position:"relative",borderRadius:24,overflow:"hidden",marginBottom:20,background:grad,padding:28,color:"#fff"}}>
 <div style={{position:"absolute",top:0,right:0,width:200,height:200,background:"radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%)",borderRadius:"50%",transform:"translate(30%,-30%)"}} />
 <div style={{position:"relative",zIndex:1,display:"flex",gap:16,alignItems:"center"}}>
 {/* Avatar real ou mockup */}
 <div style={{width:52,height:52,borderRadius:16,background:"rgba(0,0,0,.25)",backdropFilter:"blur(8px)",border:"1px solid rgba(255,255,255,.15)",overflow:"hidden",flexShrink:0}}>
 {profile?.profile_picture_url ? <img src={profile.profile_picture_url} style={{width:"100%",height:"100%",objectFit:"cover"}} /> : <div style={{display:"flex",alignItems:"center",justifyContent:"center",height:"100%",fontWeight:800,fontSize:"1.2rem"}}>{(profile?.name||appUser?.nome||si.title).charAt(0)}</div>}
 </div>
 <div style={{flex:1,minWidth:0}}>
 <div style={{fontSize:"1.1rem",fontWeight:700}}>{profile?.name||appUser?.nome||si.title}</div>
 <div style={{fontSize:".72rem",opacity:.7,marginTop:2,display:"flex",gap:8,alignItems:"center",flexWrap:"wrap"}}>
 {profile?.username && <span>@{profile.username}</span>}
 {profile?.followers_count && <span>{fmtN(profile.followers_count)} seg</span>}
 {profile?.media_count && <span>{fmtN(profile.media_count)} posts</span>}
 {!profile?.username && <span>Meta Developer Platform</span>}
 </div>
 </div>
 {/* Status badge */}
 <div style={{padding:"6px 14px",borderRadius:10,background:"rgba(0,0,0,.2)",backdropFilter:"blur(8px)",fontSize:".68rem",fontWeight:700,border:"1px solid rgba(255,255,255,.15)",display:"flex",alignItems:"center",gap:6,flexShrink:0}}>
 <span style={{width:8,height:8,borderRadius:"50%",background:igConnected?"#4ade80":"var(--muted)",display:"inline-block"}} />
 {igConnected?"Ativo":"Desconectado"}
 </div>
 </div>
 {/* Mini stats row */}
 <div style={{position:"relative",zIndex:1,display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:8,marginTop:16}}>
 {[
 {l:"API",v:"v21.0"},
 {l:"Auth",v:"OAuth 2.0"},
 {l:"Rate",v:"200/h"},
 {l:"Recursos",v:"6"},
 ].map((m,i) => (
 <div key={i} style={{background:"rgba(0,0,0,.18)",backdropFilter:"blur(6px)",borderRadius:10,padding:"10px 12px",border:"1px solid rgba(255,255,255,.08)"}}>
 <div style={{fontSize:".56rem",opacity:.6,textTransform:"uppercase",letterSpacing:".5px",marginBottom:3}}>{m.l}</div>
 <div style={{fontSize:".82rem",fontWeight:700}}>{m.v}</div>
 </div>
 ))}
 </div>
 </div>


      {subPage === "ig-graph-api" && (
      <div style={{marginTop:8}}>
        <div style={{background:"var(--surface)",border:"1px solid var(--border)",borderRadius:20,padding:20,marginBottom:12}}>
          {/* URL bar */}
          <div style={{display:"flex",gap:8,marginBottom:12,alignItems:"center"}}>
            <span style={{padding:"6px 10px",borderRadius:8,background:"#4ade8022",color:"#4ade80",fontSize:".68rem",fontWeight:700}}>GET</span>
            <div style={{flex:1,padding:"8px 14px",background:"var(--bg)",borderRadius:10,fontFamily:"monospace",fontSize:".76rem",color:"var(--text)"}}>
              https://graph.facebook.com/v21.0/me?fields=id,username,name,followers_count,media_count
            </div>
          </div>
          {/* Response mockup */}
          <div style={{background:"var(--bg)",borderRadius:14,padding:16,fontFamily:"monospace",fontSize:".72rem",lineHeight:1.7,overflowX:"auto"}}>
            <div style={{color:"var(--muted)"}}>{"{"}</div>
            <div style={{paddingLeft:16}}><span style={{color:"#E1306C"}}>"id"</span>: <span style={{color:"#4ade80"}}>"{profile?.id||"17841400"}"</span>,</div>
            <div style={{paddingLeft:16}}><span style={{color:"#E1306C"}}>"username"</span>: <span style={{color:"#4ade80"}}>"{profile?.username||"minhaempresa"}"</span>,</div>
            <div style={{paddingLeft:16}}><span style={{color:"#E1306C"}}>"name"</span>: <span style={{color:"#4ade80"}}>"{profile?.name||"Minha Empresa"}"</span>,</div>
            <div style={{paddingLeft:16}}><span style={{color:"#E1306C"}}>"followers_count"</span>: <span style={{color:"#f59e0b"}}>{profile?.followers_count||12453}</span>,</div>
            <div style={{paddingLeft:16}}><span style={{color:"#E1306C"}}>"media_count"</span>: <span style={{color:"#f59e0b"}}>{profile?.media_count||247}</span></div>
            <div style={{color:"var(--muted)"}}>{"}"}</div>
          </div>
        </div>
        {/* Endpoints rápidos */}
        <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fit,minmax(160px,1fr))",gap:8,marginBottom:12}}>
          {[
            {r:"/me",desc:"Perfil"},
            {r:"/me/accounts",desc:"Páginas"},
            {r:"/me/media",desc:"Mídias"},
            {r:"/me/stories",desc:"Stories"},
            {r:"/me/insights",desc:"Insights"},
            {r:"/{media}/comments",desc:"Comentários"},
          ].map((ep,i) => (
            <div key={i} style={{padding:"10px 14px",background:"var(--surface)",border:"1px solid var(--border)",borderRadius:12,cursor:"pointer",transition:".15s"}} onMouseOver={e=>e.currentTarget.style.borderColor="#E1306C"} onMouseOut={e=>e.currentTarget.style.borderColor="var(--border)"}>
              <code style={{fontSize:".74rem",color:"#E1306C",fontWeight:700}}>{ep.r}</code>
              <div style={{fontSize:".64rem",color:"var(--muted)",marginTop:2}}>{ep.desc}</div>
            </div>
          ))}
        </div>
        {/* Seus dados conectados */}
        {igConnected && profile && (
        <div style={{padding:16,background:"var(--surface)",border:"1px solid var(--border)",borderRadius:14,display:"flex",gap:14,alignItems:"center"}}>
          <div style={{width:48,height:48,borderRadius:14,background:"linear-gradient(135deg,#E1306C,#833AB4)",overflow:"hidden"}}>
            {profile.profile_picture_url ? <img src={profile.profile_picture_url} style={{width:"100%",height:"100%",objectFit:"cover"}} /> : <div style={{display:"flex",alignItems:"center",justifyContent:"center",height:"100%",fontSize:"1.2rem",fontWeight:800,color:"#fff"}}>{(profile.name||"I").charAt(0)}</div>}
          </div>
          <div style={{flex:1}}>
            <div style={{fontSize:".82rem",fontWeight:700,color:"var(--text)"}}>{profile.name}</div>
            <div style={{fontSize:".68rem",color:"var(--muted)"}}>@{profile.username} · {fmtN(profile.followers_count||0)} seguidores · {fmtN(profile.media_count||0)} posts</div>
          </div>
          <span style={{padding:"4px 10px",borderRadius:8,background:"#4ade8022",color:"#4ade80",fontSize:".64rem",fontWeight:700}}>Conectado</span>
        </div>
        )}
      </div>
      )}

      {subPage === "ig-pages-read-content" && (
      <div style={{marginTop:8}}>
        {/* Tabs de tipo de conteúdo */}
        <div style={{display:"flex",gap:6,marginBottom:12}}>
          {["Publicações","Comentários","Marcações","Avaliações"].map((tab,i) => (
            <span key={i} style={{padding:"5px 12px",borderRadius:8,fontSize:".68rem",fontWeight:600,cursor:"pointer",background:i===0?"#1877F215":"var(--surface)",color:i===0?"#1877F2":"var(--muted)",border:"1px solid var(--border)"}}>{tab}</span>
          ))}
        </div>
        {/* Post feed mockup */}
        <div style={{padding:20,background:"var(--surface)",border:"1px solid var(--border)",borderRadius:20,marginBottom:12}}>
          {/* Header do post */}
          <div style={{display:"flex",gap:10,alignItems:"center",marginBottom:14}}>
            <div style={{width:36,height:36,borderRadius:"50%",background:"linear-gradient(135deg,#E1306C,#833AB4,#F77737)",display:"flex",alignItems:"center",justifyContent:"center",fontWeight:800,fontSize:".8rem",color:"#fff"}}>{(profile?.name||"P").charAt(0)}</div>
            <div style={{flex:1}}>
              <div style={{fontSize:".78rem",fontWeight:700,color:"var(--text)"}}>{profile?.name||"Minha Página"}</div>
              <div style={{fontSize:".62rem",color:"var(--muted)"}}>Há 2 horas · 🌐 Público</div>
            </div>
            <span style={{padding:"3px 8px",borderRadius:6,background:"#1877F215",color:"#1877F2",fontSize:".58rem",fontWeight:700}}>Página</span>
          </div>
          {/* Imagem do post */}
          <div style={{aspectRatio:"1/1",borderRadius:14,overflow:"hidden",marginBottom:12,background:"linear-gradient(135deg,#E1306C11,#833AB411)",display:"flex",alignItems:"center",justifyContent:"center",border:"1px solid var(--border)"}}>
            {media&&media[0]&&media[0].media_url ? <img src={media[0].media_url} style={{width:"100%",height:"100%",objectFit:"cover"}} /> : <div style={{textAlign:"center"}}><Icon name="image" size={32} color="var(--muted)" /><div style={{fontSize:".72rem",color:"var(--muted)",marginTop:8}}>Imagem do post</div></div>}
          </div>
          {/* Legenda */}
          <div style={{fontSize:".78rem",color:"var(--text)",lineHeight:1.5,marginBottom:10}}>
            <strong style={{color:"#E1306C"}}>@{(profile?.username||"pagina")}</strong> {(media&&media[0]&&media[0].caption||"Conteúdo da publicação gerado pelo usuário na Página ✨ #marketing #digital").substring(0,120)}
          </div>
          {/* Actions */}
          <div style={{display:"flex",gap:16,paddingTop:10,borderTop:"1px solid var(--border)"}}>
            {["❤ 234","💬 18","↗ 12","🔖 Salvar"].map((a,i) => (
              <span key={i} style={{fontSize:".72rem",color:"var(--muted)",cursor:"pointer"}}>{a}</span>
            ))}
          </div>
          {/* Comentário de visitante */}
          <div style={{marginTop:12,paddingTop:12,borderTop:"1px solid var(--border)"}}>
            <div style={{display:"flex",gap:8,alignItems:"flex-start"}}>
              <div style={{width:28,height:28,borderRadius:"50%",background:"#1877F220",display:"flex",alignItems:"center",justifyContent:"center",fontSize:".6rem",fontWeight:700,color:"#1877F2",flexShrink:0}}>V</div>
              <div>
                <span style={{fontSize:".72rem",fontWeight:700,color:"var(--text)"}}>visitante_123</span>
                <span style={{fontSize:".72rem",color:"var(--text)",marginLeft:6}}>Comentário lido via pages_read_user_content 🔥</span>
                <div style={{fontSize:".62rem",color:"var(--muted)",marginTop:2}}>Há 15 min · <span style={{color:"#FF0000",cursor:"pointer"}}>Excluir</span></div>
              </div>
            </div>
            <div style={{display:"flex",gap:8,alignItems:"flex-start",marginTop:8}}>
              <div style={{width:28,height:28,borderRadius:"50%",background:"#E1306C20",display:"flex",alignItems:"center",justifyContent:"center",fontSize:".6rem",fontWeight:700,color:"#E1306C",flexShrink:0}}>O</div>
              <div>
                <span style={{fontSize:".72rem",fontWeight:700,color:"var(--text)"}}>outra_pagina</span>
                <span style={{fontSize:".72rem",color:"var(--text)",marginLeft:6}}>Marcação lida — Página marcada neste post 📌</span>
                <div style={{fontSize:".62rem",color:"var(--muted)",marginTop:2}}>Há 45 min · Marcação</div>
              </div>
            </div>
          </div>
          {/* Input de comentário */}
          <div style={{marginTop:12,paddingTop:12,borderTop:"1px solid var(--border)",display:"flex",gap:8,alignItems:"center"}}>
            <div style={{width:28,height:28,borderRadius:"50%",background:"linear-gradient(135deg,#E1306C,#833AB4)",flexShrink:0}} />
            <div style={{flex:1,padding:"8px 14px",background:"var(--bg)",borderRadius:20,fontSize:".72rem",color:"var(--muted)"}}>Escreva um comentário...</div>
          </div>
        </div>
        {/* Dados agregados */}
        <div style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:8,marginBottom:12}}>
          {[
            {label:"Posts lidos",value:fmtN(profile?.media_count||47),color:"#1877F2"},
            {label:"Comentários",value:"156",color:"#E1306C"},
            {label:"Marcações",value:"23",color:"#833AB4"},
          ].map((s,i) => (
            <div key={i} style={{padding:14,background:"var(--surface)",border:"1px solid var(--border)",borderRadius:14,textAlign:"center"}}>
              <div style={{fontSize:"1.2rem",fontWeight:800,color:s.color}}>{s.value}</div>
              <div style={{fontSize:".64rem",color:"var(--muted)",marginTop:2}}>{s.label}</div>
            </div>
          ))}
        </div>
        {/* Scope capabilities */}
        <div style={{padding:14,background:"var(--surface)",border:"1px solid var(--border)",borderRadius:14}}>
          <div style={{fontSize:".72rem",fontWeight:700,marginBottom:8,color:"#1877F2"}}>O que esta permissão permite</div>
          <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:6}}>
            {[
              {icon:"file-text",text:"Ler publicações do usuário"},
              {icon:"message-circle",text:"Ler comentários"},
              {icon:"star",text:"Ler classificações/avaliações"},
              {icon:"at-sign",text:"Ler marcações na Página"},
              {icon:"trash-2",text:"Excluir próprios comentários"},
              {icon:"bar-chart",text:"Dados agregados p/ marketing"},
            ].map((c,i) => (
              <div key={i} style={{display:"flex",alignItems:"center",gap:6,padding:"6px 8px",background:"var(--bg)",borderRadius:8}}>
                <Icon name={c.icon} size={12} color="#1877F2" />
                <span style={{fontSize:".66rem",color:"var(--text)"}}>{c.text}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
      )}

      {subPage === "ig-pages-show-list" && (
      <div style={{marginTop:8}}>
        {/* Header da seleção */}
        <div style={{padding:16,background:"var(--surface)",border:"1px solid var(--border)",borderRadius:20,marginBottom:12,display:"flex",gap:12,alignItems:"center"}}>
          <div style={{width:40,height:40,borderRadius:"50%",background:"linear-gradient(135deg,#1877F2,#42A5F5)",display:"flex",alignItems:"center",justifyContent:"center"}}>
            <svg viewBox="0 0 24 24" fill="#fff" style={{width:20,height:20}}><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
          </div>
          <div>
            <div style={{fontSize:".82rem",fontWeight:700,color:"var(--text)"}}>{appUser?.nome||"Usuário"}</div>
            <div style={{fontSize:".68rem",color:"var(--muted)"}}>Selecione a Página que deseja gerenciar</div>
          </div>
        </div>
        {/* Page cards */}
        <div style={{display:"flex",flexDirection:"column",gap:8,marginBottom:12}}>
          {[
            {
              name: profile?.name||"Minha Página Instagram",
              category: "Instagram Business",
              icon: "camera",
              gradient: "linear-gradient(135deg,#E1306C,#833AB4)",
              followers: profile?.followers_count||12453,
              verified: true,
              selected: true,
            },
            {
              name: "Página Facebook",
              category: "Facebook Page",
              icon: "globe",
              gradient: "linear-gradient(135deg,#1877F2,#42A5F5)",
              followers: 8210,
              verified: false,
              selected: false,
            },
            {
              name: "Loja Online",
              category: "Facebook Shop",
              icon: "shopping-bag",
              gradient: "linear-gradient(135deg,#FF9900,#FF6D00)",
              followers: 3421,
              verified: false,
              selected: false,
            },
          ].map((pg,i) => (
            <div key={i} style={{display:"flex",gap:14,alignItems:"center",padding:16,background:pg.selected?"var(--surface)":"var(--surface)",border:`1px solid ${pg.selected?"#4ade8044":"var(--border)"}`,borderRadius:16,position:"relative",cursor:"pointer",transition:".15s"}} onMouseOver={e=>{if(!pg.selected)e.currentTarget.style.borderColor="#1877F244"}} onMouseOut={e=>{if(!pg.selected)e.currentTarget.style.borderColor="var(--border)"}}>
              {/* Avatar da página */}
              <div style={{width:48,height:48,borderRadius:14,background:pg.gradient,display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0}}>
                <Icon name={pg.icon} size={22} color="#fff" />
              </div>
              <div style={{flex:1}}>
                <div style={{fontSize:".82rem",fontWeight:700,color:"var(--text)",display:"flex",alignItems:"center",gap:6}}>
                  {pg.name}
                  {pg.verified && <span style={{width:16,height:16,borderRadius:"50%",background:"#4ade80",display:"inline-flex",alignItems:"center",justifyContent:"center"}}><svg viewBox="0 0 24 24" fill="#fff" style={{width:10,height:10}}><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></span>}
                </div>
                <div style={{fontSize:".68rem",color:"var(--muted)",marginTop:2,display:"flex",gap:8}}>
                  <span>{pg.category}</span>
                  <span>· {fmtN(pg.followers)} seguidores</span>
                </div>
              </div>
              {/* Role badge */}
              <div style={{display:"flex",flexDirection:"column",alignItems:"flex-end",gap:4}}>
                <span style={{padding:"4px 10px",borderRadius:8,background:pg.selected?"#4ade8022":"var(--bg)",color:pg.selected?"#4ade80":"var(--muted)",fontSize:".64rem",fontWeight:700}}>{pg.selected?"Selecionada":"Admin"}</span>
                {pg.selected && <span style={{fontSize:".58rem",color:"#4ade80"}}>✓ Conectada</span>}
              </div>
            </div>
          ))}
        </div>
        {/* API Response mockup */}
        <div style={{background:"var(--surface)",border:"1px solid var(--border)",borderRadius:20,padding:16}}>
          <div style={{display:"flex",alignItems:"center",gap:8,marginBottom:10}}>
            <span style={{padding:"4px 8px",borderRadius:6,background:"#4ade8022",color:"#4ade80",fontSize:".64rem",fontWeight:700}}>GET</span>
            <code style={{fontSize:".68rem",color:"var(--muted)"}}>/me/accounts</code>
          </div>
          <div style={{background:"var(--bg)",borderRadius:12,padding:14,fontFamily:"monospace",fontSize:".68rem",lineHeight:1.6,overflowX:"auto"}}>
            <div style={{color:"var(--muted)"}}>{"{"}<span style={{color:"#E1306C"}}>"data"</span>: [</div>
            <div style={{paddingLeft:20}}>{"{"}</div>
            <div style={{paddingLeft:36}}><span style={{color:"#E1306C"}}>"id"</span>: <span style={{color:"#4ade80"}}>"123456"</span>,</div>
            <div style={{paddingLeft:36}}><span style={{color:"#E1306C"}}>"name"</span>: <span style={{color:"#4ade80"}}>"{profile?.name||"Minha Página"}"</span>,</div>
            <div style={{paddingLeft:36}}><span style={{color:"#E1306C"}}>"category"</span>: <span style={{color:"#4ade80"}}>"Instagram Business"</span>,</div>
            <div style={{paddingLeft:36}}><span style={{color:"#E1306C"}}>"tasks"</span>: [<span style={{color:"#f59e0b"}}>"MANAGE","CREATE","MODERATE"</span>]</div>
            <div style={{paddingLeft:20}}>{"}"}</div>
            <div style={{color:"var(--muted)"}}>]</div>
            <div style={{color:"var(--muted)"}}>{"}"}</div>
          </div>
          <div style={{fontSize:".62rem",color:"var(--muted)",marginTop:8,lineHeight:1.5}}>Retorna todas as Páginas que o usuário gerencia com id, name, access_token, category e tasks (permissões).</div>
        </div>
      </div>
      )}

      {/* Status de conexão Meta */}
      <div style={{marginTop:16,background:"var(--surface)",border:"1px solid var(--border)",borderRadius:20,padding:20,display:"flex",alignItems:"center",gap:16}}>
        <div style={{width:40,height:40,borderRadius:12,background:"linear-gradient(135deg,#E1306C,#833AB4,#F77737)",display:"flex",alignItems:"center",justifyContent:"center"}}>
          <svg viewBox="0 0 24 24" fill="#fff" style={{width:18,height:18}}><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
        </div>
        <div style={{flex:1}}>
          <div style={{fontSize:".82rem",fontWeight:600}}>Meta / Instagram</div>
          <div style={{fontSize:".72rem",color:"var(--muted)"}}>{profile?.username ? "@"+profile.username : (igConnected?"Conectado":"Desconectado")}</div>
        </div>
        <div style={{padding:"6px 12px",borderRadius:8,background:igConnected?"#4ade8022":"var(--surface-2)",color:igConnected?"#4ade80":"var(--muted)",fontSize:".68rem",fontWeight:700,border:igConnected?"1px solid #4ade8033":"1px solid var(--border)"}}>{igConnected?"Online":"Offline"}</div>
      </div>
    </div>
  );
};

const PageSettings = ({ t, igData, appUser }) => (
<div className="page-dash">
<div className="page-head">
<div>
<h1 className="page-title">{t.settings}</h1>
<p className="page-sub">Integrações · whitelabel · time · permissões</p>
</div>
</div>

<div style={{ display: "grid", gap: 14 }}>
<div className="card">
<div className="card-hd"><h3>Integrações Meta</h3></div>
<div className="card-body">
<div style={{ display: "grid", gap: 12 }}>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px 0", borderBottom: "1px solid var(--border)" }}>
<div>
<strong>Instagram Graph API</strong>
<div style={{ fontSize: 11, color: "var(--muted)" }}>instagram_manage_insights, instagram_manage_comments</div>
</div>
<span className="pill pos">Conectado</span>
</div>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px 0", borderBottom: "1px solid var(--border)" }}>
<div>
<strong>Facebook Graph API</strong>
<div style={{ fontSize: 11, color: "var(--muted)" }}>pages_read_engagement, pages_manage_posts</div>
</div>
<span className="pill pos">Conectado</span>
</div>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px 0", borderBottom: "1px solid var(--border)" }}>
<div>
<strong>Meta Ads API</strong>
<div style={{ fontSize: 11, color: "var(--muted)" }}>ads_read, ads_management</div>
</div>
<span className="pill pos">Conectado</span>
</div>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px 0", borderBottom: "1px solid var(--border)" }}>
<div>
<strong>WhatsApp Business</strong>
<div style={{ fontSize: 11, color: "var(--muted)" }}>whatsapp_business_messaging</div>
</div>
<span className="pill pos">Conectado</span>
</div>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px 0" }}>
<div>
<strong>Advanced Access</strong>
<div style={{ fontSize: 11, color: "var(--muted)" }}>business verification complete</div>
</div>
<span className="pill pos">Aprovado</span>
</div>
</div>
</div>
</div>

<div className="card">
<div className="card-hd"><h3>Documentação da API</h3><span className="sub">Meta for Developers</span></div>
<div className="card-body">
<div style={{ display: "grid", gap: 8 }}>
<a href="https://developers.facebook.com/docs/instagram-platform/sharing-to-feed" target="_blank" rel="noopener" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px 0", borderBottom: "1px solid var(--border)", color: "var(--text)", textDecoration: "none" }}>
<span><strong>Sharing to Feed</strong><div style={{ fontSize: 11, color: "var(--muted)" }}>Publicar conteúdo no feed do Instagram via API</div></span>
<span className="pill info">Docs</span>
</a>
<a href="https://developers.facebook.com/docs/instagram-platform/insights" target="_blank" rel="noopener" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px 0", borderBottom: "1px solid var(--border)", color: "var(--text)", textDecoration: "none" }}>
<span><strong>Insights API</strong><div style={{ fontSize: 11, color: "var(--muted)" }}>Métricas e analytics de conta e mídia</div></span>
<span className="pill info">Docs</span>
</a>
<a href="https://developers.facebook.com/docs/instagram-platform/content-publishing" target="_blank" rel="noopener" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px 0", color: "var(--text)", textDecoration: "none" }}>
<span><strong>Content Publishing</strong><div style={{ fontSize: 11, color: "var(--muted)" }}>Publicação de mídia e stories programaticamente</div></span>
<span className="pill info">Docs</span>
</a>
</div>
</div>
</div>

<div className="card">
<div className="card-hd"><h3>Whitelabel</h3><span className="sub">por cliente</span></div>
<div className="card-body">
<div style={{ display: "grid", gap: 10 }}>
<div style={{ display: "flex", justifyContent: "space-between", padding: "8px 0", borderBottom: "1px solid var(--border)" }}>
<span style={{ color: "var(--muted)" }}>Domínio customizado</span>
<span style={{ fontFamily: "Inter Tight", fontSize: 12 }}>aurora.grupohub.app</span>
</div>
<div style={{ display: "flex", justifyContent: "space-between", padding: "8px 0", borderBottom: "1px solid var(--border)" }}>
<span style={{ color: "var(--muted)" }}>Cor de marca</span>
<span style={{ display: "flex", alignItems: "center", gap: 8 }}><span style={{ width: 20, height: 20, borderRadius: 4, background: "oklch(68% 0.16 150)" }}></span>oklch(68% 0.16 150)</span>
</div>
<div style={{ display: "flex", justifyContent: "space-between", padding: "8px 0", borderBottom: "1px solid var(--border)" }}>
<span style={{ color: "var(--muted)" }}>Logo cliente</span>
<span style={{ fontFamily: "Inter Tight", fontSize: 12 }}>aurora-mark-v2.svg</span>
</div>
<div style={{ display: "flex", justifyContent: "space-between", padding: "8px 0" }}>
<span style={{ color: "var(--muted)" }}>Idioma padrão</span>
<span>pt-BR</span>
</div>
</div>
<button className="btn" style={{ marginTop: 12 }}>Editar whitelabel</button>
</div>
</div>

<div className="card">
<div className="card-hd"><h3>Time & permissões</h3><span className="sub">4 membros</span></div>
<div className="card-body" style={{ padding: 0 }}>
<table className="tbl" style={{ margin: 0 }}>
<thead><tr><th>Membro</th><th>E-mail</th><th>Papel</th><th>Clientes</th><th>Último acesso</th></tr></thead>
<tbody>
<tr>
<td><span style={{ fontWeight: 550 }}>BL</span> Bruno Lacerda</td>
<td style={{ fontSize: 11.5 }}>bruno@grupohub.com</td>
<td><span className="pill pos">Owner</span></td>
<td style={{ fontSize: 11.5 }}>Todos (4)</td>
<td style={{ fontSize: 11.5, color: "var(--pos)" }}>agora</td>
</tr>
<tr>
<td><span style={{ fontWeight: 550 }}>AM</span> Ana Martins</td>
<td style={{ fontSize: 11.5 }}>ana@grupohub.com</td>
<td><span className="pill accent">Designer</span></td>
<td style={{ fontSize: 11.5 }}>Aurora, Noctua</td>
<td style={{ fontSize: 11.5 }}>há 12min</td>
</tr>
<tr>
<td><span style={{ fontWeight: 550 }}>JR</span> Julia Rocha</td>
<td style={{ fontSize: 11.5 }}>julia@grupohub.com</td>
<td><span className="pill muted">Gestora</span></td>
<td style={{ fontSize: 11.5 }}>Lumen, Verdi</td>
<td style={{ fontSize: 11.5 }}>há 1h</td>
</tr>
<tr>
<td><span style={{ fontWeight: 550 }}>CA</span> Convidado Aurora</td>
<td style={{ fontSize: 11.5 }}>aurora@swim.com</td>
<td><span className="pill muted">Cliente (read-only)</span></td>
<td style={{ fontSize: 11.5 }}>Aurora</td>
<td style={{ fontSize: 11.5 }}>ontem</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
);

const CATALOG = [
{ id:"designer", nome:"Designer Gráfico", categoria:"criativo", icone:"palette", desc:"Criação de identidade visual, banners, thumbnails e assets para redes sociais.", preco:150, unit:"projeto" },
{ id:"videomaker", nome:"Videomaker", categoria:"criativo", icone:"video", desc:"Edição de vídeos, Reels, Stories e content para TikTok e YouTube.", preco:300, unit:"vídeo" },
{ id:"foto-editor", nome:"Editor de Foto", categoria:"criativo", icone:"image", desc:"Tratamento, color grading, composição e edição avançada de fotos.", preco:80, unit:"foto" },
{ id:"social-media", nome:"Social Media Manager", categoria:"gestao", icone:"megaphone", desc:"Gestão completa de redes sociais: planejamento, posting e analytics.", preco:1500, unit:"mês" },
{ id:"copywriter", nome:"Copywriter", categoria:"gestao", icone:"pencil", desc:"Copys para captions, anúncios, bio e descrições de produtos.", preco:50, unit:"caption" },
{ id:"strategist", nome:"Estrategista Digital", categoria:"gestao", icone:"target", desc:"Planejamento de campanhas, definição de KPIs e estratégia de conteúdo.", preco:500, unit:"consulta" },
{ id:"reel-maker", nome:"Reel Maker", categoria:"producao", icone:"film", desc:"Criação de Reels prontos para postar com trending audio e hooks.", preco:200, unit:"reel" },
{ id:"carousel", nome:"Carousel Designer", categoria:"producao", icone:"layers", desc:"Carrosséis professionais para feed com copy e CTA integrados.", preco:250, unit:"carrossel" },
{ id:"thumbnail", nome:"Thumbnail Designer", categoria:"producao", icone:"layout", desc:"Thumbnails de alto CTR para YouTube e previews de Reels.", preco:100, unit:"thumbnail" },
];

const PageServices = ({ t, igData, appUser }) => {
const [dbServices, setDbServices] = React.useState([]);
const [solicitar, setSolicitar] = React.useState(null);
const [brief, setBrief] = React.useState("");
const [sent, setSent] = React.useState(false);
const uid = appUser && appUser.id;

React.useEffect(() => {
fetch("/api/servicos").then(r=>r.json()).then(d=>{ if(d.success) setDbServices(d.data); }).catch(()=>{});
}, []);

const allServices = [...CATALOG, ...dbServices.filter(db => !CATALOG.find(c => c.id === db.nome.toLowerCase().replace(/\s+/g,'-')))];
const cats = [...new Set(allServices.map(s => s.categoria))];
const catLabels = { criativo: "Criativo", gestao: "Gestão", producao: "Produção" };

const handleSolicitar = (svc) => {
if (!uid) return;
fetch("/api/servicos/solicitar", {
method: "POST", headers: {"Content-Type":"application/json"},
body: JSON.stringify({ user_id: uid, servico_id: svc.id || svc.nome, brief })
}).then(r=>r.json()).then(d => {
if (d.success) { setSent(true); setSolicitar(null); setBrief(""); setTimeout(()=>setSent(false), 3000); }
}).catch(()=>{});
};

return (
<div className="page-dash">
<div className="page-head">
<div>
<h1 className="page-title">Serviços</h1>
<p className="page-sub">Contrate profissionais ou solicite serviços criativos</p>
</div>
{sent && <span className="pill pos" style={{fontSize:13}}>Solicitação enviada!</span>}
</div>
{cats.map(cat => (
<div key={cat} style={{marginBottom:24}}>
<div style={{fontSize:".85rem",fontWeight:600,marginBottom:12,color:"rgba(255,255,255,.3)",textTransform:"uppercase",letterSpacing:".06em"}}>{catLabels[cat] || cat}</div>
<div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(280px,1fr))",gap:12}}>
{allServices.filter(s=>s.categoria===cat).map(svc => (
<div key={svc.id || svc.nome} className="card" style={{padding:20,display:"flex",flexDirection:"column",gap:10}}>
<div style={{display:"flex",alignItems:"center",gap:10}}>
<div style={{width:40,height:40,borderRadius:10,background:"var(--glass)",display:"flex",alignItems:"center",justifyContent:"center"}}>
<Icon name={svc.icone || "briefcase"} size={20} />
</div>
<div style={{flex:1}}>
<div style={{fontWeight:600,fontSize:".92rem"}}>{svc.nome}</div>
{svc.preco > 0 && <div style={{fontFamily:"Inter Tight",fontSize:".8rem",color:"#fff"}}>R$ {Number(svc.preco).toLocaleString("pt-BR")}<span style={{color:"rgba(255,255,255,.3)",fontFamily: "Inter Tight"}}>/{svc.unit || "projeto"}</span></div>}
</div>
</div>
<div style={{fontSize:".82rem",opacity:.6,lineHeight:1.5}}>{svc.desc}</div>
<button className="btn" style={{marginTop:"auto",width:"100%",background:"linear-gradient(135deg,var(--accent-dim),var(--accent))",border:"none",color:"#fff",padding:"10px 0",borderRadius:2,fontWeight:600,cursor:"pointer",letterSpacing:".05em"}} onClick={() => setSolicitar(svc)}>COMPRAR</button>
</div>
))}
</div>
</div>
))}
{solicitar && (
<div style={{position:"fixed",inset:0,background:"rgba(0,0,0,.7)",display:"flex",alignItems:"center",justifyContent:"center",zIndex:9999}} onClick={()=>setSolicitar(null)}>
<div style={{background:"#111",border:"1px solid var(--border)",borderRadius:14,padding:28,maxWidth:460,width:"90%"}} onClick={e=>e.stopPropagation()}>
<h3 style={{marginBottom:4}}>Solicitar: {solicitar.nome}</h3>
<p style={{fontSize:".82rem",opacity:.5,marginBottom:16}}>Descreva o que precisa</p>
<textarea className="inp" rows={4} placeholder="Brief, referências, prazo..." value={brief} onChange={e=>setBrief(e.target.value)} style={{marginBottom:12}} />
<div style={{display:"flex",gap:8,justifyContent:"flex-end"}}>
<button className="btn" onClick={()=>setSolicitar(null)}>Cancelar</button>
<button className="btn" style={{background:"var(--accent)",color:"#fff"}} onClick={()=>handleSolicitar(solicitar)}>ENVIAR</button>
</div>
</div>
</div>
)}
</div>
);
};

const STUDIO_TOOLS = [
{ id:"reel", nome:"Reels Maker", desc:"Crie Reels com IA — corte automático, trending audio e hooks.", icon:"film", action:"Criar Reel" },
{ id:"carousel", nome:"Carousel Builder", desc:"Monte carrosséis profissionais para Instagram feed.", icon:"layers", action:"Criar Carrossel" },
{ id:"photo", nome:"Photo Editor", desc:"Edição de foto com filtros, crop e ajustes profissionais.", icon:"image", action:"Editar Foto" },
{ id:"thumbnail", nome:"Thumbnail Maker", desc:"Thumbnails de alto CTR para YouTube e Reels.", icon:"layout", action:"Criar Thumbnail" },
{ id:"caption", nome:"Caption Generator", desc:"Gere captions e hashtags com IA para seus posts.", icon:"pencil", action:"Gerar Caption" },
{ id:"subtitle", nome:"Legendas Auto", desc:"Adicione legendas automáticas com IA nos seus vídeos.", icon:"type", action:"Gerar Legendas" },
];

const PageStudio = ({ t, igData, appUser }) => {
const [active, setActive] = React.useState(null);
const [prompt, setPrompt] = React.useState("");
const [generating, setGenerating] = React.useState(false);
const [result, setResult] = React.useState(null);
const uid = appUser && appUser.id;

const handleGenerate = () => {
if (!prompt.trim()) return;
setGenerating(true);
setResult(null);
const isCaption = ["caption","reel","carousel","thumbnail"].includes(active.id);
const isImage = ["photo"].includes(active.id);
const endpoint = isImage ? "/api/ai/image" : "/api/ai/generate";
const body = isImage
? { prompt: "[Estúdio HUB] " + prompt }
: { briefing: "[" + active.nome + "] " + prompt, tone: "Descontraído", count: 3 };
fetch(endpoint, {
method: "POST", headers: {"Content-Type":"application/json"},
body: JSON.stringify(body)
}).then(r=>r.json()).then(d => {
if (d.captions) {
const best = d.captions[0];
setResult({ caption: best.text, predicted_er: best.predicted_er });
} else if (d.image) {
setResult({ image_url: "data:image/png;base64," + d.image });
} else {
setResult(d.error ? { error: d.error } : d);
}
setGenerating(false);
}).catch(()=>{ setGenerating(false); setResult({error:"Erro ao gerar. Tente novamente."}); });
};

return (
<div className="page-dash">
<div className="page-head">
<div>
<h1 className="page-title">Estúdio</h1>
<p className="page-sub">Produza conteúdo diretamente na plataforma</p>
</div>
</div>

<div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(220px,1fr))",gap:12,marginBottom:24}}>
{STUDIO_TOOLS.map(tool => (
<div key={tool.id} className={"card" + (active && active.id === tool.id ? " active" : "")}
style={{padding:20,cursor:"pointer",border: active && active.id === tool.id ? "1px solid var(--accent)" : undefined}}
onClick={()=>{setActive(tool);setPrompt("");setResult(null);}}>
<div style={{width:44,height:44,borderRadius:12,background:active&&active.id===tool.id?"color-mix(in oklch, var(--accent) 15%, transparent)":"rgba(255,255,255,.04)",display:"flex",alignItems:"center",justifyContent:"center",marginBottom:12}}>
<Icon name={tool.icon} size={22} style={{color:active&&active.id===tool.id?"var(--accent)":"var(--muted)"}} />
</div>
<div style={{fontWeight:600,fontSize:".92rem",marginBottom:4}}>{tool.nome}</div>
<div style={{fontSize:".78rem",opacity:.5,lineHeight:1.4}}>{tool.desc}</div>
</div>
))}
</div>

{active && (
<div className="card" style={{padding:24}}>
<h3 style={{marginBottom:12}}>{active.nome}</h3>
<div style={{marginBottom:12}}>
<label style={{fontSize:".78rem",color:"rgba(255,255,255,.3)",display:"block",marginBottom:6}}>Descreva o que deseja criar</label>
<textarea className="inp" rows={4} placeholder={"Ex: Reel sobre skincare com hook viral, 15 segundos..."} value={prompt} onChange={e=>setPrompt(e.target.value)} />
</div>
<div style={{display:"flex",gap:8}}>
<button className="btn" style={{background:"linear-gradient(135deg,var(--accent-dim),var(--accent))",color:"#fff",border:"none",padding:"12px 28px",borderRadius:2,fontWeight:600,opacity:generating?.5:1,letterSpacing:".05em"}} disabled={generating} onClick={handleGenerate}>
{generating ? "Gerando..." : active.action}
</button>
</div>
{result && (
<div style={{marginTop:16,padding:16,background:"var(--glass)",borderRadius:8,border:"1px solid var(--border)"}}>
{result.error ? <p style={{color:"var(--neg)"}}>{result.error}</p> : (
<div>
{result.caption && <div style={{marginBottom:8}}><strong>Caption:</strong><br/><span style={{whiteSpace:"pre-wrap",fontSize:".88rem"}}>{result.caption}</span></div>}
{result.hashtags && <div style={{marginBottom:8}}><strong>Hashtags:</strong><br/><span style={{color:"#b8c8e0",fontSize:".85rem"}}>{result.hashtags}</span></div>}
{result.text && <div style={{whiteSpace:"pre-wrap",fontSize:".88rem"}}>{result.text}</div>}
{result.image_url && <div style={{marginTop:8}}><img src={result.image_url} alt="Generated" style={{maxWidth:"100%",borderRadius:8}} /></div>}
{!result.caption && !result.hashtags && !result.text && !result.image_url && <pre style={{fontSize:".82rem",whiteSpace:"pre-wrap"}}>{JSON.stringify(result, null, 2)}</pre>}
</div>
)}
</div>
)}
</div>
)}

{!active && (
<div className="card" style={{padding:40,textAlign:"center"}}>
<div style={{opacity:.3,marginBottom:8}}><Icon name="film" size={32} /></div>
<p style={{color:"rgba(255,255,255,.3)",fontSize:".88rem"}}>Selecione uma ferramenta para começar a produzir conteúdo</p>
</div>
)}
</div>
);
};



// ===== TICKETERA APP =====
const PageTicketeraApp = ({ t, appUser, profileSlug }) => {
  const [ingressos, setIngressos] = React.useState([]);
 const [loading, setLoading] = React.useState(true);
 const [error, setError] = React.useState(null);
 const load = () => { setLoading(true); setError(null); fetch('/api/ticketera').then(r => r.json()).then(d => { setIngressos(d.data || []); setLoading(false); }).catch(e => { setError(e.message); setLoading(false); }); };
 React.useEffect(load, []);
  const [selected, setSelected] = React.useState(null);
  const [linkData, setLinkData] = React.useState(null);
  const [loadingLink, setLoadingLink] = React.useState(false);

  const openIngresso = async (ig) => {
    setSelected(ig);
    setLoadingLink(true);
    try {
      const slug = ig.slug || ig.id;
      const r = await fetch('/api/ticketera?slug=' + encodeURIComponent(slug)).then(r => r.json());
      if (r.success) setLinkData(r.data);
    } catch(e) {}
    finally { setLoadingLink(false); }
  };

  const trackClick = async (linkId) => {
    try { await fetch('/api/ticketera', { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify({ link_id: linkId, acao: 'clique' }) }); } catch(e) {}
  };

  const trackVenda = async (linkId, qty) => {
    try {
      const r = await fetch('/api/ticketera', { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify({ link_id: linkId, acao: 'venda', quantidade: qty || 1 }) }).then(r=>r.json());
      if (r.success) { alert('Compra registrada!'); load(); setSelected(null); }
      else alert(r.error || 'Erro');
    } catch(e) { alert('Erro'); }
  };

  const fmtMoney = v => "R$ " + Number(v||0).toLocaleString("pt-BR", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
  const fmtN = v => v >= 1e6 ? (v/1e6).toFixed(1)+"M" : v >= 1e3 ? (v/1e3).toFixed(1)+"K" : String(v||0);
  const fmtDate = s => s ? new Date(s).toLocaleDateString("pt-BR") : "\u2014";

  if (loading) return <div className="page-dash" style={{padding:40,textAlign:"center",color:"var(--muted)"}}>Carregando ingressos...</div>;
  if (error) return <div className="page-dash" style={{padding:40,textAlign:"center"}}><p style={{color:"var(--neg)"}}>Erro: {error}</p><button className="btn" onClick={load}>Tentar novamente</button></div>;

  return (
    <div className="page-dash">
      <div className="page-head">
        <div>
          <h1 className="page-title">{t.ticketera}</h1>
          <p className="page-sub">Ingressos disponíveis{profileSlug ? " · /" + profileSlug : ""}</p>
        </div>
        <div className="page-actions">
          <button className="btn ghost icon" onClick={load}><Icon name="refresh" size={14} /></button>
        </div>
      </div>

      {!selected ? (
        <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(280px,1fr))",gap:16}}>
          {ingressos.length === 0 && <div style={{color:"var(--muted)",fontSize:13,padding:24}}>Nenhum ingresso disponível</div>}
          {ingressos.map(ig => {
            const disponiveis = ig.quantidade_total - ig.quantidade_vendida;
            const pct = ig.quantidade_total ? Math.round((ig.quantidade_vendida/ig.quantidade_total)*100) : 0;
            return (
              <div key={ig.id} className="card" style={{cursor:"pointer"}} onClick={() => openIngresso(ig)}>
                <div style={{marginBottom:12}}>
                  <h3 style={{fontSize:15,fontWeight:600,marginBottom:4}}>{ig.nome}</h3>
                  {ig.evento && <div style={{fontSize:12,color:"var(--muted)"}}>{ig.evento}</div>}
                  {ig.local && <div style={{fontSize:11,color:"var(--muted)"}}>{ig.local}</div>}
                  {ig.data_evento && <div style={{fontSize:11,color:"var(--accent)",fontFamily:"JetBrains Mono",marginTop:2}}>{fmtDate(ig.data_evento)}</div>}
                </div>
                {ig.descricao && <p style={{fontSize:12,color:"var(--muted)",marginBottom:12,lineHeight:1.5}}>{ig.descricao}</p>}
                <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:8}}>
                  <div style={{fontSize:20,fontWeight:700,fontFamily:"JetBrains Mono"}}>{fmtMoney(ig.preco)}</div>
                  <span className={"pill "+(disponiveis>0?"pos":"neg")}>{disponiveis>0?disponiveis+" disponíveis":"Esgotado"}</span>
                </div>
                {ig.quantidade_total > 0 && (
                  <div className="progress" style={{height:5}}><div className="bar" style={{width:pct+"%",background:pct>=90?"var(--warn)":"var(--accent)"}} /></div>
                )}
              </div>
            );
          })}
        </div>
      ) : (
        <div>
          <button className="btn ghost" style={{marginBottom:16}} onClick={()=>setSelected(null)}>
            <Icon name="chev" size={12} /> Voltar
          </button>
          <div className="card" style={{maxWidth:480}}>
            {loadingLink ? <div style={{padding:24,color:"var(--muted)",textAlign:"center"}}>Carregando...</div> : (
              linkData ? (
                <div>
                  <h2 style={{fontSize:18,fontWeight:600,marginBottom:4}}>{linkData.ingresso.nome}</h2>
                  {linkData.ingresso.evento && <div style={{fontSize:13,color:"var(--muted)",marginBottom:2}}>{linkData.ingresso.evento}</div>}
                  {linkData.ingresso.local && <div style={{fontSize:12,color:"var(--muted)",marginBottom:2}}>{linkData.ingresso.local}</div>}
                  {linkData.ingresso.data_evento && <div style={{fontSize:12,color:"var(--accent)",fontFamily:"JetBrains Mono",marginBottom:12}}>{fmtDate(linkData.ingresso.data_evento)}</div>}
                  {linkData.ingresso.descricao && <p style={{fontSize:13,lineHeight:1.6,marginBottom:16}}>{linkData.ingresso.descricao}</p>}
                  <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:16}}>
                    <div style={{fontSize:24,fontWeight:700,fontFamily:"JetBrains Mono"}}>{fmtMoney(linkData.ingresso.preco)}</div>
                    <span className={"pill "+(linkData.ingresso.disponiveis>0?"pos":"neg")}>{linkData.ingresso.disponiveis>0?linkData.ingresso.disponiveis+" disponíveis":"Esgotado"}</span>
                  </div>
                  {linkData.ingresso.disponiveis > 0 && (
                    <button className="btn primary" style={{width:"100%",padding:"12px 0"}} onClick={() => { trackClick(linkData.link?.id); if(confirm('Confirmar compra de 1 ingresso?')) trackVenda(linkData.link?.id, 1); }}>
                      Comprar ingresso
                    </button>
                  )}
                  {linkData.link && <div style={{marginTop:12,fontSize:10,color:"var(--muted)",textAlign:"center"}}>Canal: {linkData.link.canal}</div>}
                </div>
              ) : <div style={{padding:24,color:"var(--muted)",textAlign:"center"}}>Link não encontrado</div>
            )}
          </div>
        </div>
      )}
    </div>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<App />);