/* Dashboard thống kê học tập kiểu Duolingo + Khan Academy */
function ProfileStatsPanel({ center, rankInfo, curr, form }) {
  const celebrate = (msg, fireworks) => {
    if (fireworks && window.fireworks) window.fireworks(false);
    if (window.dcpBigWin) window.dcpBigWin(msg);
    else if (window.dcpToast) window.dcpToast(msg);
  };

  const streak = rankInfo ? rankInfo.streak || 0 : 0;
  const xp = rankInfo ? rankInfo.xp || 0 : 0;
  const rank = rankInfo ? rankInfo.rank || "—" : "—";
  const lvl = getLevelInfo(xp);

  let totalLessons = 0, passedLessons = 0;
  if (curr) {
    const chapters = Array.isArray(curr) ? curr : (curr.chapters || []);
    chapters.forEach((c) => c.lessons && c.lessons.forEach((l) => { totalLessons++; if (l.done) passedLessons++; }));
  } else if (center) {
    passedLessons = (center.overall && center.overall.passed) || 0;
    totalLessons = 14;
  }
  const completionPercent = totalLessons > 0 ? Math.round((passedLessons / totalLessons) * 100) : 0;
  const isPerfect = center && center.submissions && center.submissions.some((s) => s.score >= s.max_score);

  const allBadges = [
    { id: "first_lesson", icon: "🏁", name: "Khởi Đầu", desc: "Hoàn thành bài học đầu tiên", cheer: "🏁 Chúc mừng bạn đã bắt đầu hành trình!", active: passedLessons >= 1, current: passedLessons, goal: 1, hint: "Hãy hoàn thành bài học đầu tiên." },
    { id: "streak_7", icon: "🔥", name: "Thần Tốc 7", desc: "Chuỗi học liên tục từ 7 ngày", cheer: "🔥 Tuyệt vời! Chuỗi 7 ngày học liên tục!", active: streak >= 7, current: streak, goal: 7, hint: `Cần 7 ngày liên tiếp (Hiện tại: ${streak}/7).` },
    { id: "perfect_score", icon: "⭐", name: "Tuyệt Đối", desc: "Đạt điểm tối đa một bài tập", cheer: "⭐ Thật xuất sắc! Điểm tối đa từ Mentor Sam!", active: !!isPerfect, current: isPerfect ? 1 : 0, goal: 1, hint: "Hãy đạt điểm tối đa ở một bài tập." },
    { id: "mastery_5", icon: "📚", name: "Bền Bỉ 5", desc: "Hoàn thành 5 bài học trở lên", cheer: "📚 Chúc mừng bạn đã vượt qua 5 bài học!", active: passedLessons >= 5, current: passedLessons, goal: 5, hint: `Cần 5 bài (Hiện tại: ${passedLessons}/5).` },
    { id: "top_10", icon: "👑", name: "Vinh Quang", desc: "Lọt Top 10 Bảng Xếp Hạng", cheer: "👑 Xuất sắc! Bạn đã lọt Top 10!", active: typeof rank === "number" && rank <= 10 && rank > 0, current: typeof rank === "number" && rank > 0 ? rank : 99, goal: 10, isRank: true, hint: typeof rank === "number" && rank > 0 ? `Đang hạng #${rank}. Cố lên Top 10!` : "Tích luỹ XP để lên bảng xếp hạng." }
  ];

  const shareAchievement = () => {
    const hon = profileHonorific((form && form.gender) || "");
    const text = `🔥 ${hon} vừa đạt cấp ${lvl.name} với chuỗi học ${streak} ngày liên tiếp tại khóa DeChePro! Đã hoàn thành ${passedLessons}/${totalLessons} bài (${completionPercent}%). Đang từng bước vận hành trợ lý AI! 🚀`;
    const done = () => celebrate("Đã copy! Dán vào group Zalo để khoe thành tích nhé! 🏆", true);
    try { navigator.clipboard.writeText(text).then(done).catch(done); } catch (e) { done(); }
  };

  return (
    <div className="dcp-stats-dashboard">
      <div className="dcp-stats-toolbar">
        <p className="dcp-stats-toolbar-hint">Bấm từng thẻ để xem chi tiết · Khoe thành tích lên Zalo</p>
        <button type="button" className="btn btn-accent dcp-share-btn" onClick={shareAchievement}>🏆 Khoe thành tích</button>
      </div>
      <div className="dcp-stats-grid">
        <div className="dcp-stat-card" onClick={() => celebrate(`Bạn đang giữ chuỗi ${streak} ngày. Đừng để đứt chuỗi hôm nay nhé! 🔥`)}>
          <div className={"dcp-stat-icon " + (streak > 0 ? "dcp-streak-active" : "")}>{streak > 0 ? "🔥" : "✨"}</div>
          <div className="dcp-stat-info">
            <h4>Chuỗi liên tục</h4>
            <p className="dcp-stat-val">{streak} <span>ngày</span></p>
            <p className="dcp-stat-desc">{streak > 0 ? "Đừng để đứt chuỗi hôm nay!" : "Bắt đầu bài học hôm nay thôi!"}</p>
          </div>
        </div>
        <div className="dcp-stat-card" onClick={() => celebrate(`Bạn đã tích luỹ ${xp} XP — cấp ${lvl.name}! 🏆`)}>
          <div className="dcp-stat-icon">🏆</div>
          <div className="dcp-stat-info">
            <h4>Tích luỹ & Cấp</h4>
            <p className="dcp-stat-val">{xp} XP <span>· {lvl.name}</span></p>
            <div className="dcp-progress-bg"><div className="dcp-progress-fill" style={{ width: lvl.percent + "%" }} /></div>
            <p className="dcp-stat-desc">{lvl.needed > 0 ? `Cần ${lvl.needed} XP → ${lvl.nextName}` : "Đã đạt cấp tối đa!"}</p>
          </div>
        </div>
        <div className="dcp-stat-card" onClick={() => celebrate(`Đã đạt ${passedLessons}/${totalLessons} bài (${completionPercent}%). Cố lên! 🎯`)}>
          <div className="dcp-stat-icon">🎯</div>
          <div className="dcp-stat-info">
            <h4>Tiến trình học</h4>
            <p className="dcp-stat-val">{completionPercent}% <span>· {passedLessons}/{totalLessons} bài</span></p>
            <div className="dcp-progress-bg"><div className="dcp-progress-fill" style={{ width: completionPercent + "%" }} /></div>
            <p className="dcp-stat-desc">Xếp hạng: #{rank}</p>
          </div>
        </div>
      </div>
      <ProfileBadgesGrid allBadges={allBadges} rankInfo={rankInfo} onCelebrate={celebrate} />
    </div>
  );
}

Object.assign(window, { ProfileStatsPanel });