// Publisher CRM — list + detail with intelligence + recommendations.

function PublisherCRM({setRoute}){
  const all = window.PUBLISHERS_EXT;
  const [sel, setSel] = React.useState(all[1].id); // Charlotte Post
  const [q, setQ] = React.useState('');
  const [tier, setTier] = React.useState('All');
  const [status, setStatus] = React.useState('All');

  const filtered = all.filter(p=>{
    if(q && !`${p.name} ${p.city}`.toLowerCase().includes(q.toLowerCase())) return false;
    if(tier!=='All' && p.tier!==tier) return false;
    if(status!=='All' && p.status!==status) return false;
    return true;
  });

  const p = window.PUBLISHERS_EXT.find(x=>x.id===sel);

  return (
    <AdminShell route="pubcrm" setRoute={setRoute} title="Publisher CRM" breadcrumb="NETWORK · PUBLISHERS"
      actions={<>
        <button className="btn gh">Export CSV</button>
        <button className="btn k">Bulk outreach</button>
        <button className="btn g">+ New publisher</button>
      </>}>

      {/* TOP STATS */}
      <div className="split-4" style={{marginBottom:18}}>
        <Stat n={all.length} l="Total publishers"     d="+2 wk" up={true}/>
        <Stat n={all.filter(p=>p.status==='Active').length} l="Active partners"  d="+1 wk" up={true}/>
        <Stat n={all.filter(p=>p.status==='Onboarding'||p.status==='Pilot').length} l="In onboarding / pilot" d="3 stalled" up={false}/>
        <Stat n={all.filter(p=>p.status==='Outreach'||p.status==='Dormant').length} l="Outreach + dormant" d="+5 since Apr" up={true}/>
      </div>

      {/* MASTER + DETAIL */}
      <div style={{display:'grid',gridTemplateColumns:'1.05fr 1.4fr',gap:18,alignItems:'flex-start'}}>

        {/* MASTER */}
        <Card title={`${filtered.length} publishers`} meta="sorted by network fit"
          actions={<>
            <Seg value={tier} onChange={setTier} options={['All','Legacy','Active','Digital','Magazine','Newsletter']}/>
          </>}>
          <div style={{display:'flex',gap:8,marginBottom:10}}>
            <div style={{display:'flex',alignItems:'center',gap:8,padding:'5px 10px',border:'1px solid var(--rule-line)',background:'var(--canvas)',flex:1}}>
              <span className="mono" style={{fontSize:9.5,color:'var(--mute)',letterSpacing:'.14em'}}>SEARCH</span>
              <input value={q} onChange={e=>setQ(e.target.value)} placeholder="publisher · city…" style={{flex:1,border:0,outline:'none',fontSize:12,background:'transparent'}}/>
            </div>
            <Seg value={status} onChange={setStatus} options={['All','Active','Onboarding','Pilot','Outreach','Dormant']}/>
          </div>
          <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">REACH</th><th className="r">FIT</th><th>STATUS</th></tr></thead>
            <tbody>
              {filtered.sort((a,b)=>b.score-a.score).map(pp=>(
                <tr key={pp.id} className={pp.id===sel?'sel':''} onClick={()=>setSel(pp.id)} style={{cursor:'default'}}>
                  <td>
                    <div style={{display:'flex',alignItems:'center',gap:8}}>
                      <span style={{width:22,height:22,background:`var(--${pp.color})`,color:pp.color==='gold'?'var(--black)':'var(--ivory)',fontFamily:'var(--serif)',fontWeight:800,fontSize:11,display:'flex',alignItems:'center',justifyContent:'center'}}>{pp.short[0]}</span>
                      <div>
                        <div style={{fontSize:12.5,fontWeight:600,lineHeight:1.15}}>{pp.name}</div>
                        <div className="mono" style={{fontSize:9.5,color:'var(--mute)',letterSpacing:'.06em'}}>{pp.city.toUpperCase()} · EST. {pp.founded} · {pp.tier.toUpperCase()}</div>
                      </div>
                    </div>
                  </td>
                  <td className="r num">{pp.da}</td>
                  <td className="r num">{pp.nl>=1000?(pp.nl/1000).toFixed(1)+'K':pp.nl}</td>
                  <td className="r"><Score n={pp.score}/></td>
                  <td><Pill k={pp.status==='Active'?'live':pp.status==='Onboarding'?'info':pp.status==='Pilot'?'warn':pp.status==='Outreach'?'muted':'bad'}>{pp.status}</Pill></td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card>

        {/* DETAIL */}
        <PublisherDetail p={p}/>
      </div>
    </AdminShell>
  );
}

function PublisherDetail({p}){
  const recs = [
    { sev:'high',  t:'Upgrade rights tier to Full syndication',  d:'Currently Excerpt + link. Estimated +$1,840/mo revenue share.' },
    { sev:'med',   t:'Refresh media kit (last updated Mar 2025)', d:'Required for VRT-02 sponsorship eligibility.' },
    { sev:'med',   t:'Add newsletter signup module',              d:'Capture TUEPAC referral traffic. ~2,400/mo expected.' },
    { sev:'low',   t:'Backfill 2024 archive into sitemap',        d:'Improves DA by est. +3 over 90 days.' },
  ];
  const out = [
    { d:'May 19', t:'Email opened · WJ tier-upgrade pitch', who:'MW' },
    { d:'May 16', t:'Call scheduled · editor onboarding · Tue 2pm', who:'MW' },
    { d:'May 14', t:'Sent · Q3 sponsorship co-pitch deck', who:'DS' },
    { d:'May 11', t:'Editor reply · interested in HBCU vertical', who:'RO' },
    { d:'May 07', t:'Auto · DA snapshot 51 (+2)', who:'system' },
  ];

  return (
    <div style={{display:'flex',flexDirection:'column',gap:18}}>
      {/* HEADER CARD */}
      <div className="card">
        <div style={{padding:'14px 16px',display:'grid',gridTemplateColumns:'auto 1fr auto',gap:16,alignItems:'center',background:`linear-gradient(90deg, var(--${p.color}) 0%, var(--black) 220%)`,color:'var(--ivory)'}}>
          <div style={{width:54,height:54,background:'var(--ivory)',color:'var(--black)',display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--serif)',fontWeight:800,fontSize:24}}>{p.short}</div>
          <div>
            <div className="serif" style={{fontSize:24,fontWeight:700,letterSpacing:'-.005em',lineHeight:1.05}}>{p.name}</div>
            <div className="mono" style={{fontSize:10,letterSpacing:'.08em',color:'#cfcfcf',marginTop:4}}>{p.city.toUpperCase()} · EST. {p.founded} · {p.tier.toUpperCase()} · {p.cadence.toUpperCase()}</div>
          </div>
          <div style={{display:'flex',gap:6}}>
            <button className="btn gh" style={{color:'var(--ivory)',borderColor:'var(--ivory)'}}>Public profile ↗</button>
            <button className="btn g">Open campaign →</button>
          </div>
        </div>

        {/* PROFILE FIELDS / METRICS */}
        <div className="bd" style={{padding:'14px 0 0'}}>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr 1fr 1fr 1fr',padding:'0 16px 14px'}}>
            <FieldBlock l="DOMAIN AUTH" v={p.da}/>
            <FieldBlock l="EST. UNIQUES" v="62.4K"/>
            <FieldBlock l="NEWSLETTER" v={(p.nl/1000).toFixed(1)+'K'}/>
            <FieldBlock l="CADENCE" v={p.cadence}/>
            <FieldBlock l="RIGHTS" v={p.mode}/>
            <FieldBlock l="YTD SHARE" v="$8,420" tone="green"/>
          </div>
          <div className="hr"></div>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr 1fr',padding:'14px 16px 14px',gap:0}}>
            <FieldKV l="Editor"    v="R. Adair"/>
            <FieldKV l="Email"     v="editor@thecharlottepost.com"/>
            <FieldKV l="RSS"       v="✓ active · 5 min poll"/>
            <FieldKV l="Sitemap"   v="✓ valid"/>
            <FieldKV l="Owner"     v="Boddie Family / AMEZ"/>
            <FieldKV l="Phone"     v="(704) 555-0142"/>
            <FieldKV l="Media kit" v="✓ 2026 PDF · v2"/>
            <FieldKV l="Last touch" v="Tue · 14:21 · MW"/>
          </div>
        </div>
      </div>

      {/* INTELLIGENCE SCORES + RECOMMENDATIONS */}
      <div style={{display:'grid',gridTemplateColumns:'1fr 1.4fr',gap:18}}>
        <Card title="Intelligence scores" meta="composite">
          {[
            ['Network fit',         p.score,'var(--green)'],
            ['Publisher readiness', 84, 'var(--green)'],
            ['Revenue opportunity', 76, 'var(--navy)'],
            ['Modernization need',  42, 'var(--gold-2)'],
            ['Succession risk',     61, 'var(--gold-2)'],
            ['Acquisition fit',     68, 'var(--navy)'],
            ['Brand safety',        98, 'var(--green)'],
          ].map(([k,n,c])=>(
            <div key={k} style={{display:'grid',gridTemplateColumns:'160px 1fr 40px',gap:10,alignItems:'center',padding:'5px 0'}}>
              <span className="mono" style={{fontSize:10,color:'var(--ink-2)',letterSpacing:'.06em',textTransform:'uppercase'}}>{k}</span>
              <div className="prog"><div className="fill" style={{width:n+'%',background:c}}></div></div>
              <span className="mono num" style={{fontSize:11,textAlign:'right',fontWeight:600}}>{n}</span>
            </div>
          ))}
        </Card>

        <Card title="Recommended actions" meta="4 open"
          actions={<button className="btn gh s">Snooze all</button>}>
          {recs.map((r,i)=>(
            <div key={i} style={{display:'grid',gridTemplateColumns:'70px 1fr auto',gap:12,padding:'9px 0',borderBottom:i===recs.length-1?'none':'1px solid var(--rule-line)',alignItems:'center'}}>
              <Pill k={r.sev==='high'?'bad':r.sev==='med'?'warn':'muted'}>{r.sev.toUpperCase()}</Pill>
              <div>
                <div style={{fontSize:12.5,fontWeight:600}}>{r.t}</div>
                <div style={{fontSize:11.5,color:'var(--mute)',marginTop:2}}>{r.d}</div>
              </div>
              <div style={{display:'flex',gap:5}}>
                <button className="btn k s">Do</button>
                <button className="btn gh s">Skip</button>
              </div>
            </div>
          ))}
        </Card>
      </div>

      {/* RIGHTS + COMMITMENT TIMELINE */}
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:18}}>
        <Card title="Rights & commitments">
          <table className="tbl" style={{marginLeft:-14,marginRight:-14,width:'calc(100% + 28px)'}}>
            <tbody>
              <tr><td className="mono" style={{color:'var(--mute)',letterSpacing:'.04em'}}>License tier</td><td><Pill k="live">Full syndication</Pill></td></tr>
              <tr><td className="mono" style={{color:'var(--mute)',letterSpacing:'.04em'}}>Revenue split</td><td className="num">65% / 25% / 10%</td></tr>
              <tr><td className="mono" style={{color:'var(--mute)',letterSpacing:'.04em'}}>Attribution policy</td><td>Logo · byline · canonical URL</td></tr>
              <tr><td className="mono" style={{color:'var(--mute)',letterSpacing:'.04em'}}>Canonical owner</td><td>Publisher (publisher domain)</td></tr>
              <tr><td className="mono" style={{color:'var(--mute)',letterSpacing:'.04em'}}>Takedown SLA</td><td>24 hr · 0 open</td></tr>
              <tr><td className="mono" style={{color:'var(--mute)',letterSpacing:'.04em'}}>Spotlight slot</td><td>Q3 2026 · scheduled Aug 14</td></tr>
              <tr><td className="mono" style={{color:'var(--mute)',letterSpacing:'.04em'}}>Pilot term</td><td>2025-09-01 → 2026-09-01 · auto-renew</td></tr>
            </tbody>
          </table>
        </Card>

        <Card title="Outreach timeline" meta="last 30 days">
          {out.map((o,i)=>(
            <div key={i} style={{display:'grid',gridTemplateColumns:'60px 1fr auto',gap:10,padding:'8px 0',borderBottom:i===out.length-1?'none':'1px solid var(--rule-line)',alignItems:'baseline'}}>
              <span className="mono num" style={{fontSize:10.5,color:'var(--mute)',letterSpacing:'.04em'}}>{o.d}</span>
              <span style={{fontSize:12.5}}>{o.t}</span>
              <span className="mono" style={{fontSize:9.5,color:'var(--navy)',letterSpacing:'.06em'}}>{o.who.toUpperCase()}</span>
            </div>
          ))}
        </Card>
      </div>
    </div>
  );
}

function FieldBlock({l,v,tone}){
  const c = tone==='green'?'var(--green)':'var(--ink)';
  return (
    <div>
      <div className="mono" style={{fontSize:9.5,color:'var(--mute)',letterSpacing:'.14em'}}>{l}</div>
      <div className="serif num" style={{fontSize:22,fontWeight:700,letterSpacing:'-.005em',color:c,marginTop:5,lineHeight:1}}>{v}</div>
    </div>
  );
}
function FieldKV({l,v}){
  return (
    <div style={{padding:'4px 0'}}>
      <div className="mono" style={{fontSize:9,color:'var(--mute)',letterSpacing:'.14em',textTransform:'uppercase'}}>{l}</div>
      <div style={{fontSize:12.5,marginTop:2,fontWeight:500}}>{v}</div>
    </div>
  );
}

window.PublisherCRM = PublisherCRM;