// Publisher intelligence — network-wide DA / scoring / recommendation engine.

function PublisherIntel({setRoute}){
  const all = window.PUBLISHERS_EXT;
  const buckets = [
    { k:'80+', n:all.filter(p=>p.score>=80).length, c:'var(--green)' },
    { k:'65-79', n:all.filter(p=>p.score>=65&&p.score<80).length, c:'var(--navy)' },
    { k:'50-64', n:all.filter(p=>p.score>=50&&p.score<65).length, c:'var(--gold-2)' },
    { k:'<50', n:all.filter(p=>p.score<50).length, c:'var(--red)' },
  ];

  return (
    <AdminShell route="pubintel" setRoute={setRoute} title="Publisher intelligence" breadcrumb="NETWORK · SCORING + RECOMMENDATIONS"
      actions={<>
        <button className="btn gh">Sweep log</button>
        <button className="btn k">Run DA sweep</button>
        <button className="btn g">Export scorecard</button>
      </>}>

      <div className="split-4" style={{marginBottom:18}}>
        <Stat n="47"  l="Publishers scored" d="last sweep 06:00"/>
        <Stat n="3"   l="Moved up a bucket" d="this sweep" up={true}/>
        <Stat n="38"  l="Median DA" d="+1 vs Apr" up={true}/>
        <Stat n="118" l="Open recommendations" d="22 high · 56 med · 40 low"/>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'1fr 1.6fr',gap:18,alignItems:'flex-start'}}>

        <div style={{display:'flex',flexDirection:'column',gap:18}}>
          <Card title="Network fit · distribution">
            <div style={{display:'flex',alignItems:'flex-end',gap:14,height:120,paddingTop:8}}>
              {buckets.map(b=>{
                const max = Math.max(...buckets.map(x=>x.n));
                return (
                  <div key={b.k} style={{flex:1,display:'flex',flexDirection:'column',alignItems:'center',gap:6}}>
                    <div className="serif num" style={{fontSize:18,fontWeight:700}}>{b.n}</div>
                    <div style={{width:'100%',height:`${(b.n/max)*80}px`,background:b.c}}></div>
                    <div className="mono" style={{fontSize:10,letterSpacing:'.08em',color:'var(--mute)'}}>{b.k}</div>
                  </div>
                );
              })}
            </div>
            <div className="mono" style={{fontSize:9.5,color:'var(--mute)',letterSpacing:'.1em',marginTop:12}}>NETWORK FIT BUCKETS · PUBLISHERS</div>
          </Card>

          <Card title="Score definitions" meta="composite">
            {[
              ['Publisher readiness','How ready to join + syndicate'],
              ['Revenue opportunity','Ease of monetization · sponsor fit'],
              ['Modernization need', 'Tech / SEO / digital infrastructure'],
              ['Succession risk',    'Probability of needing preservation'],
              ['Acquisition fit',    'Strategic value + likelihood'],
              ['Brand safety',       'Editorial + reputation risk'],
            ].map(([k,v])=>(
              <div key={k} style={{padding:'7px 0',borderBottom:'1px solid var(--rule-line)'}}>
                <div style={{fontSize:12.5,fontWeight:600}}>{k}</div>
                <div style={{fontSize:11.5,color:'var(--mute)',marginTop:2}}>{v}</div>
              </div>
            ))}
          </Card>

          <Card title="Recent sweep results">
            {[
              ['Add RSS feed','9 publishers eligible','high'],
              ['Upload media kit','6 publishers eligible','high'],
              ['Backfill sitemap','12 publishers','med'],
              ['Newsletter signup module','14 publishers','med'],
              ['Image alt text · accessibility','22 publishers','low'],
            ].map(([t,d,s])=>(
              <div key={t} 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:600}}>{t}</div>
                  <div className="mono" style={{fontSize:9.5,color:'var(--mute)',letterSpacing:'.06em'}}>{d.toUpperCase()}</div>
                </div>
                <Pill k={s==='high'?'bad':s==='med'?'warn':'muted'}>{s.toUpperCase()}</Pill>
              </div>
            ))}
          </Card>
        </div>

        <Card title="Network scorecard" meta="all publishers"
          actions={<Seg value="All" onChange={()=>{}} options={['All','Top quartile','Need attention']}/>}>
          <table className="tbl" style={{marginLeft:-14,marginRight:-14,width:'calc(100% + 28px)'}}>
            <thead><tr><th>PUBLISHER</th><th className="r">DA</th><th className="r">READY</th><th className="r">REVENUE</th><th className="r">MOD. NEED</th><th className="r">SUCCESS.</th><th className="r">ACQ FIT</th><th className="r">FIT</th></tr></thead>
            <tbody>
              {[...all].sort((a,b)=>b.score-a.score).map(p=>{
                // synthetic per-publisher sub-scores derived from base
                const ready = Math.min(100, p.score+(p.mode==='Full syndication'?6:p.mode==='Excerpt + link'?2:-8));
                const rev   = Math.min(100, Math.round(p.score*0.85 + (p.nl/1000)));
                const mod   = Math.max(10, 100 - p.score - (p.tier==='Digital'?-20:p.tier==='Legacy'?15:0));
                const succ  = Math.max(10, 100 - (p.tier==='Legacy'?20:60) - (p.status==='Active'?15:0));
                const acq   = Math.max(10, Math.min(100, 50 + (p.tier==='Legacy'?20:p.tier==='Magazine'?10:-5) + (succ>50?10:0)));
                return (
                  <tr key={p.id}>
                    <td><span style={{display:'flex',alignItems:'center',gap:6}}><span style={{width:18,height:18,background:`var(--${p.color})`,color:p.color==='gold'?'var(--black)':'var(--ivory)',fontFamily:'var(--serif)',fontWeight:800,fontSize:10,display:'flex',alignItems:'center',justifyContent:'center'}}>{p.short[0]}</span><span style={{fontSize:12.5,fontWeight:500}}>{p.name}</span></span></td>
                    <td className="r num">{p.da}</td>
                    <td className="r"><Score n={ready}/></td>
                    <td className="r"><Score n={rev}/></td>
                    <td className="r"><Score n={mod} tone="var(--gold-2)"/></td>
                    <td className="r"><Score n={succ} tone="var(--red)"/></td>
                    <td className="r"><Score n={acq} tone="var(--navy)"/></td>
                    <td className="r num" style={{fontWeight:700}}>{p.score}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </Card>
      </div>
    </AdminShell>
  );
}

window.PublisherIntel = PublisherIntel;