// Newsletter desk · weekly edition composer: pick stories, reorder, preview, queue (demo).

function Newsletter({setRoute}){
  const [slots, setSlots] = React.useState(window.NL_DRAFT.map((d,i)=>({...d, id:i})));
  const [subject, setSubject] = React.useState('This week from TUEPAC: the lead story + what the desks filed');
  const [preview, setPreview] = React.useState(false);
  const [queued, setQueued] = React.useState(false);
  const [adding, setAdding] = React.useState(false);
  const pool = (window.STUDIO_PIECES||[]).filter(p=>p.stage==='published').map(p=>p.headline)
    .concat(['County commissioners table the stadium tax vote','Housing co-op model gains traction'])
    .filter(t=>!slots.some(s=>s.t===t));

  function move(i, dir){
    const j = i+dir; if(j<0||j>=slots.length) return;
    const n = slots.slice(); [n[i],n[j]]=[n[j],n[i]]; setSlots(n);
  }
  function cut(i){ setSlots(slots.filter((_,x)=>x!==i)); }
  function add(t){ setSlots([...slots, {t, kind:'story', id:Date.now()}]); setAdding(false); }

  return (
    <AdminShell route="nl" setRoute={setRoute} title="Newsletter · weekly" breadcrumb="CONTENT · NEWSLETTER"
      actions={<>
        <button className="btn gh" onClick={()=>setPreview(!preview)}>{preview?'Back to composer':'Preview'}</button>
        <button className="btn g" disabled={queued} onClick={()=>setQueued(true)}>{queued?'✓ Queued (demo)':'Queue for Tuesday →'}</button>
      </>}>

      {queued && <div className="mono" style={{padding:'8px 12px',marginBottom:14,border:'1px solid var(--rule-line)',background:'var(--canvas)',fontSize:9.5,letterSpacing:'.08em',color:'var(--green)'}}>✓ DEMO · NOTHING ACTUALLY SENDS YET · ENGINEERING WIRES THIS TO THE EMAIL SERVICE</div>}

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

        {!preview ? (
        <Card title="This week's edition" meta={`${slots.length} slots · sends Tue 7:00 AM ET`}>
          <div className="eyebrow" style={{marginBottom:5}}>SUBJECT</div>
          <input value={subject} onChange={e=>setSubject(e.target.value)} style={{width:'100%',padding:'8px 10px',border:'1px solid var(--rule-line)',background:'var(--bg)',fontSize:14,fontFamily:'var(--serif)',fontWeight:700,outline:'none',marginBottom:12}}/>
          <div>
            {slots.map((d,i)=>(
              <div key={d.id} style={{display:'grid',gridTemplateColumns:'24px 1fr auto',gap:10,padding:'8px 0',borderBottom:'1px solid var(--rule-line)',alignItems:'center'}}>
                <span className="mono num" style={{fontSize:9.5,color:'var(--mute)'}}>{i===0?'★':String(i+1).padStart(2,'0')}</span>
                <div>
                  <div style={{fontSize:12.5,fontWeight:i===0?700:500,textWrap:'pretty'}}>{d.t}</div>
                  {i===0 && <div className="mono" style={{fontSize:9,color:'var(--red)',letterSpacing:'.1em',marginTop:2}}>LEAD STORY</div>}
                  {d.kind==='spn' && <div className="mono" style={{fontSize:9.5,color:'var(--gold-2)',letterSpacing:'.1em',marginTop:2,fontWeight:600}}>SPONSORED</div>}
                </div>
                <div style={{display:'flex',gap:4}}>
                  <button className="btn gh s" onClick={()=>move(i,-1)}>↑</button>
                  <button className="btn gh s" onClick={()=>move(i,1)}>↓</button>
                  <button className="btn gh s" onClick={()=>cut(i)}>✕</button>
                </div>
              </div>
            ))}
            {slots.length===0 && <div className="mono" style={{fontSize:10,color:'var(--mute)',letterSpacing:'.1em',textAlign:'center',padding:'20px 0'}}>NO STORIES YET · ADD FROM PUBLISHED</div>}
          </div>
          <div style={{marginTop:12,paddingTop:10,borderTop:'1px solid var(--rule-line)'}}>
            <button className="btn gh" onClick={()=>setAdding(!adding)}>+ Add story</button>
            {adding && (
              <div style={{marginTop:8,border:'1px solid var(--rule-line)',background:'var(--canvas)'}}>
                {pool.length ? pool.map(t=>(
                  <button key={t} onClick={()=>add(t)} style={{display:'block',width:'100%',textAlign:'left',padding:'7px 10px',border:0,borderBottom:'1px solid var(--rule-line)',background:'transparent',cursor:'pointer',fontSize:12}}>{t}</button>
                )) : <div className="mono" style={{padding:'10px',fontSize:9.5,color:'var(--mute)',letterSpacing:'.08em'}}>NOTHING PUBLISHED TO ADD · WRITE IN THE STUDIO</div>}
              </div>
            )}
          </div>
        </Card>
        ) : (
        <Card title="What subscribers receive" meta="rendered email">
          <div style={{background:'#e9e6df',padding:'14px',margin:'-2px 0'}}>
            <div style={{maxWidth:480,margin:'0 auto',background:'#fff',boxShadow:'0 1px 4px rgba(0,0,0,.12)'}}>
              <div style={{padding:'9px 16px',borderBottom:'1px solid #eee',fontSize:10.5,color:'#666',fontFamily:'var(--sans)'}}>
                <b style={{color:'#111'}}>TUEPAC Weekly</b> &lt;desk@tuepac.com&gt;<br/><span style={{color:'#999'}}>to me · Tue 7:00 AM</span>
              </div>
              <div style={{background:'var(--navy,#0A3161)',padding:'18px 20px',textAlign:'center'}}>
                <img src="assets/tuepac-logo.png" alt="TUEPAC" style={{height:40,display:'inline-block'}}/>
                <div className="mono" style={{fontSize:8.5,letterSpacing:'.24em',color:'#9BC4FF',marginTop:8}}>THE WEEKLY · OUR NEWS, OUR NETWORK</div>
              </div>
              <div style={{padding:'20px 20px 6px'}}>
                <div className="serif" style={{fontSize:19,fontWeight:700,lineHeight:1.25,color:'#111',textWrap:'pretty'}}>{subject}</div>
              </div>
              {slots.map((d,i)=>i===0?(
                <div key={d.id} style={{padding:'12px 20px 16px'}}>
                  <div style={{aspectRatio:'16/9',background:'linear-gradient(120deg,#0A3161,#B31942)',display:'flex',alignItems:'flex-end',padding:12}}>
                    <span className="mono" style={{fontSize:8.5,letterSpacing:'.14em',color:'rgba(255,255,255,.85)'}}>LEAD STORY IMAGE</span>
                  </div>
                  <div className="serif" style={{fontSize:17,fontWeight:700,lineHeight:1.3,marginTop:10,color:'#111'}}>{d.t}</div>
                  <div style={{fontSize:12.5,color:'#555',lineHeight:1.55,marginTop:6,fontFamily:'var(--sans)'}}>The story our desks led with this week, reported in full on tuepac.com.</div>
                  <span style={{display:'inline-block',marginTop:10,background:'var(--red,#B31942)',color:'#fff',fontFamily:'var(--sans)',fontSize:12,fontWeight:700,padding:'9px 18px'}}>Read the lead story</span>
                </div>
              ):(
                <div key={d.id} style={{padding:'12px 20px',borderTop:'1px solid #eee'}}>
                  <div className="mono" style={{fontSize:8.5,letterSpacing:'.16em',color:d.kind==='spn'?'#a07400':'var(--red,#B31942)'}}>{d.kind==='spn'?'SPONSORED':'FROM THE DESKS'}</div>
                  <div className="serif" style={{fontSize:14,fontWeight:600,lineHeight:1.35,marginTop:3,color:'#111'}}>{d.t}</div>
                  <div style={{fontSize:11.5,color:'var(--red,#B31942)',fontWeight:700,marginTop:4,fontFamily:'var(--sans)'}}>Read on tuepac.com →</div>
                </div>
              ))}
              <div style={{background:'#f6f4ef',padding:'14px 20px',marginTop:8,textAlign:'center'}}>
                <div className="serif" style={{fontSize:13,fontWeight:700,color:'#111'}}>Know someone who should get this?</div>
                <span style={{display:'inline-block',marginTop:8,border:'1.5px solid var(--navy,#0A3161)',color:'var(--navy,#0A3161)',fontFamily:'var(--sans)',fontSize:11.5,fontWeight:700,padding:'7px 16px'}}>Forward it · they can subscribe free</span>
                <div style={{fontSize:9.5,color:'#999',marginTop:12,fontFamily:'var(--sans)'}}>You receive this because you subscribed at tuepac.com · Unsubscribe in one click</div>
              </div>
            </div>
          </div>
        </Card>
        )}

        <Card title="Editions" meta="weekly for now">
          <table className="tbl" style={{marginLeft:-14,marginRight:-14,width:'calc(100% + 28px)'}}>
            <thead><tr><th>EDITION</th><th className="r">SUBS</th><th>NEXT SEND</th><th className="r">OPEN</th></tr></thead>
            <tbody>
              {window.NEWSLETTERS.slice(0,1).map(n=>(
                <tr key={n.name} className="sel">
                  <td style={{fontSize:12.5,fontWeight:600}}>TUEPAC Weekly</td>
                  <td className="r num">{n.subs.toLocaleString()}</td>
                  <td className="mono" style={{fontSize:10.5}}>Tue 7:00 AM</td>
                  <td className="r num" style={{color:'var(--green)',fontWeight:600}}>{n.open}</td>
                </tr>
              ))}
            </tbody>
          </table>
          <div className="mono" style={{fontSize:9.5,color:'var(--mute)',letterSpacing:'.08em',marginTop:10}}>CITY AND TOPIC EDITIONS UNLOCK AS THE NETWORK GROWS</div>
        </Card>
      </div>
    </AdminShell>
  );
}

window.Newsletter = Newsletter;