// 이 파일이 하는 일: 멘토 리뷰 화면의 "코딩 문제" 부분 — 학생별 진도표와,
// 제출된 코드를 펼쳐 읽고 피드백을 남기는 목록.
//
// 학습 포인트: MentorPage가 이미 400줄이라 여기에 다 넣으면 읽기 어려워진다.
// "화면의 한 덩어리"를 파일로 떼면, 이 기능만 고칠 때 이 파일만 열면 된다.
// 대신 데이터 로딩은 이 컴포넌트가 스스로 한다 — 부모가 몰라도 되는 일이기 때문이다.
import { useEffect, useState } from 'react';
import client from '../api/client';
import Badge from './Badge';

// 학습 포인트: 여기 있던 STATUS_LABEL 변환표는 지웠다 — Badge.jsx가 이미 같은 표를 갖고 있었는데
// 이 파일이 자기 것을 따로 두는 바람에, 같은 REVIEWED가 위 표에선 "리뷰 완료",
// 아래 표에선 "피드백 완료"로 보이는 사고가 실제로 나 있었다.
// Badge.jsx의 주석이 "한 곳에 모아두면 라벨이 어긋나는 사고를 막는다"고 경고한 바로 그 사고다.
// 표는 한 곳(Badge.jsx)에만 둔다 — 이게 그 주석이 지켜지는 모습이다.

/** 학생별 코딩 진도표 (전체 20문제 중 몇 개 제출/통과) */
function CodingProgressTable({ rows }) {
  return (
    <div className="card" style={{ padding: 0, overflowX: 'auto' }}>
      <table className="table table-static" style={{ minWidth: 480 }}>
        <thead>
          <tr>
            <th>학생</th>
            <th>트랙</th>
            <th style={{ textAlign: 'center' }}>제출</th>
            <th style={{ textAlign: 'center' }}>통과</th>
            <th style={{ textAlign: 'center' }}>전체</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((row) => (
            <tr key={row.userId}>
              <td>{row.name}</td>
              <td>{row.track}</td>
              <td style={{ textAlign: 'center', fontVariantNumeric: 'tabular-nums' }}>
                {row.progress.submitted}
              </td>
              <td
                style={{
                  textAlign: 'center',
                  fontVariantNumeric: 'tabular-nums',
                  // 통과가 하나도 없으면 옅게 — 눈에 띄어야 할 건 "막힌 학생"이다
                  color: row.progress.passed === 0 ? 'var(--muted, #888)' : undefined,
                  fontWeight: row.progress.passed > 0 ? 600 : 400,
                }}
              >
                {row.progress.passed}
              </td>
              <td style={{ textAlign: 'center', fontVariantNumeric: 'tabular-nums' }}>
                {row.progress.total}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default function MentorCodingSection() {
  const [submissions, setSubmissions] = useState([]);
  const [progress, setProgress] = useState([]);
  const [selectedId, setSelectedId] = useState(null);
  const [feedbackDraft, setFeedbackDraft] = useState('');
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState('');
  const [loadError, setLoadError] = useState(false);

  function load() {
    // MentorPage와 같은 이유로 allSettled — 한쪽이 실패해도 다른 쪽은 보여 준다.
    return Promise.allSettled([
      client.get('/mentor/coding-submissions'),
      client.get('/mentor/coding-progress'),
    ]).then(([subsRes, progRes]) => {
      if (subsRes.status === 'fulfilled') setSubmissions(subsRes.value.data);
      if (progRes.status === 'fulfilled') setProgress(progRes.value.data);
      setLoadError([subsRes, progRes].some((r) => r.status === 'rejected'));
    });
  }

  useEffect(() => {
    load();
  }, []);

  const selected = submissions.find((s) => s.id === selectedId) || null;

  function selectRow(submission) {
    if (selectedId === submission.id) {
      setSelectedId(null);
      return;
    }
    setSelectedId(submission.id);
    setFeedbackDraft(submission.feedback || '');
    setError('');
  }

  async function saveFeedback(e) {
    e.preventDefault();
    if (!feedbackDraft.trim()) {
      setError('피드백 내용을 적어 주세요.');
      return;
    }
    setSaving(true);
    setError('');
    try {
      await client.post(`/mentor/coding-submissions/${selectedId}/feedback`, {
        feedback: feedbackDraft,
      });
      await load();
    } catch {
      setError('피드백 저장 중 문제가 생겼어요. 다시 시도해 주세요.');
    } finally {
      setSaving(false);
    }
  }

  // 저장된 채점 결과(JSON 문자열)를 화면용 배열로. 깨져 있으면 그냥 안 보여 준다.
  let selectedResults = null;
  if (selected?.resultsJson) {
    try {
      selectedResults = JSON.parse(selected.resultsJson);
    } catch {
      selectedResults = null;
    }
  }

  return (
    <>
      <h2 className="section-title" style={{ marginTop: 24 }}>
        코딩 문제 진도
      </h2>
      {loadError && (
        <p className="error-text" style={{ marginBottom: 14 }}>
          코딩 데이터를 일부 불러오지 못했어요.
        </p>
      )}
      {progress.length === 0 ? (
        <p className="empty">아직 학생 계정이 없어요.</p>
      ) : (
        <CodingProgressTable rows={progress} />
      )}

      <h2 className="section-title" style={{ marginTop: 24 }}>
        코딩 제출물
      </h2>
      {submissions.length === 0 ? (
        <p className="empty">아직 제출된 코드가 없어요.</p>
      ) : (
        <div className="card" style={{ padding: 0, overflowX: 'auto' }}>
          <table className="table" style={{ minWidth: 640 }}>
            <thead>
              <tr>
                <th>학생</th>
                <th>문제</th>
                <th>언어</th>
                <th style={{ textAlign: 'center' }}>채점</th>
                <th style={{ textAlign: 'center' }}>시도</th>
                <th>상태</th>
              </tr>
            </thead>
            <tbody>
              {submissions.map((s) => (
                <tr
                  key={s.id}
                  onClick={() => selectRow(s)}
                  style={{ cursor: 'pointer' }}
                  className={selectedId === s.id ? 'is-selected' : ''}
                >
                  <td>{s.studentName}</td>
                  <td>{s.problemTitle}</td>
                  <td>
                    <span className={`lang-badge lang-badge--${s.language.toLowerCase()}`}>
                      {{ JS: 'JavaScript', SQL: 'SQL', JAVA: 'Java' }[s.language] ?? s.language}
                    </span>
                  </td>
                  <td style={{ textAlign: 'center', fontVariantNumeric: 'tabular-nums' }}>
                    {/* 자바는 자동채점이 없으므로 점수 칸이 비어 있는 게 정상이다 */}
                    {s.totalCount == null ? '—' : `${s.passedCount}/${s.totalCount}`}
                  </td>
                  <td style={{ textAlign: 'center', fontVariantNumeric: 'tabular-nums' }}>
                    {s.attempts}
                  </td>
                  <td>
                    <Badge value={s.status} />
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {/* 선택한 제출물 상세 — 코드 원문 + 채점 결과 + 피드백 */}
      {selected && (
        <div className="card" style={{ marginTop: 16 }}>
          <h3>
            {selected.studentName} — {selected.problemTitle}
          </h3>

          <h4>제출한 코드</h4>
          {/* 학습 포인트: 코드는 <pre>로 감싸야 들여쓰기와 줄바꿈이 그대로 보인다.
              <p>에 넣으면 공백이 다 뭉개져서 코드 리뷰가 불가능해진다. */}
          <pre className="code-view">
            <code>{selected.code}</code>
          </pre>

          {selectedResults && (
            <>
              <h4>채점 결과</h4>
              <ul className="test-results">
                {selectedResults.map((r, i) => (
                  <li key={i} className={r.passed ? 'test--pass' : 'test--fail'}>
                    <span className="test__mark">{r.passed ? '통과' : '실패'}</span>
                    <span className="test__name">{r.name}</span>
                    {!r.passed && (
                      <span className="test__detail">
                        기대: <code>{r.expected}</code> / 실제: <code>{r.actual}</code>
                      </span>
                    )}
                  </li>
                ))}
              </ul>
            </>
          )}
          {selected.language === 'JAVA' && (
            <p className="empty" style={{ marginTop: 8 }}>
              자바 문제는 자동채점이 없습니다 — 코드를 직접 읽고 피드백해 주세요.
            </p>
          )}

          <form onSubmit={saveFeedback} style={{ marginTop: 12 }}>
            <div className="field">
              <label>피드백</label>
              <textarea
                className="textarea"
                value={feedbackDraft}
                onChange={(e) => setFeedbackDraft(e.target.value)}
                placeholder="잘한 점과 다음에 시도해 볼 점을 구체적으로 적어 주세요."
              />
            </div>
            {error && <p className="error-text">{error}</p>}
            <button className="btn btn-primary" type="submit" disabled={saving}>
              {saving ? '저장 중...' : '피드백 저장'}
            </button>
            <button
              className="btn btn-ghost"
              type="button"
              onClick={() => setSelectedId(null)}
              style={{ marginLeft: 8 }}
            >
              닫기
            </button>
          </form>
        </div>
      )}
    </>
  );
}
