// Admin shell — sidebar nav + topbar + shared layout primitives.

function AdminShell({route, setRoute, children, title, breadcrumb, actions}){
  const groups = [
    { label:'OPERATIONS', items:[
      { k:'01', id:'dash',   label:'Dashboard',         badge:'7' },
    ]},
    { label:'NETWORK', items:[
      { k:'02', id:'pubcrm', label:'Publisher CRM',     badge:null },
      { k:'03', id:'pubintel', label:'Publisher intel', badge:null },
      { k:'04', id:'creators', label:'Creator CRM',     badge:'34' },
      { k:'05', id:'acq',    label:'Acquisition',       badge:'6', red:true },
    ]},
    { label:'CONTENT', items:[
      { k:'06', id:'desk',   label:'Content desk',      badge:'2', red:true },
      { k:'07', id:'studio', label:'Editorial studio',  badge:'AI' },
      { k:'08', id:'reqs',   label:'Article requests',  badge:'10' },
      { k:'09', id:'nl',     label:'Newsletter desk',   badge:null },
    ]},
    { label:'COMMERCE', items:[
      { k:'10', id:'ads',    label:'Ad operations',     badge:'10' },
      { k:'11', id:'rev',    label:'Revenue ledger',    badge:'$612K' },
    ]},
    { label:'OUTREACH', items:[
      { k:'12', id:'onb',    label:'Onboarding',        badge:'12' },
    ]},
  ];

  return (
    <div className="adm-shell">
      <aside className="adm-side">
        <div className="brand">
          <div className="mark">TUEPAC</div>
          <div className="sub">OPS</div>
        </div>

        {groups.map((g,gi)=>(
          <React.Fragment key={g.label}>
            <div className="grp">{g.label}</div>
            <nav className="nav">
              {g.items.map(it=>(
                <button key={it.id} className={route===it.id?'active':''} onClick={()=>setRoute(it.id)}>
                  <span style={{display:'flex',alignItems:'center',gap:8,minWidth:0}}>
                    <span className="mono" style={{fontSize:9,color:'#666',letterSpacing:'.08em'}}>{it.k}</span>
                    <span style={{whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{it.label}</span>
                  </span>
                  {it.badge && <span className={'badge'+(it.red?' red':'')}>{it.badge}</span>}
                </button>
              ))}
            </nav>
          </React.Fragment>
        ))}

        <div className="foot">
          <div style={{display:'flex',alignItems:'center',gap:6}}>
            <span style={{width:6,height:6,borderRadius:'50%',background:'#1f8a5b',display:'inline-block',boxShadow:'0 0 0 2px rgba(31,138,91,.18)'}}></span>
            <span>Ingest healthy</span>
          </div>
          <div>Build v0.4 · {new Date().toLocaleDateString('en-US',{month:'short',day:'2-digit'})}</div>
          <div style={{marginTop:8}}>
            <a href="Tuepac.html" style={{color:'var(--gold)',borderBottom:'1px solid rgba(214,161,58,.5)',paddingBottom:1}}>← public site</a>
          </div>
        </div>
      </aside>

      <main>
        <Topbar/>
        <div className="adm-canvas">
          <PageHeader title={title} breadcrumb={breadcrumb} actions={actions}/>
          {children}
        </div>
      </main>
    </div>
  );
}

function Topbar(){
  const op = window.OPERATOR;
  return (
    <div className="adm-top">
      <div className="adm-search">
        <span className="mono" style={{fontSize:9.5,color:'var(--mute)',letterSpacing:'.14em'}}>QUICK · DROP-IN</span>
        <input placeholder="paste email, URL, social handle, or @publisher…"/>
        <span className="k">⌘</span><span className="k">K</span>
      </div>
      <div className="adm-quick">
        <span className="dot"></span>
        <span>NETWORK · LIVE</span>
        <span style={{color:'var(--rule-line)'}}>·</span>
        <a>47 PUBS</a>
        <a>34 CREATORS</a>
        <a style={{color:'var(--gold-2)'}}>12 SPONSORS</a>
        <a style={{color:'var(--red)'}}>2 ALERTS</a>
      </div>
      <div className="adm-me">
        <span className="mono" style={{fontSize:10,color:'var(--mute)',letterSpacing:'.08em'}}>OP</span>
        <span>{op.name}</span>
        <span className="av">{op.initials}</span>
      </div>
    </div>
  );
}

function PageHeader({title, breadcrumb, actions}){
  return (
    <div className="ph">
      <div>
        <div className="breadcrumb">{breadcrumb}</div>
        <h1>{title}</h1>
      </div>
      <div className="right">{actions}</div>
    </div>
  );
}

// ----- shared widgets -----

function Stat({n,l,d,up}){
  return (
    <div className="stat">
      <div className="lbl">{l}</div>
      <div className="n">{n}</div>
      {d && <div className={'d '+(up===true?'up':up===false?'dn':'')}>{up===true?'▲ ':up===false?'▼ ':''}{d}</div>}
    </div>
  );
}

function Card({title, meta, actions, children, style={}}){
  return (
    <div className="card" style={style}>
      {(title||actions) && (
        <div className="hd">
          <div style={{display:'flex',alignItems:'baseline',gap:10}}>
            {title && <h3>{title}</h3>}
            {meta && <span className="meta">{meta}</span>}
          </div>
          {actions && <div style={{display:'flex',gap:6}}>{actions}</div>}
        </div>
      )}
      <div className="bd">{children}</div>
    </div>
  );
}

function Pill({k='muted', children}){
  return <span className={'pill '+k}><span className="d" style={{background:'currentColor'}}></span>{children}</span>;
}

function Score({n, max=100, tone}){
  const t = tone || (n>=80?'var(--green)':n>=65?'var(--navy)':n>=50?'var(--gold-2)':'var(--red)');
  return (
    <span className="scr">
      <span>{n}</span>
      <span className="bar"><i style={{width:`${(n/max)*100}%`,background:t}}/></span>
    </span>
  );
}

function Sparkbars({data, color='var(--navy)'}){
  const max = Math.max(...data);
  return (
    <div className="bars">
      {data.map((v,i)=><i key={i} style={{height:`${(v/max)*100}%`,background:color,opacity:.4+0.6*(v/max)}}/>)}
    </div>
  );
}

function Seg({value, onChange, options}){
  return (
    <div className="seg">
      {options.map(o=>(
        <button key={o} className={o===value?'on':''} onClick={()=>onChange(o)}>{o}</button>
      ))}
    </div>
  );
}

function Empty({t='Nothing here yet.'}){
  return <div style={{padding:'40px 0',textAlign:'center',color:'var(--mute)',fontFamily:'var(--mono)',fontSize:10.5,letterSpacing:'.14em',textTransform:'uppercase'}}>{t}</div>;
}

window.AdminShell = AdminShell;
window.Stat = Stat;
window.Card = Card;
window.Pill = Pill;
window.Score = Score;
window.Sparkbars = Sparkbars;
window.Seg = Seg;
window.Empty = Empty;