/* global React, APPS, APPS_BY_LANGUAGE, APPS_BY_SLUG, playUrl */
const { useMemo: useMemoA } = React;

/* =========================================================================
   APPS — index screen
   Renders all Android apps grouped by language, sorted by year within group.
   Adding a new app = append to apps_data.js. No code changes here.
   ========================================================================= */
function Apps({ navigate }) {
  const total = APPS.length;
  const langCount = APPS_BY_LANGUAGE.length;
  const ntCount = APPS.filter(a => a.scope === 'nt').length;

  return (
    <main>
      <div className="container">

        <section className="lang-head">
          <div className="eyebrow">§ Apps · Android, free, offline</div>
          <h1>The Bible on your phone,<br/><em>no internet required.</em></h1>
          <p>
            Every translation below is a real, working app on Google Play. Install once and the
            full text lives on your device forever — no account, no tracking, no ads.
            Pick your language.
          </p>
          <div className="lang-stats">
            <div className="c">
              <div className="n"><em>{total}</em></div>
              <div className="l">Apps · Live on Play</div>
            </div>
            <div className="c">
              <div className="n">{langCount}</div>
              <div className="l">Languages</div>
            </div>
            <div className="c">
              <div className="n">{total - ntCount}</div>
              <div className="l">Full Bibles</div>
            </div>
            <div className="c">
              <div className="n">$0</div>
              <div className="l">Now · Forever</div>
            </div>
          </div>
        </section>

        {APPS_BY_LANGUAGE.map(group => (
          <section key={group.code} className="apps-group">
            <div className="apps-group-head">
              <div className="code">{group.code.toUpperCase()}</div>
              <div className="native serif">{group.native}</div>
              <div className="en">{group.name}</div>
              <div className="count">{group.apps.length} app{group.apps.length === 1 ? '' : 's'}</div>
            </div>
            <div className="apps-list">
              {[...group.apps].sort((a, b) => a.year - b.year).map(app => (
                <a
                  key={app.slug}
                  href={`/apps/${app.slug}`}
                  className="app-row"
                  onClick={(e) => { e.preventDefault(); navigate(`/apps/${app.slug}`); }}
                >
                  <div className="year">{app.year}</div>
                  <div className="name serif">{app.name}</div>
                  <div className="intro">{app.intro}</div>
                  <div className="scope">{scopeLabel(app.scope)}</div>
                  <div className="arrow">→</div>
                </a>
              ))}
            </div>
          </section>
        ))}

        <section className="cta-band">
          <h3 className="serif">A translation we don't carry?<br/>Tell us — and we'll add it.</h3>
          <a href="mailto:hello@offline.bible" className="btn">Request a language →</a>
        </section>

      </div>
    </main>
  );
}

function scopeLabel(scope) {
  if (scope === 'nt') return 'NT only';
  if (scope === 'ot+nt+apocrypha') return 'OT + NT + Apocrypha';
  return 'OT + NT';
}

/* =========================================================================
   APP DETAIL — per-app page at #/apps/<slug>
   ========================================================================= */
function AppDetail({ slug, navigate }) {
  const app = APPS_BY_SLUG[slug];
  if (!app) {
    return (
      <main>
        <div className="container" style={{padding:'80px 0'}}>
          <div className="eyebrow" style={{color:'var(--accent)'}}>§ 404 · App not found</div>
          <h1 style={{fontFamily:'"Newsreader", serif', fontSize:48, marginTop:16}}>No such app.</h1>
          <p style={{marginTop:18, maxWidth:'48ch', color:'var(--ink-2)'}}>
            The app <span className="mono">{slug}</span> isn't in our catalog.
            Maybe it was renamed, or maybe we never published it.
          </p>
          <div style={{marginTop:32}}>
            <a href="/apps" className="btn-ghost" onClick={(e) => { e.preventDefault(); navigate('/apps'); }}>
              ← Back to all apps
            </a>
          </div>
        </div>
      </main>
    );
  }

  const related = useMemoA(
    () => APPS.filter(a => a.language === app.language && a.slug !== app.slug),
    [app.slug]
  );

  return (
    <main>
      <div className="container">
        <section className="app-detail-head">
          <div className="eyebrow">
            <a href="/apps" onClick={(e) => { e.preventDefault(); navigate('/apps'); }}>§ Apps</a>
            <span className="sep"> / </span>
            <span>{app.languageName}</span>
            <span className="sep"> / </span>
            <span>{app.year}</span>
          </div>
          <h1 className="serif">{app.name}</h1>
          <p className="lead">{app.intro}</p>

          <div className="app-meta">
            <div className="block">
              <div className="k label">Language</div>
              <div className="v">{app.nativeName} <span style={{color:'var(--ink-3)'}}>· {app.languageName}</span></div>
            </div>
            <div className="block">
              <div className="k label">Scope</div>
              <div className="v">{scopeLabel(app.scope)}</div>
            </div>
            <div className="block">
              <div className="k label">First edition</div>
              <div className="v">{app.year}</div>
            </div>
            <div className="block">
              <div className="k label">Price</div>
              <div className="v mono">$0.00 · Forever</div>
            </div>
            <div className="block">
              <div className="k label">Package</div>
              <div className="v mono" style={{fontSize:12}}>{app.applicationId}</div>
            </div>
            <div className="block">
              <div className="k label">Privacy</div>
              <div className="v mono">0 trackers · 0 ads</div>
            </div>
          </div>

          <div className="app-actions">
            <a
              href={`/read/${app.slug}/${app.scope === 'nt' ? 'mat' : 'gen'}/1`}
              className="btn-primary"
              onClick={(e) => { e.preventDefault(); navigate(`/read/${app.slug}/${app.scope === 'nt' ? 'mat' : 'gen'}/1`); }}
            >
              Read in browser →
            </a>
            <a href={playUrl(app)} target="_blank" rel="noopener noreferrer" className="btn-ghost">
              Install on Google Play ↗
            </a>
            <a href="/apps" className="btn-ghost" onClick={(e) => { e.preventDefault(); navigate('/apps'); }}>
              ← All apps
            </a>
          </div>
        </section>

        {app.screenshots && app.screenshots.length > 0 && (
          <section className="app-shots">
            <div className="label" style={{marginBottom:20}}>Screenshots</div>
            <div className="shots-grid">
              {app.screenshots.map((src, i) => (
                <img key={i} src={src} alt={`${app.name} screenshot ${i+1}`} loading="lazy" />
              ))}
            </div>
          </section>
        )}

        {related.length > 0 && (
          <section className="app-related">
            <div className="label" style={{marginBottom:20}}>More in {app.languageName}</div>
            <div className="apps-list">
              {related.map(r => (
                <a
                  key={r.slug}
                  href={`/apps/${r.slug}`}
                  className="app-row"
                  onClick={(e) => { e.preventDefault(); navigate(`/apps/${r.slug}`); }}
                >
                  <div className="year">{r.year}</div>
                  <div className="name serif">{r.name}</div>
                  <div className="intro">{r.intro}</div>
                  <div className="scope">{scopeLabel(r.scope)}</div>
                  <div className="arrow">→</div>
                </a>
              ))}
            </div>
          </section>
        )}
      </div>
    </main>
  );
}

Object.assign(window, { Apps, AppDetail });