// Content desk — ingest queue, rights review, attribution workflow.

function ContentDesk({setRoute}){
  const queue = window.CONTENT_QUEUE;
  const [tab, setTab] = React.useState('All');
  const [sel, setSel] = React.useState(queue[2].id); // an item needing review
  const filt = tab==='All' ? queue : tab==='Needs review' ? queue.filter(q=>q.status==='Needs review') : tab==='Source-out' ? queue.filter(q=>q.status==='Source-out') : tab==='Errors' ? queue.filter(q=>q.status==='Error') : queue.filter(q=>q.status==='Approved');
  const item = queue.find(q=>q.id===sel) || queue[0];

  return (
    <AdminShell route="desk" setRoute={setRoute} title="Content desk" breadcrumb="CONTENT · INGEST + RIGHTS"
      actions={<>
        <button className="btn gh">Manual paste URL</button>
        <button className="btn k">Force RSS sweep</button>
        <button className="btn g">+ Original story</button>
      </>}>

      <div className="split-4" style={{marginBottom:18}}>
        <Stat n="11"  l="In queue · today" d="+3 vs avg" up={true}/>
        <Stat n="2"   l="Awaiting review" d="oldest 47 min" up={false}/>
        <Stat n="1"   l="Feed errors" d="Goldsboro · 4 fails"/>
        <Stat n="6.2h"l="Median review SLA" d="-1.4 h" up={true}/>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'1.6fr 1fr',gap:18,alignItems:'flex-start'}}>
        {/* QUEUE TABLE */}
        <Card title="Ingest queue" meta={`${filt.length} items`}
          actions={<Seg value={tab} onChange={setTab} options={['All','Needs review','Source-out','Approved','Errors']}/>}>
          <table className="tbl" style={{marginLeft:-14,marginRight:-14,width:'calc(100% + 28px)'}}>
            <thead><tr><th>ID</th><th>SOURCE</th><th>STORY</th><th>RIGHTS</th><th>STATUS</th><th className="r">TS</th></tr></thead>
            <tbody>
              {filt.map(c=>(
                <tr key={c.id} className={c.id===sel?'sel':''} onClick={()=>setSel(c.id)}>
                  <td className="id">{c.id}</td>
                  <td className="mono" style={{fontSize:10.5,color:'var(--ink-2)',letterSpacing:'.04em'}}>{c.src}</td>
                  <td style={{maxWidth:340}}>
                    <div style={{fontSize:12.5,fontWeight:500,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{c.title}</div>
                    <div className="mono" style={{fontSize:9.5,color:'var(--mute)',letterSpacing:'.06em',marginTop:2}}>{c.city.toUpperCase()} · {c.section.toUpperCase()}</div>
                  </td>
                  <td className="mono" style={{fontSize:10,letterSpacing:'.04em'}}>{c.rights}</td>
                  <td><Pill k={c.status==='Approved'?'live':c.status==='Source-out'?'info':c.status==='Error'?'bad':'warn'}>{c.status}</Pill></td>
                  <td className="r mono num" style={{fontSize:10.5,color:'var(--mute)'}}>{c.ts.split('·')[1]}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card>

        {/* DETAIL */}
        <Card title="Review · attribution" meta={item.id}
          actions={<button className="btn gh s">View on publisher ↗</button>}>
          <div className="eyebrow">SOURCE</div>
          <div className="mono" style={{fontSize:11.5,letterSpacing:'.04em',marginTop:4}}>{item.src}</div>

          <div style={{height:1,background:'var(--rule-line)',margin:'12px 0'}}></div>

          <div className="eyebrow">HEADLINE</div>
          <div className="serif" style={{fontSize:20,fontWeight:700,lineHeight:1.15,marginTop:4,letterSpacing:'-.005em',textWrap:'pretty'}}>{item.title}</div>

          <div style={{height:1,background:'var(--rule-line)',margin:'12px 0'}}></div>

          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
            <KVMini l="City"      v={item.city}/>
            <KVMini l="Section"   v={item.section}/>
            <KVMini l="Rights"    v={item.rights}/>
            <KVMini l="Canonical" v="Publisher domain"/>
            <KVMini l="UTM"       v="TPC_NWK_AUTO"/>
            <KVMini l="Editor"    v={item.editor==='—'?'unassigned':item.editor}/>
          </div>

          <div style={{height:1,background:'var(--rule-line)',margin:'12px 0'}}></div>

          <div className="eyebrow" style={{marginBottom:6}}>RIGHTS CHECKLIST</div>
          {[
            ['Publisher rights tier confirmed','ok'],
            ['Original byline preserved','ok'],
            ['Original publish date preserved','ok'],
            ['Canonical URL points to publisher','ok'],
            ['Sponsored content disclosure present','na'],
            ['No copyrighted image without credit','warn'],
          ].map(([k,c])=>(
            <div key={k} style={{display:'grid',gridTemplateColumns:'auto 1fr',gap:8,padding:'4px 0',alignItems:'center'}}>
              <span style={{width:14,height:14,display:'flex',alignItems:'center',justifyContent:'center',color:c==='ok'?'var(--green)':c==='warn'?'var(--gold-2)':'var(--mute)',fontSize:13}}>{c==='ok'?'✓':c==='warn'?'!':'—'}</span>
              <span style={{fontSize:12}}>{k}</span>
            </div>
          ))}

          <div style={{display:'flex',gap:8,marginTop:14,paddingTop:12,borderTop:'1px solid var(--rule-line)'}}>
            <button className="btn gr">Approve</button>
            <button className="btn n">Source-out</button>
            <button className="btn gh">Hold</button>
            <button className="btn r" style={{marginLeft:'auto'}}>Takedown</button>
          </div>
        </Card>
      </div>

      {/* INGEST HEALTH STRIP */}
      <div style={{marginTop:18}}>
        <Card title="Ingest sources" meta="all sources">
          <table className="tbl" style={{marginLeft:-14,marginRight:-14,width:'calc(100% + 28px)'}}>
            <thead><tr><th>PUBLISHER</th><th>FEED</th><th className="r">LAST FETCH</th><th className="r">SUCCESS</th><th>STATUS</th></tr></thead>
            <tbody>
              {[
                ['cp','RSS · /feed/','3 min ago','99.6%','live'],
                ['tt','RSS · /feed/','5 min ago','98.4%','live'],
                ['cf','Sitemap + manual','12 min ago','97.1%','live'],
                ['wj','RSS · /atom','9 min ago','100%','live'],
                ['pe','RSS · /feed/','7 min ago','99.0%','live'],
                ['qcq','Manual paste','42 min ago','—','warn'],
                ['gb','RSS · /rss.xml','4h ago','42%','bad'],
                ['cb','RSS · /feed/','11 min ago','98.3%','live'],
              ].map(([id,f,ts,s,c],i)=>{
                const p = window.PUB_BY_ID[id];
                return (
                  <tr key={i}>
                    <td><span style={{display:'flex',alignItems:'center',gap:8}}><span style={{width:18,height:18,background:`var(--${p.color})`,color:p.color==='gold'?'var(--black)':'var(--ivory)',fontFamily:'var(--serif)',fontWeight:800,fontSize:10,display:'flex',alignItems:'center',justifyContent:'center'}}>{p.short[0]}</span>{p.name}</span></td>
                    <td className="mono" style={{fontSize:11,letterSpacing:'.02em'}}>{f}</td>
                    <td className="r mono num" style={{fontSize:11,color:'var(--mute)'}}>{ts}</td>
                    <td className="r mono num" style={{fontSize:11,fontWeight:600}}>{s}</td>
                    <td><Pill k={c==='live'?'live':c==='warn'?'warn':'bad'}>{c==='live'?'OK':c==='warn'?'STALE':'ERROR'}</Pill></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </Card>
      </div>
    </AdminShell>
  );
}

function KVMini({l,v}){
  return <div><div className="mono" style={{fontSize:9,color:'var(--mute)',letterSpacing:'.14em'}}>{l.toUpperCase()}</div><div style={{fontSize:12,marginTop:2,fontWeight:500}}>{v}</div></div>;
}

window.ContentDesk = ContentDesk;