// Ad operations — campaigns, placements, pacing.

function AdOps({setRoute}){
  const c = window.CAMPAIGNS;
  return (
    <AdminShell route="ads" setRoute={setRoute} title="Ad operations" breadcrumb="COMMERCE · CAMPAIGNS"
      actions={<>
        <button className="btn gh">Inventory map</button>
        <button className="btn k">Creative review</button>
        <button className="btn g">+ New campaign</button>
      </>}>

      <div className="split-4" style={{marginBottom:18}}>
        <Stat n="10"     l="Active campaigns" d="2 booked, 1 approval"/>
        <Stat n="$53,400" l="MRR · live" d="+12% MoM" up={true}/>
        <Stat n="1.84M"   l="Impressions · 30d" d="vs 1.62M prior"/>
        <Stat n="98%"     l="Inventory utilization" d="3 slots free wk 21"/>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'1.6fr 1fr',gap:18}}>
        <Card title="Live & upcoming campaigns" meta="10 records"
          actions={<>
            <Seg value="Live" onChange={()=>{}} options={['All','Live','Approved','Booked']}/>
          </>}>
          <table className="tbl" style={{marginLeft:-14,marginRight:-14,width:'calc(100% + 28px)'}}>
            <thead><tr><th>ID</th><th>ADVERTISER</th><th>PACKAGE</th><th>FLIGHT</th><th className="r">SPEND</th><th>PACE</th><th className="r">IMPR</th><th>STATUS</th></tr></thead>
            <tbody>
              {c.map(x=>(
                <tr key={x.id}>
                  <td className="id">{x.id}</td>
                  <td style={{fontSize:12.5,fontWeight:500}}>{x.advertiser}</td>
                  <td className="mono" style={{fontSize:10.5,letterSpacing:'.04em'}}>{x.pkg}</td>
                  <td className="mono" style={{fontSize:10.5,color:'var(--mute)',letterSpacing:'.04em'}}>{x.flight}</td>
                  <td className="r num" style={{fontWeight:600}}>{x.spend}</td>
                  <td><Pill k={x.pace==='On'?'live':x.pace==='Ahead'?'go':x.pace==='Behind'?'warn':'muted'}>{x.pace}</Pill></td>
                  <td className="r mono num">{x.impr}</td>
                  <td><Pill k={x.status==='Live'?'live':x.status==='Approved'?'info':'muted'}>{x.status}</Pill></td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card>

        <div style={{display:'flex',flexDirection:'column',gap:18}}>
          <Card title="Inventory · wk 21">
            {[
              ['Charlotte city slot','100%','live'],
              ['Raleigh city slot','100%','live'],
              ['Durham city slot','100%','live'],
              ['Business vertical','100%','live'],
              ['HBCUs vertical','100%','live'],
              ['Health vertical','100%','live'],
              ['Network newsletter','5 / 5','live'],
              ['Business weekly','3 / 4','warn'],
              ['HBCU weekly','2 / 3','warn'],
            ].map(([k,v,c])=>(
              <div key={k} style={{display:'grid',gridTemplateColumns:'1fr auto auto',gap:10,alignItems:'center',padding:'6px 0',borderBottom:'1px solid var(--rule-line)'}}>
                <span style={{fontSize:12}}>{k}</span>
                <span className="mono num" style={{fontSize:11,color:'var(--ink)',fontWeight:600}}>{v}</span>
                <Pill k={c}>{c==='live'?'FULL':'OPEN'}</Pill>
              </div>
            ))}
          </Card>

          <Card title="Creative awaiting review" meta="4">
            {[
              ['BofA · CTY-01 banner v3','MAY 21 GO-LIVE','warn'],
              ['Self-Help · NL slot copy','MAY 22','warn'],
              ['Duke Health · video :30','MAY 25','info'],
              ['A&T Athletics · season teaser','JUN 01','info'],
            ].map(([t,d,c])=>(
              <div key={t} style={{display:'grid',gridTemplateColumns:'1fr auto auto',gap:10,padding:'7px 0',borderBottom:'1px solid var(--rule-line)',alignItems:'center'}}>
                <span style={{fontSize:12,fontWeight:500}}>{t}</span>
                <span className="mono" style={{fontSize:9.5,color:'var(--mute)',letterSpacing:'.06em'}}>{d}</span>
                <Pill k={c}>REVIEW</Pill>
              </div>
            ))}
          </Card>
        </div>
      </div>
    </AdminShell>
  );
}

window.AdOps = AdOps;