/* ============================================================
   Categories — every learning track in one place, plus a shared
   TrackCard used by the Dashboard preview.
   ============================================================ */
(function () {
  const A = window.APP;

  function trackProgress(track) {
    const lessons = (track.lessons || []).filter(l => !l.isAlphabet || true);
    let done = 0, totalWords = 0, learnedWords = 0;
    (track.lessons || []).forEach(l => {
      if (l.isAlphabet) {
        try { const o = JSON.parse(localStorage.getItem('ru_alpha_learned_v1')) || {};
          learnedWords += Object.keys(o).length; totalWords += (l.letters || []).length; } catch (e) {}
        if (Object.keys((() => { try { return JSON.parse(localStorage.getItem('ru_alpha_learned_v1')) || {}; } catch (e) { return {}; } })()).length >= (l.letters || []).length) done++;
      } else if (l.teach) {
        try { const o = JSON.parse(localStorage.getItem('ru_lesson_' + l.id)) || {};
          const lw = Object.keys(o).length; learnedWords += lw; totalWords += l.teach.length;
          if (lw >= l.teach.length) done++; } catch (e) {}
      }
    });
    return { done, total: (track.lessons || []).length, ratio: totalWords ? learnedWords / totalWords : 0 };
  }

  function TrackCard({ track, onClick }) {
    const p = trackProgress(track);
    return (
      <button onClick={onClick}
        style={{ appearance:'none', border:'1px solid var(--line)', cursor:'pointer', textAlign:'left',
          background:'var(--surface)', borderRadius:20, padding:'15px 15px 14px', display:'flex',
          flexDirection:'column', gap:12, boxShadow:'0 1px 0 var(--line)' }}>
        <Emblem letter={track.emblem} color={track.color} size={42} radius={13} />
        <div>
          <div style={{ fontFamily:'"Hanken Grotesk",system-ui', fontWeight:800, fontSize:15,
            color:'var(--ink)', lineHeight:1.15 }}>{track.name}</div>
          <div style={{ fontFamily:'"Hanken Grotesk",system-ui', fontWeight:600, fontSize:12, color:'var(--muted)',
            marginTop:2 }}>{track.lessons.length} lessons</div>
        </div>
        <Bar value={p.ratio} color={track.color} height={5} />
      </button>
    );
  }

  function Categories({ nav }) {
    return (
      <div style={{ minHeight:'100%', background:'var(--bg)' }}>
        <div style={{ padding:'58px 20px 0' }}>
          <div style={{ fontFamily:'"Bricolage Grotesque",system-ui', fontWeight:800, fontSize:30,
            color:'var(--ink)', letterSpacing:'-0.02em' }}>Categories</div>
          <div style={{ fontFamily:'"Hanken Grotesk",system-ui', fontWeight:600, fontSize:13,
            color:'var(--muted)', marginTop:2 }}>Pick a track and learn it word by word.</div>
        </div>
        <div style={{ padding:'18px 20px 100px', display:'grid', gridTemplateColumns:'1fr 1fr', gap:12 }}>
          {A.tracks.map(t => (
            <TrackCard key={t.id} track={t} onClick={() => nav.go('category', { trackId:t.id })} />
          ))}
        </div>
      </div>
    );
  }

  window.Categories = Categories;
  window.TrackCard = TrackCard;
})();