/* global React, Icon, Btn, Avatar, VerifiedBadge, PlatformIcon, TopBar, Rail, LISTS, CREATORS_DB, PLATFORMS, CAMPAIGNS, PLANS, fmt */
// — Lists, List Detail, Campaigns views —

// — LISTS PAGE — (matches existing UI; adds "Create Plan" to row kebab)
const ListsView = ({ go, openMenuFor, setOpenMenuFor, onCreatePlanFromList, lists = LISTS }) => {
  const [tab, setTab] = React.useState('all');
  const [favOnly, setFavOnly] = React.useState(false);
  const rows = lists.filter(l => !favOnly || l.favorite);

  return (
    <>
      <div className="body">
        <h1 style={{margin:'0 0 18px',fontSize:30,fontWeight:700,letterSpacing:'-.02em',display:'flex',alignItems:'baseline',gap:10}}>Lists<span style={{fontSize:15,fontWeight:600,color:'var(--ink-3)'}}>{rows.length}</span></h1>
        <div className="tabs allcaps" style={{marginBottom:18}}>
          {[{k:'all',l:'All Lists'},{k:'mine',l:'My Lists',disabled:true},{k:'shared',l:'Shared With Me',disabled:true}].map(t=>(
            <button key={t.k} className={`tab ${tab===t.k?'active':''}`} onClick={()=>t.disabled?null:setTab(t.k)} disabled={t.disabled}>
              <span className="tab-label">{t.l}</span><span className="info"><Icon name="help" size={11}/></span>
            </button>
          ))}
        </div>

        <div className="row gap-3" style={{marginBottom:14}}>
          <div className="search-wrap">
            <span className="icon"><Icon name="search" size={14}/></span>
            <input className="search" placeholder="Search by name or tag…"/>
          </div>
          <Btn variant="secondary" icon="plus" disabled>Create List</Btn>
          <div style={{flex:1}}/>
        </div>

        <div className="row" style={{marginBottom:10}}>
          <button className="btn-link" style={{padding:0,fontWeight:600}} disabled><Icon name="plus" size={13}/> Add Filters</button>
        </div>

        <div className="row" style={{justifyContent:'flex-end',gap:14,marginBottom:6,color:'var(--ink-3)',fontSize:12}}>
          <label className="row gap-2" style={{cursor:'pointer'}}>
            <input type="checkbox" checked={favOnly} onChange={e=>setFavOnly(e.target.checked)}/> Show Favorites
          </label>
          <button className="btn-icon row gap-2" style={{padding:'4px 8px',color:'var(--ink-2)'}}>
            <Icon name="sort-desc" size={14}/> Date Created
          </button>
        </div>

        <div className="card" style={{padding:'4px 0'}}>
          <table className="tbl">
            <thead>
              <tr>
                <th style={{width:36}}></th>
                <th>List</th>
                <th>Description</th>
                <th>Division ID</th>
                <th>Tags</th>
                <th>Info</th>
                <th style={{width:40}}></th>
              </tr>
            </thead>
            <tbody>
              {rows.map(l => (
                <tr key={l.id} className="clickable" onClick={()=>go({ route:'list', id:l.id })}>
                  <td onClick={e=>e.stopPropagation()}>
                    <button className="btn-icon" style={{color: l.favorite ? 'var(--orange)' : 'var(--ink-4)'}}>
                      <Icon name="star" size={16}/>
                    </button>
                  </td>
                  <td>
                    <div className="list-row-name">{l.name}</div>
                    <div className="list-row-sub">{l.creators} Creator{l.creators===1?'':'s'}</div>
                  </td>
                  <td className="muted">{l.desc || '—'}</td>
                  <td>{l.divisionId ? <span className="pill pill-grey" style={{fontVariantNumeric:'tabular-nums'}}>{l.divisionId}</span> : <span className="muted">—</span>}</td>
                  <td>{(l.tags||[]).map(t=>(<span key={t} className="pill" style={{marginRight:4}}>{t}</span>))}</td>
                  <td className="list-meta">
                    <div>CREATED: <b>{l.owner}</b> — {l.created}</div>
                    {l.updated ? <div>UPDATED: <b>{l.updatedBy}</b> — {l.updated}</div> : <div>UPDATED: —</div>}
                  </td>
                  <td onClick={e=>e.stopPropagation()} style={{position:'relative'}}>
                    <button className="kebab" onClick={()=>setOpenMenuFor(openMenuFor===l.id?null:l.id)}><Icon name="kebab" size={16}/></button>
                    {openMenuFor === l.id && (
                      <div style={{position:'absolute',right:14,top:36,background:'#fff',border:'1px solid var(--border)',borderRadius:8,boxShadow:'var(--shadow-md)',padding:6,zIndex:20,minWidth:200}} onMouseLeave={()=>setOpenMenuFor(null)}>
                        {[
                          {label:'Open list',           icon:'arrow-right', disabled:true},
                          {label:'Start Publishing',   icon:'upload',     disabled:true},
                          {label:'Create Plan',         icon:'sparkles',   cb:()=>{ setOpenMenuFor(null); onCreatePlanFromList(l.id); }, highlight:true},
                          {label:'Duplicate',           icon:'duplicate', disabled:true},
                          {label:'Delete',              icon:'trash', danger:true, disabled:true},
                        ].map(item => (
                          <button key={item.label}
                            onClick={item.disabled ? undefined : item.cb}
                            disabled={item.disabled}
                            style={{
                              width:'100%',display:'flex',alignItems:'center',gap:8,padding:'7px 10px',
                              background: item.highlight ? 'var(--blue-soft)' : 'transparent',
                              color: item.danger ? 'var(--red)' : (item.highlight ? 'var(--blue-2)' : 'var(--ink)'),
                              border:0,borderRadius:6,fontSize:13,fontWeight:item.highlight?600:500,
                              cursor: item.disabled ? 'not-allowed' : 'pointer', textAlign:'left',
                              opacity: item.disabled ? 0.4 : 1,
                            }}>
                            <Icon name={item.icon} size={14}/> {item.label}
                            {item.highlight && <span className="pill pill-blue" style={{marginLeft:'auto',fontSize:9,padding:'1px 6px'}}>NEW</span>}
                          </button>
                        ))}
                      </div>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </>
  );
};

// — LIST DETAIL VIEW (creators sourced from the uploaded database) —
const ListDetailView = ({ list, go, onCreatePlan, plans = [] }) => {
  const [tab, setTab] = React.useState('creators');
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [q, setQ] = React.useState('');
  const planFromThisList = plans.filter(p => p.listId === list.id);

  // Creators that belong to this list, pulled from the shared CREATORS_DB via list membership.
  const memberIds = (window.LIST_MEMBERS && window.LIST_MEMBERS[list.id]) || [];
  const listCreators = React.useMemo(() => memberIds
    .map(id => CREATORS_DB.find(c => c.id === id))
    .filter(Boolean)
    .map(c => {
      const handles = (c.handles || []).map(h => {
        const t = Object.values(h.types || {})[0] || {};
        return { platform: h.platform, handle: h.handle, views: t.views || 0, engagements: t.engagements || 0, emv: t.emv || 0 };
      }).sort((a, b) => b.views - a.views);
      const totViews = handles.reduce((a, h) => a + h.views, 0);
      const totEng = handles.reduce((a, h) => a + h.engagements, 0);
      const totEmv = handles.reduce((a, h) => a + h.emv, 0);
      return { id: c.id, name: c.name, avatar: c.avatar, handles, top: handles[0] || null,
        er: totViews > 0 ? totEng / totViews : 0, emv: totEmv };
    }), [list.id]);

  const shownCreators = q.trim()
    ? listCreators.filter(c => (c.name || '').toLowerCase().includes(q.toLowerCase()) || c.handles.some(h => (h.handle || '').toLowerCase().includes(q.toLowerCase())))
    : listCreators;

  return (
    <>
      <div className="body">
        {/* Header card — list metadata */}
        <div className="row gap-3" style={{alignItems:'flex-start',marginBottom:20}}>
          <div style={{width:120,height:120,borderRadius:12,background:'#eaecf2',display:'flex',alignItems:'center',justifyContent:'center',color:'var(--ink-4)'}}>
            <Icon name="upload" size={24}/>
          </div>
          <div className="flex-1">
            <h1 style={{margin:'0 0 4px',fontSize:30,fontWeight:700,letterSpacing:'-.02em'}}>{list.name}</h1>
            <div className="muted" style={{fontSize:13}}>{list.desc || `${listCreators.length} creator${listCreators.length===1?'':'s'}`}</div>
            <div className="row gap-2" style={{marginTop:8}}>
              <button className="pill" style={{cursor:'pointer'}}><Icon name="tag" size={11}/></button>
              {(list.tags||[]).map(t=>(<span key={t} className="pill">{t}</span>))}
            </div>
          </div>
          <div className="col" style={{alignItems:'flex-end',gap:10}}>
            <div className="row gap-2">
              <div style={{position:'relative'}}>
                <button className="btn-icon" onClick={()=>setMenuOpen(v=>!v)}><Icon name="kebab" size={16}/></button>
                {menuOpen && (
                  <>
                    <div style={{position:'fixed',inset:0,zIndex:19}} onClick={()=>setMenuOpen(false)}></div>
                    <div style={{position:'absolute',right:0,top:36,background:'#fff',border:'1px solid var(--border)',borderRadius:8,boxShadow:'var(--shadow-md)',padding:6,zIndex:20,minWidth:200}}>
                      {[
                        {label:'Share',           icon:'share', disabled:true},
                        {label:'Create a Plan',   icon:'sparkles', highlight:true, cb:()=>{ setMenuOpen(false); onCreatePlan(list.id); }},
                        {label:'Delete',          icon:'trash', danger:true, disabled:true},
                        {label:'Make a Copy',     icon:'copy', disabled:true},
                        {label:'Change Division', icon:'refresh', disabled:true},
                        {label:'Export to CSV',   icon:'cloud-down', disabled:true},
                      ].map(item => (
                        <button key={item.label}
                          onClick={item.disabled ? undefined : (item.cb || (()=>setMenuOpen(false)))}
                          disabled={item.disabled}
                          style={{
                            width:'100%',display:'flex',alignItems:'center',gap:8,padding:'7px 10px',
                            background: item.highlight ? 'var(--blue-soft)' : 'transparent',
                            color: item.danger ? 'var(--red)' : (item.highlight ? 'var(--blue-2)' : 'var(--ink)'),
                            border:0,borderRadius:6,fontSize:13,fontWeight:item.highlight?600:500,
                            cursor: item.disabled ? 'not-allowed' : 'pointer', textAlign:'left',
                            opacity: item.disabled ? 0.4 : 1,
                          }}>
                          <Icon name={item.icon} size={14}/> {item.label}
                        </button>
                      ))}
                    </div>
                  </>
                )}
              </div>
              <Btn variant="secondary" icon="upload" disabled>Start Publishing</Btn>
            </div>
            <div style={{fontSize:12,textAlign:'right',color:'var(--ink-3)',lineHeight:1.5}}>
              <div>CREATED: <b style={{color:'var(--ink)'}}>{list.owner}</b> — {list.created}</div>
              {list.updated && <div>UPDATED: <b style={{color:'var(--ink)'}}>{list.updatedBy}</b> — {list.updated}</div>}
            </div>
          </div>
        </div>

        {/* Tabs */}
        <div className="tabs" style={{marginBottom:18}}>
          <button className={`tab ${tab==='creators'?'active':''}`} onClick={()=>setTab('creators')}>
            <span className="tab-label">Creators</span>
          </button>
          <button className={`tab ${tab==='activity'?'active':''}`} onClick={()=>setTab('activity')}>
            <span className="tab-label">Activity</span>
          </button>
        </div>

        {tab === 'creators' && (
          <>
            <div className="row gap-3" style={{marginBottom:14}}>
              <div className="search-wrap">
                <span className="icon"><Icon name="search" size={14}/></span>
                <input className="search" value={q} onChange={e=>setQ(e.target.value)} placeholder="Search creators by @account or name"/>
              </div>
              <Btn variant="secondary" icon="plus" disabled>Add Creators</Btn>
              <div style={{flex:1}}></div>
              <span className="muted" style={{fontSize:12,alignSelf:'center'}}>{shownCreators.length} of {listCreators.length} creator{listCreators.length===1?'':'s'}</span>
            </div>

            <div className="row" style={{justifyContent:'flex-end',gap:14,marginBottom:8,color:'var(--ink-3)',fontSize:12}}>
              <button className="btn-link row gap-2" style={{padding:'2px 6px'}} disabled><Icon name="cloud-down" size={13}/> Export to CSV</button>
              <button className="btn-icon row gap-2" style={{padding:'4px 8px',color:'var(--ink-2)'}}><Icon name="sort-desc" size={14}/> Recently Added</button>
            </div>

            <div className="card" style={{padding:0}}>
              <table className="tbl">
                <thead>
                  <tr>
                    <th style={{width:32}}><input type="checkbox"/></th>
                    <th>Creator</th>
                    <th>Top Channel</th>
                    <th>Platforms</th>
                    <th style={{textAlign:'right'}}>Avg ER</th>
                    <th style={{width:40,textAlign:'right'}}><Icon name="cols" size={14}/></th>
                  </tr>
                </thead>
                <tbody>
                  {shownCreators.map((c)=>(
                    <tr key={c.id}>
                      <td><input type="checkbox"/></td>
                      <td>
                        <div className="row gap-3">
                          <Avatar name={c.name} color={c.avatar}/>
                          <div>
                            <div className="row gap-2" style={{alignItems:'center'}}>
                              <span style={{fontWeight:600,fontSize:14}}>{c.name}</span>
                            </div>
                            {c.top && <div className="row gap-2" style={{marginTop:2}}>
                              <PlatformIcon id={c.top.platform} size={14}/>
                              <a>{c.top.handle}</a>
                            </div>}
                          </div>
                        </div>
                      </td>
                      <td>
                        {c.top ? <div className="row gap-2">
                          <PlatformIcon id={c.top.platform}/>
                          <b className="tabular">{fmt.compact(c.top.views)}</b>
                          <span className="muted" style={{fontSize:11}}>views</span>
                        </div> : <span className="muted">—</span>}
                      </td>
                      <td>
                        <div className="row gap-2">
                          {c.handles.map((h,j)=>(<PlatformIcon key={j} id={h.platform} size={16}/>))}
                        </div>
                      </td>
                      <td className="tabular" style={{textAlign:'right'}}>{fmt.pct(c.er)}</td>
                      <td style={{textAlign:'right'}}><button className="kebab"><Icon name="kebab" size={16}/></button></td>
                    </tr>
                  ))}
                  {shownCreators.length === 0 &&
                  <tr><td colSpan={6} className="muted" style={{padding:'28px 16px',textAlign:'center'}}>
                    {listCreators.length === 0 ? 'No creators in this list yet.' : 'No creators match your search.'}
                  </td></tr>}
                </tbody>
              </table>
            </div>
          </>
        )}

        {tab === 'activity' && (
          <div className="card card-pad muted" style={{padding:'40px 24px',textAlign:'center'}}>
            <Icon name="history" size={28}/>
            <div style={{fontWeight:600,color:'var(--ink-2)',marginTop:10}}>Activity timeline</div>
            <div style={{fontSize:12,marginTop:4}}>List edits, publishes, and plan snapshots will appear here.</div>
          </div>
        )}
      </div>
    </>
  );
};

// — CAMPAIGNS VIEW — (matches existing UI; adds PLANS tab)
const CampaignsView = ({ go, onCreatePlan, plansHome, plans, lists, initialTab }) => {
  const [tab, setTab] = React.useState(
    (initialTab === 'plans' && plansHome === 'campaigns-tab') ? 'plans' : (initialTab || 'all')
  );
  const [createOpen, setCreateOpen] = React.useState(false);
  const tabsList = plansHome === 'campaigns-tab'
    ? [{k:'all',l:'All'},{k:'mine',l:'My Campaigns'},{k:'shared',l:'Shared With Me'},{k:'plans',l:'Plans', count:plans.length}]
    : [{k:'all',l:'All'},{k:'mine',l:'My Campaigns'},{k:'shared',l:'Shared With Me'}];

  return (
    <>
      <div className="body">
        <h1 style={{margin:'0 0 18px',fontSize:30,fontWeight:700,letterSpacing:'-.02em'}}>Campaigns</h1>
        {/* Filter strip */}
        <div className="card card-pad" style={{marginBottom:18,padding:'18px 22px'}}>
          <div className="row gap-3">
            <div className="search-wrap">
              <span className="icon"><Icon name="search" size={14}/></span>
              <input className="search" placeholder="Search…"/>
            </div>
            <button style={{width:38,height:38,border:0,borderRadius:'50%',background:'var(--blue)',color:'#fff',cursor:'pointer'}}><Icon name="search" size={14}/></button>
            <div style={{flex:1}}/>
            <div style={{position:'relative'}}>
              <Btn variant="secondary" icon="plus" onClick={()=>setCreateOpen(v=>!v)}>Create Campaign</Btn>
              {createOpen && (
                <div style={{position:'absolute',right:0,top:42,background:'#fff',border:'1px solid var(--border)',borderRadius:8,boxShadow:'var(--shadow-md)',padding:6,zIndex:20,minWidth:220}}>
                  <button style={{width:'100%',display:'flex',alignItems:'center',gap:8,padding:'8px 10px',background:'transparent',border:0,borderRadius:6,fontSize:13,cursor:'pointer',textAlign:'left'}}>
                    <Icon name="megaphone" size={14}/> Blank campaign
                  </button>
                  <button onClick={()=>{setCreateOpen(false); onCreatePlan(null);}} style={{width:'100%',display:'flex',alignItems:'center',gap:8,padding:'8px 10px',background:'var(--blue-soft)',color:'var(--blue-2)',border:0,borderRadius:6,fontSize:13,fontWeight:600,cursor:'pointer',textAlign:'left'}}>
                    <Icon name="sparkles" size={14}/> New Plan <span className="pill pill-blue" style={{marginLeft:'auto',fontSize:9,padding:'1px 6px'}}>NEW</span>
                  </button>
                </div>
              )}
            </div>
            <button className="btn-icon" title="More"><Icon name="kebab" size={16}/></button>
          </div>
          <div className="row gap-2" style={{marginTop:14,flexWrap:'wrap'}}>
            <button className="filter-pill">Platforms <Icon name="chevron-down" size={12}/></button>
            <button className="filter-pill">Status <Icon name="chevron-down" size={12}/></button>
            <button className="filter-pill">Tags <Icon name="chevron-down" size={12}/></button>
            <button className="filter-pill">Creators <Icon name="chevron-down" size={12}/></button>
            <button className="filter-pill">More <Icon name="chevron-down" size={12}/></button>
            <div style={{flex:1}}/>
            <button className="btn-link row gap-2"><Icon name="x" size={12}/> CLEAR ALL</button>
          </div>
          <div className="tabs allcaps" style={{marginTop:14,borderBottom:0,marginBottom:0}}>
            {tabsList.map(t => (
              <button key={t.k} className={`tab ${tab===t.k?'active':''}`} onClick={()=>setTab(t.k)}>
                <span className="tab-label">{t.l}</span>
                {t.count != null && <span className="pill pill-blue" style={{fontSize:10,padding:'0 6px'}}>{t.count}</span>}
                <span className="info"><Icon name="help" size={11}/></span>
              </button>
            ))}
          </div>
        </div>

        {tab === 'plans' ? <PlansList plans={plans} lists={lists} go={go} onCreatePlan={onCreatePlan}/> : <CampaignsList go={go} plansHome={plansHome}/>}
      </div>
    </>
  );
};

const CampaignsList = ({ go, plansHome }) => (
  <>
    <div className="row" style={{marginBottom:10,gap:10,alignItems:'center',color:'var(--ink-2)'}}>
      <button className="btn-icon row gap-2" style={{padding:'4px 8px'}}>VIEW: SUMMARY <Icon name="chevron-down" size={12}/></button>
      <span className="muted" style={{fontSize:12}}>1 - 20 of 285</span>
      <div style={{flex:1}}/>
      <button className="btn-icon"><Icon name="sort-desc" size={16}/></button>
      <button className="btn-icon"><Icon name="refresh" size={16}/></button>
      <button className="btn-icon"><Icon name="kebab" size={16}/></button>
    </div>
    <div className="card" style={{padding:0}}>
      <table className="tbl">
        <thead>
          <tr>
            <th style={{width:32}}><input type="checkbox"/></th>
            <th>Campaign Name</th>
            <th>Brand</th>
            <th>Status</th>
            <th>Start Date</th>
            <th>End Date</th>
            <th>Division Name</th>
            <th>Details</th>
          </tr>
        </thead>
        <tbody>
          {CAMPAIGNS.map(c => (
            <tr key={c.id} className="clickable">
              <td><input type="checkbox"/></td>
              <td>
                <div className="row gap-3">
                  <div style={{width:36,height:36,borderRadius:8,background:'#e6e8ee',display:'flex',alignItems:'center',justifyContent:'center',fontWeight:700,color:'var(--ink-2)'}}>{c.name[0]}</div>
                  <div>
                    <div style={{fontWeight:600}}>{c.name}</div>
                    {c.fromPlanId && (
                      <button onClick={(e)=>{e.stopPropagation(); go({route:'plan',id:c.fromPlanId});}} className="row gap-2" style={{marginTop:3,background:'transparent',border:0,padding:0,fontSize:11,color:'var(--blue)',cursor:'pointer'}}>
                        <Icon name="sparkles" size={11}/> created from plan
                      </button>
                    )}
                  </div>
                </div>
              </td>
              <td>{c.brand ? <span className="pill" style={{background:'#dff5ec',color:'#185c43',border:0}}><Icon name="tag" size={10}/> {c.brand}</span> : null}</td>
              <td>{c.status === 'Active' ? <span style={{color:'var(--green)'}}>Active</span> : <span className="pill pill-grey">{c.status}</span>}</td>
              <td className="muted">{c.start}</td>
              <td className="muted">{c.end}</td>
              <td></td>
              <td style={{fontSize:11,color:'var(--ink-3)',lineHeight:1.7}}>
                <div>SALES PERSON: {c.salesPerson}</div>
                <div>STATUS: {c.fromPlanId ? `${c.creators} creators, ${c.videos} videos` : `${c.creators} creators, ${c.posts} posts, ${c.videos} videos`}</div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  </>
);

const PlansList = ({ plans, lists, go, onCreatePlan }) => (
  <>
    <div className="banner banner-info" style={{marginBottom:14}}>
      <Icon name="sparkles" size={14}/>
      <span style={{flex:1}}><b>Plans are a new way to scope a campaign</b> — forecast performance and budget across creators before you commit. Start from a list, save scenarios, and send to a draft campaign when ready.</span>
    </div>

    <div className="row" style={{justifyContent:'flex-end',marginBottom:14,alignItems:'center'}}>
      <Btn variant="primary" icon="plus" onClick={()=>onCreatePlan(null)}>New Plan</Btn>
    </div>

    <div className="card" style={{padding:0}}>
      <table className="tbl">
        <thead>
          <tr>
            <th>Plan</th>
            <th>From list</th>
            <th style={{textAlign:'right'}}>Budget</th>
            <th style={{textAlign:'right'}}>Views</th>
            <th style={{textAlign:'right'}}>CPM</th>
            <th style={{textAlign:'right'}}>Creators</th>
            <th>Version</th>
            <th>Info</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {plans.map(p => {
            const list = lists.find(l => l.id === p.listId);
            const ver = p.versions[p.versions.length-1];
            return (
              <tr key={p.id} className="clickable" onClick={()=>go({route:'plan',id:p.id})}>
                <td>
                  <div className="col" style={{lineHeight:1.3}}>
                    <span style={{fontWeight:600,fontSize:13}}>{p.name}</span>
                    <span className="muted" style={{fontSize:11}}>{p.versions.length} version{p.versions.length===1?'':'s'}</span>
                  </div>
                </td>
                <td>
                  <div className="row gap-2" style={{alignItems:'center'}}>
                    <span style={{fontSize:12.5,color:'var(--ink-2)'}}>{list ? list.name : '—'}</span>
                    {p.campaignId && <span className="pill pill-green" style={{fontSize:9,padding:'0 5px'}}>linked</span>}
                  </div>
                </td>
                <td className="tabular" style={{textAlign:'right',fontWeight:600}}>{fmt.$compact(p.targetBudget)}</td>
                <td className="tabular" style={{textAlign:'right'}}>{fmt.compact(p.targetViews)}</td>
                <td className="tabular" style={{textAlign:'right'}}>{fmt.$2(p.targetCpm)}</td>
                <td className="tabular" style={{textAlign:'right'}}>{p.creatorIds.length}</td>
                <td><span className="pill pill-grey" style={{fontSize:10}}>{ver.label}</span></td>
                <td className="list-meta" style={{whiteSpace:'nowrap',lineHeight:1.5}}>
                  <div>CREATED: <b>{p.versions[0].who}</b> — {p.versions[0].when}</div>
                  <div>UPDATED: <b>{p.editedBy}</b> — {p.editedAt}</div>
                </td>
                <td style={{textAlign:'right'}}><Icon name="chevron-right" size={14}/></td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  </>
);

Object.assign(window, { ListsView, ListDetailView, CampaignsView });