// 이 파일이 하는 일: 학습 증명서(수료증) 화면.
// 지금까지의 학습 성취(완료 강좌·만점 퀴즈·통과한 코딩 문제·제출 과제)를 한 장으로 모아
// 인쇄/캡처할 수 있는 증명서로 보여준다. 수습 종료 시 이력서·포트폴리오에 쓸 수 있는 실물 성과.
//
// 학습 포인트: 이 페이지는 새 API를 만들지 않고, 이미 있는 진도 엔드포인트 4개를
//   Promise.all로 한 번에 모아서 프론트에서 합산한다 — "데이터는 이미 있고, 조합만 새로 한다".
import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import client from '../api/client';
import { useAuth } from '../AuthContext';
import { ALL_COURSES } from '../courseCatalog';

const PROGRAM = { start: '2026년 9월 1일', end: '2026년 10월 31일', weeks: 8 };
const COMPANY = '주식회사 어썸데브 (AWESOMEDEV)';
const CEO = '장익준';

export default function CertificatePage() {
  const { user } = useAuth();
  const [stats, setStats] = useState(null);
  const [error, setError] = useState('');

  useEffect(() => {
    let cancelled = false;
    Promise.all([
      client.get('/course-progress/me'),   // 완료 코스 slug 배열
      client.get('/quiz/results/me'),       // [{courseSlug, bestScore, total, attempts}]
      client.get('/coding/progress/me'),    // {total, submitted, passed}
      client.get('/submissions/me'),        // 내 과제 제출 목록
    ])
      .then(([course, quiz, coding, subs]) => {
        if (cancelled) return;
        // 수료증은 "수습 과정" 증명이므로, 완료 수를 수습용 강좌로만 센다.
        // 학습 포인트: 서버의 완료 목록에는 수준별 과정(lv1-~lv4-) 강좌도 섞여 올 수 있다.
        // 그대로 세면 "90/84"처럼 분모를 넘는 수가 나온다 — 분자와 분모의 모집단을 맞춘다.
        const traineeSlugs = new Set(ALL_COURSES.map((c) => c.slug));
        const completedCourses = course.data.filter((s) => traineeSlugs.has(s)).length;
        const quizPerfect = quiz.data.filter((q) => q.total > 0 && q.bestScore === q.total).length;
        setStats({
          completedCourses,
          totalCourses: ALL_COURSES.filter((c) => c.slug).length,
          quizAttempted: quiz.data.length,
          quizPerfect,
          codingPassed: coding.data.passed,
          codingTotal: coding.data.total,
          assignmentsSubmitted: subs.data.length,
        });
      })
      .catch(() => {
        if (!cancelled) setError('성취 기록을 불러오지 못했어요.');
      });
    return () => {
      cancelled = true;
    };
  }, []);

  if (error) return <p className="error-text" role="alert">{error}</p>;
  if (!stats) return <p className="empty">불러오는 중…</p>;

  const trackLabel = user?.track === 'DESIGN' ? '디자인' : '개발';

  return (
    <div>
      <div className="hero compact">
        <div className="eyebrow">Certificate</div>
        <h1>학습 증명서</h1>
        <p>
          지금까지의 학습 성취를 담은 증명서예요. <strong>[인쇄 / PDF 저장]</strong>으로 남겨
          이력서·포트폴리오에 활용하세요. 수습을 완주할수록 숫자가 채워집니다.
        </p>
        <div className="chip-row">
          <button className="btn btn-primary" onClick={() => window.print()}>
            🖨️ 인쇄 / PDF 저장
          </button>
          <Link to="/" className="btn btn-ghost">← 대시보드</Link>
        </div>
      </div>

      {/* 실제 증명서 — 인쇄 시 이 부분만 깔끔하게 나오도록 cert-sheet 클래스 사용 */}
      <div className="cert-sheet">
        <div className="cert-border">
          <div className="cert-brand">{COMPANY}</div>
          <div className="cert-title">수 습 학 습 증 명 서</div>
          <div className="cert-sub">Certificate of Completion</div>

          <p className="cert-body">
            아래 수습생은 <b>{COMPANY}</b> 수습 학습 프로그램
            (<b>{PROGRAM.start} ~ {PROGRAM.end}</b>, {PROGRAM.weeks}주)에 참여하여
            아래와 같은 학습 성취를 이루었음을 증명합니다.
          </p>

          <div className="cert-name-row">
            <span className="cert-name">{user?.name}</span>
            <span className="cert-track">{trackLabel} 트랙</span>
          </div>

          <div className="cert-stats">
            <div className="cert-stat">
              <span className="cs-num">{stats.completedCourses}<span className="cs-den">/{stats.totalCourses}</span></span>
              <span className="cs-label">강좌 이수</span>
            </div>
            <div className="cert-stat">
              <span className="cs-num">{stats.quizPerfect}</span>
              <span className="cs-label">퀴즈 만점</span>
            </div>
            <div className="cert-stat">
              <span className="cs-num">{stats.codingPassed}<span className="cs-den">/{stats.codingTotal}</span></span>
              <span className="cs-label">코딩 문제 통과</span>
            </div>
            <div className="cert-stat">
              <span className="cs-num">{stats.assignmentsSubmitted}</span>
              <span className="cs-label">과제 제출</span>
            </div>
          </div>

          <div className="cert-foot">
            <div className="cert-date">발급일: 2026년 __월 __일</div>
            <div className="cert-sign">
              <div className="cert-sign-line">{COMPANY}</div>
              <div className="cert-sign-ceo">대표이사 {CEO} <span className="cert-seal">(인)</span></div>
            </div>
          </div>
        </div>
      </div>

      <p className="muted" style={{ fontSize: 12.5, marginTop: 12 }}>
        ※ 이 증명서는 학습 플랫폼의 자동 집계 기록이에요. 정식 수료 여부·발급일은 멘토(대표)와 확인하세요.
      </p>
    </div>
  );
}
