// Article requests — kanban-style pipeline.

function ArticleRequests({setRoute}){
  const reqs = window.REQUESTS;
  const stages = ['Pitched','Accepted','In progress','Submitted','Declined'];
  const byStage = Object.fromEntries(stages.map(s=>[s, reqs.filter(r=>r.status===s)]));

  return (
    <AdminShell route="reqs" setRoute={setRoute} title="Article requests" breadcrumb="CONTENT · ASSIGNMENTS"
      actions={<>
        <button className="btn gh">Templates</button>
        <button className="btn k">Bulk route</button>
        <button className="btn g">+ New request</button>
      </>}>

      <div className="split-4" style={{marginBottom:18}}>
        <Stat n={reqs.length} l="Open requests" d="+2 wk" up={true}/>
        <Stat n="$7,440" l="Budget committed" d="$4,260 sponsor-funded"/>
        <Stat n="4.6 d"  l="Avg accept-to-submit" d="-0.8 d" up={true}/>
        <Stat n="68%"    l="Accept rate" d="+4 pt" up={true}/>
      </div>

      <Card title="Pipeline" meta="all desks · all cities"
        actions={<Seg value="Today" onChange={()=>{}} options={['All','Mine','Sponsor-funded','Past due']}/>}>
        <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:380}}>
              <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=>{
                  const p = window.PUB_BY_ID[r.pub];
                  return (
                    <div key={r.id} style={{padding:'8px 10px',background:'var(--bg)',border:'1px solid var(--rule-line)'}}>
                      <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)':r.due<=5?'var(--gold-2)':'var(--mute)',letterSpacing:'.04em'}}>{r.due===0?'—':`${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()} · {r.city.toUpperCase()}</div>
                      <div style={{display:'flex',gap:8,marginTop:8,alignItems:'center',paddingTop:6,borderTop:'1px solid var(--rule-line)'}}>
                        <span style={{display:'flex',alignItems:'center',gap:5}}><span style={{width:14,height:14,background:`var(--${p?.color||'mute'})`,color:p?.color==='gold'?'var(--black)':'var(--ivory)',fontFamily:'var(--serif)',fontWeight:800,fontSize:9,display:'flex',alignItems:'center',justifyContent:'center'}}>{p?.short[0]||'?'}</span><span className="mono" style={{fontSize:9.5,color:'var(--ink-2)',letterSpacing:'.04em'}}>{p?.short||'—'}</span></span>
                        <span style={{flex:1}}></span>
                        <span className="mono num" style={{fontSize:10,color:'var(--green)',fontWeight:600}}>{r.budget}</span>
                      </div>
                      {r.sponsor!=='—' && <div className="mono" style={{fontSize:9,letterSpacing:'.1em',color:'var(--gold-2)',marginTop:4,fontWeight:600}}>SPON · {r.sponsor.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>
  );
}

window.ArticleRequests = ArticleRequests;