/* ============================================================================
   MATRIA, The Reading Room.
   Every author behind Matria's answers, on one shelf. Users can suggest
   additions. The archive refreshes with new readings every two months.
   ============================================================================ */

function ReadingRoom({ctx}){
  const D=window.MATRIA;
  const nodes=Object.values(D.NODES);
  const authors=nodes
    .filter(n=>n.type==='person'||n.type==='political')
    .sort((a,b)=>a.title.split(' ').slice(-1)[0].localeCompare(b.title.split(' ').slice(-1)[0]));
  const womenCount=nodes.filter(n=>n.type==='person').length;
  const regionCount=new Set(nodes.map(n=>n.region).filter(Boolean)).size;
  const sourcingStubs=nodes.filter(n=>(n.type==='person'||n.type==='political')&&n._status==='stub');
  return (
    <div className="screen matria-cream">
      <StatusBar/>
      <TopBar onBack={()=>ctx.back()} title="The Reading Room"/>
      <div className="s-body reading-room__body">
        <div className="pad" style={{paddingTop:6}}>
          <h1 className="title">The Reading Room</h1>
          <p className="lead" style={{marginTop:6}}>Every answer in Matria stands on a real shelf. These are the authors we read, with their works cited in full.</p>
          {/* reading cycle card */}
          <div className="card" style={{display:'flex',alignItems:'center',gap:12,borderColor:'var(--gold-line)',padding:'12px 14px',marginTop:14}}>
            <span className="cream-row__icon" style={{borderRadius:'50%'}}><Icon name="sources" size={18}/></span>
            <div style={{flex:1}}>
              <div className="meta" style={{color:'var(--ink)'}}>We read in cycles</div>
              <div className="meta" style={{fontSize:11,color:'var(--ink-soft)',marginTop:2,lineHeight:1.4}}>The shelf grows with new readings every two months. Updated June 2026. Next reading: August 2026.</div>
            </div>
          </div>
        </div>
        {/* the shelf */}
        <div className="pad" style={{marginTop:16}}>
          <div className="label" style={{marginBottom:10}}>On the shelf · {authors.length}</div>
          <div style={{display:'flex',flexDirection:'column',gap:9}}>
            {authors.map(n=>(
              <CreamRow key={n.id} title={n.title}
                meta={[n.role,n.period&&n.period!=='-'?n.period:null,(n.works&&n.works[0])||n.sources&&n.sources[0]].filter(Boolean).join(' · ')}
                medallion={<Portrait pic={n.pic||collagePic(n.id)} name={n.title} size={44} round={false} radius={12}/>}
                onClick={()=>ctx.openSource(n.id)}/>
            ))}
          </div>
        </div>
        {/* being sourced */}
        {sourcingStubs.length>0 && <div className="pad" style={{marginTop:16}}>
          <div className="card" style={{borderStyle:'dashed',borderColor:'var(--gold-line)',padding:'13px 15px'}}>
            <div className="label" style={{fontSize:9,marginBottom:5}}>Being sourced now</div>
            <p style={{fontSize:12,lineHeight:1.55,color:'#46433d',margin:0}}>{sourcingStubs.length} {sourcingStubs.length===1?'entry is':'entries are'} still being sourced ({sourcingStubs.map(n=>n.title).join(', ')}). The archive holds {womenCount} women and {nodes.length} entries across {regionCount} regions. Nothing joins the shelf until a human editor confirms the sources.</p>
          </div>
        </div>}
      </div>
      <div className="pad matria-dock-foot reading-room__suggest-foot">
        <button className="btn btn-navy" onClick={()=>ctx.nav('Suggest')}>Suggest an author</button>
        <p>Suggestions join the reading list for the next cycle.</p>
      </div>
    </div>
  );
}

Object.assign(window,{ReadingRoom});