/* Tiến độ theo chương + bài học tiếp theo (Duolingo & Khan Academy) */
function ProfileStatsProgress({ curr, rankInfo, go, profile, setTab }) {
  if (!curr || !curr.chapters) return null;

  const flat = curr.chapters.flatMap((ch) =>
    (ch.lessons || []).map((l) => Object.assign({}, l, { ch: ch.ch, chName: ch.name }))
  );
  const nextLesson = flat.find((l) => l.unlocked && !l.done) || flat.find((l) => !l.done) || null;
  const allDone = flat.length > 0 && flat.every((l) => l.done);
  const totalLessons = flat.length;
  const passedLessons = flat.filter((l) => l.done).length;
  const pct = totalLessons > 0 ? Math.round((passedLessons / totalLessons) * 100) : 0;
  const streak = rankInfo ? rankInfo.streak || 0 : 0;

  const handleStudy = (lesson) => {
    if (!lesson) return;
    location.hash = `#hoc/phan-${lesson.ch}/bai-${lesson.no}`;
    if (go) go("learn");
  };

  const triggerCelebrate = () => {
    if (window.fireworks) window.fireworks(true);
    if (window.dcpBigWin) window.dcpBigWin("Chúc mừng bạn đã hoàn thành tất cả bài học xuất sắc! 🎉");
  };

  return (
    <div className="dcp-progress-section">
      {streak > 0 && (
        <div className="dcp-nudge-card dcp-streak-nudge">
          <div className="dcp-nudge-fire">🔥</div>
          <div className="dcp-nudge-content">
            <h4>Đừng để đứt chuỗi {streak} ngày!</h4>
            <p>Học ít nhất 1 bài hôm nay để giữ ngọn lửa. Chỉ cần 5–10 phút là đủ!</p>
          </div>
        </div>
      )}
      <ProfileMentorNudge profile={profile} rankInfo={rankInfo} pct={pct} setTab={setTab} />
      {nextLesson && !allDone && (
        <div className="dcp-next-lesson-card">
          <div className="dcp-next-label">BÀI HỌC TIẾP THEO</div>
          <div className="dcp-next-details">
            <h3>{nextLesson.title}</h3>
            <p className="tiny">{nextLesson.chName} · Bài {nextLesson.no}</p>
          </div>
          <button className="btn btn-gold btn-study-next" onClick={() => handleStudy(nextLesson)}>
            {nextLesson.unlocked ? "⚡ Học ngay" : "🔒 Mở khoá để học"}
          </button>
        </div>
      )}
      {allDone && (
        <div className="dcp-next-lesson-card dcp-all-done-card">
          <div className="dcp-next-label dcp-all-done-label">🏆 XUẤT SẮC</div>
          <div className="dcp-next-details">
            <h3>Chúc mừng! Bạn đã hoàn thành tất cả bài học.</h3>
            <p className="tiny">Hãy bắt đầu xây dựng đế chế 1 người của riêng bạn!</p>
          </div>
          <button className="btn btn-outline" onClick={triggerCelebrate}>🎉 Ăn mừng</button>
        </div>
      )}
      <div className="dcp-chapters-progress-sec">
        <h3>📊 Bản đồ tiến độ theo chương</h3>
        <div className="dcp-chapters-grid">
          {curr.chapters.map((ch) => {
            const total = ch.lessons ? ch.lessons.length : 0;
            const passed = ch.lessons ? ch.lessons.filter((l) => l.done).length : 0;
            const chPct = total > 0 ? Math.round((passed / total) * 100) : 0;
            return (
              <div key={ch.ch} className="dcp-chapter-prog-card">
                <div className="dcp-chapter-prog-header">
                  <h4>{ch.name}</h4>
                  <span className="dcp-chapter-pct">{chPct}%</span>
                </div>
                <div className="dcp-progress-bg">
                  <div className="dcp-progress-fill" style={{ width: chPct + "%", background: chPct === 100 ? "#166534" : "linear-gradient(90deg,#C99A4E,#f7d58a)" }} />
                </div>
                <p className="tiny">{passed}/{total} bài học đã hoàn thành</p>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ProfileStatsProgress });