/* ============================================================
   CRUIG — Company panel
   ============================================================ */
function CompanyPanel({go, showToast}){
  const [view, setView] = useState('overview');
  const [loading, setLoading] = useState(true);
  const [company, setCompany] = useState(null);
  const [pro, setPro] = useState(false);
  const [checkout, setCheckout] = useState(null);
  const [paywall, setPaywall] = useState(null);
  const [detail, setDetail] = useState(null);
  const [creators, setCreators] = useState([]);
  const [campaigns, setCampaigns] = useState([]);
  const [favs, setFavs] = useState([]);
  const openCheckout = (planId='s')=> setCheckout(planId);

  useEffect(()=>{
    Promise.all([
      CruigAPI.get('/companies/me'),
      CruigAPI.get('/creators'),
      CruigAPI.get('/campaigns?mine=1'),
      CruigAPI.get('/favorites'),
    ]).then(([compRes, creatorsRes, campRes, favRes])=>{
      setCompany(compRes.company);
      setCreators(creatorsRes.creators || []);
      setCampaigns(campRes.campaigns || []);
      setFavs(favRes.favorites || []);
    }).catch(()=> showToast('Não foi possível carregar seus dados.')).finally(()=> setLoading(false));
  },[]);

  const reloadCampaigns = ()=> CruigAPI.get('/campaigns?mine=1').then(r=> setCampaigns(r.campaigns || []));

  const toggleFav = async (id)=>{
    const isFav = favs.includes(id);
    setFavs(f=> isFav ? f.filter(x=>x!==id) : [...f,id]);
    try{
      if(isFav) await CruigAPI.del(`/favorites/${id}`);
      else await CruigAPI.post(`/favorites/${id}`);
    }catch(e){
      setFavs(f=> isFav ? [...f,id] : f.filter(x=>x!==id));
      showToast(e.message || 'Erro ao atualizar favoritos.');
    }
  };

  if(loading || !company){
    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 displayName = company.brandName || company.name || 'Empresa';
  const activeCampaigns = campaigns.filter(k=>k.status==='Ativa');
  const totalApplicants = campaigns.reduce((s,k)=>s+(k.applicants||0),0);

  const nav = [
    {id:'overview', label:'Visão geral', icon:'grid'},
    {id:'search', label:'Buscar criadores', icon:'search'},
    {id:'campaigns', label:'Minhas campanhas', icon:'flag', badge: campaigns.length || undefined},
    {id:'messages', label:'Mensagens', icon:'msg', badge:2},
    {section:'Curadoria'},
    {id:'favorites', label:'Favoritos', icon:'heart', badge: favs.length || undefined},
    {section:'Conta'},
    {id:'plan', label:'Plano', icon:'cash'},
    {id:'settings', label:'Configurações', icon:'gear'},
  ];
  const titles = {
    overview:[`Olá, ${displayName} 🌿`,'Visão geral das suas campanhas'],
    search:['Buscar criadores','Filtre por nicho e encontre o match perfeito'],
    campaigns:['Minhas campanhas','Gerencie campanhas e candidatos'],
    messages:['Mensagens','Converse com criadores'],
    favorites:['Favoritos','Criadores que você salvou'],
    plan:['Plano & assinatura','Gerencie sua assinatura'],
    settings:['Configurações','Dados da empresa'],
  };
  const topRight = (
    <>
      {view!=='search' && <button className="btn btn-ghost btn-sm" onClick={()=>setView('search')}><Icon name="search" size={16}/>Buscar</button>}
      {!pro && <button className="btn btn-lime btn-sm" onClick={()=>openCheckout('s')}><Icon name="bolt" size={15} fill/>Assinar</button>}
    </>
  );

  return (
    <>
    <DashShell nav={nav} active={view} onNav={setView}
      user={{name:displayName, role:'Empresa', color:5, planLabel: pro?'Plano Semestral':'Grátis', pro, onUpgrade:()=>openCheckout('s')}}
      title={titles[view][0]} subtitle={titles[view][1]} topRight={topRight}>
      {view==='overview' && <CompanyHome go={setView} setDetail={setDetail} campaigns={campaigns} activeCampaigns={activeCampaigns} totalApplicants={totalApplicants} favs={favs} creators={creators}/>}
      {view==='search' && <CompanySearch creators={creators} setDetail={setDetail} favs={favs} toggleFav={toggleFav}/>}
      {view==='campaigns' && <CompanyCampaigns campaigns={campaigns} creators={creators} setDetail={setDetail} showToast={showToast} onCreated={reloadCampaigns}/>}
      {view==='messages' && <CompanyMessages pro={pro} onUpgrade={()=>openCheckout('s')}/>}
      {view==='favorites' && <CompanyFavorites creators={creators} favs={favs} toggleFav={toggleFav} setDetail={setDetail}/>}
      {view==='plan' && <PlanView role="company" pro={pro} onUpgrade={openCheckout} showToast={showToast}/>}
      {view==='settings' && <CompanySettings company={company} setCompany={setCompany} showToast={showToast}/>}
    </DashShell>

    {detail && <CreatorDetail id={detail} creators={creators} onClose={()=>setDetail(null)} fav={favs.includes(detail)} toggleFav={()=>toggleFav(detail)}
      onMessage={()=>{ if(!pro){ setDetail(null); setPaywall('Você atingiu o limite de mensagens grátis. Assine para conversar com criadores ilimitadamente.'); } else showToast('Mensagem enviada!'); }}
      onInvite={()=>showToast('Convite para campanha enviado!')}/>}
    {paywall && <Paywall reason={paywall} onClose={()=>setPaywall(null)} onUpgrade={()=>{setPaywall(null); openCheckout('s');}}/>}
    {checkout && <Checkout role="company" planId={checkout} onClose={()=>setCheckout(null)} onDone={()=>{setCheckout(null); setPro(true); showToast('Assinatura ativada! Tudo liberado.');}}/>}
    </>
  );
}

/* ---------- Overview ---------- */
function CompanyHome({go, setDetail, campaigns, activeCampaigns, totalApplicants, favs, creators}){
  const estimatedReach = creators.filter(c=>favs.includes(c.id)).reduce((s,c)=>s+CRUIG.totalFollowers(c),0);
  const highlight = [...creators].sort((a,b)=>CRUIG.totalFollowers(b)-CRUIG.totalFollowers(a)).slice(0,4);
  return (
    <div style={{display:'flex', flexDirection:'column', gap:22}}>
      <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:16}} className="grid-4">
        <Stat label="Campanhas ativas" value={activeCampaigns.length} icon="flag"/>
        <Stat label="Candidatos recebidos" value={totalApplicants} icon="users" accent="var(--orange)"/>
        <Stat label="Criadores favoritos" value={favs.length} icon="heart"/>
        <Stat label="Alcance dos favoritos" value={CRUIG.fmt(estimatedReach)} icon="trend"/>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:20}} className="grid-2">
        <div className="card card-pad">
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:16}}>
            <h3 style={{fontSize:18}}>Suas campanhas ativas</h3>
            <button className="btn btn-ghost btn-sm" onClick={()=>go('campaigns')}>Gerenciar</button>
          </div>
          <div style={{display:'flex', flexDirection:'column', gap:12}}>
            {activeCampaigns.slice(0,3).map(k=>(
              <div key={k.id} style={{display:'flex', alignItems:'center', gap:12, padding:'13px 14px', borderRadius:14, border:'1px solid var(--line)'}}>
                <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.applicants||0} candidatos</div>
                </div>
                <span className="badge badge-lime">{k.status}</span>
              </div>
            ))}
            {activeCampaigns.length===0 && <p className="faint" style={{fontSize:14, padding:'8px 2px'}}>Nenhuma campanha ativa ainda. <button onClick={()=>go('campaigns')} style={{color:'var(--lime-700)', fontWeight:700}}>Criar campanha</button></p>}
          </div>
        </div>
        <div className="card card-pad">
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:16}}>
            <h3 style={{fontSize:18}}>Criadores em alta</h3>
            <button className="btn btn-ghost btn-sm" onClick={()=>go('search')}>Ver busca</button>
          </div>
          <div style={{display:'flex', flexDirection:'column', gap:10}}>
            {highlight.map(c=>(
              <button key={c.id} onClick={()=>setDetail(c.id)} style={{display:'flex', alignItems:'center', gap:12, padding:'9px 10px', borderRadius:12, width:'100%', textAlign:'left'}}
                onMouseEnter={e=>e.currentTarget.style.background='var(--beige-deep)'} onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
                <Avatar name={c.name} size={40} colorIdx={c.color} verified={c.verified}/>
                <div style={{flex:1, minWidth:0}}>
                  <div style={{fontWeight:700, fontSize:14, color:'var(--green-dark)'}}>{c.name}</div>
                  <div className="faint" style={{fontSize:12}}>{c.niches.slice(0,2).join(' · ')}</div>
                </div>
                <span className="mono-num" style={{fontSize:13, fontWeight:700, color:'var(--green-dark)'}}>{CRUIG.fmt(CRUIG.totalFollowers(c))}</span>
              </button>
            ))}
            {highlight.length===0 && <p className="faint" style={{fontSize:14, padding:'8px 2px'}}>Nenhum criador cadastrado ainda.</p>}
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- Search (reactive niche filter) ---------- */
function CompanySearch({creators, setDetail, favs, toggleFav}){
  const [niches, setNiches] = useState([]);
  const [region, setRegion] = useState('Todas');
  const [minFollowers, setMinFollowers] = useState(0);
  const [minEng, setMinEng] = useState(0);
  const [verifiedOnly, setVerifiedOnly] = useState(false);
  const [sort, setSort] = useState('relevance');

  const regions = ['Todas','SP','RJ','MG','PR','SC','RS','BA','PE','DF'];

  const filtered = useMemo(()=>{
    let r = creators.filter(c=>{
      const total = CRUIG.totalFollowers(c);
      if(niches.length && !c.niches.some(n=>niches.includes(n))) return false;
      if(region!=='Todas' && !(c.city||'').includes(region)) return false;
      if(total < minFollowers) return false;
      if((c.engagement||0) < minEng) return false;
      if(verifiedOnly && !c.verified) return false;
      return true;
    });
    if(sort==='followers') r=[...r].sort((a,b)=> CRUIG.totalFollowers(b)-CRUIG.totalFollowers(a));
    if(sort==='engagement') r=[...r].sort((a,b)=>(b.engagement||0)-(a.engagement||0));
    if(sort==='rating') r=[...r].sort((a,b)=>(b.rating||0)-(a.rating||0));
    return r;
  },[creators,niches,region,minFollowers,minEng,verifiedOnly,sort]);

  const reset = ()=>{ setNiches([]); setRegion('Todas'); setMinFollowers(0); setMinEng(0); setVerifiedOnly(false); };
  const activeFilters = niches.length + (region!=='Todas'?1:0) + (minFollowers>0?1:0) + (minEng>0?1:0) + (verifiedOnly?1:0);

  return (
    <div style={{display:'grid', gridTemplateColumns:'288px 1fr', gap:24, alignItems:'start'}} className="grid-side">
      {/* Filter sidebar */}
      <div className="card card-pad" style={{position:'sticky', top:90, maxHeight:'calc(100vh - 110px)', overflowY:'auto'}}>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:16}}>
          <h3 style={{fontSize:16, display:'flex', alignItems:'center', gap:8}}><Icon name="filter" size={17}/>Filtros {activeFilters>0 && <span className="badge badge-lime">{activeFilters}</span>}</h3>
          {activeFilters>0 && <button onClick={reset} style={{fontSize:12.5, color:'var(--lime-700)', fontWeight:700}}>Limpar</button>}
        </div>

        <label style={{fontSize:13, fontWeight:700, color:'var(--green-dark)', display:'block', marginBottom:10}}>Nichos</label>
        <NicheFilter selected={niches} onChange={setNiches} columns/>

        <div className="divider" style={{margin:'18px 0'}}></div>
        <div className="field" style={{marginBottom:16}}>
          <label>Região</label>
          <select className="select" value={region} onChange={e=>setRegion(e.target.value)}>
            {regions.map(r=> <option key={r}>{r}</option>)}
          </select>
        </div>

        <div className="field" style={{marginBottom:16}}>
          <label>Mín. seguidores: <span className="mono-num" style={{color:'var(--lime-700)'}}>{minFollowers===0?'qualquer':CRUIG.fmt(minFollowers)}</span></label>
          <input type="range" min="0" max="500000" step="10000" value={minFollowers} onChange={e=>setMinFollowers(+e.target.value)} style={{accentColor:'var(--lime)'}}/>
        </div>
        <div className="field" style={{marginBottom:16}}>
          <label>Mín. engajamento: <span className="mono-num" style={{color:'var(--lime-700)'}}>{minEng}%</span></label>
          <input type="range" min="0" max="12" step="0.5" value={minEng} onChange={e=>setMinEng(+e.target.value)} style={{accentColor:'var(--lime)'}}/>
        </div>
        <label style={{display:'flex', alignItems:'center', gap:10, fontSize:14, fontWeight:600, cursor:'pointer'}}>
          <input type="checkbox" checked={verifiedOnly} onChange={e=>setVerifiedOnly(e.target.checked)} style={{width:18, height:18, accentColor:'var(--lime)'}}/>
          Apenas verificados via API
        </label>
      </div>

      {/* Results */}
      <div>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:16, flexWrap:'wrap', gap:12}}>
          <p style={{fontSize:14.5, fontWeight:600}}><span className="mono-num" style={{color:'var(--green-dark)'}}>{filtered.length}</span> <span className="muted">criadores compatíveis</span></p>
          <div style={{display:'flex', alignItems:'center', gap:8}}>
            <span className="faint" style={{fontSize:13}}>Ordenar:</span>
            <select className="select" value={sort} onChange={e=>setSort(e.target.value)} style={{width:'auto', padding:'8px 12px', fontSize:13.5}}>
              <option value="relevance">Relevância</option>
              <option value="followers">Seguidores</option>
              <option value="engagement">Engajamento</option>
              <option value="rating">Avaliação</option>
            </select>
          </div>
        </div>

        {niches.length>0 && (
          <div style={{display:'flex', gap:8, flexWrap:'wrap', marginBottom:16}}>
            {niches.map(n=> <NicheChip key={n} label={n} on onClick={()=>setNiches(niches.filter(x=>x!==n))} sm/>)}
          </div>
        )}

        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16}} className="grid-2">
          {filtered.map(c=> <CreatorCard key={c.id} c={c} onOpen={()=>setDetail(c.id)} fav={favs.includes(c.id)} onFav={()=>toggleFav(c.id)} highlight={niches}/>)}
        </div>
        {filtered.length===0 && (
          <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="search" size={24} style={{color:'var(--ink-faint)'}}/></div>
            <h3 style={{fontSize:18}}>Nenhum criador compatível</h3>
            <p className="faint" style={{fontSize:14, marginTop:6}}>Tente afrouxar os filtros de nicho, região ou seguidores.</p>
            <button className="btn btn-ghost btn-sm" style={{marginTop:16}} onClick={reset}>Limpar filtros</button>
          </div>
        )}
      </div>
    </div>
  );
}

function CreatorCard({c, onOpen, fav, onFav, highlight=[]}){
  const total = CRUIG.totalFollowers(c);
  const platformKeys = Object.keys(c.platforms||{});
  return (
    <div className="card" style={{overflow:'hidden', display:'flex', flexDirection:'column', transition:'transform .15s, box-shadow .2s'}}
      onMouseEnter={e=>{e.currentTarget.style.transform='translateY(-3px)'; e.currentTarget.style.boxShadow='var(--sh-md)';}}
      onMouseLeave={e=>{e.currentTarget.style.transform='none'; e.currentTarget.style.boxShadow='var(--sh-sm)';}}>
      <div style={{padding:18, display:'flex', gap:14}}>
        <Avatar name={c.name} size={56} colorIdx={c.color} verified={c.verified}/>
        <div style={{flex:1, minWidth:0}}>
          <div style={{display:'flex', alignItems:'flex-start', justifyContent:'space-between', gap:8}}>
            <div style={{minWidth:0}}>
              <div style={{fontWeight:700, fontSize:16, color:'var(--green-dark)', display:'flex', alignItems:'center', gap:6}}>{c.name}{c.featured && <span className="badge badge-orange chip-sm" style={{padding:'2px 7px'}}>Destaque</span>}</div>
              <div className="faint" style={{fontSize:12.5, display:'flex', gap:8, alignItems:'center', marginTop:2}}>{c.handle && <span>@{c.handle}</span>}{c.city && <span style={{display:'flex',alignItems:'center',gap:3}}><Icon name="map" size={12}/>{c.city.split(',')[1]||c.city}</span>}</div>
            </div>
            <button onClick={onFav} style={{flexShrink:0, color: fav?'var(--orange)':'var(--ink-faint)'}}><Icon name="heart" size={20} fill={fav}/></button>
          </div>
          <div style={{display:'flex', gap:5, marginTop:8, alignItems:'center'}}>
            {platformKeys.map(t=> <PlatIcon key={t} type={t} size={15}/>)}
            {c.rating>0 && <span className="faint" style={{fontSize:12, marginLeft:2}}>· <span style={{color:'var(--orange-600)'}}><Icon name="star" size={11} fill style={{verticalAlign:'-1px'}}/> {c.rating}</span></span>}
          </div>
        </div>
      </div>
      <div style={{display:'flex', borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)'}}>
        {[['Seguidores', CRUIG.fmt(total)],['Engaj.', (c.engagement||0)+'%'],['Cachê', c.priceMin?('R$'+(c.priceMin/1000).toFixed(1).replace('.0','')+'k+'):'—']].map(([l,v],i)=>(
          <div key={i} style={{flex:1, padding:'11px 8px', textAlign:'center', borderRight: i<2?'1px solid var(--line)':'none'}}>
            <div className="mono-num" style={{fontWeight:700, fontSize:15, color:'var(--green-dark)'}}>{v}</div>
            <div className="faint" style={{fontSize:11}}>{l}</div>
          </div>
        ))}
      </div>
      <div style={{padding:'14px 18px'}}>
        <div style={{display:'flex', flexWrap:'wrap', gap:6, marginBottom:14, minHeight:26}}>
          {c.niches.map(n=> <NicheChip key={n} label={n} sm on={highlight.includes(n)} static_/>)}
        </div>
        <button className="btn btn-dark btn-block btn-sm" onClick={onOpen}><Icon name="eye" size={16}/>Ver perfil completo</button>
      </div>
    </div>
  );
}

/* ---------- Creator detail modal ---------- */
function CreatorDetail({id, creators, onClose, fav, toggleFav, onMessage, onInvite}){
  const c = creators.find(x=>x.id===id);
  if(!c) return null;
  const total = CRUIG.totalFollowers(c);
  const platformEntries = Object.entries(c.platforms||{});
  return (
    <Modal open onClose={onClose} width={620} pad={false}>
      <div style={{maxHeight:'88vh', overflowY:'auto'}}>
        <div style={{height:110, 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>
          <span className="badge" style={{position:'absolute', top:14, left:16, background:'rgba(255,255,255,.16)', color:'#fff'}}><Icon name="verified" size={13} fill/> Perfil Cruig</span>
        </div>
        <div style={{padding:'0 28px 28px'}}>
          <div style={{display:'flex', alignItems:'flex-end', gap:16, marginTop:-38, marginBottom:8}}>
            <div style={{border:'4px solid #fff', borderRadius:'50%', background:'#fff'}}><Avatar name={c.name} size={88} colorIdx={c.color} verified={c.verified}/></div>
            <button onClick={toggleFav} className="btn btn-ghost btn-sm" style={{marginLeft:'auto', color: fav?'var(--orange)':undefined, borderColor: fav?'var(--orange)':undefined}}><Icon name="heart" size={16} fill={fav}/>{fav?'Favoritado':'Favoritar'}</button>
          </div>
          <h2 style={{fontSize:24}}>{c.name}</h2>
          <div className="faint" style={{fontSize:14, display:'flex', gap:12, alignItems:'center', flexWrap:'wrap', marginTop:4}}>
            {c.handle && <span>@{c.handle}</span>}
            {c.city && <span style={{display:'flex',alignItems:'center',gap:4}}><Icon name="map" size={14}/>{c.city}</span>}
            {c.reviews>0 && <span style={{display:'flex',alignItems:'center',gap:4, color:'var(--orange-600)'}}><Icon name="star" size={14} fill/>{c.rating} ({c.reviews} avaliações)</span>}
          </div>
          <p style={{fontSize:14.5, lineHeight:1.6, color:'var(--ink-soft)', margin:'16px 0'}}>{c.bio || 'Este criador ainda não adicionou uma bio.'}</p>

          {/* Resumo geral */}
          <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:12, marginBottom:18}}>
            {[['Alcance total', CRUIG.fmt(total)],['Engaj. médio', (c.engagement||0)+'%'],['Cachê médio', c.priceMin?CRUIG.brl(c.priceMin):'A definir']].map(([l,v],i)=>(
              <div key={i} style={{padding:'13px 14px', borderRadius:12, background:'var(--beige-deep)'}}>
                <div className="faint" style={{fontSize:11.5, fontWeight:700, marginBottom:4}}>{l}</div>
                <div style={{fontFamily:'var(--display)', fontWeight:700, fontSize:16, color:'var(--green-dark)'}}>{v}</div>
              </div>
            ))}
          </div>

          {/* Desempenho POR REDE — onde o criador é mais forte */}
          <div className="faint" style={{fontSize:12.5, fontWeight:700, marginBottom:9, display:'flex', alignItems:'center', gap:7}}><Icon name="chart" size={15}/>DESEMPENHO POR REDE</div>
          {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>
          ) : (
            <p className="faint" style={{fontSize:13.5, marginBottom:22}}>Este criador ainda não conectou suas redes sociais.</p>
          )}

          <div className="faint" style={{fontSize:12.5, fontWeight:700, marginBottom:9}}>NICHOS</div>
          <div style={{display:'flex', flexWrap:'wrap', gap:8, marginBottom:22}}>
            {c.niches.length>0 ? c.niches.map(n=> <NicheChip key={n} label={n} static_/>) : <p className="faint" style={{fontSize:13.5}}>Nenhum nicho informado.</p>}
          </div>

          <div style={{display:'flex', gap:12}}>
            <button className="btn btn-lime" style={{flex:1}} onClick={onMessage}><Icon name="msg" size={17}/>Enviar mensagem</button>
            <button className="btn btn-dark" style={{flex:1}} onClick={onInvite}><Icon name="flag" size={16}/>Convidar p/ campanha</button>
          </div>
        </div>
      </div>
    </Modal>
  );
}

/* ---------- Campaigns management ---------- */
function CompanyCampaigns({campaigns, creators, setDetail, showToast, onCreated}){
  const [tab, setTab] = useState('list');
  const [open, setOpen] = useState(null);
  const [applicants, setApplicants] = useState({});

  const toggleApplicants = async (id)=>{
    if(open===id){ setOpen(null); return; }
    setOpen(id);
    if(!applicants[id]){
      try{
        const { applicants: list } = await CruigAPI.get(`/campaigns/${id}/applicants`);
        setApplicants(a=>({...a, [id]: list}));
      }catch(e){
        showToast(e.message || 'Erro ao carregar candidatos.');
      }
    }
  };

  if(tab==='create') return <CampaignForm creators={creators} onBack={()=>setTab('list')} onCreated={()=>{ setTab('list'); onCreated(); }}/>;
  return (
    <div>
      <div style={{display:'flex', justifyContent:'flex-end', marginBottom:18}}>
        <button className="btn btn-lime" onClick={()=>setTab('create')}><Icon name="plus" size={17}/>Nova campanha</button>
      </div>
      <div style={{display:'flex', flexDirection:'column', gap:14}}>
        {campaigns.map(k=>(
          <div key={k.id} className="card card-pad">
            <div style={{display:'flex', alignItems:'center', gap:16, flexWrap:'wrap'}}>
              <div style={{flex:1, minWidth:200}}>
                <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:4}}>
                  <h3 style={{fontSize:18}}>{k.title}</h3>
                  <span className={`badge ${k.status==='Ativa'?'badge-lime':'badge-gray'}`}>{k.status}</span>
                </div>
                <div style={{display:'flex', flexWrap:'wrap', gap:6}}>{k.niches.map(n=> <NicheChip key={n} label={n} sm static_/>)}</div>
              </div>
              <div style={{textAlign:'center'}}><div className="mono-num" style={{fontWeight:700, fontSize:22, color:'var(--green-dark)'}}>{k.applicants||0}</div><div className="faint" style={{fontSize:12}}>candidatos</div></div>
              <div style={{display:'flex', gap:8}}>
                <button className="btn btn-ghost btn-sm" onClick={()=>toggleApplicants(k.id)}><Icon name="users" size={15}/>Candidatos</button>
              </div>
            </div>
            {open===k.id && (
              <div style={{marginTop:18, paddingTop:18, borderTop:'1px solid var(--line)', display:'grid', gridTemplateColumns:'1fr 1fr', gap:10}} className="grid-2">
                {(applicants[k.id]||[]).map(a=>(
                  <button key={a.id} onClick={()=>setDetail(a.creator_id)} style={{display:'flex', alignItems:'center', gap:11, padding:'10px 12px', borderRadius:12, border:'1px solid var(--line)', textAlign:'left'}}>
                    <Avatar name={a.name} size={38} src={a.avatar_url}/>
                    <div style={{flex:1, minWidth:0}}><div style={{fontWeight:700, fontSize:13.5, color:'var(--green-dark)'}}>{a.name}</div><div className="faint" style={{fontSize:11.5}}>{a.handle?'@'+a.handle:''}</div></div>
                    <span className="badge badge-gray">{a.status}</span>
                  </button>
                ))}
                {(applicants[k.id]||[]).length===0 && <p className="faint" style={{fontSize:13.5, padding:'6px 2px'}}>Nenhum candidato ainda.</p>}
              </div>
            )}
          </div>
        ))}
        {campaigns.length===0 && (
          <div className="card card-pad" style={{textAlign:'center', padding:50}}>
            <h3 style={{fontSize:18}}>Você ainda não criou campanhas</h3>
            <p className="faint" style={{fontSize:14, marginTop:6}}>Crie sua primeira campanha para começar a receber candidatos.</p>
            <button className="btn btn-lime" style={{marginTop:16}} onClick={()=>setTab('create')}><Icon name="plus" size={17}/>Nova campanha</button>
          </div>
        )}
      </div>
    </div>
  );
}

function CampaignForm({creators, onBack, onCreated}){
  const [niches, setNiches] = useState([]);
  const [step, setStep] = useState(1);
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  const [objetivo, setObjetivo] = useState('Awareness');
  const [region, setRegion] = useState('Brasil todo');
  const [budgetMin, setBudgetMin] = useState('');
  const [budgetMax, setBudgetMax] = useState('');
  const [saving, setSaving] = useState(false);

  const matches = niches.length ? creators.filter(c=>c.niches.some(n=>niches.includes(n))).length : creators.length;

  const publish = async ()=>{
    if(!title.trim()){ setStep(1); return; }
    setSaving(true);
    try{
      await CruigAPI.post('/campaigns', {
        title, description, objetivo, niches, region,
        budgetMin: budgetMin===''?null:Number(budgetMin),
        budgetMax: budgetMax===''?null:Number(budgetMax),
      });
      onCreated();
    }catch(e){
      setSaving(false);
    }
  };

  return (
    <div style={{maxWidth:720}}>
      <button onClick={onBack} style={{display:'flex', alignItems:'center', gap:7, color:'var(--ink-soft)', fontWeight:600, fontSize:14, marginBottom:16}}><Icon name="arrowL" size={17}/>Voltar</button>
      <div className="card card-pad">
        <div style={{display:'flex', gap:8, marginBottom:24}}>
          {['Sobre','Nichos & público','Orçamento'].map((s,i)=>(
            <div key={i} style={{flex:1, display:'flex', alignItems:'center', gap:8}}>
              <span style={{width:26,height:26,borderRadius:'50%',flexShrink:0,display:'flex',alignItems:'center',justifyContent:'center',fontSize:13,fontWeight:700, background: step>=i+1?'var(--lime)':'var(--beige-deep)', color: step>=i+1?'var(--green-dark)':'var(--ink-faint)'}}>{i+1}</span>
              <span style={{fontSize:13, fontWeight:600, color: step>=i+1?'var(--green-dark)':'var(--ink-faint)'}}>{s}</span>
            </div>
          ))}
        </div>
        {step===1 && <div style={{display:'flex', flexDirection:'column', gap:16}}>
          <div className="field"><label>Título da campanha</label><input className="input" value={title} onChange={e=>setTitle(e.target.value)} placeholder="Ex: Lançamento sérum vegano"/></div>
          <div className="field"><label>Descrição / briefing</label><textarea className="textarea" value={description} onChange={e=>setDescription(e.target.value)} placeholder="Conte o que a marca espera do criador…"/></div>
          <div className="field"><label>Objetivo</label>
            <select className="select" value={objetivo} onChange={e=>setObjetivo(e.target.value)}>
              <option>Awareness</option><option>Conversão / vendas</option><option>Engajamento</option><option>UGC (conteúdo)</option><option>Cadastros</option>
            </select>
          </div>
        </div>}
        {step===2 && <div style={{display:'flex', flexDirection:'column', gap:18}}>
          <div><label style={{fontSize:13, fontWeight:700, color:'var(--green-dark)', display:'block', marginBottom:10}}>Nichos desejados</label><NicheFilter selected={niches} onChange={setNiches} columns/></div>
          <div className="field"><label>Região</label>
            <select className="select" value={region} onChange={e=>setRegion(e.target.value)}>
              <option>Brasil todo</option><option>Sudeste</option><option>Sul</option><option>Nordeste</option><option>Centro-Oeste</option><option>Norte</option>
            </select>
          </div>
        </div>}
        {step===3 && <div style={{display:'flex', flexDirection:'column', gap:16}}>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:14}} className="grid-2">
            <div className="field"><label>Orçamento por criador (mín.)</label><input className="input" type="number" min="0" value={budgetMin} onChange={e=>setBudgetMin(e.target.value)} placeholder="800"/></div>
            <div className="field"><label>Orçamento (máx.)</label><input className="input" type="number" min="0" value={budgetMax} onChange={e=>setBudgetMax(e.target.value)} placeholder="2000"/></div>
          </div>
          <div style={{padding:16, borderRadius:14, background:'var(--lime-50)', border:'1px solid var(--lime-100)', display:'flex', gap:10}}>
            <Icon name="bolt" size={18} style={{color:'var(--lime-700)', flexShrink:0}}/>
            <p style={{fontSize:13.5, color:'var(--ink)'}}>Com base nos seus filtros, <b style={{color:'var(--lime-700)'}}>{matches} criador{matches===1?'':'es'} cadastrado{matches===1?'':'s'}</b> são compatíveis.</p>
          </div>
        </div>}
        <div style={{display:'flex', justifyContent:'space-between', marginTop:24}}>
          {step>1? <button className="btn btn-ghost" onClick={()=>setStep(step-1)}>Voltar</button> : <span></span>}
          {step<3? <button className="btn btn-dark" onClick={()=>setStep(step+1)}>Continuar<Icon name="arrow" size={17}/></button>
            : <button className="btn btn-lime" onClick={publish} disabled={saving}><Icon name="check" size={17} sw={3}/>{saving?'Publicando…':'Publicar campanha'}</button>}
        </div>
      </div>
    </div>
  );
}

/* ---------- Favorites ---------- */
function CompanyFavorites({creators, favs, toggleFav, setDetail}){
  const list = creators.filter(c=>favs.includes(c.id));
  if(list.length===0) 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="heart" size={24} style={{color:'var(--ink-faint)'}}/></div><h3 style={{fontSize:18}}>Nenhum favorito ainda</h3><p className="faint" style={{fontSize:14, marginTop:6}}>Salve criadores na busca para acompanhá-los aqui.</p></div>;
  return <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16}} className="grid-2">{list.map(c=> <CreatorCard key={c.id} c={c} onOpen={()=>setDetail(c.id)} fav onFav={()=>toggleFav(c.id)}/>)}</div>;
}

/* ---------- Messages ---------- */
function CompanyMessages({pro, onUpgrade}){
  return <CreatorMessages pro={pro} onUpgrade={onUpgrade}/>;
}

/* ---------- Settings ---------- */
function CompanySettings({company, setCompany, showToast}){
  const [brandName, setBrandName] = useState(company.brandName || company.name || '');
  const [cnpj, setCnpj] = useState(company.cnpj || '');
  const [segment, setSegment] = useState(company.segment || '');
  const [website, setWebsite] = useState(company.website || '');
  const [city, setCity] = useState(company.city || '');
  const [about, setAbout] = useState(company.about || '');
  const [saving, setSaving] = useState(false);

  const save = async ()=>{
    setSaving(true);
    try{
      await CruigAPI.put('/companies/me', { brandName, cnpj, segment, website, city, about });
      setCompany(c=>({...c, brandName, cnpj, segment, website, city, about}));
      showToast('Dados salvos!');
    }catch(e){
      showToast(e.message || 'Erro ao salvar dados.');
    }finally{
      setSaving(false);
    }
  };

  const cancel = ()=>{
    setBrandName(company.brandName || company.name || ''); setCnpj(company.cnpj || ''); setSegment(company.segment || '');
    setWebsite(company.website || ''); setCity(company.city || ''); setAbout(company.about || '');
    showToast('Alterações descartadas.');
  };

  return (
    <div style={{maxWidth:720, display:'flex', flexDirection:'column', gap:20}}>
      <div className="card card-pad">
        <h3 style={{fontSize:18, marginBottom:16}}>Dados da empresa</h3>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16}} className="grid-2">
          <div className="field"><label>Nome da empresa</label><input className="input" value={brandName} onChange={e=>setBrandName(e.target.value)}/></div>
          <div className="field"><label>CNPJ</label><input className="input" value={cnpj} onChange={e=>setCnpj(e.target.value)} placeholder="00.000.000/0001-00"/></div>
          <div className="field"><label>Segmento</label><input className="input" value={segment} onChange={e=>setSegment(e.target.value)} placeholder="Beleza & cosméticos"/></div>
          <div className="field"><label>Site</label><input className="input" value={website} onChange={e=>setWebsite(e.target.value)} placeholder="suaempresa.com.br"/></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>
        <div className="field" style={{marginTop:16}}><label>Sobre a marca</label><textarea className="textarea" value={about} onChange={e=>setAbout(e.target.value)} placeholder="Conte sobre a sua marca…"/></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>
    </div>
  );
}

window.CompanyPanel = CompanyPanel;