// 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={String((window.PUBLISHERS||[]).length)} l="Publishers · active" d={null}/>
        <Stat n={String((window.CREATORS||[]).length)} l="Creators · pipeline" d={null}/>
        <Stat n="$0" l="YTD sponsorship" d={null}/>
        <Stat n={String((window.NEWSLETTERS||[]).reduce((a,n)=>a+(n.subs||0),0))} l="Newsletter reach" d={null}/>
      </div>

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

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

          {/* REVENUE PACE */}
          <Card title="Revenue pace" meta="$0 YTD · target $1.2M"
            actions={<button className="btn gh s">Ledger →</button>}>
            <div className="cols3" 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',         0,'$0','var(--navy)'],
                  ['Newsletter slot',      0,'$0','var(--gold-2)'],
                  ['Vertical sponsor',     0,'$0','var(--green)'],
                  ['Business spotlight',   0,'$0', '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={[0,0,0,0,0,0,0,0.001]} 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)'}}>$0</div>
                <div className="mono" style={{fontSize:10,color:'var(--mute)',letterSpacing:'.08em',marginTop:6}}>0 PUBLISHERS · NONE PENDING</div>
                <button className="btn k s" style={{marginTop:10}}>Run payout batch →</button>
              </div>
            </div>
          </Card>

          {/* SIGNAL INBOX */}
          <Card title="Signals · today" meta={String((window.ADMIN_SIGNALS||[]).length)}
            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(179,25,66,.08)':s.sev==='med'?'rgba(179,25,66,.12)':'var(--paper)',
                    color:s.sev==='high'?'var(--red)':s.sev==='med'?'var(--gold-2)':'var(--mute)',
                    borderColor:s.sev==='high'?'rgba(179,25,66,.22)':s.sev==='med'?'rgba(154,21,55,.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>

          {/* WORK QUEUES · counts + jump links, tables live in their sections */}
          <Card title="Work queues">
            {[
              ['Submissions','public intake · sort & approve','inbox'],
              ['Content queue','11 items · 2 need review','desk'],
              ['Article requests','10 open · 3 due this week','reqs'],
              ['Spotlight nominations','4 pending vetting','spot'],
              ['Newsletter','draft open · sends Tue 7:00 AM','nl'],
            ].map(([k,d,r])=>(
              <div key={k} onClick={()=>setRoute(r)} style={{display:'flex',gap:10,padding:'9px 0',borderBottom:'1px solid var(--rule-line)',alignItems:'baseline',cursor:'default'}}>
                <span style={{fontSize:12.5,fontWeight:600,flex:'none'}}>{k}</span>
                <span className="mono" style={{fontSize:10,color:'var(--mute)',letterSpacing:'.04em',flex:1,minWidth:0,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{d.toUpperCase()}</span>
                <span className="mono" style={{fontSize:10,color:'var(--red)',fontWeight:600}}>→</span>
              </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','onb'],
                ['+ Article request','k','reqs'],
                ['+ Campaign','n','ads'],
                ['+ Newsletter','gh','nl'],
                ['Run intel sweep','gh','pubintel'],
              ].map(([t,c,r])=>(
                <button key={t} className={'btn '+c} style={{justifyContent:'center'}} onClick={()=>setRoute(r)}>{t}</button>
              ))}
            </div>
          </Card>

          {/* NETWORK HEALTH */}
          <Card title="Network health" meta="real-time">
            {[
              ['RSS feeds','0 / 0','live',''],
              ['Sitemap parsing','0 / 0','live',''],
              ['Newsletter ingest','0 / 0','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:'flex',gap:8,padding:'6px 0',borderBottom:'1px solid var(--rule-line)',alignItems:'center'}}>
                <span style={{width:7,height:7,flex:'none',borderRadius:'50%',background:c==='live'?'var(--green)':'var(--gold-2)'}}></span>
                <span style={{fontSize:12.5,flex:1,minWidth:0}}>{k}</span>
                {d && <span className="mono" style={{fontSize:9.5,color:c==='warn'?'var(--gold-2)':'var(--mute)',letterSpacing:'.04em',whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{d}</span>}
                <span className="mono num" style={{fontSize:11,fontWeight:600,whiteSpace:'nowrap'}}>{v}</span>
              </div>
            ))}
          </Card>

          {/* TOP PUBLISHERS THIS WEEK */}
          <Card title="Top credited · 7d" actions={<button className="btn gh s" onClick={()=>setRoute('pubcrm')}>Publishers →</button>}>
            {[
              ['cp', 14, '$2,840'],
              ['tt', 11, '$2,140'],
              ['cf', 8,  '$1,520'],
            ].map(([id,n,s],i)=>{
              const p = window.PUB_BY_ID[id];
              if(!p) return null;
              return (
                <div key={id} style={{display:'flex',gap:8,padding:'7px 0',borderBottom:'1px solid var(--rule-line)',alignItems:'center'}}>
                  <span className="mono num" style={{fontSize:10,color:'var(--mute)',width:12}}>{i+1}</span>
                  <span style={{fontSize:12.5,flex:1,minWidth:0,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{p.name}</span>
                  <span className="mono num" style={{fontSize:11}}>{n}</span>
                  <span className="mono num" style={{fontSize:11,color:'var(--green)',fontWeight:600}}>{s}</span>
                </div>
              );
            })}
          </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;