/* ============================================================
   CRUIG — Creator panel
   ============================================================ */
function campaignBudget(k){
  if(k.budgetMin && k.budgetMax) return `${CRUIG.brl(k.budgetMin)}–${CRUIG.brl(k.budgetMax)}`;
  if(k.budgetMin) return `A partir de ${CRUIG.brl(k.budgetMin)}`;
  return 'A combinar';
}

function CreatorPanel({go, showToast}){
  const [view, setView] = useState('overview');
  const [loading, setLoading] = useState(true);
  const [me, setMe] = useState(null);
  const [niches, setNiches] = useState([]);
  const [applied, setApplied] = useState([]);
  const [campaigns, setCampaigns] = useState([]);
  const [pro, setPro] = useState(false);
  const [avatarOverride, setAvatarOverride] = useState(()=>{ try{ return localStorage.getItem('cruig_avatar')||null; }catch(e){ return null; } });
  const saveAvatar = (url)=>{ setAvatarOverride(url); try{ localStorage.setItem('cruig_avatar', url); }catch(e){} showToast('Foto de perfil atualizada!'); };
  const [checkout, setCheckout] = useState(null);
  const [paywall, setPaywall] = useState(null); // reason string
  const FREE_APPLIES = 2;

  useEffect(()=>{
    Promise.all([
      CruigAPI.get('/creators/me'),
      CruigAPI.get('/campaigns'),
    ]).then(([meRes, campRes])=>{
      const platforms = {};
      (meRes.socialAccounts||[]).forEach(s=>{
        platforms[s.platform] = { followers: s.followers||0, engagement: s.engagement||0, audience: s.audience||'', views30d: s.reach||0 };
      });
      setMe({ ...meRes.creator, platforms });
      setNiches(meRes.creator.niches || []);
      setApplied(meRes.appliedCampaigns || []);
      setCampaigns(campRes.campaigns || []);
    }).catch(()=> showToast('Não foi possível carregar seus dados.')).finally(()=> setLoading(false));
  },[]);

  const avatar = avatarOverride || (me && me.avatarUrl) || null;
  const openCheckout = (planId='s')=> setCheckout(planId);

  const apply = async (id)=>{
    if(applied.includes(id)) return;
    if(!pro && applied.length>=FREE_APPLIES){ setPaywall('Você usou suas 2 inscrições gratuitas. Assine para se inscrever em campanhas ilimitadas.'); return; }
    try{
      await CruigAPI.post(`/campaigns/${id}/apply`);
      setApplied(a=>[...a, id]);
      setCampaigns(cs=> cs.map(c=> c.id===id ? {...c, applicants:(c.applicants||0)+1} : c));
      showToast('Inscrição enviada! A empresa foi notificada.');
    }catch(e){
      showToast(e.message || 'Não foi possível se inscrever.');
    }
  };

  if(loading || !me){
    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 nav = [
    {id:'overview', label:'Visão geral', icon:'grid'},
    {id:'profile', label:'Meu perfil', icon:'users'},
    {id:'campaigns', label:'Campanhas', icon:'flag', badge: campaigns.length},
    {id:'messages', label:'Mensagens', icon:'msg', badge:2},
    {section:'Crescimento'},
    {id:'affiliates', label:'Afiliados', icon:'link'},
    {id:'reviews', label:'Avaliações', icon:'star'},
    {section:'Conta'},
    {id:'plan', label:'Plano', icon:'cash', lock:!pro},
    {id:'settings', label:'Configurações', icon:'gear'},
  ];

  const firstName = (me.name||'Criador').split(' ')[0];
  const titles = {
    overview:[`Olá, ${firstName} 👋`,'Seu desempenho e oportunidades de hoje'],
    profile:['Meu perfil','É assim que as empresas te veem'],
    campaigns:['Campanhas','Encontre marcas que combinam com você'],
    messages:['Mensagens','Converse com as empresas'],
    affiliates:['Programa de afiliados','Ganhe R$ 30 por indicação ativa'],
    reviews:['Avaliações & favoritos','O que as marcas dizem sobre você'],
    plan:['Plano & assinatura','Gerencie sua assinatura'],
    settings:['Configurações','Dados, redes e preferências'],
  };

  const topRight = (
    <>
      <NotificationsBell/>
      {!pro && <button className="btn btn-lime btn-sm" onClick={()=>openCheckout('s')}><Icon name="bolt" size={15} fill/>Assinar</button>}
    </>
  );

  const updateMe = (patch)=> setMe(m=>({...m, ...patch}));

  return (
    <>
    <DashShell nav={nav} active={view} onNav={setView}
      user={{name:me.name, role:'Criador de conteúdo', color:0, verified:true, src:avatar, planLabel: pro?'Plano Anual':'Grátis · 2 inscrições', pro, onUpgrade:()=>openCheckout('s')}}
      title={titles[view][0]} subtitle={titles[view][1]} topRight={topRight}>
      {view==='overview' && <CreatorHome me={me} niches={niches} avatar={avatar} applied={applied} campaigns={campaigns} pro={pro} freeLeft={Math.max(0,FREE_APPLIES-applied.length)} go={setView} onUpgrade={()=>openCheckout('s')}/>}
      {view==='profile' && <CreatorProfile me={me} niches={niches} onEdit={()=>setView('settings')} avatar={avatar} setAvatar={saveAvatar}/>}
      {view==='campaigns' && <CreatorCampaigns campaigns={campaigns} applied={applied} apply={apply} pro={pro} freeLeft={Math.max(0,FREE_APPLIES-applied.length)} myNiches={niches}/>}
      {view==='messages' && <CreatorMessages pro={pro} onUpgrade={()=>openCheckout('s')}/>}
      {view==='affiliates' && <Affiliates showToast={showToast}/>}
      {view==='reviews' && <CreatorReviews me={me}/>}
      {view==='plan' && <PlanView role="creator" pro={pro} onUpgrade={openCheckout} showToast={showToast}/>}
      {view==='settings' && <CreatorSettings me={me} updateMe={updateMe} niches={niches} setNiches={setNiches} showToast={showToast} avatar={avatar} setAvatar={saveAvatar}/>}
    </DashShell>

    {paywall && <Paywall reason={paywall} onClose={()=>setPaywall(null)} onUpgrade={()=>{setPaywall(null); openCheckout('s');}}/>}
    {checkout && <Checkout role="creator" planId={checkout} onClose={()=>setCheckout(null)} onDone={()=>{setCheckout(null); setPro(true); showToast('Assinatura ativada! Tudo liberado.');}}/>}
    </>
  );
}

/* ---------- Overview ---------- */
function CreatorHome({me, niches, avatar, applied, campaigns, pro, freeLeft, go, onUpgrade}){
  const checklist = [
    ['Foto e bio', !!(avatar && me.bio)],
    ['Nichos selecionados', niches.length>0],
    ['Redes conectadas', Object.keys(me.platforms||{}).length>0],
    ['Mídia kit anexado', false],
  ];
  const pct = Math.round(checklist.filter(([,ok])=>ok).length / checklist.length * 100);
  const recommended = campaigns.filter(k=> niches.length===0 || k.niches.some(n=>niches.includes(n))).slice(0,3);

  return (
    <div style={{display:'flex', flexDirection:'column', gap:22}}>
      <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:16}} className="grid-4">
        <Stat label="Visualizações do perfil" value="0" icon="eye"/>
        <Stat label="Inscrições ativas" value={applied.length} icon="flag" accent="var(--orange)"/>
        <Stat label="Saldo de afiliados" value="R$ 0" icon="cash"/>
        <Stat label="Avaliação média" value={me.reviews>0 ? me.rating : '—'} icon="star" accent="var(--orange)"/>
      </div>

      {!pro && (
        <div className="card" style={{padding:22, display:'flex', alignItems:'center', gap:18, background:'linear-gradient(100deg,#fff, #f6fae5)', border:'1.5px solid var(--lime)'}}>
          <div style={{width:50,height:50,borderRadius:14,background:'var(--lime)',color:'var(--green-dark)',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}><Icon name="bolt" size={26} fill/></div>
          <div style={{flex:1, minWidth:0}}>
            <h3 style={{fontSize:18}}>Você tem {freeLeft} inscrição{freeLeft===1?'':'ões'} gratuita{freeLeft===1?'':'s'} restante{freeLeft===1?'':'s'}</h3>
            <p className="muted" style={{fontSize:14, marginTop:3}}>Assine para se inscrever em campanhas ilimitadas e destacar seu perfil.</p>
          </div>
          <button className="btn btn-lime" onClick={onUpgrade}>Ver planos</button>
        </div>
      )}

      <div style={{display:'grid', gridTemplateColumns:'1.6fr 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}}>Campanhas recomendadas pra você</h3>
            <button className="btn btn-ghost btn-sm" onClick={()=>go('campaigns')}>Ver todas</button>
          </div>
          <div style={{display:'flex', flexDirection:'column', gap:12}}>
            {recommended.map(k=>(
              <div key={k.id} style={{display:'flex', alignItems:'center', gap:14, padding:'13px 14px', borderRadius:14, border:'1px solid var(--line)', background:'#fff'}}>
                <div style={{width:42,height:42,borderRadius:11,background:'var(--beige-deep)',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0,fontFamily:'var(--display)',fontWeight:700,color:'var(--green-dark)'}}>{(k.brand||'?')[0]}</div>
                <div style={{flex:1, minWidth:0}}>
                  <div style={{fontWeight:700, fontSize:14.5, color:'var(--green-dark)'}}>{k.title}</div>
                  <div className="faint" style={{fontSize:12.5}}>{k.brand} · {campaignBudget(k)}</div>
                </div>
                <div style={{display:'flex', gap:6}}>
                  {k.niches.slice(0,2).map(n=> <span key={n} className="chip chip-sm chip-static">{n}</span>)}
                </div>
              </div>
            ))}
            {recommended.length===0 && <p className="faint" style={{fontSize:14, padding:'8px 2px'}}>Nenhuma campanha disponível para seus nichos ainda.</p>}
          </div>
        </div>
        <div className="card card-pad">
          <h3 style={{fontSize:18, marginBottom:16}}>Perfil completo</h3>
          <Ring pct={pct}/>
          <div style={{display:'flex', flexDirection:'column', gap:10, marginTop:18}}>
            {checklist.map(([l,ok],i)=>(
              <div key={i} style={{display:'flex', alignItems:'center', gap:10, fontSize:13.5, color: ok?'var(--ink)':'var(--ink-faint)'}}>
                <span style={{width:20,height:20,borderRadius:'50%',flexShrink:0,display:'flex',alignItems:'center',justifyContent:'center', background: ok?'var(--lime)':'#ededdf', color: ok?'var(--green-dark)':'var(--ink-faint)'}}><Icon name={ok?'check':'plus'} size={12} sw={3}/></span>
                {l}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function Ring({pct}){
  const r=46, C=2*Math.PI*r;
  return (
    <div style={{position:'relative', width:132, height:132, margin:'0 auto'}}>
      <svg width="132" height="132" style={{transform:'rotate(-90deg)'}}>
        <circle cx="66" cy="66" r={r} fill="none" stroke="var(--beige-deep)" strokeWidth="13"/>
        <circle cx="66" cy="66" r={r} fill="none" stroke="var(--lime)" strokeWidth="13" strokeLinecap="round" strokeDasharray={`${C*pct/100} ${C}`}/>
      </svg>
      <div style={{position:'absolute', inset:0, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center'}}>
        <span className="mono-num" style={{fontSize:30, fontWeight:700, color:'var(--green-dark)'}}>{pct}%</span>
        <span className="faint" style={{fontSize:12}}>completo</span>
      </div>
    </div>
  );
}

/* ---------- Profile (public view) ---------- */
function PlatformRow({type, value}){
  return (
    <div style={{display:'flex', alignItems:'center', gap:10, padding:'12px 14px', borderRadius:12, border:'1px solid var(--line)', background:'#fff', flex:1, minWidth:150}}>
      <PlatIcon type={type} size={22}/>
      <div>
        <div className="mono-num" style={{fontWeight:700, fontSize:17, color:'var(--green-dark)'}}>{CRUIG.fmt(value)}</div>
        <div className="faint" style={{fontSize:11.5, textTransform:'capitalize'}}>{type}</div>
      </div>
    </div>
  );
}

function CreatorProfile({me, niches, onEdit, avatar, setAvatar}){
  const total = CRUIG.totalFollowers(me);
  const platformEntries = Object.entries(me.platforms||{});
  const avgEngagement = platformEntries.length
    ? +(platformEntries.reduce((s,[,v])=>s+(v.engagement||0),0) / platformEntries.length).toFixed(1)
    : 0;
  const priceLabel = (me.priceMin || me.priceMax)
    ? `${me.priceMin?CRUIG.brl(me.priceMin):'—'}–${me.priceMax?CRUIG.brl(me.priceMax):'—'}`
    : 'A definir';
  return (
    <div style={{maxWidth:880}}>
      <div className="card" style={{overflow:'hidden'}}>
        <div style={{height:120, background:'linear-gradient(110deg, var(--green-dark), #0a4f10)', position:'relative'}}>
          <div style={{position:'absolute', top:14, right:16}}>
            <span className="badge" style={{background:'rgba(255,255,255,.16)', color:'#fff'}}><Icon name="verified" size={13} fill/> Perfil Cruig</span>
          </div>
        </div>
        <div style={{padding:'0 26px 26px'}}>
          <div style={{display:'flex', alignItems:'flex-end', gap:18, marginTop:-40, flexWrap:'wrap'}}>
            <div style={{border:'4px solid #fff', borderRadius:'50%', background:'#fff'}}><AvatarUpload name={me.name} size={92} colorIdx={0} verified src={avatar} onChange={setAvatar}/></div>
            <div style={{flex:1, minWidth:200, paddingBottom:6}}>
              <div style={{display:'flex', alignItems:'center', gap:10}}>
                <h2 style={{fontSize:25}}>{me.name}</h2>
              </div>
              <div className="faint" style={{fontSize:14, display:'flex', gap:12, alignItems:'center', flexWrap:'wrap', marginTop:4}}>
                {me.handle && <span>@{me.handle}</span>}
                {me.city && <span style={{display:'flex',alignItems:'center',gap:4}}><Icon name="map" size={14}/>{me.city}</span>}
                {me.reviews>0 && <span style={{display:'flex',alignItems:'center',gap:4, color:'var(--orange-600)'}}><Icon name="star" size={14} fill/>{me.rating} ({me.reviews})</span>}
              </div>
            </div>
            <button className="btn btn-ghost btn-sm" onClick={onEdit}><Icon name="edit" size={15}/>Editar perfil</button>
          </div>
          <p style={{fontSize:15, lineHeight:1.6, color:'var(--ink-soft)', margin:'18px 0'}}>{me.bio || 'Adicione uma bio para que as empresas conheçam você melhor.'}</p>

          <h4 style={{fontSize:13, fontFamily:'var(--body)', fontWeight:700, color:'var(--green-dark)', marginBottom:11, textTransform:'uppercase', letterSpacing:'.06em', display:'flex', alignItems:'center', gap:7}}><Icon name="chart" size={15}/>Desempenho por rede</h4>
          {platformEntries.length>0 ? (
            <div style={{display:'flex', flexDirection:'column', gap:10, marginBottom:22}}>
              {platformEntries.map(([t,v])=> <NetworkStatCard key={t} platform={t} data={v}/>)}
            </div>
          ) : (
            <div className="card card-pad" style={{marginBottom:22, textAlign:'center'}}>
              <p className="faint" style={{fontSize:13.5}}>Conecte suas redes sociais em Configurações para exibir métricas reais aqui.</p>
            </div>
          )}

          <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:14, marginBottom:24}} className="grid-3">
            {[['Alcance total', CRUIG.fmt(total),'var(--green-dark)'],['Engaj. médio', avgEngagement+'%','var(--lime)'],['Cachê médio', priceLabel,'var(--orange-600)']].map(([l,v,c],i)=>(
              <div key={i} style={{padding:'14px 16px', borderRadius:14, background:'var(--beige-deep)'}}>
                <div className="faint" style={{fontSize:12, fontWeight:700, marginBottom:5}}>{l}</div>
                <div style={{fontFamily:'var(--display)', fontWeight:700, fontSize:15, color:c}}>{v}</div>
              </div>
            ))}
          </div>

          <h4 style={{fontSize:13, fontFamily:'var(--body)', fontWeight:700, color:'var(--green-dark)', marginBottom:11, textTransform:'uppercase', letterSpacing:'.06em'}}>Nichos</h4>
          <div style={{display:'flex', flexWrap:'wrap', gap:9}}>
            {niches.length>0 ? niches.map(n=> <NicheChip key={n} label={n} static_/>) : <p className="faint" style={{fontSize:13.5}}>Nenhum nicho selecionado. Edite seu perfil para escolher seus nichos.</p>}
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- Campaigns ---------- */
function CreatorCampaigns({campaigns, applied, apply, pro, freeLeft, myNiches}){
  const [filter, setFilter] = useState([]);
  const list = campaigns.filter(k=> filter.length===0 || k.niches.some(n=>filter.includes(n)));
  return (
    <div style={{display:'grid', gridTemplateColumns:'260px 1fr', gap:24, alignItems:'start'}} className="grid-side">
      <div className="card card-pad" style={{position:'sticky', top:90}}>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:14}}>
          <h3 style={{fontSize:16, display:'flex', alignItems:'center', gap:8}}><Icon name="filter" size={17}/>Filtrar</h3>
          {filter.length>0 && <button onClick={()=>setFilter([])} style={{fontSize:12.5, color:'var(--lime-700)', fontWeight:700}}>Limpar</button>}
        </div>
        <NicheFilter selected={filter} onChange={setFilter} columns/>
      </div>
      <div>
        {!pro && <div className="card" style={{padding:'13px 18px', marginBottom:16, display:'flex', alignItems:'center', gap:10, background:'var(--orange-100)', border:'1px solid #ffd9a8'}}>
          <Icon name="bolt" size={18} style={{color:'var(--orange-600)'}}/>
          <span style={{fontSize:13.5, fontWeight:600, color:'#925b06'}}>Plano grátis — {freeLeft} inscrição{freeLeft===1?'':'ões'} restante{freeLeft===1?'':'s'} de 2.</span>
        </div>}
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16}} className="grid-2">
          {list.map(k=>{
            const isApplied = applied.includes(k.id);
            return (
              <div key={k.id} className="card card-pad" style={{display:'flex', flexDirection:'column', gap:13}}>
                <div style={{display:'flex', alignItems:'center', gap:12}}>
                  <div style={{width:46,height:46,borderRadius:12,background:'var(--green-dark)',color:'#fff',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0,fontFamily:'var(--display)',fontWeight:700,fontSize:18}}>{(k.brand||'?')[0]}</div>
                  <div style={{flex:1, minWidth:0}}>
                    <div style={{fontWeight:700, fontSize:15.5, color:'var(--green-dark)'}}>{k.title}</div>
                    <div className="faint" style={{fontSize:12.5}}>{k.brand}</div>
                  </div>
                  {k.objetivo && <span className="badge badge-gray" style={{whiteSpace:'nowrap'}}>{k.objetivo}</span>}
                </div>
                <p className="muted" style={{fontSize:13.5, lineHeight:1.5}}>{k.description}</p>
                <div style={{display:'flex', flexWrap:'wrap', gap:7}}>
                  {k.niches.map(n=> <NicheChip key={n} label={n} sm on={myNiches.includes(n)} static_/>)}
                </div>
                <div style={{display:'flex', gap:14, fontSize:12.5, color:'var(--ink-soft)', borderTop:'1px solid var(--line)', paddingTop:12, flexWrap:'wrap'}}>
                  <span><b className="mono-num" style={{color:'var(--green-dark)'}}>{campaignBudget(k)}</b></span>
                  {k.region && <span>{k.region}</span>}
                  <span>{k.applicants||0} inscritos</span>
                </div>
                <button className={`btn btn-block ${isApplied?'btn-ghost':'btn-lime'}`} disabled={isApplied} onClick={()=>apply(k.id)}>
                  {isApplied? <><Icon name="check" size={16} sw={3}/>Inscrito</> : 'Inscrever-se'}
                </button>
              </div>
            );
          })}
        </div>
        {list.length===0 && <div className="card card-pad" style={{textAlign:'center', padding:40}}><p className="faint">Nenhuma campanha para esses nichos.</p></div>}
      </div>
    </div>
  );
}

/* ---------- Messages ---------- */
function CreatorMessages({pro, onUpgrade}){
  const brands = [
    {brand:'Verdejar Cosméticos', last:'Oi! Adoramos seu perfil 💚', time:'10:24', count:2, color:0},
    {brand:'NômadeBags', last:'Podemos enviar o briefing?', time:'ontem', count:1, color:1},
    {brand:'FitMacros', last:'Você tem disponibilidade?', time:'2 dias', count:1, color:3},
  ];
  const [active, setActive] = useState('support');
  const [text, setText] = useState('');
  const [supportMsgs, setSupportMsgs] = useState(loadAdminChat());

  const sendSupport = ()=>{
    if(!text.trim()) return;
    const next = [...supportMsgs, {from:'user', text:text.trim(), time:chatNow()}];
    setSupportMsgs(next); saveAdminChat(next); setText('');
  };

  const isSupport = active==='support';
  const c = isSupport ? null : brands[active];
  const limited = c && !pro && c.count>=2;
  const lastSupport = supportMsgs[supportMsgs.length-1];

  return (
    <div className="card msg-grid" style={{display:'grid', gridTemplateColumns:'300px 1fr', height:'calc(100vh - 180px)', overflow:'hidden'}}>
      <div style={{borderRight:'1px solid var(--line)', overflowY:'auto'}}>
        {/* Conversa com a Equipe Cruig (admin) — destacada */}
        <button onClick={()=>setActive('support')} style={{display:'flex', gap:12, alignItems:'center', padding:'15px 16px', width:'100%', textAlign:'left', borderBottom:'1px solid var(--line)', background: isSupport?'var(--lime-50)':'#fff'}}>
          <span style={{width:42,height:42,borderRadius:'50%',background:'var(--green-dark)',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}><Icon name="verified" size={22} fill style={{color:'var(--lime)'}}/></span>
          <div style={{flex:1, minWidth:0}}>
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'center'}}>
              <span style={{fontWeight:700, fontSize:14, color:'var(--green-dark)', display:'flex', alignItems:'center', gap:6}}>Equipe Cruig <span className="badge badge-lime" style={{padding:'1px 6px', fontSize:9}}>OFICIAL</span></span>
            </div>
            <div className="faint" style={{fontSize:13, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{lastSupport? (lastSupport.from==='admin'?'':'Você: ')+lastSupport.text : 'Suporte e novidades'}</div>
          </div>
        </button>
        {brands.map((cv,i)=>(
          <button key={i} onClick={()=>setActive(i)} style={{display:'flex', gap:12, alignItems:'center', padding:'15px 16px', width:'100%', textAlign:'left', borderBottom:'1px solid var(--line)', background: i===active?'var(--beige-deep)':'#fff'}}>
            <Avatar name={cv.brand} size={42} colorIdx={cv.color}/>
            <div style={{flex:1, minWidth:0}}>
              <div style={{display:'flex', justifyContent:'space-between'}}><span style={{fontWeight:700, fontSize:14, color:'var(--green-dark)'}}>{cv.brand}</span><span className="faint" style={{fontSize:11}}>{cv.time}</span></div>
              <div className="faint" style={{fontSize:13, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{cv.last}</div>
            </div>
          </button>
        ))}
      </div>
      <div style={{display:'flex', flexDirection:'column'}}>
        {isSupport ? (
          <>
            <div style={{padding:'14px 18px', borderBottom:'1px solid var(--line)', display:'flex', alignItems:'center', gap:11}}>
              <span style={{width:38,height:38,borderRadius:'50%',background:'var(--green-dark)',display:'flex',alignItems:'center',justifyContent:'center'}}><Icon name="verified" size={20} fill style={{color:'var(--lime)'}}/></span>
              <div><div style={{fontWeight:700, color:'var(--green-dark)', display:'flex', alignItems:'center', gap:6}}>Equipe Cruig <span className="badge badge-lime" style={{padding:'1px 7px', fontSize:9}}>OFICIAL</span></div><div className="faint" style={{fontSize:12}}>Suporte da plataforma</div></div>
            </div>
            <div style={{flex:1, padding:18, display:'flex', flexDirection:'column', overflowY:'auto', background:'var(--beige)'}}>
              <ChatThread msgs={supportMsgs} viewer="user"/>
            </div>
            <div style={{padding:14, borderTop:'1px solid var(--line)', display:'flex', gap:10, background:'#fff'}}>
              <input className="input" placeholder="Escreva para a equipe…" value={text} onChange={e=>setText(e.target.value)} onKeyDown={e=>e.key==='Enter'&&sendSupport()}/>
              <button className="btn btn-lime" onClick={sendSupport}><Icon name="arrow" size={18}/></button>
            </div>
          </>
        ) : (
          <>
            <div style={{padding:'14px 18px', borderBottom:'1px solid var(--line)', display:'flex', alignItems:'center', gap:11}}>
              <Avatar name={c.brand} size={38} colorIdx={c.color}/><div><div style={{fontWeight:700, color:'var(--green-dark)'}}>{c.brand}</div><div className="faint" style={{fontSize:12}}>Empresa</div></div>
            </div>
            <div style={{flex:1, padding:18, display:'flex', flexDirection:'column', gap:12, overflowY:'auto', background:'var(--beige)'}}>
              <Bubble side="them">{c.last}</Bubble>
              <Bubble side="me">Oi! Obrigada, tenho sim interesse 😊</Bubble>
            </div>
            {limited ? (
              <div style={{padding:18, borderTop:'1px solid var(--line)', background:'#fff', textAlign:'center'}}>
                <p style={{fontSize:14, fontWeight:600, color:'var(--green-dark)', marginBottom:4}}><Icon name="lock" size={15} style={{verticalAlign:'-2px'}}/> Limite de 2 mensagens grátis com esta empresa</p>
                <p className="faint" style={{fontSize:13, marginBottom:12}}>Assine para conversar sem limites.</p>
                <button className="btn btn-lime btn-sm" onClick={onUpgrade}>Liberar mensagens</button>
              </div>
            ) : (
              <div style={{padding:14, borderTop:'1px solid var(--line)', display:'flex', gap:10, background:'#fff'}}>
                <input className="input" placeholder="Escreva uma mensagem…" value={text} onChange={e=>setText(e.target.value)}/>
                <button className="btn btn-lime" onClick={()=>setText('')}><Icon name="arrow" size={18}/></button>
              </div>
            )}
          </>
        )}
      </div>
    </div>
  );
}
function Bubble({side, children}){
  const me = side==='me';
  return <div style={{alignSelf: me?'flex-end':'flex-start', maxWidth:'72%', padding:'10px 14px', borderRadius: me?'16px 16px 4px 16px':'16px 16px 16px 4px',
    background: me?'var(--lime)':'#fff', color: me?'var(--green-dark)':'var(--ink)', fontSize:14, lineHeight:1.45, boxShadow:'var(--sh-sm)'}}>{children}</div>;
}

/* ---------- Reviews ---------- */
function CreatorReviews({me}){
  if(!me.reviews){
    return (
      <div className="card card-pad" style={{textAlign:'center', padding:50}}>
        <div style={{width:54,height:54,borderRadius:'50%',background:'var(--beige-deep)',display:'flex',alignItems:'center',justifyContent:'center',margin:'0 auto 14px'}}><Icon name="star" size={24} style={{color:'var(--ink-faint)'}}/></div>
        <h3 style={{fontSize:18}}>Você ainda não recebeu avaliações</h3>
        <p className="faint" style={{fontSize:14, marginTop:6}}>Conclua campanhas com empresas para receber suas primeiras avaliações aqui.</p>
      </div>
    );
  }
  return (
    <div style={{display:'grid', gridTemplateColumns:'1fr 1.6fr', gap:20, alignItems:'start'}} className="grid-side">
      <div className="card card-pad" style={{textAlign:'center'}}>
        <div style={{fontFamily:'var(--display)', fontWeight:700, fontSize:54, color:'var(--green-dark)', lineHeight:1}}>{me.rating}</div>
        <div style={{display:'flex', gap:3, justifyContent:'center', margin:'8px 0'}}>{[1,2,3,4,5].map(i=> <Icon key={i} name="star" size={18} fill style={{color: i<=Math.round(me.rating)?'var(--orange)':'#ddd6ba'}}/>)}</div>
        <p className="faint" style={{fontSize:13.5}}>{me.reviews} avaliações de marcas</p>
      </div>
      <div style={{display:'flex', flexDirection:'column', gap:14}}>
        <p className="faint" style={{fontSize:14}}>Suas avaliações aparecerão aqui conforme as empresas avaliarem o seu trabalho.</p>
      </div>
    </div>
  );
}

/* ---------- Settings ---------- */
function CreatorSettings({me, updateMe, niches, setNiches, showToast, avatar, setAvatar}){
  const [local, setLocal] = useState(niches);
  const [name, setName] = useState(me.name || '');
  const [handle, setHandle] = useState(me.handle || '');
  const [city, setCity] = useState(me.city || '');
  const [priceMin, setPriceMin] = useState(me.priceMin ?? '');
  const [priceMax, setPriceMax] = useState(me.priceMax ?? '');
  const [bio, setBio] = useState(me.bio || '');
  const [saving, setSaving] = useState(false);
  const [connecting, setConnecting] = useState(null);

  const save = async ()=>{
    setSaving(true);
    try{
      await CruigAPI.put('/creators/me', {
        name, handle, city, bio,
        priceMin: priceMin===''?null:Number(priceMin),
        priceMax: priceMax===''?null:Number(priceMax),
        niches: local,
      });
      updateMe({ name, handle, city, bio, priceMin: priceMin===''?null:Number(priceMin), priceMax: priceMax===''?null:Number(priceMax) });
      setNiches(local);
      showToast('Alterações salvas com sucesso!');
    }catch(e){
      showToast(e.message || 'Erro ao salvar alterações.');
    }finally{
      setSaving(false);
    }
  };

  const cancel = ()=>{
    setLocal(niches); setName(me.name||''); setHandle(me.handle||''); setCity(me.city||'');
    setPriceMin(me.priceMin ?? ''); setPriceMax(me.priceMax ?? ''); setBio(me.bio||'');
    showToast('Alterações descartadas.');
  };

  return (
    <div style={{maxWidth:760, display:'flex', flexDirection:'column', gap:20}}>
      <div className="card card-pad">
        <h3 style={{fontSize:18, marginBottom:16}}>Foto de perfil</h3>
        <div style={{display:'flex', alignItems:'center', gap:18, flexWrap:'wrap'}}>
          <AvatarUpload name={me.name} size={76} colorIdx={0} src={avatar} onChange={setAvatar}/>
          <div style={{flex:1, minWidth:200}}>
            <p style={{fontSize:14, fontWeight:600, color:'var(--green-dark)'}}>Sua foto aparece para as empresas</p>
            <p className="faint" style={{fontSize:13, marginTop:3}}>Clique no ícone para enviar. JPG ou PNG, recomendado 400×400px.</p>
          </div>
        </div>
      </div>
      <div className="card card-pad">
        <h3 style={{fontSize:18, marginBottom:16}}>Dados pessoais</h3>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16}} className="grid-2">
          <div className="field"><label>Nome</label><input className="input" value={name} onChange={e=>setName(e.target.value)}/></div>
          <div className="field"><label>@usuário</label><input className="input" value={handle} onChange={e=>setHandle(e.target.value)} placeholder="seu.usuario"/></div>
          <div className="field"><label>Cidade</label><input className="input" value={city} onChange={e=>setCity(e.target.value)} placeholder="São Paulo, SP"/></div>
          <div className="field" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:10}}>
            <div><label>Cachê mín. (R$)</label><input className="input" type="number" min="0" value={priceMin} onChange={e=>setPriceMin(e.target.value)} placeholder="800"/></div>
            <div><label>Cachê máx. (R$)</label><input className="input" type="number" min="0" value={priceMax} onChange={e=>setPriceMax(e.target.value)} placeholder="2500"/></div>
          </div>
        </div>
        <div className="field" style={{marginTop:16}}><label>Bio</label><textarea className="textarea" value={bio} onChange={e=>setBio(e.target.value)} placeholder="Conte sobre o seu conteúdo e seu público…"/></div>
      </div>
      <div className="card card-pad">
        <h3 style={{fontSize:18, marginBottom:6}}>Meus nichos</h3>
        <p className="faint" style={{fontSize:13.5, marginBottom:16}}>Seleção múltipla — é por aqui que as empresas te encontram na busca.</p>
        <NicheFilter selected={local} onChange={setLocal} limit={6} columns/>
      </div>
      <div className="card card-pad">
        <h3 style={{fontSize:18, marginBottom:6}}>Redes sociais</h3>
        <p className="faint" style={{fontSize:13.5, marginBottom:16}}>Conecte suas redes para exibir métricas <b style={{color:'var(--lime-700)'}}>reais</b> (seguidores, engajamento) no seu perfil — atualizadas automaticamente via API oficial.</p>
        <div style={{display:'flex', flexDirection:'column', gap:10}}>
          {['instagram','tiktok','youtube'].map(t=>{
            const data = (me.platforms||{})[t];
            const on = !!data;
            return (
              <div key={t} style={{display:'flex', alignItems:'center', gap:12, padding:'13px 15px', border:'1px solid var(--line)', borderRadius:12, background: on?'var(--lime-50)':'#fff'}}>
                <PlatIcon type={t} size={22}/>
                <div style={{flex:1, minWidth:0}}>
                  <div style={{textTransform:'capitalize', fontWeight:700, fontSize:14.5, color:'var(--green-dark)'}}>{t}</div>
                  {on
                    ? <div className="faint" style={{fontSize:12.5, display:'flex', gap:8, alignItems:'center'}}><span className="mono-num">{CRUIG.fmt(data.followers)} seg.</span> · <span className="mono-num">{data.engagement}% eng.</span></div>
                    : <div className="faint" style={{fontSize:12.5}}>Não conectado</div>}
                </div>
                {!on && <button className="btn btn-dark btn-sm" onClick={()=>setConnecting(t)}><Icon name="link" size={14}/>Conectar</button>}
              </div>
            );
          })}
        </div>
      </div>
      <div style={{display:'flex', gap:12, justifyContent:'flex-end'}}>
        <button className="btn btn-ghost" onClick={cancel} disabled={saving}>Cancelar</button>
        <button className="btn btn-lime" onClick={save} disabled={saving}>{saving?'Salvando…':'Salvar alterações'}</button>
      </div>
      {connecting && <SocialConnectModal platform={connecting} onClose={()=>setConnecting(null)} onConnected={(p)=>{ setConnecting(null); showToast(p.charAt(0).toUpperCase()+p.slice(1)+' conectado! Métricas reais sincronizando.'); }}/>}
    </div>
  );
}

window.CreatorPanel = CreatorPanel;