/* New reference views that complement the chapter index:
   Floors guide, The System (stats/races/classes), Glossary,
   "Where was I?" catch-up, Global timeline, Community, Gallery.
   All attach to window so shell.jsx can route to them.

   Reading-level seal: pages that show later-book detail read the
   shared window.useReaderLevel() (defined in shell.jsx). level 0 =
   sealed, 1..8 = "read through book N", 99 = all revealed. */
const { useState, useEffect } = React;

/* Small helper: the highest book a reader may safely see on a page that
   has no single "debut" book of its own. We always grant Book 1 as a
   freebie so a fresh visitor sees *something* rather than a wall of seals. */
function pageRevealBook(){
  const lvl = (window.__dccReaderLevel != null) ? window.__dccReaderLevel : 0;
  return Math.max(lvl, 1);
}

/* ============================ FLOORS ============================ */
function FloorsPage({go}){
  const D = window.DCC, X = window.DCCX;
  const [level] = window.useReaderLevel();
  const revealBook = Math.max(level, 1);
  return (
    <div className="view"><div className="wrap">
      <div className="crumbs"><a onClick={()=>go({view:'index'})}>Index</a><span className="sep">/</span><span style={{color:'var(--ink)'}}>Floors</span></div>
      <div className="sec-top">
        <h2><span style={{color:'var(--t-place)'}}>⌖</span> The <span className="am">Floors</span></h2>
        <p className="note">The World Dungeon has 18 levels. Detail for floors past your reading level stays sealed.</p>
      </div>
      <div className="floor-list">
        {X.FLOORS.map(f=>{
          const sealed = f.book > revealBook;
          return (
            <div key={f.n} className={'floor-card'+(sealed?' is-sealed':'')}>
              <div className="floor-n">{f.n>10?'10+':String(f.n).padStart(2,'0')}</div>
              <div className="floor-main">
                <div className="floor-head">
                  <h3 className="floor-name">{f.name}</h3>
                  <span className="floor-theme">{f.theme}</span>
                  <span className="floor-book">{f.book>=99?'Sealed':'Book '+f.book}</span>
                </div>
                {sealed ? (
                  <div className="floor-sealedmsg">▓▓ Sealed — you reach this floor in Book {f.book}. Raise your reading level in the top bar to reveal it.</div>
                ) : (
                  <React.Fragment>
                    <p className="floor-blurb">{f.blurb}</p>
                    {f.bosses && f.bosses.length>0 && (
                      <div className="floor-bosses">
                        <span className="fb-lab">Bosses</span>
                        {f.bosses.map((b,i)=>(<span className="fb-chip" key={i}>{b}</span>))}
                      </div>
                    )}
                  </React.Fragment>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </div></div>
  );
}

/* ===================== THE SYSTEM (stats/races/classes) ===================== */
function SystemGuidePage({go}){
  const X = window.DCCX;
  const [level] = window.useReaderLevel();
  const revealBook = Math.max(level, 1);
  const seal = b => b && b>revealBook;
  return (
    <div className="view"><div className="wrap">
      <div className="crumbs"><a onClick={()=>go({view:'index'})}>Index</a><span className="sep">/</span><span style={{color:'var(--ink)'}}>The System</span></div>
      <div className="sec-top">
        <h2>How the <span className="am">System</span> Works</h2>
        <p className="note">A spoiler-light primer on stats, leveling, races, classes, bosses, and the show that runs it all.</p>
      </div>

      <div className="sysguide">
        {X.SYSTEM_GUIDE.map(s=>(
          <div className="sg-sec" key={s.id}>
            <div className="sg-head"><span className="sg-glyph">{s.glyph}</span><h3>{s.title}</h3></div>
            {s.body.map((p,i)=>(<p className="sg-body" key={i}>{p}</p>))}
            {s.rows && (
              <div className="sg-rows">
                {s.rows.map((r,i)=>(<div className="sg-row" key={i}><b>{r.k}</b><span>{r.v}</span></div>))}
              </div>
            )}
          </div>
        ))}
      </div>

      <div className="block-h" style={{marginTop:34}}>Notable races</div>
      <div className="rc-list">
        {X.RACES.map((r,i)=>{
          const s = seal(r.book);
          return (
            <div className={'rc-item'+(s?' is-sealed':'')} key={i}>
              <div className="rc-name">{r.name} {r.book && <em className="rc-bk">B{r.book>=99?'?':r.book}</em>}</div>
              <div className="rc-note">{s ? '▓▓ Later-book race — raise your reading level to reveal.' : r.note}</div>
            </div>
          );
        })}
      </div>

      <div className="block-h" style={{marginTop:34}}>Notable classes</div>
      <div className="rc-list">
        {X.CLASSES.map((c,i)=>{
          const s = seal(c.book);
          return (
            <div className={'rc-item'+(s?' is-sealed':'')} key={i}>
              <div className="rc-name">{c.name} {c.who && <em className="rc-who">{c.who}</em>}</div>
              <div className="rc-note">{s ? '▓▓ Later-book class — raise your reading level to reveal.' : c.note}</div>
            </div>
          );
        })}
      </div>
    </div></div>
  );
}

/* ============================ GLOSSARY ============================ */
function GlossaryPage({go}){
  const X = window.DCCX;
  const [q, setQ] = useState('');
  const qn = q.trim().toLowerCase();
  const terms = X.GLOSSARY.slice().sort((a,b)=>a.term.localeCompare(b.term))
    .filter(t=> !qn || (t.term+' '+t.def).toLowerCase().includes(qn));
  return (
    <div className="view"><div className="wrap">
      <div className="crumbs"><a onClick={()=>go({view:'index'})}>Index</a><span className="sep">/</span><span style={{color:'var(--ink)'}}>Glossary</span></div>
      <div className="sec-top">
        <h2><span style={{color:'var(--t-lore)'}}>◆</span> The <span className="am">Glossary</span></h2>
        <p className="note">{X.GLOSSARY.length} terms. Definitions are kept light on plot.</p>
      </div>
      <input className="gl-search" value={q} placeholder="Filter terms…" onChange={e=>setQ(e.target.value)}/>
      <div className="glossary">
        {terms.map((t,i)=>(
          <div className="gl-item" key={i}>
            <div className="gl-term">{t.term}{t.book && <em className="gl-bk">Book {t.book}+</em>}</div>
            <div className="gl-def">{t.def}</div>
          </div>
        ))}
        {!terms.length && <p className="note">No term matches “{q}”.</p>}
      </div>
    </div></div>
  );
}

/* ===================== "WHERE WAS I?" CATCH-UP ===================== */
function CatchUpPage({go}){
  const D = window.DCC;
  const live = D.BOOKS.filter(b=>b.status==='live');
  const [, setLevel] = window.useReaderLevel();
  const [book, setBook] = useState(live.length ? live[live.length-1].n : 1);
  const chs = D.chaptersFor(book);
  const [ch, setCh] = useState(chs.length ? chs[chs.length-1].num : 1);
  useEffect(()=>{ const c = D.chaptersFor(book); setCh(c.length ? c[c.length-1].num : 1); }, [book]);

  // Compile every chapter summary from the start up to (book, ch).
  const recap = [];
  live.filter(b=>b.n<=book).forEach(b=>{
    D.chaptersFor(b.n).forEach(c=>{
      if(b.n<book || c.num<=ch) recap.push({book:b.n, ...c});
    });
  });

  return (
    <div className="view"><div className="wrap">
      <div className="crumbs"><a onClick={()=>go({view:'index'})}>Index</a><span className="sep">/</span><span style={{color:'var(--ink)'}}>Where was I?</span></div>
      <div className="sec-top">
        <h2>Where <span className="am">Was I?</span></h2>
        <p className="note">Pick how far you’ve read. We’ll stitch the chapter recaps into one catch-up — and can set your spoiler level to match.</p>
      </div>

      <div className="catchup-bar">
        <label>Book
          <select value={book} onChange={e=>setBook(+e.target.value)}>
            {live.map(b=>(<option key={b.n} value={b.n}>Book {b.n} — {b.title}</option>))}
          </select>
        </label>
        <label>Through chapter
          <select value={ch} onChange={e=>setCh(+e.target.value)}>
            {chs.map(c=>(<option key={c.num} value={c.num}>{c.num===99?'Epilogue':('Ch. '+c.num)} — {c.title}</option>))}
          </select>
        </label>
        <button className="btn" onClick={()=>setLevel(book)}>Set my spoiler level to Book {book} ▸</button>
      </div>

      <p className="note" style={{maxWidth:680,textAlign:'left',margin:'4px 0 18px'}}>
        {recap.length} chapter{recap.length===1?'':'s'} recapped, through Book {book} {ch===99?'Epilogue':('Ch. '+ch)}.
      </p>

      <div className="recap-list">
        {recap.map((c,i)=>(
          <div className="recap-item" key={i} onClick={()=>go({view:'chapter', book:c.book, ch:c.num})}>
            <div className="recap-loc">B{c.book}·{c.num===99?'EP':('C'+c.num)}</div>
            <div className="recap-body">
              <div className="recap-title">{c.title} <span className="recap-arr">↗</span></div>
              <div className="recap-sum">{c.summary}</div>
            </div>
          </div>
        ))}
      </div>
    </div></div>
  );
}

/* ===================== GLOBAL TIMELINE ===================== */
function TimelinePage({go}){
  const X = window.DCCX;
  const [level] = window.useReaderLevel();
  const revealBook = Math.max(level, 1);
  return (
    <div className="view"><div className="wrap">
      <div className="crumbs"><a onClick={()=>go({view:'index'})}>Index</a><span className="sep">/</span><span style={{color:'var(--ink)'}}>Timeline</span></div>
      <div className="sec-top">
        <h2><span style={{color:'var(--t-event)'}}>✷</span> The <span className="am">Timeline</span></h2>
        <p className="note">The series’ major beats in order. Events past your reading level stay sealed.</p>
      </div>
      <div className="gtl">
        {X.MAJOR_TIMELINE.map((n,i)=>{
          const sealed = n.book > revealBook;
          return (
            <div className={'gtl-node'+(sealed?' is-sealed':'')} key={i}>
              <span className="gtl-dot" style={{background:'var(--t-event)'}}></span>
              <div className="gtl-meta">
                <span className="gtl-book">Book {n.book}</span>
                <span className="gtl-floor">Floor {n.floor}</span>
              </div>
              <div className="gtl-body">
                <div className="gtl-label">{n.label}</div>
                <div className="gtl-text">{sealed ? '▓▓ Sealed — this happens in Book '+n.book+'. Raise your reading level to reveal.' : n.text}</div>
              </div>
            </div>
          );
        })}
      </div>
    </div></div>
  );
}

/* ===================== COMMUNITY ===================== */
function CommunityPage({go}){
  const X = window.DCCX;
  return (
    <div className="view"><div className="wrap">
      <div className="crumbs"><a onClick={()=>go({view:'home'})}>Home</a><span className="sep">/</span><span style={{color:'var(--ink)'}}>Community</span></div>
      <div className="sec-top">
        <h2>The <span className="am">Crew</span></h2>
        <p className="note">Where the Crawlers gather, and every way to experience DCC beyond the books.</p>
      </div>

      <div className="block-h">Community</div>
      <div className="link-grid">
        {X.COMMUNITY.map((l,i)=>(
          <a className="link-card" key={i} href={l.url} target="_blank" rel="noopener noreferrer">
            <div className="link-kind">{l.kind}</div>
            <div className="link-name">{l.name} <span className="link-go">↗</span></div>
            <div className="link-blurb">{l.blurb}</div>
          </a>
        ))}
      </div>

      <div className="block-h" style={{marginTop:34}}>Beyond the books</div>
      <div className="link-grid">
        {X.ADAPTATIONS.map((l,i)=>(
          <a className="link-card" key={i} href={l.url} target="_blank" rel="noopener noreferrer">
            <div className="link-kind">{l.kind} · {l.status}</div>
            <div className="link-name">{l.name} <span className="link-go">↗</span></div>
            <div className="link-blurb">{l.blurb}</div>
          </a>
        ))}
      </div>
    </div></div>
  );
}

/* ===================== GALLERY ===================== */
function GalleryPage({go}){
  const D = window.DCC;
  const ArtThumb = window.ArtThumb;
  const [community, setCommunity] = useState(null);   // approved fan art entry-ids
  const [type, setType] = useState('all');
  const [limit, setLimit] = useState(48);

  useEffect(()=>{
    let live = true;
    fetch('/api/community').then(r=>r.ok?r.json():{entries:[]})
      .then(d=>{ if(live) setCommunity(d.entries||[]); })
      .catch(()=>{ if(live) setCommunity([]); });
    return ()=>{ live=false; };
  },[]);

  // Everything that ships with System AI concept art.
  const seed = window.DCC_SEED_ART || {};
  const arted = Object.keys(seed).map(id=>D.ENTRIES[id]).filter(Boolean);
  const types = D.INDEX_ORDER.filter(t=> arted.some(e=>e.type===t));
  const shown = (type==='all'?arted:arted.filter(e=>e.type===type));
  const commEntries = (community||[]).map(id=>D.ENTRIES[id]).filter(Boolean);

  return (
    <div className="view"><div className="wrap">
      <div className="crumbs"><a onClick={()=>go({view:'home'})}>Home</a><span className="sep">/</span><span style={{color:'var(--ink)'}}>Gallery</span></div>
      <div className="sec-top">
        <h2>The <span className="am">Gallery</span></h2>
        <p className="note">{arted.length} entries with concept art. See something you can do better? <a className="xlink" onClick={()=>go({view:'submit'})} style={{cursor:'pointer'}}>Submit your own ▸</a></p>
      </div>

      {commEntries.length>0 && (
        <React.Fragment>
          <div className="block-h">Community submissions</div>
          <div className="entry-grid" style={{marginBottom:30}}>
            {commEntries.map(e=>(
              <div key={e.id} className="ecard" style={{['--tc']:`var(--t-${e.type})`}} onClick={()=>go({view:'entry', id:e.id})}>
                <ArtThumb entry={e}/>
                <div className="ebody"><h3 className="enm">{e.name}</h3><p className="ed">{e.sub||e.desc}</p></div>
              </div>
            ))}
          </div>
        </React.Fragment>
      )}

      <div className="block-h">System AI concept art</div>
      <div className="chap-filter" style={{marginBottom:18}}>
        <button className={'cfilt'+(type==='all'?' on':'')} onClick={()=>{setType('all');setLimit(48);}}>All <i>{arted.length}</i></button>
        {types.map(t=>(
          <button key={t} className={'cfilt'+(type===t?' on':'')} style={{['--tc']:`var(--t-${t})`}}
            onClick={()=>{setType(t);setLimit(48);}}>
            {D.typeName[t]} <i>{arted.filter(e=>e.type===t).length}</i>
          </button>
        ))}
      </div>
      <div className="entry-grid">
        {shown.slice(0,limit).map(e=>(
          <div key={e.id} className="ecard" style={{['--tc']:`var(--t-${e.type})`}} onClick={()=>go({view:'entry', id:e.id})}>
            <ArtThumb entry={e}/>
            <div className="ebody"><h3 className="enm">{e.name}</h3><p className="ed">{e.sub||e.desc}</p></div>
          </div>
        ))}
      </div>
      {shown.length>limit && (
        <div style={{textAlign:'center',marginTop:24}}>
          <button className="btn ghost" onClick={()=>setLimit(l=>l+48)}>Load more ({shown.length-limit} left) ▾</button>
        </div>
      )}
    </div></div>
  );
}

window.FloorsPage = FloorsPage;
window.SystemGuidePage = SystemGuidePage;
window.GlossaryPage = GlossaryPage;
window.CatchUpPage = CatchUpPage;
window.TimelinePage = TimelinePage;
window.CommunityPage = CommunityPage;
window.GalleryPage = GalleryPage;