// Admin dashboard — operator's daily overview.

function Dashboard({setRoute}){
  return (
    <AdminShell route="dash" setRoute={setRoute} title="Dashboard" breadcrumb="OPERATIONS · TUE · MAY 20"
      actions={<>
        <button className="btn gh">Export brief</button>
        <button className="btn k">+ New article request</button>
        <button className="btn g">+ Drop in contact</button>
      </>}>

      {/* TOP STATS */}
      <div className="split-4" style={{marginBottom:18}}>
        <Stat n="47"     l="Publishers · active" d="+2 this week" up={true}/>
        <Stat n="34"     l="Creators · pipeline" d="+5 this week" up={true}/>
        <Stat n="$612K"  l="YTD sponsorship"     d="+18% YoY"      up={true}/>
        <Stat n="142.3K" l="Newsletter reach"    d="+3.4% wk"      up={true}/>
      </div>

      {/* MAIN GRID — 2/3 left + 1/3 right */}
      <div style={{display:'grid',gridTemplateColumns:'1.6fr 1fr',gap:18}}>

        {/* LEFT COL */}
        <div style={{display:'flex',flexDirection:'column',gap:18}}>

          {/* SIGNAL INBOX */}
          <Card title="Signals · today" meta="7 · 2 priority"
            actions={<>
              <Seg value="Today" onChange={()=>{}} options={['Today','7d','30d']}/>
              <button className="btn gh s">Mark read</button>
            </>}>
            <div>
              {window.ADMIN_SIGNALS.map((s,i)=>(
                <div key={i} style={{display:'grid',gridTemplateColumns:'auto 70px 1fr auto',gap:12,padding:'9px 0',borderBottom:i===window.ADMIN_SIGNALS.length-1?'none':'1px solid var(--rule-line)',alignItems:'center'}}>
                  <span className="pill" style={{
                    background:s.sev==='high'?'rgba(193,18,31,.08)':s.sev==='med'?'rgba(214,161,58,.12)':'var(--paper)',
                    color:s.sev==='high'?'var(--red)':s.sev==='med'?'var(--gold-2)':'var(--mute)',
                    borderColor:s.sev==='high'?'rgba(193,18,31,.22)':s.sev==='med'?'rgba(185,134,32,.32)':'var(--rule-line)'
                  }}><span className="d" style={{background:'currentColor'}}></span>{s.sev.toUpperCase()}</span>
                  <span className="mono" style={{fontSize:10,color:'var(--mute)',letterSpacing:'.1em'}}>{s.src.toUpperCase()}</span>
                  <span style={{fontSize:12.5}}>{s.t}</span>
                  <span className="mono num" style={{fontSize:10.5,color:'var(--mute)',letterSpacing:'.04em'}}>{s.ts}</span>
                </div>
              ))}
            </div>
          </Card>

          {/* QUEUES split */}
          <div className="split-2">
            <Card title="Content queue" meta="11 items · 2 need review"
              actions={<button className="btn gh s">Open desk →</button>}>
              <table className="tbl" style={{borderTop:'1px solid var(--rule-line)',marginTop:-12,marginLeft:-14,marginRight:-14,width:'calc(100% + 28px)'}}>
                <thead><tr><th>SRC</th><th>STORY</th><th className="r">STATUS</th></tr></thead>
                <tbody>
                  {window.CONTENT_QUEUE.slice(0,6).map(c=>(
                    <tr key={c.id}>
                      <td className="id" style={{whiteSpace:'nowrap'}}>{c.src.split('·')[0]}</td>
                      <td style={{maxWidth:300}}><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="r"><Pill k={c.status==='Approved'?'live':c.status==='Source-out'?'info':c.status==='Error'?'bad':'warn'}>{c.status}</Pill></td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </Card>

            <Card title="Article requests" meta="10 open · $7,440 committed"
              actions={<button className="btn gh s">All →</button>}>
              <table className="tbl" style={{borderTop:'1px solid var(--rule-line)',marginTop:-12,marginLeft:-14,marginRight:-14,width:'calc(100% + 28px)'}}>
                <thead><tr><th>ID</th><th>REQUEST</th><th className="r">DUE</th></tr></thead>
                <tbody>
                  {window.REQUESTS.slice(0,6).map(r=>(
                    <tr key={r.id}>
                      <td className="id">{r.id}</td>
                      <td style={{maxWidth:280}}>
                        <div style={{fontSize:12.5,fontWeight:500,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{r.topic}</div>
                        <div className="mono" style={{fontSize:9.5,color:'var(--mute)',letterSpacing:'.06em',marginTop:2}}>{r.city.toUpperCase()} · {window.PUB_BY_ID[r.pub]?.short || '—'} · <Pill k={r.status==='Accepted'?'live':r.status==='Submitted'?'info':r.status==='Declined'?'bad':'warn'}>{r.status}</Pill></div>
                      </td>
                      <td className="r">
                        <div className="mono num" style={{fontSize:11,fontWeight:600,color:r.due<=2?'var(--red)':r.due<=5?'var(--gold-2)':'var(--ink)'}}>{r.due===0?'—':`${r.due}d`}</div>
                        <div className="mono" style={{fontSize:9,color:'var(--mute)',letterSpacing:'.06em'}}>{r.deadline.toUpperCase()}</div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </Card>
          </div>

          {/* REVENUE PACE */}
          <Card title="Revenue pace · May" meta="$612,400 YTD · target $1.2M"
            actions={<button className="btn gh s">Ledger →</button>}>
            <div style={{display:'grid',gridTemplateColumns:'1.4fr 1fr 1fr',gap:18,alignItems:'flex-start'}}>
              <div>
                <div className="eyebrow" style={{marginBottom:8}}>By package · last 30 days</div>
                {[
                  ['City sponsor',         48,'$28.8K','var(--navy)'],
                  ['Newsletter slot',      22,'$13.2K','var(--gold-2)'],
                  ['Vertical sponsor',     18,'$10.8K','var(--green)'],
                  ['Business spotlight',   12,'$7.2K', 'var(--red)'],
                ].map(([k,p,v,c])=>(
                  <div key={k} style={{display:'grid',gridTemplateColumns:'120px 1fr 60px',gap:10,alignItems:'center',padding:'5px 0'}}>
                    <span className="mono" style={{fontSize:10.5,color:'var(--ink-2)',letterSpacing:'.06em'}}>{k.toUpperCase()}</span>
                    <div className="prog"><div className="fill" style={{width:p+'%',background:c}}></div></div>
                    <span className="mono num" style={{fontSize:10.5,color:'var(--ink)',textAlign:'right',fontWeight:600}}>{v}</span>
                  </div>
                ))}
              </div>
              <div>
                <div className="eyebrow" style={{marginBottom:8}}>Last 8 weeks</div>
                <Sparkbars data={[18,24,21,26,29,34,38,41]} color="var(--navy)"/>
                <div className="mono" style={{fontSize:9.5,color:'var(--mute)',letterSpacing:'.06em',marginTop:6}}>WEEKLY GROSS · $K</div>
              </div>
              <div>
                <div className="eyebrow" style={{marginBottom:8}}>Payouts due · Jun 01</div>
                <div className="serif num" style={{fontSize:32,fontWeight:700,letterSpacing:'-.01em',lineHeight:1,color:'var(--green)'}}>$28,640</div>
                <div className="mono" style={{fontSize:10,color:'var(--mute)',letterSpacing:'.08em',marginTop:6}}>14 PUBLISHERS · 1 PENDING REVIEW</div>
                <button className="btn k s" style={{marginTop:10}}>Run payout batch →</button>
              </div>
            </div>
          </Card>
        </div>

        {/* RIGHT COL */}
        <div style={{display:'flex',flexDirection:'column',gap:18}}>

          {/* QUICK ACTIONS */}
          <Card title="Quick actions">
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:8}}>
              {[
                ['+ Drop-in contact', 'gr'],
                ['+ Article request', 'k'],
                ['+ Campaign',        'n'],
                ['+ Newsletter',      'gh'],
                ['Run intel sweep',   'gh'],
                ['Send invite batch', 'g'],
              ].map(([t,c])=>(
                <button key={t} className={'btn '+c} style={{justifyContent:'center'}}>{t}</button>
              ))}
            </div>
          </Card>

          {/* NETWORK HEALTH */}
          <Card title="Network health" meta="real-time">
            {[
              ['RSS feeds healthy','46 / 47','live','1 error · Goldsboro'],
              ['Sitemap parsing',  '47 / 47','live','—'],
              ['Newsletter ingest','7 / 7',  'live','—'],
              ['Sponsor invoicing','9 / 10', 'warn','1 overdue · FFC'],
              ['Rights review SLA','100%',   'live','median 6.2 hrs'],
              ['Takedown queue',   '1 open', 'warn','WJ · s3 · 08:42'],
            ].map(([k,v,c,d])=>(
              <div key={k} style={{display:'grid',gridTemplateColumns:'1fr auto',gap:10,padding:'7px 0',borderBottom:'1px solid var(--rule-line)',alignItems:'center'}}>
                <div>
                  <div style={{fontSize:12.5}}>{k}</div>
                  <div className="mono" style={{fontSize:9.5,color:'var(--mute)',letterSpacing:'.04em'}}>{d}</div>
                </div>
                <div style={{textAlign:'right'}}>
                  <div className="mono num" style={{fontSize:11.5,fontWeight:600}}>{v}</div>
                  <Pill k={c==='live'?'live':'warn'}>{c==='live'?'OK':'CHECK'}</Pill>
                </div>
              </div>
            ))}
          </Card>

          {/* TOP PUBLISHERS THIS WEEK */}
          <Card title="Top credited · 7d">
            <table className="tbl" style={{marginTop:-12,marginLeft:-14,marginRight:-14,width:'calc(100% + 28px)'}}>
              <thead><tr><th>#</th><th>PUBLISHER</th><th className="r">STORIES</th><th className="r">SHARE</th></tr></thead>
              <tbody>
                {[
                  ['cp', 14, '$2,840'],
                  ['tt', 11, '$2,140'],
                  ['cf', 8,  '$1,520'],
                  ['pe', 7,  '$1,280'],
                  ['wj', 5,  '$960'],
                  ['qcq',5,  '$880'],
                ].map(([id,n,s],i)=>{
                  const p = window.PUB_BY_ID[id];
                  return (
                    <tr key={id}>
                      <td className="num" style={{color:'var(--mute)'}}>{i+1}</td>
                      <td><span style={{display:'flex',alignItems:'center',gap:6}}><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="r num">{n}</td>
                      <td className="r num" style={{color:'var(--green)',fontWeight:600}}>{s}</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </Card>

          {/* ACQUISITION FOCUS */}
          <Card title="Acquisition focus" meta="P1 targets">
            {window.ACQ.filter(a=>a.tier==='P1').map(a=>(
              <div key={a.id} style={{padding:'9px 0',borderBottom:'1px solid var(--rule-line)'}}>
                <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline'}}>
                  <div className="serif" style={{fontSize:15,fontWeight:700}}>{a.target}</div>
                  <Score n={a.fit}/>
                </div>
                <div className="mono" style={{fontSize:9.5,color:'var(--mute)',letterSpacing:'.06em',marginTop:3}}>{a.city.toUpperCase()} · {a.stage.toUpperCase()} · LAST {a.last.toUpperCase()}</div>
              </div>
            ))}
          </Card>
        </div>
      </div>
    </AdminShell>
  );
}

window.Dashboard = Dashboard;