// Lessons / curriculum tracks screen
const LessonsScreen = ({ onNavigate, tweaks }) => {
  const { TRACKS, RANKS } = window.COPTIC_DATA;
  const [activeRank, setActiveRank] = React.useState('all');

  // Map rank progress onto skill-based learning stages
  const JOURNEY_STAGES = [
    { id: 'listen',     rankId: 'epsaltos',    icon: 'music',   label: 'Listen & repeat',  sub: 'Hear the tones',          progress: RANKS.find(r => r.id==='epsaltos').progress },
    { id: 'pronounce',  rankId: 'anagnostis',  icon: 'book',    label: 'Pronounce',        sub: 'Coptic letters & words',  progress: RANKS.find(r => r.id==='anagnostis').progress },
    { id: 'sing',       rankId: 'ypodiakon',   icon: 'sparkle', label: 'Sing responses',   sub: 'Join the congregation',   progress: RANKS.find(r => r.id==='ypodiakon').progress },
    { id: 'lead',       rankId: 'diakon',      icon: 'mic',     label: 'Lead the chant',   sub: 'Carry a hymn solo',       progress: RANKS.find(r => r.id==='diakon').progress },
    { id: 'serve',      rankId: 'arshidiakon', icon: 'flame',   label: 'Serve the altar',  sub: 'Liturgical service',      progress: RANKS.find(r => r.id==='arshidiakon')?.progress || 0 },
  ];

  const tracks = activeRank === 'all'
    ? TRACKS
    : TRACKS.filter(t => t.rank === activeRank);

  return (
    <div className="screen lessons-screen">
      <div className="screen-head">
        <h1 className="screen-h1">Your journey</h1>
        <p className="screen-sub">Skills build on each other. Move through them at your own pace.</p>
      </div>

      {/* Learning journey — skill-based, not rank-based */}
      <div className="journey-ladder">
        {JOURNEY_STAGES.map((stage, i) => (
          <JourneyStep
            key={stage.id}
            stage={stage}
            active={activeRank === stage.rankId}
            done={stage.progress >= 1}
            onClick={() => setActiveRank(activeRank === stage.rankId ? 'all' : stage.rankId)}
            isLast={i === JOURNEY_STAGES.length - 1}
          />
        ))}
      </div>

      {/* Filter chips */}
      <div className="filter-chips">
        <button
          className={`chip ${activeRank === 'all' ? 'on' : ''}`}
          onClick={() => setActiveRank('all')}
        >All stages</button>
        {RANKS.filter(r => !r.locked).map(r => (
          <button
            key={r.id}
            className={`chip ${activeRank === r.id ? 'on' : ''}`}
            onClick={() => setActiveRank(r.id)}
          >{r.name}</button>
        ))}
      </div>

      {/* Tracks */}
      <div className="tracks-list">
        {tracks.map(t => {
          const rank = RANKS.find(r => r.id === t.rank);
          const pct = Math.round((t.completed / t.lessons) * 100);
          return (
            <div className="track-card" key={t.id} onClick={() => onNavigate('track', t)}>
              <div className="track-art" style={{ '--rank-color': rank.color }}>
                <div className="track-art-glyph">{t.title.charAt(0)}</div>
                <div className="track-art-rank">{rank.name}</div>
              </div>
              <div className="track-body">
                <div className="track-title">{t.title}</div>
                <div className="track-desc">{t.desc}</div>
                <div className="track-progress-row">
                  <div className="track-pbar"><div className="track-pfill" style={{ width: `${pct}%`, background: rank.color }} /></div>
                  <div className="track-pcount">{t.completed}/{t.lessons}</div>
                </div>
              </div>
            </div>
          );
        })}
      </div>

      <div className="screen-pad" />
    </div>
  );
};

const RankPip = ({ rank, active, done, onClick, isLast }) => (
  <>
    <button className={`rank-pip ${active ? 'active' : ''} ${done ? 'done' : ''} ${rank.locked ? 'locked' : ''}`} onClick={onClick}>
      <div className="rank-pip-circle" style={{ '--rank-color': rank.color }}>
        {rank.locked ? <Icon name="lock" size={14} />
          : done ? <Icon name="check" size={16} />
          : <span>{rank.order}</span>}
      </div>
      <div className="rank-pip-label">{rank.name}</div>
    </button>
    {!isLast && <div className={`rank-rail ${done ? 'done' : ''}`} />}
  </>
);

const JourneyStep = ({ stage, active, done, onClick, isLast }) => {
  const pct = Math.round(stage.progress * 100);
  return (
    <button
      className={`journey-step ${active ? 'active' : ''} ${done ? 'done' : ''}`}
      onClick={onClick}
    >
      <div className="js-icon">
        {done ? <Icon name="check" size={18} /> : <Icon name={stage.icon} size={18} />}
      </div>
      <div className="js-body">
        <div className="js-label">{stage.label}</div>
        <div className="js-sub">{stage.sub}</div>
        <div className="js-bar"><div className="js-fill" style={{ width: `${pct}%` }} /></div>
      </div>
      <div className="js-pct">{pct}%</div>
      {!isLast && <div className="js-connector" />}
    </button>
  );
};

window.LessonsScreen = LessonsScreen;