// 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={String((window.CAMPAIGNS||[]).length)} l="Active campaigns" d={null}/>
        <Stat n="$0" l="MRR · live" d={null}/>
        <Stat n="0" l="Impressions · 30d" d={null}/>
        <Stat n="0%" l="Inventory utilization" d={null}/>
      </div>

      <div className="lay2" style={{display:'grid',gridTemplateColumns:'1.6fr 1fr',gap:18}}>
        <Card title="Live & upcoming campaigns" meta={String((window.CAMPAIGNS||[]).length)+' 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">
            {[
              ['Business vertical','0%','warn'],
              ['Health vertical','0%','warn'],
              ['Network newsletter','0 / 5','warn'],
              ['Business weekly','0 / 4','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="0">
            {[
            ].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;