/* Xem lại bài/thành phẩm đã nộp ngay trong bài tập hiện tại. */
function StudentHistoryPanel({ lessonNo, canStudy, requireAuth, buttonText }) {
  const [open, setOpen] = React.useState(false);
  const [loading, setLoading] = React.useState(false);
  const [data, setData] = React.useState(null);
  const fetchHistory = async () => {
    const r = await (window.AG && AG.studentLessonHistory ? AG.studentLessonHistory(lessonNo) : AG.myEvidence(lessonNo));
    return r && r.ok ? r : { items: [] };
  };
  React.useEffect(() => {
    let alive = true;
    if (!canStudy) return () => { alive = false; };
    fetchHistory().then((r) => { if (alive) setData(r); }).catch(() => { if (alive) setData({ items: [] }); });
    return () => { alive = false; };
  }, [lessonNo, canStudy]);
  const load = async () => {
    if (!canStudy) {
      requireAuth && requireAuth("Đăng nhập nhanh để xem bài/thành phẩm đã nộp.");
      return;
    }
    setOpen(true); setLoading(true);
    try { setData(await fetchHistory()); } catch (e) { setData({ items: [] }); }
    setLoading(false);
  };
  const submission = data && data.submission;
  const items = (data && (data.items || data.evidence)) || [];
  if (canStudy && data && !submission && !items.length) return null;
  return <div className="history-panel">
    <button className="btn btn-outline" type="button" onClick={open ? () => setOpen(false) : load}>
      {open ? "Ẩn bài cũ" : (buttonText || "Bài cũ của bạn")}
    </button>
    {open && <div className="grade-box mt history-box">
      {loading ? <span>Đang tải bài đã nộp...</span> : <React.Fragment>
        {submission ? <div className="history-score">
          <b>Lần nộp gần nhất:</b> {submission.score}/{submission.max_score || 100}
          <span> · {submission.graded_by === "agent" ? "AI Agent tự nộp" : submission.graded_by === "auto" ? "Nhập mã hoàn thành" : "Team chấm tay"}</span>
        </div> : <p className="tiny">Chưa có điểm nộp gần nhất cho bài này.</p>}
        {!items.length ? <p className="tiny">Chưa có thành phẩm nào được lưu ở bài này.</p> :
          <ul className="history-links">
            {items.map((e, i) => <li key={(e.link || "") + i}><a href={e.link} target="_blank" rel="noopener">
              {e.kind === "image" ? "Ảnh thành phẩm" : "Tệp thành phẩm"} #{i + 1}</a></li>)}
          </ul>}
      </React.Fragment>}
    </div>}
  </div>;
}

Object.assign(window, { StudentHistoryPanel });