// Newsletter desk — editions list + today's draft composer.

function Newsletter({setRoute}){
  const nls = window.NEWSLETTERS;
  const draft = window.NL_DRAFT;
  const [sel, setSel] = React.useState('Charlotte Daily');

  return (
    <AdminShell route="nl" setRoute={setRoute} title="Newsletter desk" breadcrumb="CONTENT · NEWSLETTERS"
      actions={<>
        <button className="btn gh">Suppression list</button>
        <button className="btn k">Schedule send</button>
        <button className="btn g">+ New edition</button>
      </>}>

      <div className="split-4" style={{marginBottom:18}}>
        <Stat n="7"      l="Active editions" d="6 sponsored"/>
        <Stat n="142.3K" l="Total subs" d="+3.4% wk" up={true}/>
        <Stat n="36.8%"  l="Avg open · 30d" d="+1.2 pt" up={true}/>
        <Stat n="20 / 25" l="Sponsor slots booked" d="3 open · wk 21" up={true}/>
      </div>

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

        {/* EDITIONS TABLE */}
        <Card title="Editions" meta="7"
          actions={<Seg value="All" onChange={()=>{}} options={['All','Daily','Weekly','Monthly']}/>}>
          <table className="tbl" style={{marginLeft:-14,marginRight:-14,width:'calc(100% + 28px)'}}>
            <thead><tr><th>EDITION</th><th className="r">SUBS</th><th>CADENCE</th><th>NEXT SEND</th><th>SPONSOR</th><th className="r">OPEN</th></tr></thead>
            <tbody>
              {nls.map(n=>(
                <tr key={n.name} className={n.name===sel?'sel':''} onClick={()=>setSel(n.name)}>
                  <td>
                    <div style={{fontSize:12.5,fontWeight:600}}>{n.name}</div>
                    <div className="mono" style={{fontSize:9.5,color:'var(--mute)',letterSpacing:'.06em'}}>SLOTS {n.slots}</div>
                  </td>
                  <td className="r num">{n.subs.toLocaleString()}</td>
                  <td className="mono" style={{fontSize:10.5,letterSpacing:'.04em',color:'var(--ink-2)'}}>{n.cadence}</td>
                  <td className="mono" style={{fontSize:10.5,letterSpacing:'.04em'}}>{n.nextSend}</td>
                  <td className="mono" style={{fontSize:10.5,letterSpacing:'.04em',color:'var(--gold-2)'}}>{n.sponsor}</td>
                  <td className="r num" style={{color:'var(--green)',fontWeight:600}}>{n.open}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card>

        {/* DRAFT COMPOSER */}
        <Card title={`${sel} · draft`} meta="auto-curated · pending review"
          actions={<>
            <button className="btn gh s">Preview</button>
            <button className="btn k s">Send test</button>
            <button className="btn g s">Schedule →</button>
          </>}>
          <div style={{padding:'2px 0 10px',display:'flex',gap:14,alignItems:'baseline',borderBottom:'1px solid var(--rule-line)',marginBottom:12}}>
            <div>
              <div className="mono" style={{fontSize:9.5,letterSpacing:'.14em',color:'var(--mute)'}}>SUBJECT</div>
              <div className="serif" style={{fontSize:18,fontWeight:700,letterSpacing:'-.005em',marginTop:3}}>Charlotte: West End fund passes 7–4 · 6 more stories</div>
            </div>
          </div>

          <div>
            {draft.map((d,i)=>{
              const p = d.pub ? window.PUB_BY_ID[d.pub] : null;
              return (
                <div key={i} style={{display:'grid',gridTemplateColumns:'24px 1fr auto',gap:10,padding:'8px 0',borderBottom:'1px solid var(--rule-line)',alignItems:'center',background:d.kind==='spn'?'rgba(214,161,58,.06)':'transparent',marginLeft:d.kind==='spn'?-14:0,marginRight:d.kind==='spn'?-14:0,paddingLeft:d.kind==='spn'?14:0,paddingRight:d.kind==='spn'?14:0}}>
                  <span className="mono num" style={{fontSize:9.5,color:'var(--mute)'}}>{String(i+1).padStart(2,'0')}</span>
                  <div>
                    <div style={{fontSize:12.5,fontWeight:500,textWrap:'pretty'}}>{d.t}</div>
                    {p && <div className="mono" style={{fontSize:9.5,color:'var(--mute)',letterSpacing:'.06em',marginTop:2}}>CREDIT · {p.name.toUpperCase()}</div>}
                    {d.kind==='spn' && <div className="mono" style={{fontSize:9.5,color:'var(--gold-2)',letterSpacing:'.1em',marginTop:2,fontWeight:600}}>SPONSORED · {d.s.toUpperCase()}</div>}
                  </div>
                  <div style={{display:'flex',gap:4}}>
                    <button className="btn gh s">↑</button>
                    <button className="btn gh s">↓</button>
                    <button className="btn gh s">✕</button>
                  </div>
                </div>
              );
            })}
          </div>

          <div style={{display:'flex',gap:8,marginTop:12,paddingTop:10,borderTop:'1px solid var(--rule-line)'}}>
            <button className="btn gh">+ Add story</button>
            <button className="btn gh">+ Insert sponsor read</button>
            <button className="btn gh">+ City brief</button>
          </div>
          <div className="mono" style={{fontSize:9.5,color:'var(--mute)',letterSpacing:'.08em',marginTop:10}}>SENDING TUE 7:00 AM ET · 58,320 SUBSCRIBERS · UTM TPC_NL_CHARLOTTE_20260520</div>
        </Card>
      </div>
    </AdminShell>
  );
}

window.Newsletter = Newsletter;