/* global React, BIBLE_BOOKS, BIBLE_TEXT, BIBLE_CURRENT, TranslationLoader */
const { useState: useStateR, useEffect: useEffectR, useMemo: useMemoR, useCallback: useCallbackR } = React;

function Reader({ bookId, chapter, navigate, switchTranslation }) {
  const book = useMemoR(() => BIBLE_BOOKS.find(b => b.id === bookId) || BIBLE_BOOKS[0], [bookId, window.BIBLE_CURRENT && window.BIBLE_CURRENT.slug]);
  const key = `${book.id}.${chapter}`;
  const verses = BIBLE_TEXT[key];
  const hasText = !!verses;
  const meta = (window.BIBLE_CURRENT && window.BIBLE_CURRENT.meta) || {};
  const activeSlug = window.BIBLE_CURRENT && window.BIBLE_CURRENT.slug;
  const [selected, setSelected] = useStateR(null);
  const [pickerOpen, setPickerOpen] = useStateR(false);
  const [transPickerOpen, setTransPickerOpen] = useStateR(false);
  const [fontSize, setFontSize] = useStateR(() => {
    try { return parseInt(localStorage.getItem('ob.fontSize') || '20', 10); } catch { return 20; }
  });
  useEffectR(() => {
    try { localStorage.setItem('ob.fontSize', String(fontSize)); } catch {}
  }, [fontSize]);

  // save last read position
  useEffectR(() => {
    try { localStorage.setItem('ob.lastRead', JSON.stringify({ bookId, chapter })); } catch {}
  }, [bookId, chapter]);

  const readPath = (bid, ch) =>
    activeSlug ? `/read/${activeSlug}/${bid}/${ch}` : `/read/${bid}/${ch}`;

  const prev = () => {
    if (chapter > 1) { navigate(readPath(book.id, chapter - 1)); return; }
    const idx = BIBLE_BOOKS.findIndex(b => b.id === book.id);
    if (idx > 0) {
      const p = BIBLE_BOOKS[idx - 1];
      navigate(readPath(p.id, p.chapters));
    }
  };
  const next = () => {
    if (chapter < book.chapters) { navigate(readPath(book.id, chapter + 1)); return; }
    const idx = BIBLE_BOOKS.findIndex(b => b.id === book.id);
    if (idx < BIBLE_BOOKS.length - 1) {
      const n = BIBLE_BOOKS[idx + 1];
      navigate(readPath(n.id, 1));
    }
  };

  useEffectR(() => {
    const onKey = (e) => {
      if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
      if (e.key === 'ArrowRight' || e.key === 'j') next();
      else if (e.key === 'ArrowLeft' || e.key === 'k') prev();
      else if (e.key === 'Escape') { setPickerOpen(false); setSelected(null); }
      else if (e.key === '=' || e.key === '+') setFontSize(s => Math.min(28, s + 1));
      else if (e.key === '-' || e.key === '_') setFontSize(s => Math.max(14, s - 1));
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [book, chapter]);

  // chapter list for sidebar — show numerical list of chapters for this book
  const chapters = Array.from({ length: book.chapters }, (_, i) => i + 1);

  return (
    <main>
      {/* Reader control bar */}
      <div className="reader-bar">
        <div className="breadcrumb">
          <button onClick={() => setPickerOpen(true)}>
            {book.name.toUpperCase()}
          </button>
          <span className="sep">/</span>
          <button onClick={() => setPickerOpen(true)}>
            Ch {chapter}
          </button>
          <span className="sep">·</span>
          <button onClick={() => setTransPickerOpen(true)} title="Change translation" style={{borderBottom:'1px dotted var(--ink-3)'}}>
            {meta.name || activeSlug || '—'}
          </button>
          <span className="sep">·</span>
          <span>{(meta.language || '—').toUpperCase()}</span>
        </div>
        <div className="title serif">{book.name} {chapter}</div>
        <div className="controls">
          <button onClick={() => setFontSize(s => Math.max(14, s - 1))}>A−</button>
          <button onClick={() => setFontSize(s => Math.min(28, s + 1))}>A+</button>
          <button onClick={prev}>← Prev</button>
          <button onClick={next}>Next →</button>
        </div>
      </div>

      <div className="reader">
        {/* LEFT: chapter picker */}
        <aside className="sidebar">
          <h4>Book</h4>
          <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', padding:'6px 0', borderBottom:'1px solid var(--rule)', cursor:'pointer'}} onClick={() => setPickerOpen(true)}>
            <span className="serif" style={{fontSize:18}}>{book.name}</span>
            <span style={{fontSize:10, letterSpacing:'0.2em', color:'var(--ink-3)'}}>CHANGE</span>
          </div>
          <h4>Chapters · {book.chapters}</h4>
          <ol>
            {chapters.map(c => (
              <li
                key={c}
                className={c === chapter ? 'active' : ''}
                onClick={() => navigate(readPath(book.id, c))}
              >
                <span className="idx">{String(c).padStart(3, '0')}</span>
                <span>{book.name}</span>
                <span className="ch">{c}</span>
              </li>
            ))}
          </ol>
        </aside>

        {/* CENTER: scripture */}
        <article className="scripture">
          <h1 className="book-title">{book.name}</h1>
          <div className="chapter-label">Chapter {chapter} · {book.testament === 'ot' ? 'Old Testament' : 'New Testament'}</div>

          {hasText ? (
            verses.map((txt, i) => {
              const vnum = i + 1;
              const isSel = selected === vnum;
              const isFirst = i === 0;
              return (
                <p
                  key={i}
                  className={`verse ${isSel ? 'selected' : ''}`}
                  style={{fontSize: fontSize}}
                  onClick={() => setSelected(isSel ? null : vnum)}
                >
                  {isFirst && <span className="drop-cap">{txt[0]}</span>}
                  <span className="vnum">{vnum}</span>
                  {isFirst ? txt.slice(1) : txt}
                </p>
              );
            })
          ) : (
            <div style={{padding:'40px 0', color:'var(--ink-3)', fontSize:14, lineHeight:1.7, fontFamily:'"JetBrains Mono", monospace', letterSpacing:'0.02em'}}>
              <div style={{fontSize:11, letterSpacing:'0.22em', textTransform:'uppercase', color:'var(--ink-3)', marginBottom:16}}>
                ∅ TEXT NOT IN LOCAL CACHE
              </div>
              <p style={{maxWidth:'50ch'}}>
                This prototype ships with a handful of iconic chapters to keep the bundle small.
                In production, every chapter of every available translation is cached locally after first visit.
              </p>
              <div style={{marginTop:24, fontSize:11, letterSpacing:'0.18em', textTransform:'uppercase'}}>
                Available in this demo:
              </div>
              <ul style={{marginTop:12, listStyle:'none', display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:8, fontSize:14, fontFamily:'"Newsreader", serif', letterSpacing:0}}>
                {Object.keys(BIBLE_TEXT).slice(0, 12).map(k => {
                  const [bid, ch] = k.split('.');
                  const b = BIBLE_BOOKS.find(x => x.id === bid);
                  if (!b) return null;
                  return (
                    <li key={k} style={{cursor:'pointer', padding:'4px 0', borderBottom:'1px solid var(--rule-soft)'}}
                        onClick={() => navigate(readPath(bid, parseInt(ch, 10)))}>
                      → {b.name} {ch}
                    </li>
                  );
                })}
              </ul>
            </div>
          )}

          <div className="chapter-nav">
            <button onClick={prev}><span className="arrow">←</span> Previous</button>
            <span className="label">Chapter {chapter} of {book.chapters}</span>
            <button onClick={next}>Next <span className="arrow">→</span></button>
          </div>
        </article>

        {/* RIGHT: meta */}
        <aside className="meta">
          <div className="block">
            <div className="k label">Translation</div>
            <div className="v">
              <button
                onClick={() => setTransPickerOpen(true)}
                style={{textAlign:'left', borderBottom:'1px dotted var(--ink-3)'}}
                title="Change translation"
              >
                {meta.name || '—'}
              </button>
            </div>
          </div>
          {meta.year != null && (
            <div className="block">
              <div className="k label">Year</div>
              <div className="v">{meta.year}</div>
            </div>
          )}
          <div className="block">
            <div className="k label">Language</div>
            <div className="v">{meta.nativeName || meta.languageName || '—'}</div>
          </div>
          <div className="block">
            <div className="k label">License</div>
            <div className="v mono">Public Domain</div>
          </div>
          <div className="block">
            <div className="k label">Verses · chapter</div>
            <div className="v">{verses ? verses.length : '—'}</div>
          </div>
          <hr className="hrule-soft" />
          <div className="block">
            <div className="k label">Shortcuts</div>
            <div style={{marginTop:8, fontSize:11, letterSpacing:0.02, textTransform:'none', fontFamily:'"JetBrains Mono", monospace', lineHeight:1.9, color:'var(--ink)'}}>
              <div><span className="kbd">←</span> prev</div>
              <div><span className="kbd">→</span> next</div>
              <div><span className="kbd">+</span> / <span className="kbd">−</span> size</div>
              <div><span className="kbd">Esc</span> close</div>
            </div>
          </div>
          {selected && verses && (
            <div className="block" style={{borderTop:'1px solid var(--rule)', paddingTop:16}}>
              <div className="k label">Selected · v{selected}</div>
              <div style={{marginTop:10, display:'flex', flexDirection:'column', gap:6, fontFamily:'"JetBrains Mono", monospace', fontSize:10.5, letterSpacing:'0.14em', textTransform:'uppercase'}}>
                <button style={{textAlign:'left', borderBottom:'1px solid var(--rule-soft)', paddingBottom:6}}>Copy</button>
                <button style={{textAlign:'left', borderBottom:'1px solid var(--rule-soft)', paddingBottom:6}}>Share as image</button>
                <button style={{textAlign:'left'}}>Bookmark</button>
              </div>
            </div>
          )}
        </aside>
      </div>

      {pickerOpen && (
        <BookPicker
          onClose={() => setPickerOpen(false)}
          onPick={(b) => { setPickerOpen(false); navigate(readPath(b.id, 1)); }}
        />
      )}
      {transPickerOpen && (
        <TranslationPicker
          activeSlug={activeSlug}
          onClose={() => setTransPickerOpen(false)}
          onPick={(slug) => {
            setTransPickerOpen(false);
            // Keep the same book/chapter, but anchor to the new translation.
            navigate(`/read/${slug}/${book.id}/${chapter}`);
          }}
        />
      )}
    </main>
  );
}

function TranslationPicker({ activeSlug, onClose, onPick }) {
  const all = (window.TranslationLoader && window.TranslationLoader.list()) || [];
  // Group by language code, then sort groups by display order from apps_data
  // (if available) else alphabetically by languageName.
  const groups = {};
  for (const t of all) {
    const key = t.language || 'xx';
    (groups[key] = groups[key] || { code: key, languageName: t.languageName, nativeName: t.nativeName, items: [] }).items.push(t);
  }
  const order = ['en','de','es','fr','pt','ru','uk','sw','th','tl','to','tgp'];
  const ordered = order.filter(c => groups[c]).map(c => groups[c]);
  // Append any unknown languages at the end.
  for (const k of Object.keys(groups)) if (!order.includes(k)) ordered.push(groups[k]);

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <header>
          <span>Pick a translation · {all.length} available</span>
          <button onClick={onClose}>Close · Esc</button>
        </header>
        <div className="trans-grid">
          {ordered.map(g => (
            <React.Fragment key={g.code}>
              <div className="testament-header">
                {g.nativeName || g.languageName || g.code.toUpperCase()}
                <span style={{color:'var(--ink-4)', marginLeft:8, fontSize:10}}>{g.code.toUpperCase()} · {g.items.length}</span>
              </div>
              {[...g.items].sort((a,b) => (a.year || 0) - (b.year || 0)).map(t => (
                <div
                  key={t.slug}
                  className={`b ${t.slug === activeSlug ? 'active' : ''}`}
                  onClick={() => onPick(t.slug)}
                >
                  <span className="name">{t.name}</span>
                  <span className="meta-sm">{t.year || ''} · {t.scope === 'nt' ? 'NT' : t.scope === 'ot+nt+apocrypha' ? 'OT+NT+Apoc' : 'OT+NT'}</span>
                </div>
              ))}
            </React.Fragment>
          ))}
        </div>
      </div>
    </div>
  );
}

function BookPicker({ onClose, onPick }) {
  const ot = BIBLE_BOOKS.filter(b => b.testament === 'ot');
  const nt = BIBLE_BOOKS.filter(b => b.testament === 'nt');
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <header>
          <span>Select a book</span>
          <button onClick={onClose}>Close · Esc</button>
        </header>
        <div className="book-grid">
          <div className="testament-header">Old Testament · 39 books</div>
          {ot.map(b => (
            <div key={b.id} className="b" onClick={() => onPick(b)}>
              <span className="name">{b.name}</span>
              <span className="meta-sm">{b.chapters} ch</span>
            </div>
          ))}
          <div className="testament-header">New Testament · 27 books</div>
          {nt.map(b => (
            <div key={b.id} className="b" onClick={() => onPick(b)}>
              <span className="name">{b.name}</span>
              <span className="meta-sm">{b.chapters} ch</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* =========================================================================
   LANGUAGES
   Driven by APPS_BY_LANGUAGE (the catalog of live translations) plus a small
   hand-curated list of languages we're actively working on. No fabricated
   queue list — "7,000 languages" is the long-term goal, not a tracked column.
   ========================================================================= */
const IN_TRANSLATION = [
  // Our own 3-step translations in progress at ~/bible_translation/.
  // Add/remove as work moves forward. Keep this in sync with reality.
  { code: 'sv', native: 'Svenska', name: 'Swedish', note: 'Three-step literal · Genesis in progress' },
];

function Languages() {
  const live = window.APPS_BY_LANGUAGE || [];
  const liveCount = live.length;
  const translationCount = (window.APPS || []).length;
  const nextCount = IN_TRANSLATION.length;

  return (
    <main>
      <div className="container">
        <section className="lang-head">
          <div className="eyebrow">§ Languages · Translation program</div>
          <h1>Every language,<br/><em>in time.</em></h1>
          <p>
            We host public-domain Bibles in {liveCount} languages today, and are translating our own from
            Hebrew and Greek into more. Each translation we commission is released into the public domain.
            The goal is faithfulness, not speed.
          </p>
          <div className="lang-stats">
            <div className="c">
              <div className="n"><em>{liveCount}</em></div>
              <div className="l">Languages live</div>
            </div>
            <div className="c">
              <div className="n">{translationCount}</div>
              <div className="l">Translations live</div>
            </div>
            <div className="c">
              <div className="n">{nextCount}</div>
              <div className="l">In active translation</div>
            </div>
            <div className="c">
              <div className="n">~7,000</div>
              <div className="l">Living languages · Goal</div>
            </div>
          </div>
        </section>

        <section className="lang-table">
          <div style={{display:'flex', justifyContent:'space-between', margin:'0 0 20px', alignItems:'baseline'}}>
            <div className="label">Live now · {liveCount} languages · {translationCount} translations</div>
            <div className="label" style={{color:'var(--ink-4)'}}>● live  ○ in translation</div>
          </div>
          {live.map(g => (
            <div key={g.code} className="lang-row">
              <div className="code">{g.code}</div>
              <div className="native serif">{g.native}</div>
              <div className="en">{g.name}</div>
              <div className="status-cell now">● {g.apps.length} translation{g.apps.length === 1 ? '' : 's'}</div>
              <div className="formats"><span>web</span><span>android</span></div>
            </div>
          ))}
          {IN_TRANSLATION.length > 0 && (
            <>
              <div className="label" style={{margin:'40px 0 16px'}}>In active translation</div>
              {IN_TRANSLATION.map(l => (
                <div key={l.code} className="lang-row">
                  <div className="code">{l.code}</div>
                  <div className="native serif">{l.native}</div>
                  <div className="en">{l.name}</div>
                  <div className="status-cell next">○ {l.note}</div>
                  <div className="formats"><span>soon</span></div>
                </div>
              ))}
            </>
          )}
        </section>

        <section className="cta-band">
          <h3 className="serif">Translate with us.<br/>Your language is not too small.</h3>
          <a href="mailto:hello@offline.bible" className="btn">Become a translator →</a>
        </section>
      </div>
    </main>
  );
}

/* =========================================================================
   DOWNLOADS (standalone)
   ========================================================================= */
function Downloads({ navigate }) {
  const androidCount = (window.APPS || []).length;
  const langCount = (window.APPS_BY_LANGUAGE || []).length;
  return (
    <main>
      <div className="container">
        <section className="lang-head">
          <div className="eyebrow">§ Downloads · Free forever</div>
          <h1>Take the Bible<br/><em>everywhere.</em></h1>
          <p>
            Two formats are shipping today: the in-browser reader (you're using it) and a
            dedicated Android app for every translation we host. PDFs, EPUBs, iOS, and desktop
            builds are planned per translation as each one is finalized. No accounts, no DRM,
            redistribute freely.
          </p>
        </section>

        <section style={{padding:'40px 0 80px'}}>
          <div className="label" style={{marginBottom:20}}>Available today</div>
          <div className="downloads">
            <div className="dl-card">
              <div className="type">Android · Google Play</div>
              <div className="size">{androidCount}<span className="unit">apps</span></div>
              <div className="desc">A dedicated Play Store app per translation, across {langCount} languages. Install once and read forever — no account, no tracking, no ads.</div>
              <a
                className="cta"
                href="/apps"
                onClick={(e) => { e.preventDefault(); navigate && navigate('/apps'); }}
              >Browse apps <span className="arrow">→</span></a>
            </div>
            <div className="dl-card">
              <div className="type">Web · in-browser reader</div>
              <div className="size">{androidCount}<span className="unit">trans</span></div>
              <div className="desc">All {androidCount} translations, readable in any browser. Designed for offline use after first load — translations you've opened are cached locally.</div>
              <a
                className="cta"
                href="/read/king-james-bible/gen/1"
                onClick={(e) => { e.preventDefault(); navigate && navigate('/read/king-james-bible/gen/1'); }}
              >Open the reader <span className="arrow">→</span></a>
            </div>
          </div>

          <div className="label" style={{margin:'56px 0 20px'}}>Planned · rolling per translation</div>
          <div className="downloads">
            <div className="dl-card">
              <div className="type">PDF · per translation</div>
              <div className="size">—</div>
              <div className="desc">Print-ready typesetting. Generated and posted per translation as each one is finalized.</div>
              <a className="cta soon" href="#">Planned</a>
            </div>
            <div className="dl-card">
              <div className="type">EPUB · per translation</div>
              <div className="size">—</div>
              <div className="desc">For e-readers. Reflowable, with working table of contents.</div>
              <a className="cta soon" href="#">Planned</a>
            </div>
            <div className="dl-card">
              <div className="type">iOS · TestFlight</div>
              <div className="size">—</div>
              <div className="desc">Native iOS app. Same design, same principles.</div>
              <a className="cta soon" href="#">Planned · 2026</a>
            </div>
            <div className="dl-card">
              <div className="type">Desktop · Tauri</div>
              <div className="size">—</div>
              <div className="desc">macOS, Windows, Linux. Tiny binaries. Full-screen reading mode.</div>
              <a className="cta soon" href="#">Planned · 2026</a>
            </div>
          </div>

          <div className="label" style={{margin:'56px 0 20px'}}>Source · For developers & translators</div>
          <div className="downloads">
            <div className="dl-card">
              <div className="type">JSON · per translation</div>
              <div className="size">~4<span className="unit">mb</span></div>
              <div className="desc">Each translation is served as <span className="mono">data/&lt;slug&gt;.json</span> — same files the reader fetches. Use them directly for embeds or redistribution.</div>
              <a className="cta" href="data/index.json">data/index.json <span className="arrow">↓</span></a>
            </div>
            <div className="dl-card">
              <div className="type">Plain Text · UTF-8</div>
              <div className="size">—</div>
              <div className="desc">One verse per line. Coming once the per-translation pipeline ships PDFs and EPUBs.</div>
              <a className="cta soon" href="#">Planned</a>
            </div>
            <div className="dl-card">
              <div className="type">USFM · source files</div>
              <div className="size">—</div>
              <div className="desc">Standard Unified Scripture Format. For translation teams.</div>
              <a className="cta soon" href="#">Planned</a>
            </div>
            <div className="dl-card">
              <div className="type">Git · source repo</div>
              <div className="size">—</div>
              <div className="desc">All site source. All history. Open code, public-domain text.</div>
              <a className="cta soon" href="#">Planned</a>
            </div>
          </div>
        </section>
      </div>
    </main>
  );
}

Object.assign(window, { Reader, BookPicker, TranslationPicker, Languages, Downloads });