// Creator / influencer CRM — separate pipeline for podcasts, YouTube, newsletter writers, social voices.

function CreatorCRM({setRoute}){
  const c = window.CREATORS;
  const [sort, setSort] = React.useState('Score');
  const sorted = [...c].sort((a,b)=> sort==='Score' ? b.score-a.score : sort==='Mission' ? b.mission-a.mission : a.name.localeCompare(b.name));

  return (
    <AdminShell route="creators" setRoute={setRoute} title="Creator & influencer CRM" breadcrumb="NETWORK · NEW MEDIA"
      actions={<>
        <button className="btn gh">Templates</button>
        <button className="btn k">Bulk invite</button>
        <button className="btn g">+ New creator</button>
      </>}>

      <div className="split-4" style={{marginBottom:18}}>
        <Stat n="34"  l="Creator pipeline" d="+5 wk" up={true}/>
        <Stat n="12"  l="P1 priority" d="6 podcast · 4 video · 2 social"/>
        <Stat n="486K" l="Combined audience" d="across all formats"/>
        <Stat n="9"   l="Active partners" d="signed last 60d"/>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'1.4fr 1fr',gap:18,alignItems:'flex-start'}}>
        <Card title="Creator pipeline" meta={`${sorted.length}`}
          actions={<>
            <Seg value={sort} onChange={setSort} options={['Score','Mission','Name']}/>
            <button className="btn gh s">CSV</button>
          </>}>
          <table className="tbl" style={{marginLeft:-14,marginRight:-14,width:'calc(100% + 28px)'}}>
            <thead><tr><th>CREATOR</th><th>TYPE</th><th>CITY</th><th className="r">REACH</th><th>STATUS</th><th className="r">FIT</th><th className="r">MISSION</th></tr></thead>
            <tbody>
              {sorted.map(x=>(
                <tr key={x.name}>
                  <td>
                    <div style={{fontSize:12.5,fontWeight:600}}>{x.name}</div>
                    <div className="mono" style={{fontSize:9.5,color:'var(--navy)',letterSpacing:'.06em'}}>{x.handle}</div>
                  </td>
                  <td><Pill k={x.type==='Podcast'?'info':x.type==='YouTube'?'bad':x.type==='Substack'?'live':'warn'}>{x.type.toUpperCase()}</Pill></td>
                  <td className="mono" style={{fontSize:10.5,letterSpacing:'.04em'}}>{x.city}</td>
                  <td className="r mono num">{x.reach}</td>
                  <td><Pill k={x.status==='Active'?'live':x.status==='Onboarding'?'info':x.status==='Invited'?'warn':'muted'}>{x.status}</Pill></td>
                  <td className="r"><Score n={x.score}/></td>
                  <td className="r"><Score n={x.mission} tone="var(--gold-2)"/></td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card>

        <div style={{display:'flex',flexDirection:'column',gap:18}}>
          <Card title="Rights / collaboration modes" meta="default per creator type">
            {[
              ['Link / cite only',  'All untouched creators',  'muted'],
              ['Embed allowed',     'YouTube · podcast · social', 'info'],
              ['Clip allowed',      'Podcast · video (≤90s)',  'info'],
              ['Quote allowed',     'Public-figure commentary', 'info'],
              ['Newsletter excerpt','Substack · newsletter writers', 'live'],
              ['Guest contributor', 'Signed creator partners', 'live'],
              ['Campaign partner',  'Paid amplification campaigns', 'warn'],
              ['Network host',      'Series-level partnership', 'g'],
            ].map(([k,v,c])=>(
              <div key={k} style={{display:'grid',gridTemplateColumns:'1fr auto',gap:10,padding:'7px 0',borderBottom:'1px solid var(--rule-line)',alignItems:'center'}}>
                <div>
                  <div style={{fontSize:12.5,fontWeight:500}}>{k}</div>
                  <div className="mono" style={{fontSize:9.5,color:'var(--mute)',letterSpacing:'.04em'}}>{v}</div>
                </div>
                <Pill k={c}>{c==='g'?'PREMIUM':c.toUpperCase()}</Pill>
              </div>
            ))}
          </Card>

          <Card title="Top creator collabs · this quarter">
            {[
              ['Black North Pod × Self-Help','Sponsored 6-ep series','$18,000','live'],
              ['HBCU Sideline × A&T Athletics','Game-week clip package','$9,800','live'],
              ['Triangle Brief × Duke Health','Maternal-health explainer','$6,400','live'],
              ['Carolina Money × Bull City Wealth','Series of 4 educational','$8,200','approved'],
            ].map(([t,d,v,c])=>(
              <div key={t} style={{padding:'7px 0',borderBottom:'1px solid var(--rule-line)'}}>
                <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline'}}>
                  <span style={{fontSize:12.5,fontWeight:600}}>{t}</span>
                  <span className="mono num" style={{fontSize:11,color:'var(--green)',fontWeight:600}}>{v}</span>
                </div>
                <div style={{display:'flex',gap:8,alignItems:'center',marginTop:3}}>
                  <span className="mono" style={{fontSize:9.5,color:'var(--mute)',letterSpacing:'.06em'}}>{d.toUpperCase()}</span>
                  <Pill k={c==='live'?'live':'info'}>{c.toUpperCase()}</Pill>
                </div>
              </div>
            ))}
          </Card>
        </div>
      </div>
    </AdminShell>
  );
}

window.CreatorCRM = CreatorCRM;