// Article requests · kanban with intake, card detail, advance/decline, Studio handoff.

function ArticleRequests({setRoute}){
  const [reqs, setReqs] = React.useState(window.REQUESTS);
  const [sel, setSel] = React.useState(null);
  const [adding, setAdding] = React.useState(false);
  const stages = ['Pitched','Accepted','In progress','Submitted','Declined'];
  const byStage = Object.fromEntries(stages.map(s=>[s, reqs.filter(r=>r.status===s)]));
  const it = reqs.find(r=>r.id===sel);

  function move(id, status){ setReqs(reqs.map(r=>r.id===id?{...r,status}:r)); }
  function next(r){ return r.status==='Pitched'?'Accepted':r.status==='Accepted'?'In progress':r.status==='In progress'?'Submitted':null; }
  function addReq(f){
    const id = 'AR-'+(300+reqs.length);
    setReqs([{id, topic:f.topic, desk:f.desk, city:'National', status:'Pitched', due:7, budget:' · ', sponsor:' · ', requester:f.requester, pub:null}, ...reqs]);
    setAdding(false); setSel(id);
  }

  return (
    <AdminShell route="reqs" setRoute={setRoute} title="Article requests" breadcrumb="CONTENT · ASSIGNMENTS"
      actions={<button className="btn g" onClick={()=>{setAdding(true);setSel(null);}}>+ New request</button>}>

      {adding && <Intake onCancel={()=>setAdding(false)} onSave={addReq}/>}

      {it && (
        <Card title={it.topic} meta={`${it.id} · ${it.status}`} style={{marginBottom:18}}
          actions={<>
            <button className="btn gh s" onClick={()=>setSel(null)}>Close</button>
            {it.status!=='Declined' && it.status!=='Submitted' && <button className="btn gh s" onClick={()=>move(it.id,'Declined')}>Decline</button>}
            {it.status==='In progress' && <button className="btn n s" onClick={()=>setRoute('studio')}>Draft in Studio →</button>}
            {next(it) && <button className="btn k s" onClick={()=>move(it.id, next(it))}>{next(it)==='Accepted'?'Accept':next(it)==='In progress'?'Start':'Mark submitted'} →</button>}
          </>}>
          <div style={{display:'flex',gap:24,flexWrap:'wrap'}}>
            {[['Requester', it.requester||' · '],['Desk', it.desk],['Due', it.due?it.due+'d':' · '],['Budget', it.budget]].map(([l,v])=>(
              <div key={l}><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>
            ))}
          </div>
        </Card>
      )}

      <Card title="Pipeline" meta="click a card to open it">
        <div style={{display:'grid',gridTemplateColumns:'repeat(5,1fr)',gap:0,marginLeft:-14,marginRight:-14,marginTop:-12,marginBottom:-12}}>
          {stages.map((st,i)=>(
            <div key={st} style={{borderRight:i===4?'none':'1px solid var(--rule-line)',padding:'10px 12px',background:i%2?'var(--canvas)':'var(--bg)',minHeight:320}}>
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom:8}}>
                <span className="mono" style={{fontSize:9.5,letterSpacing:'.14em',color:st==='Declined'?'var(--red)':st==='Submitted'?'var(--green)':'var(--ink)',fontWeight:600}}>{st.toUpperCase()}</span>
                <span className="mono num" style={{fontSize:10,color:'var(--mute)'}}>{byStage[st].length}</span>
              </div>
              <div style={{display:'flex',flexDirection:'column',gap:8}}>
                {byStage[st].map(r=>(
                  <div key={r.id} onClick={()=>{setSel(r.id);setAdding(false);}} style={{padding:'8px 10px',background:'var(--bg)',border:'1px solid '+(r.id===sel?'var(--navy)':'var(--rule-line)'),cursor:'default'}}>
                    <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline'}}>
                      <span className="mono" style={{fontSize:9.5,color:'var(--mute)',letterSpacing:'.06em'}}>{r.id}</span>
                      <span className="mono num" style={{fontSize:10,color:r.due<=2?'var(--red)':'var(--mute)'}}>{r.due?r.due+'d':' · '}</span>
                    </div>
                    <div className="serif" style={{fontSize:13.5,fontWeight:600,lineHeight:1.2,marginTop:4,textWrap:'pretty'}}>{r.topic}</div>
                    <div className="mono" style={{fontSize:9.5,color:'var(--mute)',letterSpacing:'.06em',marginTop:5}}>{r.desk.toUpperCase()}</div>
                  </div>
                ))}
                {byStage[st].length===0 && <div className="mono" style={{fontSize:10,color:'var(--mute)',letterSpacing:'.1em',textAlign:'center',padding:'24px 0'}}>EMPTY</div>}
              </div>
            </div>
          ))}
        </div>
      </Card>
    </AdminShell>
  );
}

function Intake({onCancel, onSave}){
  const [topic, setTopic] = React.useState('');
  const [requester, setRequester] = React.useState('');
  const [desk, setDesk] = React.useState('Business');
  const inp = {border:'1px solid var(--rule-line)',padding:'9px 11px',background:'var(--bg)',outline:'none',fontSize:13,fontFamily:'var(--sans)',width:'100%'};
  return (
    <Card title="New request" style={{marginBottom:18}}
      actions={<>
        <button className="btn gh s" onClick={onCancel}>Cancel</button>
        <button className="btn k s" disabled={!topic.trim()} onClick={()=>onSave({topic:topic.trim(), requester:requester.trim()||'TUEPAC', desk})}>Add to Pitched →</button>
      </>}>
      <div style={{display:'grid',gridTemplateColumns:'2fr 1fr 1fr',gap:10}}>
        <div><div className="eyebrow" style={{marginBottom:5}}>TOPIC</div><input style={inp} value={topic} onChange={e=>setTopic(e.target.value)} placeholder="What should we cover?"/></div>
        <div><div className="eyebrow" style={{marginBottom:5}}>REQUESTER</div><input style={inp} value={requester} onChange={e=>setRequester(e.target.value)} placeholder="Name or org"/></div>
        <div><div className="eyebrow" style={{marginBottom:5}}>DESK</div><Seg value={desk} onChange={setDesk} options={['Business','Politics','Sports','Civic']}/></div>
      </div>
    </Card>
  );
}

window.ArticleRequests = ArticleRequests;