// Submissions inbox · every public form lands here. Sort, approve, and it populates at launch.

function InboxView({setRoute}){
  const [items, setItems] = React.useState(()=>{ try{ return JSON.parse(localStorage.getItem('tuepac_inbox'))||[]; }catch(e){ return []; } });
  const [tab, setTab] = React.useState('All');
  const types = ['All','Listing','Seller','Capital','Podcast','Person','We Out Here','Circle','Publisher','Advertiser','Other'];
  const rows = tab==='All' ? items : items.filter(x=>x.type===tab);
  function setStatus(id, status){
    const n = items.map(x=>x.id===id?{...x,status}:x);
    setItems(n); localStorage.setItem('tuepac_inbox', JSON.stringify(n));
  }
  function line(p){
    return Object.entries(p||{}).filter(([k,v])=>k!=='email'&&v).map(([k,v])=>v).join(' · ');
  }
  return (
    <AdminShell route="inbox" setRoute={setRoute} title="Submissions" breadcrumb="NETWORK · PUBLIC INTAKE">
      <Card title="Inbox" meta={`${items.filter(x=>x.status==='New').length} new · approved entries populate their destination at launch`}
        actions={<Seg value={tab} onChange={setTab} options={types}/>}>
        {rows.length===0 && <div className="mono" style={{fontSize:10,color:'var(--mute)',letterSpacing:'.1em',textAlign:'center',padding:'28px 0'}}>NOTHING HERE YET · PUBLIC FORMS LAND IN THIS INBOX</div>}
        {rows.map(x=>(
          <div key={x.id} style={{display:'flex',gap:10,padding:'9px 0',borderBottom:'1px solid var(--rule-line)',alignItems:'center',flexWrap:'wrap'}}>
            <Pill k={x.status==='New'?'warn':x.status==='Approved'?'live':'bad'}>{x.status.toUpperCase()}</Pill>
            <Pill k="info">{x.type.toUpperCase()}</Pill>
            <div style={{flex:1,minWidth:180}}>
              <div style={{fontSize:12.5,fontWeight:600,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{line(x.payload)||'(no details)'}</div>
              <div className="mono" style={{fontSize:9.5,color:'var(--mute)',letterSpacing:'.04em'}}>{x.id} · {(x.payload||{}).email||''} · {new Date(x.ts).toLocaleDateString()}</div>
            </div>
            {x.status==='New' && <>
              <button className="btn k s" onClick={()=>setStatus(x.id,'Approved')}>Approve</button>
              <button className="btn gh s" onClick={()=>setStatus(x.id,'Declined')}>Decline</button>
            </>}
            {x.status!=='New' && <button className="btn gh s" onClick={()=>setStatus(x.id,'New')}>Reopen</button>}
          </div>
        ))}
        <div className="mono" style={{fontSize:9.5,color:'var(--mute)',letterSpacing:'.08em',marginTop:10}}>APPROVE = STAGED FOR LAUNCH · LISTINGS SEED THE INDEX · SELLERS SEED THE MARKETPLACE · PODCASTS SEED MEDIA + THE HOST'S PEOPLE PROFILE · PERSON + WE-OUT-HERE SEEDS TRIGGER RESEARCH, A DRAFT PROFILE, AND AN OUTREACH DM · CIRCLES LAUNCH AT CRITICAL MASS · PUBLISHERS FLOW INTO PIPELINE · ENGINEERING SWAPS THIS STORE FOR THE DATABASE</div>
      </Card>
    </AdminShell>
  );
}

window.InboxView = InboxView;