/* UI helpers cho Student Center học viên. */
function scFmtMoney(n) { return Number(n || 0).toLocaleString("vi-VN") + "đ"; }
function scFmtDate(ts) {
  if (!ts) return "Chưa rõ ngày";
  const d = new Date(Number(ts) * 1000);
  return isNaN(d.getTime()) ? "Chưa rõ ngày" : d.toLocaleDateString("vi-VN");
}
function scEmpty(text, action) {
  return <div className="profile-empty"><b>{text}</b>{action || null}</div>;
}
function StudentCenterOverview({ center, data, go, onLogout }) {
  const [confirmLogout, setConfirmLogout] = React.useState(false);
  const [seenSuggest, setSeenSuggest] = React.useState(() => sessionStorage.getItem("student_center_suggestions_seen") === "1");
  const o = (center && center.overall) || {};
  const prof = (data && data.profile) || {};
  const latest = ((center && center.submissions) || []).slice(0, 3);
  const suggestions = seenSuggest ? [] : ((center && center.suggestions) || []).slice(0, 2);
  React.useEffect(() => { if (suggestions.length) sessionStorage.setItem("student_center_suggestions_seen", "1"); }, [suggestions.length]);
  return <div className="profile-stack">
    <div className="student-kpis">
      <div><b>{o.passed || 0}</b><span>bài đã đạt</span></div>
      <div><b>{o.artifacts || 0}</b><span>thành phẩm</span></div>
      <div><b>{o.owned_courses || 0}</b><span>khóa đang có</span></div>
    </div>
    <div className="profile-grid">
      <div className="profile-card">
        <h3>Tài khoản học</h3>
        <p><b>Tên học viên:</b> {prof.display_name || (data && data.name) || "Chưa có"}</p>
        <p><b>SĐT:</b> {(data && data.phone) || "Chưa có"}</p>
        <p><b>Email:</b> {prof.contact_email || prof.login_email || (data && data.learn_email) || "Chưa gắn"}</p>
        {!confirmLogout ? <button type="button" className="btn btn-outline danger-btn" onClick={() => setConfirmLogout(true)}>Đăng xuất tài khoản</button>
          : <div className="logout-confirm"><button className="btn btn-outline" onClick={() => setConfirmLogout(false)}>Ở lại</button>
            <button className="btn btn-accent" onClick={() => onLogout && onLogout()}>Đăng xuất</button></div>}
        <p className="tiny">Team Sam dùng thông tin này để nhận diện và hỗ trợ đúng học viên.</p>
      </div>
      <div className="profile-card">
        <h3>Việc nên làm tiếp</h3>
        {latest.length ? latest.map((s) => <p key={s.lesson}><b>{s.title}</b><br /><span className="tiny">{s.engine.label} · {scFmtDate(s.submitted_at)}</span></p>)
          : <p>Học và nộp bài đầu tiên, thành quả sẽ tự hiện tại đây.</p>}
        <button className="btn btn-gold" onClick={() => go && go("learn")}>Vào học tiếp</button>
      </div>
      <div className="profile-card">
        <h3>Gợi ý mở rộng nhẹ</h3>
        {suggestions.length ? suggestions.map((s) => <p key={s.course}><b>{s.name}</b><br /><span>{s.reason}</span></p>)
          : <p>Hoàn thành thêm vài bài, hệ thống sẽ gợi ý khóa liên quan đúng mục tiêu hơn.</p>}
      </div>
    </div>
  </div>;
}

Object.assign(window, { StudentCenterOverview, scFmtMoney, scFmtDate, scEmpty });