// 이 파일이 하는 일: 코딩 문제 목록 페이지 — 20문제를 언어·난이도와 함께 보여주고,
// 내가 각 문제를 어디까지 했는지(안 품 / 제출함 / 통과 / 피드백 받음)를 표시한다.
//
// 학습 포인트: 목록 API(/coding/problems)는 문제 설명이나 테스트케이스를 주지 않는다.
// 그건 문제를 실제로 열 때(/coding/problems/{id}) 받는다.
// "목록에 필요한 것"과 "상세에 필요한 것"을 나누면 목록이 가벼워진다.
import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import client from '../api/client';

/** 상태값을 사람이 읽는 말로 바꾼다 */
const STATUS_LABEL = {
  TODO: '안 풂',
  SUBMITTED: '제출함',
  PASSED: '통과',
  REVIEWED: '피드백 받음',
};

const DIFFICULTY_LABEL = { EASY: '쉬움', NORMAL: '보통', HARD: '어려움' };

export default function CodingPage() {
  const [problems, setProblems] = useState([]);
  const [progress, setProgress] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    let cancelled = false;
    // 학습 포인트: 두 API를 동시에 부른다. 순서대로 await하면 기다리는 시간이 두 배가 된다.
    Promise.all([client.get('/coding/problems'), client.get('/coding/progress/me')])
      .then(([problemsRes, progressRes]) => {
        if (cancelled) return;
        setProblems(problemsRes.data);
        setProgress(progressRes.data);
      })
      .catch(() => {
        if (!cancelled) setError('문제를 불러오지 못했어요.');
      })
      .finally(() => {
        if (!cancelled) setLoading(false);
      });
    return () => {
      cancelled = true;
    };
  }, []);

  if (loading) {
    return <p className="empty">불러오는 중…</p>;
  }

  return (
    <div>
      <section className="hero compact">
        <p className="eyebrow">코딩 문제</p>
        <h1>직접 짜 보기</h1>
        <p>
          읽어서 아는 것과 짤 수 있는 것은 다릅니다. 20문제를 풀며 손에 익혀 보세요.
          <br />
          자바스크립트 문제는 <strong>브라우저에서 바로 채점</strong>되고, 자바 문제는{' '}
          <strong>멘토가 코드를 읽고 피드백</strong>합니다.
        </p>
      </section>

      {progress && (
        <div className="chip-row">
          <div className="stat">
            <div className="stat-num">{progress.total}</div>
            <div className="stat-label">전체 문제</div>
          </div>
          <div className="stat">
            <div className="stat-num">{progress.submitted}</div>
            <div className="stat-label">제출함</div>
          </div>
          <div className="stat">
            <div className="stat-num">{progress.passed}</div>
            <div className="stat-label">통과</div>
          </div>
        </div>
      )}

      {error && <p className="error-text">{error}</p>}

      <div className="coding-list">
        {problems.map((problem, index) => (
          <Link key={problem.id} to={`/coding/${problem.id}`} className="card coding-item">
            <div className="coding-item__main">
              <span className="coding-item__no">{String(index + 1).padStart(2, '0')}</span>
              <div>
                <div className="coding-item__title">{problem.title}</div>
                <div className="coding-item__meta">
                  <span className={`lang-badge lang-badge--${problem.language.toLowerCase()}`}>
                    {{ JS: 'JavaScript', SQL: 'SQL', JAVA: 'Java' }[problem.language] ?? problem.language}
                  </span>
                  <span className="coding-item__difficulty">
                    {DIFFICULTY_LABEL[problem.difficulty] ?? problem.difficulty}
                  </span>
                </div>
              </div>
            </div>
            <div className="coding-item__status">
              <span className={`status-badge status-badge--${problem.status.toLowerCase()}`}>
                {STATUS_LABEL[problem.status] ?? problem.status}
              </span>
              {/* 자동채점 문제만 통과/전체 점수가 있다 */}
              {problem.totalCount != null && (
                <span className="coding-item__score">
                  {problem.passedCount}/{problem.totalCount}
                </span>
              )}
            </div>
          </Link>
        ))}
      </div>
    </div>
  );
}
