/* ============================================================
   CRUIG — Admin panel
   ============================================================ */
function planFromKey(key){
  if(!key) return null;
  const [role, id] = key.split(':');
  const list = CRUIG.PLANS[role];
  return list && list.find(p=>p.id===id);
}
function planLabel(key){
  const p = planFromKey(key);
  if(!p) return '—';
  const role = key.split(':')[0]==='creator' ? 'Criador' : 'Empresa';
  return `${role} ${p.name}`;
}
function relativeDate(ts){
  if(!ts) return '—';
  const days = Math.floor((Date.now()-ts)/86400000);
  if(days<=0) return 'hoje';
  if(days===1) return 'ontem';
  return days+' dias';
}
const SUB_STATUS_LABEL = {active:'Ativo', trialing:'Trial', past_due:'Inadimplente', canceled:'Cancelado'};
function mapUserRow(u){
  const type = u.role==='creator'?'Criador': u.role==='company'?'Empresa':'Admin';
  const planInfo = planFromKey(u.plan);
  return {
    id: u.id, name: u.name, type, role: u.role,
    plan: planInfo ? planInfo.name : '—',
    status: SUB_STATUS_LABEL[u.sub_status] || 'Sem plano',
    mrr: (planInfo && u.sub_status==='active') ? planInfo.price : 0,
    date: relativeDate(u.created_at),
  };
}
function computeRevenue(subsByPlan){
  let creator=0, company=0;
  (subsByPlan||[]).forEach(s=>{
    const p = planFromKey(s.plan);
    if(!p) return;
    const v = p.price * s.n;
    if(s.plan.startsWith('creator')) creator += v; else company += v;
  });
  return { mrr: creator+company, creator, company };
}

function AdminPanel({go, showToast}){
  const [view, setView] = useState('overview');
  const [loading, setLoading] = useState(true);
  const [stats, setStats] = useState(null);
  const [crm, setCrm] = useState(null);

  useEffect(()=>{
    Promise.all([CruigAPI.get('/admin/stats'), CruigAPI.get('/admin/crm')])
      .then(([s,c])=>{ setStats(s); setCrm(c); })
      .catch(()=> showToast('Não foi possível carregar os dados administrativos.'))
      .finally(()=> setLoading(false));
  },[]);

  if(loading || !stats || !crm){
    return <div style={{minHeight:'100vh', display:'flex', alignItems:'center', justifyContent:'center'}}><span className="spin" style={{width:30,height:30,border:'3px solid #ddd',borderTopColor:'var(--lime-700)',borderRadius:'50%',display:'inline-block'}}></span></div>;
  }

  const recentUsers = (stats.recentUsers||[]).map(mapUserRow);

  const nav = [
    {id:'overview', label:'Dashboard', icon:'chart'},
    {id:'users', label:'Usuários', icon:'users', badge: stats.users},
    {id:'subs', label:'Assinaturas', icon:'cash'},
    {id:'campaigns', label:'Campanhas', icon:'flag'},
    {section:'Sistema'},
    {id:'crm', label:'CRM', icon:'grid'},
    {id:'settings', label:'Configurações', icon:'gear'},
  ];
  const titles = {
    overview:['Painel administrativo','Visão geral em tempo real'],
    users:['Usuários','Gestão de criadores, empresas e admins'],
    subs:['Assinaturas','Planos e assinaturas ativas'],
    campaigns:['Campanhas','Moderação e acompanhamento'],
    crm:['CRM','Funil e relacionamento'],
    settings:['Configurações','Ajustes da plataforma'],
  };
  const notifItems = [
    {icon:'users', text:`${stats.users} usuários cadastrados na plataforma`, time:'agora'},
    {icon:'flag', text:`${stats.campaignsActive} campanhas ativas no momento`, time:'agora'},
    ...(crm.tasks||[]).map(t=>({icon:'bolt', text:t.text, time:t.when})),
  ];
  const topRight = (
    <>
      <span className="badge badge-danger"><Icon name="lock" size={12}/>Acesso /admin</span>
      <NotificationsBell items={notifItems}/>
    </>
  );
  return (
    <DashShell nav={nav} active={view} onNav={setView}
      user={{name:'Admin Cruig', role:'Administrador', color:2}}
      title={titles[view][0]} subtitle={titles[view][1]} topRight={topRight}>
      {view==='overview' && <AdminHome stats={stats} recentUsers={recentUsers}/>}
      {view==='users' && <AdminUsers showToast={showToast}/>}
      {view==='subs' && <AdminSubs stats={stats}/>}
      {view==='campaigns' && <AdminCampaigns stats={stats}/>}
      {view==='crm' && <AdminCRM crm={crm} recentUsers={recentUsers} showToast={showToast}/>}
      {view==='settings' && <AdminSettingsView showToast={showToast}/>}
    </DashShell>
  );
}

function AdminHome({stats, recentUsers}){
  const { mrr, creator, company } = computeRevenue(stats.subsByPlan);
  const revenueSplit = mrr>0
    ? [{label:'Criadores', value: creator, color:'#94C700'},{label:'Empresas', value: company, color:'#FFA732'}]
    : [{label:'Sem assinaturas', value:1, color:'var(--beige-deep)'}];
  return (
    <div style={{display:'flex', flexDirection:'column', gap:22}}>
      <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:16}} className="grid-4">
        <Stat label="Usuários totais" value={stats.users.toLocaleString('pt-BR')} icon="users"/>
        <Stat label="Criadores" value={stats.creators.toLocaleString('pt-BR')} icon="bolt" accent="var(--lime)"/>
        <Stat label="Empresas" value={stats.companies.toLocaleString('pt-BR')} icon="flag" accent="var(--orange)"/>
        <Stat label="Assinaturas ativas" value={stats.activeSubs.toLocaleString('pt-BR')} icon="cash"/>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:16}} className="grid-4">
        <Stat label="Campanhas ativas" value={stats.campaignsActive} icon="flag" accent="var(--lime)"/>
        <Stat label="Campanhas finalizadas" value={stats.campaignsFinished} icon="check" accent="var(--orange)"/>
        <Stat label="Conexões com redes" value={stats.connections.toLocaleString('pt-BR')} icon="link"/>
        <Stat label="Candidaturas totais" value={stats.totalApplicants.toLocaleString('pt-BR')} icon="users" accent="var(--orange)"/>
      </div>

      <div style={{display:'grid', gridTemplateColumns:'1.7fr 1fr', gap:20}} className="grid-2-1">
        <div className="card card-pad">
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:16}}>
            <h3 style={{fontSize:18}}>Cadastros recentes</h3>
            <span className="badge badge-lime" style={{display:'inline-flex'}}><span style={{width:7,height:7,borderRadius:'50%',background:'var(--lime-700)'}}></span>Ao vivo</span>
          </div>
          <UsersTable rows={recentUsers}/>
          {recentUsers.length===0 && <p className="faint" style={{fontSize:14, padding:'12px 2px'}}>Nenhum usuário cadastrado ainda.</p>}
        </div>
        <div className="card card-pad">
          <h3 style={{fontSize:18, marginBottom:16}}>Receita por origem</h3>
          <div style={{display:'flex', justifyContent:'center', position:'relative', marginBottom:18}}>
            <Donut segments={revenueSplit}/>
            <div style={{position:'absolute', top:'50%', left:'50%', transform:'translate(-50%,-50%)', textAlign:'center'}}>
              <div className="mono-num" style={{fontSize:20, fontWeight:700, color:'var(--green-dark)'}}>{CRUIG.brl(mrr)}</div>
              <div className="faint" style={{fontSize:11}}>MRR estimado</div>
            </div>
          </div>
          <div style={{display:'flex', flexDirection:'column', gap:9}}>
            {revenueSplit.map(s=>(
              <div key={s.label} style={{display:'flex', alignItems:'center', gap:10, fontSize:13.5}}>
                <span style={{width:11,height:11,borderRadius:3,background:s.color}}></span>
                <span style={{flex:1, color:'var(--ink-soft)'}}>{s.label}</span>
                <span className="mono-num" style={{fontWeight:700, color:'var(--green-dark)'}}>{mrr>0?CRUIG.brl(s.value):'—'}</span>
              </div>
            ))}
          </div>
          {stats.trialing>0 && <p className="faint" style={{fontSize:12.5, marginTop:12}}>{stats.trialing} assinatura(s) em trial não contabilizadas.</p>}
        </div>
      </div>
    </div>
  );
}

function statusBadge(s){
  const map = {'Ativo':'badge-lime','Trial':'badge-orange','Inadimplente':'badge-danger','Cancelado':'badge-gray','Sem plano':'badge-gray'};
  return <span className={`badge ${map[s]||'badge-gray'}`}>{s}</span>;
}

function UsersTable({rows}){
  return (
    <div style={{overflowX:'auto'}}>
      <table style={{width:'100%', borderCollapse:'collapse', minWidth:600}}>
        <thead><tr style={{textAlign:'left'}}>{['Usuário','Tipo','Plano','Status','MRR','Quando'].map(h=> <th key={h} style={{fontSize:12, fontWeight:700, color:'var(--ink-faint)', textTransform:'uppercase', letterSpacing:'.05em', padding:'0 14px 12px'}}>{h}</th>)}</tr></thead>
        <tbody>
          {rows.map((r,i)=>(
            <tr key={r.id||i} style={{borderTop:'1px solid var(--line)'}}>
              <td style={{padding:'12px 14px'}}><div style={{display:'flex', alignItems:'center', gap:11}}><Avatar name={r.name} size={34} colorIdx={i}/><span style={{fontWeight:600, fontSize:14, color:'var(--green-dark)'}}>{r.name}</span></div></td>
              <td style={{padding:'12px 14px'}}><span className={`badge ${r.type==='Criador'?'badge-lime':r.type==='Empresa'?'badge-green':'badge-gray'}`}>{r.type}</span></td>
              <td style={{padding:'12px 14px', fontSize:14}}>{r.plan}</td>
              <td style={{padding:'12px 14px'}}>{statusBadge(r.status)}</td>
              <td style={{padding:'12px 14px', fontSize:14}} className="mono-num">{r.mrr? CRUIG.brl(r.mrr):'—'}</td>
              <td style={{padding:'12px 14px', fontSize:13.5, color:'var(--ink-soft)'}}>{r.date}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function AdminUsers({showToast}){
  const [tab, setTab] = useState('Todos');
  const [q, setQ] = useState('');
  const [loading, setLoading] = useState(true);
  const [users, setUsers] = useState([]);

  useEffect(()=>{
    const role = tab==='Criadores'?'creator': tab==='Empresas'?'company': tab==='Admins'?'admin': '';
    setLoading(true);
    CruigAPI.get(`/admin/users?limit=200${role?`&role=${role}`:''}`)
      .then(r=> setUsers((r.users||[]).map(mapUserRow)))
      .catch(()=> showToast('Erro ao carregar usuários.'))
      .finally(()=> setLoading(false));
  },[tab]);

  const rows = users.filter(r=> r.name.toLowerCase().includes(q.toLowerCase()));
  return (
    <div className="card card-pad">
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:18, flexWrap:'wrap', gap:12}}>
        <div style={{display:'flex', gap:6, background:'var(--beige-deep)', borderRadius:'var(--r-pill)', padding:5}}>
          {['Todos','Criadores','Empresas','Admins'].map(t=>(
            <button key={t} onClick={()=>setTab(t)} className="btn btn-sm" style={{borderRadius:'var(--r-pill)', background: tab===t?'#fff':'transparent', color: tab===t?'var(--green-dark)':'var(--ink-soft)', boxShadow: tab===t?'var(--sh-sm)':'none'}}>{t}</button>
          ))}
        </div>
        <div style={{position:'relative', minWidth:220}}>
          <span style={{position:'absolute', left:13, top:'50%', transform:'translateY(-50%)', color:'var(--ink-faint)'}}><Icon name="search" size={16}/></span>
          <input className="input" style={{paddingLeft:38}} placeholder="Buscar usuário…" value={q} onChange={e=>setQ(e.target.value)}/>
        </div>
      </div>
      {loading
        ? <div style={{textAlign:'center', padding:'30px 0'}}><span className="spin" style={{width:24,height:24,border:'3px solid #ddd',borderTopColor:'var(--lime-700)',borderRadius:'50%',display:'inline-block'}}></span></div>
        : <UsersTable rows={rows}/>}
      {!loading && rows.length===0 && <div style={{textAlign:'center', padding:'30px 0'}}><p className="faint" style={{fontSize:14}}>Nenhum usuário encontrado.</p></div>}
    </div>
  );
}

function AdminSubs({stats}){
  const { mrr } = computeRevenue(stats.subsByPlan);
  const groups = (stats.subsByPlan||[]).map(s=>{
    const p = planFromKey(s.plan);
    return { key:s.plan, label: planLabel(s.plan), n:s.n, price: p?p.price:0, total: (p?p.price:0)*s.n, color: s.plan.startsWith('creator')?'var(--lime)':'var(--orange)' };
  }).sort((a,b)=>b.total-a.total);
  const maxN = Math.max(1, ...groups.map(g=>g.n));
  return (
    <div style={{display:'flex', flexDirection:'column', gap:20}}>
      <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:16}} className="grid-3">
        <Stat label="MRR estimado" value={CRUIG.brl(mrr)} icon="cash"/>
        <Stat label="Assinaturas ativas" value={stats.activeSubs.toLocaleString('pt-BR')} icon="bolt" accent="var(--orange)"/>
        <Stat label="Em trial" value={stats.trialing.toLocaleString('pt-BR')} icon="users"/>
      </div>
      <div className="card card-pad">
        <h3 style={{fontSize:18, marginBottom:18}}>Distribuição por plano</h3>
        {groups.length===0 && <p className="faint" style={{fontSize:14}}>Nenhuma assinatura ativa ainda.</p>}
        <div style={{display:'flex', flexDirection:'column', gap:14}}>
          {groups.map((p,i)=>(
            <div key={i} style={{display:'flex', alignItems:'center', gap:14}}>
              <span style={{width:170, fontSize:14, fontWeight:600, color:'var(--green-dark)', flexShrink:0}}>{p.label}</span>
              <div style={{flex:1, height:26, background:'var(--beige-deep)', borderRadius:8, overflow:'hidden'}}>
                <div style={{height:'100%', width:`${p.n/maxN*100}%`, background:p.color, borderRadius:8, display:'flex', alignItems:'center', justifyContent:'flex-end', paddingRight:10}}>
                  <span style={{fontSize:12, fontWeight:700, color:'var(--green-dark)'}}>{p.n}</span>
                </div>
              </div>
              <span className="mono-num" style={{width:100, textAlign:'right', fontSize:13.5, fontWeight:700, color:'var(--green-dark)', flexShrink:0}}>{CRUIG.brl(p.total)}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function AdminCampaigns({stats}){
  const [loading, setLoading] = useState(true);
  const [campaigns, setCampaigns] = useState([]);

  useEffect(()=>{
    CruigAPI.get('/admin/campaigns')
      .then(r=> setCampaigns(r.campaigns || []))
      .finally(()=> setLoading(false));
  },[]);

  const totalApplicants = campaigns.reduce((s,k)=>s+(k.applicants||0),0);
  const totalBudget = campaigns.filter(k=>k.status==='Ativa').reduce((s,k)=>s+(k.budgetMax||k.budgetMin||0),0);

  return (
    <div style={{display:'flex', flexDirection:'column', gap:20}}>
      <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:16}} className="grid-4">
        <Stat label="Campanhas ativas" value={stats.campaignsActive} icon="flag"/>
        <Stat label="Campanhas finalizadas" value={stats.campaignsFinished} icon="check" accent="var(--orange)"/>
        <Stat label="Candidatos totais" value={totalApplicants.toLocaleString('pt-BR')} icon="users"/>
        <Stat label="Orçamento ativo (máx.)" value={CRUIG.brl(totalBudget)} icon="cash" accent="var(--lime)"/>
      </div>

      <div className="card card-pad">
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:16, flexWrap:'wrap', gap:10}}>
          <h3 style={{fontSize:18}}>Todas as campanhas</h3>
          <span className="faint" style={{fontSize:13}}>{campaigns.length} exibidas · {totalApplicants} candidatos</span>
        </div>
        {loading
          ? <div style={{textAlign:'center', padding:'30px 0'}}><span className="spin" style={{width:24,height:24,border:'3px solid #ddd',borderTopColor:'var(--lime-700)',borderRadius:'50%',display:'inline-block'}}></span></div>
          : (
          <div style={{overflowX:'auto'}}>
            <table style={{width:'100%', borderCollapse:'collapse', minWidth:680}}>
              <thead><tr style={{textAlign:'left'}}>{['Campanha','Empresa','Nichos','Candidatos','Orçamento','Status'].map(h=> <th key={h} style={{fontSize:12, fontWeight:700, color:'var(--ink-faint)', textTransform:'uppercase', letterSpacing:'.05em', padding:'0 14px 12px'}}>{h}</th>)}</tr></thead>
              <tbody>
                {campaigns.map(k=>(
                  <tr key={k.id} style={{borderTop:'1px solid var(--line)'}}>
                    <td style={{padding:'13px 14px', fontWeight:600, fontSize:14, color:'var(--green-dark)'}}>{k.title}</td>
                    <td style={{padding:'13px 14px', fontSize:14}}>{k.brand}</td>
                    <td style={{padding:'13px 14px'}}><div style={{display:'flex', gap:5}}>{k.niches.slice(0,2).map(n=> <NicheChip key={n} label={n} sm static_/>)}</div></td>
                    <td style={{padding:'13px 14px', fontSize:14}} className="mono-num">{k.applicants}</td>
                    <td style={{padding:'13px 14px', fontSize:14}} className="mono-num">{k.budgetMin||k.budgetMax ? `${k.budgetMin?CRUIG.brl(k.budgetMin):'—'}–${k.budgetMax?CRUIG.brl(k.budgetMax):'—'}` : '—'}</td>
                    <td style={{padding:'13px 14px'}}><span className={`badge ${k.status==='Ativa'?'badge-lime':'badge-gray'}`}>{k.status}</span></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
        {!loading && campaigns.length===0 && <p className="faint" style={{fontSize:14, padding:'12px 2px'}}>Nenhuma campanha criada ainda.</p>}
      </div>
    </div>
  );
}

function AdminCRM({crm, recentUsers, showToast}){
  const [detail, setDetail] = useState(null);
  const [chat, setChat] = useState(null);
  const funnelColors = ['#003900','#0a4f10','#5b8c1f','#94C700'];
  return (
    <div style={{display:'flex', flexDirection:'column', gap:20}}>
      <div style={{display:'grid', gridTemplateColumns:'1.3fr 1fr', gap:20, alignItems:'start'}} className="grid-2-1">
        <div className="card card-pad">
          <h3 style={{fontSize:18, marginBottom:18}}>Funil de conversão</h3>
          <div style={{display:'flex', flexDirection:'column', gap:10}}>
            {crm.funnel.map((f,i)=>(
              <div key={i}>
                <div style={{display:'flex', justifyContent:'space-between', marginBottom:5}}>
                  <span style={{fontSize:14, fontWeight:600, color:'var(--green-dark)'}}>{f.label}</span>
                  <span className="mono-num faint" style={{fontSize:13}}>{f.value.toLocaleString('pt-BR')} · {f.pct}%</span>
                </div>
                <div style={{height:30, background:'var(--beige-deep)', borderRadius:8, overflow:'hidden'}}>
                  <div style={{height:'100%', width:`${Math.max(f.pct,2)}%`, background:funnelColors[i % funnelColors.length], borderRadius:8}}></div>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div className="card card-pad">
          <h3 style={{fontSize:18, marginBottom:16}}>Tarefas de relacionamento</h3>
          <div style={{display:'flex', flexDirection:'column', gap:12}}>
            {crm.tasks.map((t,i)=>(
              <div key={i} style={{display:'flex', alignItems:'center', gap:12, padding:'12px 14px', borderRadius:12, border:'1px solid var(--line)'}}>
                <span style={{width:10,height:10,borderRadius:'50%',background:'var(--orange)',flexShrink:0}}></span>
                <span style={{flex:1, fontSize:14, fontWeight:600, color:'var(--green-dark)'}}>{t.text}</span>
                <span className="badge badge-gray">{t.when}</span>
              </div>
            ))}
            {crm.tasks.length===0 && <p className="faint" style={{fontSize:14}}>Nenhuma tarefa pendente. Tudo em ordem!</p>}
          </div>
        </div>
      </div>

      {/* Gestão de usuários — analisar + conversar */}
      <div className="card card-pad">
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:16, flexWrap:'wrap', gap:10}}>
          <h3 style={{fontSize:18}}>Gestão de usuários</h3>
          <span className="faint" style={{fontSize:13}}>Analise o perfil completo ou fale direto com o usuário</span>
        </div>
        <div style={{overflowX:'auto'}}>
          <table style={{width:'100%', borderCollapse:'collapse', minWidth:680}}>
            <thead><tr style={{textAlign:'left'}}>{['Usuário','Tipo','Plano','Status','MRR','Ações'].map(h=> <th key={h} style={{fontSize:12, fontWeight:700, color:'var(--ink-faint)', textTransform:'uppercase', letterSpacing:'.05em', padding:'0 14px 12px'}}>{h}</th>)}</tr></thead>
            <tbody>
              {recentUsers.map((u,i)=>(
                <tr key={u.id||i} style={{borderTop:'1px solid var(--line)'}}>
                  <td style={{padding:'12px 14px'}}><div style={{display:'flex', alignItems:'center', gap:11}}><Avatar name={u.name} size={34} colorIdx={i}/><span style={{fontWeight:600, fontSize:14, color:'var(--green-dark)'}}>{u.name}</span></div></td>
                  <td style={{padding:'12px 14px'}}><span className={`badge ${u.type==='Criador'?'badge-lime':u.type==='Empresa'?'badge-green':'badge-gray'}`}>{u.type}</span></td>
                  <td style={{padding:'12px 14px', fontSize:14}}>{u.plan}</td>
                  <td style={{padding:'12px 14px'}}>{statusBadge(u.status)}</td>
                  <td style={{padding:'12px 14px', fontSize:14}} className="mono-num">{u.mrr? CRUIG.brl(u.mrr):'—'}</td>
                  <td style={{padding:'12px 14px'}}>
                    <div style={{display:'flex', gap:8}}>
                      <button className="btn btn-ghost btn-sm" onClick={()=>setDetail(u)}><Icon name="eye" size={15}/>Analisar</button>
                      <button className="btn btn-dark btn-sm" onClick={()=>setChat(u)}><Icon name="msg" size={15}/>Conversar</button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        {recentUsers.length===0 && <p className="faint" style={{fontSize:14, padding:'12px 2px'}}>Nenhum usuário cadastrado ainda.</p>}
      </div>

      {detail && <AdminUserDetail user={detail} onClose={()=>setDetail(null)} onChat={()=>{ setChat(detail); setDetail(null); }} showToast={showToast}/>}
      {chat && <AdminChat user={chat} onClose={()=>setChat(null)} showToast={showToast}/>}
    </div>
  );
}

/* ---------- Análise completa do usuário ---------- */
function AdminUserDetail({user, onClose, onChat, showToast}){
  const isCreator = user.role==='creator';
  const [creator, setCreator] = useState(null);
  const [loading, setLoading] = useState(isCreator);

  useEffect(()=>{
    if(!isCreator) return;
    CruigAPI.get(`/creators/${user.id}`)
      .then(r=> setCreator(r.creator))
      .catch(()=> setCreator(null))
      .finally(()=> setLoading(false));
  },[user.id]);

  return (
    <Modal open onClose={onClose} width={560} pad={false}>
      <div style={{maxHeight:'88vh', overflowY:'auto'}}>
        <div style={{height:84, background:'linear-gradient(110deg, var(--green-dark), #0a4f10)', position:'relative'}}>
          <button onClick={onClose} style={{position:'absolute', top:14, right:14, width:34, height:34, borderRadius:'50%', background:'rgba(255,255,255,.2)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center'}}><Icon name="close" size={18}/></button>
        </div>
        <div style={{padding:'0 26px 26px'}}>
          <div style={{display:'flex', alignItems:'flex-end', gap:16, marginTop:-34, marginBottom:12}}>
            <div style={{border:'4px solid #fff', borderRadius:'50%', background:'#fff'}}><Avatar name={user.name} size={76} colorIdx={2} verified={creator&&creator.verified}/></div>
            <div style={{flex:1, paddingBottom:6}}>
              <h2 style={{fontSize:22}}>{user.name}</h2>
              <div style={{display:'flex', gap:8, alignItems:'center', marginTop:4}}>
                <span className={`badge ${isCreator?'badge-lime':'badge-green'}`}>{user.type}</span>
                {statusBadge(user.status)}
              </div>
            </div>
          </div>

          {/* Conta */}
          <div className="faint" style={{fontSize:12, fontWeight:700, textTransform:'uppercase', letterSpacing:'.05em', marginBottom:9}}>Conta</div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:10, marginBottom:20}}>
            {[['Plano', user.plan],['MRR', user.mrr?CRUIG.brl(user.mrr):'—'],['Entrou', user.date]].map(([l,v],i)=>(
              <div key={i} style={{padding:'12px 14px', borderRadius:12, background:'var(--beige-deep)'}}>
                <div className="faint" style={{fontSize:11, fontWeight:700, marginBottom:4}}>{l}</div>
                <div style={{fontFamily:'var(--display)', fontWeight:700, fontSize:15, color:'var(--green-dark)'}}>{v}</div>
              </div>
            ))}
          </div>

          {loading && <div style={{textAlign:'center', padding:'20px 0'}}><span className="spin" style={{width:22,height:22,border:'3px solid #ddd',borderTopColor:'var(--lime-700)',borderRadius:'50%',display:'inline-block'}}></span></div>}

          {isCreator && !loading && creator && (<>
            <div className="faint" style={{fontSize:12, fontWeight:700, textTransform:'uppercase', letterSpacing:'.05em', marginBottom:9}}>Métricas por rede</div>
            {Object.keys(creator.platforms||{}).length>0 ? (
              <div style={{display:'flex', flexDirection:'column', gap:10, marginBottom:20}}>
                {Object.entries(creator.platforms).map(([t,v])=> <NetworkStatCard key={t} platform={t} data={v}/>)}
              </div>
            ) : <p className="faint" style={{fontSize:13.5, marginBottom:20}}>Nenhuma rede social conectada.</p>}
            <div className="faint" style={{fontSize:12, fontWeight:700, textTransform:'uppercase', letterSpacing:'.05em', marginBottom:9}}>Nichos</div>
            <div style={{display:'flex', flexWrap:'wrap', gap:7, marginBottom:8, alignItems:'center'}}>
              {creator.niches.length>0 ? creator.niches.map(n=> <NicheChip key={n} label={n} sm static_/>) : <p className="faint" style={{fontSize:13.5}}>Nenhum nicho informado.</p>}
            </div>
          </>)}

          {!isCreator && (
            <div style={{padding:'14px 16px', borderRadius:12, background:'var(--beige-deep)', marginBottom:20}}>
              <p style={{fontSize:14, color:'var(--ink-soft)'}}>{user.type==='Empresa' ? 'Empresa cadastrada na plataforma.' : 'Conta administrativa.'}</p>
            </div>
          )}

          <div style={{display:'flex', gap:12}}>
            <button className="btn btn-dark" style={{flex:1}} onClick={onChat}><Icon name="msg" size={16}/>Conversar</button>
          </div>
        </div>
      </div>
    </Modal>
  );
}

/* ---------- Chat do admin com o usuário ---------- */
function AdminChat({user, onClose, showToast}){
  const [msgs, setMsgs] = useState(loadAdminChat());
  const [text, setText] = useState('');
  const send = ()=>{
    if(!text.trim()) return;
    const next = [...msgs, {from:'admin', text:text.trim(), time:chatNow()}];
    setMsgs(next); saveAdminChat(next); setText('');
  };
  return (
    <Modal open onClose={onClose} width={460} pad={false}>
      <div style={{display:'flex', flexDirection:'column', height:'min(78vh,600px)'}}>
        <div style={{display:'flex', alignItems:'center', gap:12, padding:'16px 20px', borderBottom:'1px solid var(--line)'}}>
          <Avatar name={user.name} size={40} colorIdx={2} verified/>
          <div style={{flex:1, minWidth:0}}>
            <div style={{fontWeight:700, color:'var(--green-dark)'}}>{user.name}</div>
            <div className="faint" style={{fontSize:12}}>{user.type} · respondendo como Equipe Cruig</div>
          </div>
          <button onClick={onClose} style={{color:'var(--ink-faint)'}}><Icon name="close" size={20}/></button>
        </div>
        <div style={{flex:1, padding:18, display:'flex', flexDirection:'column', background:'var(--beige)', overflowY:'auto'}}>
          <ChatThread msgs={msgs} viewer="admin"/>
        </div>
        <div style={{padding:14, borderTop:'1px solid var(--line)', display:'flex', gap:10, background:'#fff'}}>
          <input className="input" placeholder="Responder como Equipe Cruig…" value={text} onChange={e=>setText(e.target.value)} onKeyDown={e=>e.key==='Enter'&&send()}/>
          <button className="btn btn-dark" onClick={send}><Icon name="arrow" size={18}/></button>
        </div>
      </div>
    </Modal>
  );
}

function AdminSettingsView({showToast}){
  return (
    <div style={{maxWidth:720, display:'flex', flexDirection:'column', gap:20}}>
      <div className="card card-pad">
        <h3 style={{fontSize:18, marginBottom:16}}>Preços dos planos</h3>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:14}} className="grid-2">
          <div className="field"><label>Criador Mensal</label><input className="input" defaultValue={`R$ ${CRUIG.PLANS.creator[0].price}`} readOnly/></div>
          <div className="field"><label>Empresa Mensal</label><input className="input" defaultValue={`R$ ${CRUIG.PLANS.company[0].price}`} readOnly/></div>
          <div className="field"><label>Criador Semestral</label><input className="input" defaultValue={`R$ ${CRUIG.PLANS.creator[1].price}`} readOnly/></div>
          <div className="field"><label>Empresa Semestral</label><input className="input" defaultValue={`R$ ${CRUIG.PLANS.company[1].price}`} readOnly/></div>
          <div className="field"><label>Criador Anual</label><input className="input" defaultValue={`R$ ${CRUIG.PLANS.creator[2].price}`} readOnly/></div>
          <div className="field"><label>Empresa Anual</label><input className="input" defaultValue={`R$ ${CRUIG.PLANS.company[2].price}`} readOnly/></div>
        </div>
        <p className="faint" style={{fontSize:12.5, marginTop:12}}>Preços configurados nos links de pagamento do Stripe. Para alterar, atualize os planos no painel do Stripe.</p>
      </div>
      <div className="card card-pad">
        <h3 style={{fontSize:18, marginBottom:16}}>Gestão de nichos</h3>
        <p className="faint" style={{fontSize:13.5, marginBottom:14}}>{CRUIG.NICHES.length} nichos cadastrados na plataforma.</p>
        <div style={{display:'flex', flexWrap:'wrap', gap:8}}>{CRUIG.NICHES.slice(0,14).map(n=> <NicheChip key={n} label={n} static_ sm/>)}<span className="chip chip-sm chip-static">+{CRUIG.NICHES.length-14}</span></div>
      </div>
    </div>
  );
}

window.AdminPanel = AdminPanel;