/* Các tab danh sách trong Student Center. */
function StudentSubmissions({ center, go }) {
  const items = (center && center.submissions) || [];
  if (!items.length) return scEmpty("Chưa có bài đã nộp.", <button className="btn btn-gold" onClick={() => go ? go("learn") : (location.hash = "#hoc")}>Bắt đầu học</button>);
  return <div className="profile-list">
    {items.map((it) => <div className="profile-row" key={it.lesson}>
      <div><b>{it.title}</b><p>Bài {it.lesson} · {it.engine.label} · {scFmtDate(it.submitted_at)}</p></div>
      <span className={"status-pill " + (it.status === "passed" ? "ok" : "warn")}>{it.status === "passed" ? "Đã đạt" : "Cần sửa"} · {it.score}/{it.max_score}</span>
    </div>)}
  </div>;
}

function StudentArtifacts({ center }) {
  const items = (center && center.artifacts) || [];
  if (!items.length) return scEmpty("Chưa có thành phẩm đã gửi.");
  return <div className="artifact-grid">
    {items.map((it, i) => <a className="artifact-card" key={(it.link || "") + i} href={it.link} target="_blank" rel="noopener">
      <span>{it.kind === "image" ? "Ảnh thành phẩm" : "Tệp thành phẩm"}</span>
      <b>Bài {it.lesson || "chưa rõ"}</b>
      <small>{scFmtDate(it.ts)}</small>
    </a>)}
  </div>;
}

function StudentCourses({ center }) {
  const courses = (center && center.courses) || [];
  if (!courses.length) return scEmpty("Chưa tải được danh sách khóa.");
  return <div className="course-grid">
    {courses.map((c) => <div className={"course-card " + (c.owned ? "owned" : "")} key={c.course}>
      <div><b>{c.name}</b><p>{c.desc || "Khóa học trong hệ sinh thái Sam Nguyễn."}</p></div>
      <a className={c.owned ? "btn btn-gold" : "btn btn-outline"} href={c.owned ? c.learn_url : c.landing_url}>
        {c.owned ? "Học tiếp" : "Tìm hiểu khi cần"}
      </a>
    </div>)}
  </div>;
}

Object.assign(window, { StudentSubmissions, StudentArtifacts, StudentCourses });