// Non-chat pages

function Dashboard({ onNav }) {
  return (
    <div className="page-shell">
      <div className="page-h">
        <div>
          <h1>Good afternoon, Sarah.</h1>
          <p>You have 1 campaign running. 3 actions need your review.</p>
        </div>
        <button className="btn accent" onClick={() => onNav('create')}><I.Plus /> New campaign</button>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:14, marginBottom:28}}>
        {[
          { k: 'Active campaigns', v: '1', sub: '+ 0 paused' },
          { k: 'Operators live', v: '6', sub: '1 linked, 5 fresh' },
          { k: 'Posts shipped (7d)', v: '12', sub: '↑ 47 avg upvotes' },
          { k: 'Qualified clicks', v: '284', sub: '↑ 18% vs last wk' },
        ].map((s,i)=>(
          <div key={i} style={{padding:'18px 20px', background:'var(--bg-elev)', border:'1px solid var(--border)', borderRadius:'var(--radius-md)'}}>
            <div className="tiny subtle" style={{textTransform:'uppercase', letterSpacing:'0.04em'}}>{s.k}</div>
            <div style={{fontFamily:'var(--font-serif)', fontSize:42, marginTop:4, lineHeight:1}}>{s.v}</div>
            <div className="tiny muted" style={{marginTop:6}}>{s.sub}</div>
          </div>
        ))}
      </div>
      <h2 style={{fontFamily:'var(--font-serif)', fontWeight:400, fontSize:22, margin:'0 0 12px'}}>Needs your attention</h2>
      <div className="stack-sm">
        {[
          { icon: 'Warn', color:'var(--warn)', text: 'u/foldernauts flagged by r/Entrepreneur mod auto-filter. Hold 2 days?' },
          { icon: 'Edit', color:'var(--accent)', text: 'Day-5 draft for r/productivity ready to review before it ships at 8:30 AM' },
          { icon: 'Spark', color:'var(--success)', text: 'u/markdown_mike\'s warm-up post is trending — 47 upvotes in 2h' },
        ].map((x,i)=>{
          const Icon = I[x.icon];
          return (
            <div key={i} style={{padding:'14px 18px', background:'var(--bg-elev)', border:'1px solid var(--border)', borderRadius:'var(--radius-md)', display:'flex', gap:12, alignItems:'center'}}>
              <div style={{width:30, height:30, borderRadius:8, background:'var(--bg-sunken)', display:'grid', placeItems:'center', color:x.color}}><Icon /></div>
              <div style={{flex:1, fontSize:13.5}}>{x.text}</div>
              <button className="btn outline sm">Review</button>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function CampaignsList({ campaigns, onOpen, onNew }) {
  return (
    <div className="page-shell">
      <div className="page-h">
        <div>
          <h1>Campaigns</h1>
          <p>{campaigns.length} total · 1 running</p>
        </div>
        <button className="btn accent" onClick={onNew}><I.Plus /> New campaign</button>
      </div>
      <table className="table">
        <thead>
          <tr>
            <th>Campaign</th><th>Brand</th><th>Staff</th><th>Status</th><th>Created</th><th></th>
          </tr>
        </thead>
        <tbody>
          {campaigns.map((c, i) => (
            <tr key={i} style={{cursor:'pointer'}} onClick={() => onOpen(c)}>
              <td>
                <div className="camp-row-title">{c.name}</div>
                <div className="camp-row-sub">{c.channels}</div>
              </td>
              <td>{c.brand}</td>
              <td>
                <div className="avatars-stack">
                  {['M','J','N','F','S','W'].slice(0, c.staff).map((l, idx) => (
                    <div key={idx} className="a" style={{background:`linear-gradient(135deg, oklch(0.7 0.12 ${idx*60}), oklch(0.5 0.12 ${idx*60+40}))`}}>{l}</div>
                  ))}
                </div>
              </td>
              <td><StatusPill status={c.status === 'Running' ? 'active' : 'draft'}>{c.status}</StatusPill></td>
              <td className="muted small">{c.created}</td>
              <td>
                <div style={{display:'flex', gap:4, justifyContent:'flex-end'}}>
                  {c.status === 'Running'
                    ? <button className="btn ghost sm"><I.Pause /></button>
                    : <button className="btn ghost sm"><I.Play /></button>}
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function BrandAssetsPage({ brand }) {
  return (
    <div className="page-shell">
      <div className="page-h">
        <div>
          <h1>Brand assets</h1>
          <p>Auto-pulled from {brand.url} · last synced 4m ago</p>
        </div>
        <div style={{display:'flex', gap:8}}>
          <button className="btn outline"><I.Plus /> Add brand</button>
          <button className="btn outline">Re-sync</button>
        </div>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'1fr 320px', gap:32}}>
        <div>
          <h3 style={{margin:'0 0 12px', fontSize:14, fontWeight:500}}>Imagery · 8 assets</h3>
          <div className="asset-grid-lg">
            {BRAND.images.map((im, i) => (
              <div key={i} className="asset-card-lg" style={{background: `linear-gradient(135deg, oklch(0.88 0.05 ${im.hue}), oklch(0.72 0.08 ${im.hue}))`}}>
                {im.type === 'video' && (
                  <div style={{position:'absolute', inset:0, display:'grid', placeItems:'center', color:'white', fontSize:20}}>
                    <div style={{width:40, height:40, borderRadius:'50%', background:'oklch(0 0 0 / 0.4)', display:'grid', placeItems:'center'}}><I.Play /></div>
                  </div>
                )}
                <div style={{position:'absolute', bottom:8, left:8, fontSize:10, color:'white', fontFamily:'var(--font-mono)', textShadow:'0 1px 2px rgba(0,0,0,0.4)'}}>
                  {im.type === 'video' ? 'VIDEO' : 'IMG'} · {im.hue}
                </div>
              </div>
            ))}
          </div>
        </div>
        <div>
          <div style={{padding:20, background:'var(--bg-elev)', border:'1px solid var(--border)', borderRadius:'var(--radius-md)', marginBottom:16}}>
            <div className="brand-row">
              <div className="brand-logo-sq" style={{background: BRAND.logoBg, width:56, height:56, fontSize:28}}>{BRAND.logoLetter}</div>
              <div>
                <div style={{fontFamily:'var(--font-serif)', fontSize:24}}>{brand.name}</div>
                <div className="url">{brand.url}</div>
              </div>
            </div>
            <div className="tiny subtle" style={{textTransform:'uppercase', letterSpacing:'0.04em', marginTop:16, marginBottom:4}}>Industry</div>
            <div style={{fontSize:13}}>{brand.industry}</div>
            <div className="tiny subtle" style={{textTransform:'uppercase', letterSpacing:'0.04em', marginTop:14, marginBottom:4}}>Description</div>
            <div style={{fontSize:13, color:'var(--fg-muted)'}}>{brand.desc}</div>
            <div className="tiny subtle" style={{textTransform:'uppercase', letterSpacing:'0.04em', marginTop:14, marginBottom:6}}>Palette</div>
            <div style={{display:'flex', gap:6}}>
              {BRAND.colors.map((c,i)=>(
                <div key={i} style={{width:36, height:36, borderRadius:8, background:c, border:'1px solid var(--border)'}} title={c} />
              ))}
            </div>
          </div>
          <button className="btn outline" style={{width:'100%'}}>
            <I.Edit /> Edit brand
          </button>
        </div>
      </div>
    </div>
  );
}

function StubPage({ title, subtitle }) {
  return (
    <div className="page-shell">
      <div className="page-h">
        <div>
          <h1>{title}</h1>
          <p>{subtitle}</p>
        </div>
      </div>
      <div style={{padding:'60px 40px', background:'var(--bg-elev)', border:'1px dashed var(--border-strong)', borderRadius:'var(--radius-md)', textAlign:'center', color:'var(--fg-subtle)'}}>
        <div className="serif" style={{fontSize:26, color:'var(--fg-muted)'}}>Out of scope for this demo</div>
        <div style={{marginTop:8, fontSize:13}}>Jump back to the main campaign flow from the left nav.</div>
      </div>
    </div>
  );
}

Object.assign(window, { Dashboard, CampaignsList, BrandAssetsPage, StubPage });