// 이 파일이 하는 일: "학습 센터" 허브 — 선택한 과정(수습용/초급/중급/고급/특급)의 강좌를
// 카테고리별 카드로 그리고, 내 코스 완료 현황(서버)을 얹어 진도율을 보여준다.
// 학습 포인트: 코스 목록(정적 데이터)은 courseCatalog/levelCatalog에, 완료 여부(사용자별
// 데이터)는 서버 DB에 있다 — "무엇이 어디에 사는 게 맞는가"를 구분하는 것이 설계의 시작이다.
import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import client from '../api/client';
import { COURSE_CATEGORIES } from '../courseCatalog';
import { LEVEL_TRACKS } from '../levelCatalog';
import { useTrack, TRACK_OPTIONS } from '../trackContext';

// 과정별 히어로 소개 문구 — 과정이 바뀌면 인사말도 바뀐다.
const TRACK_INTRO = {
  trainee: '하드웨어에서 네트워크, 서버, 코드, 디자인까지 — 아래에서 위로 쌓는 순서 그대로.',
  lv1: '코딩이 처음이어도 괜찮아요 — 변수 하나부터, "나 코딩 할 수 있네"까지.',
  lv2: '문법을 아는 사람에서 "돌아가는 서비스를 만드는 사람"으로 — 실전 웹 개발.',
  lv3: '만드는 법 다음은 잘 만드는 법 — 아키텍처·성능·보안으로 한 단계 위로.',
  lv4: '대규모 트래픽과 분산 환경을 설계하는 시야 — 전문가의 사고법.',
};

export default function LearnHubPage() {
  const { track } = useTrack();
  // 완료한 코스 slug들 — 포함 여부 확인이 잦으니 Set이 제격 (대시보드와 같은 패턴)
  const [completedSlugs, setCompletedSlugs] = useState(new Set());

  // 현재 과정의 카테고리 목록. 수습용은 7개, 수준별 과정은 1개(12강좌).
  const categories = track === 'trainee' ? COURSE_CATEGORIES : LEVEL_TRACKS[track] || [];
  const trackLabel = TRACK_OPTIONS.find((t) => t.key === track)?.label || '수습용';

  // 지금 보고 있는 카테고리. 과정이 바뀌면 그 과정의 첫 카테고리로 리셋한다.
  // 학습 포인트: 코스를 한 번에 다 펼치면 압도적이라, 카테고리 하나씩만 보여준다.
  const [activeCategory, setActiveCategory] = useState(categories[0]?.category);
  useEffect(() => {
    setActiveCategory(categories[0]?.category);
    // eslint-disable-next-line react-hooks/exhaustive-deps -- track이 바뀔 때만 리셋하면 충분
  }, [track]);

  useEffect(() => {
    let cancelled = false;
    client.get('/course-progress/me').then((res) => {
      if (!cancelled) setCompletedSlugs(new Set(res.data));
    });
    return () => {
      cancelled = true;
    };
  }, []);

  // 진도율은 "지금 보고 있는 과정" 기준으로 센다.
  const trackCourses = categories.flatMap((c) => c.items.filter((i) => i.slug));
  const totalDone = trackCourses.filter((c) => completedSlugs.has(c.slug)).length;
  const totalCount = trackCourses.length;
  const percent = totalCount === 0 ? 0 : Math.round((totalDone / totalCount) * 100);

  // 선택된 카테고리 (없으면 첫 번째로 안전하게 폴백)
  const group = categories.find((g) => g.category === activeCategory) || categories[0];

  return (
    <div>
      <div className="hero">
        <div className="eyebrow">Learning Center · {trackLabel}</div>
        <h1>어썸데브 학습 센터</h1>
        <p>
          {TRACK_INTRO[track] || TRACK_INTRO.trainee}{' '}
          코스를 다 읽으면 하단의 <strong>"✓ 이 코스 완료하기"</strong>를 눌러 진도를 남기세요.
        </p>
        <div className="chip-row" style={{ alignItems: 'center' }}>
          <div className="stat">
            <span className="stat-num">{percent}%</span>
            <span className="stat-label">
              {totalDone} / {totalCount} 코스 완료
            </span>
          </div>
          <div className="progress-track" style={{ flex: 1, minWidth: 160 }}>
            <div className="progress-fill" style={{ width: `${percent}%` }} />
          </div>
        </div>
        <div className="chip-row">
          <span className="chip">카드의 번호(01, 02…)가 배우는 순서예요</span>
          <span className="chip">헤더에서 과정(초급~특급)을 바꿀 수 있어요</span>
          <span className="chip">강좌당 40~90분</span>
        </div>
        {/* 회사 한 줄 소개 — 대시보드와 같은 문구(홈페이지 모토) */}
        <p className="muted" style={{ fontSize: 13, marginTop: 14, marginBottom: 0 }}>
          ㈜어썸데브 — 고객과 함께 더 나은 세상을 만들어 나가는 기업
        </p>
      </div>

      {/* 아직 강좌가 없는 과정(준비 중)일 때의 안내 */}
      {categories.length === 0 && (
        <p className="empty">이 과정의 강좌를 준비하고 있어요. 곧 만나요!</p>
      )}

      {/* 카테고리 선택 탭 — 누른 카테고리의 강좌만 아래에 보여준다.
          각 탭에 "이름 + 완료/전체"를 함께 표시해 어디를 얼마나 했는지 한눈에.
          (수준별 과정은 카테고리가 1개라 탭이 하나만 보인다 — 그래도 진도 표시는 유용하다.) */}
      <div className="tabs">
        {categories.map((g) => {
          const gDone = g.items.filter((i) => i.slug && completedSlugs.has(i.slug)).length;
          return (
            <button
              key={g.category}
              type="button"
              className={`tab${g.category === activeCategory ? ' active' : ''}`}
              onClick={() => setActiveCategory(g.category)}
            >
              {g.category} {gDone}/{g.items.length}
            </button>
          );
        })}
      </div>

      {/* 선택된 카테고리 하나만 렌더 */}
      {group && (() => {
        const groupDone = group.items.filter((i) => i.slug && completedSlugs.has(i.slug)).length;
        return (
          <div key={group.category}>
            <div className="day-head">
              <span className="day-badge">{group.category}</span>
              <span className="day-count">
                {group.desc} · {groupDone} / {group.items.length} 완료
              </span>
            </div>
            <div className="grid-cards">
              {group.items.map((course, index) => {
                // external이 있으면 그 주소로, 아니면 /learn/<slug>로 이동한다.
                const to = course.external || `/learn/${course.slug}`;
                const done = course.slug && completedSlugs.has(course.slug);
                return (
                  <Link key={to} to={to} style={{ color: 'inherit' }}>
                    <div
                      className={`card card-clickable${done ? ' card-completed' : ''}`}
                      style={{ height: '100%' }}
                    >
                      {/* 학습 포인트: 카탈로그 배열의 순서가 곧 배우는 순서 — index로 번호를 매긴다.
                          padStart(2,'0')는 1을 "01"로 만들어 준다 (자릿수 맞추기). */}
                      <div
                        style={{
                          display: 'flex',
                          alignItems: 'center',
                          justifyContent: 'space-between',
                          marginBottom: 8,
                        }}
                      >
                        {/* 학습 포인트: 카탈로그가 준 Icon은 "문자"가 아니라 "컴포넌트"다.
                            그래서 {course.Icon}으로 찍는 게 아니라 <course.Icon />으로 부른다.
                            JSX는 대문자로 시작하는 이름만 컴포넌트로 취급한다(소문자는 <div> 같은 HTML 태그).
                            크기·굵기를 prop으로 지시할 수 있는 게 이모지와의 결정적 차이다. */}
                        <course.Icon size={26} strokeWidth={1.5} aria-hidden="true" />
                        <span
                          style={{
                            fontSize: 13,
                            fontWeight: 800,
                            color: done ? 'var(--teal)' : 'var(--primary)',
                            fontVariantNumeric: 'tabular-nums',
                          }}
                        >
                          {done ? '✓ 완료' : String(index + 1).padStart(2, '0')}
                        </span>
                      </div>
                      <div className="assign-title-row">
                        <span className="assign-title">{course.title}</span>
                        <span className="badge badge-primary">{course.level}</span>
                      </div>
                      <p className="muted" style={{ fontSize: 13.5, marginTop: 6 }}>
                        {course.desc}
                      </p>
                    </div>
                  </Link>
                );
              })}
            </div>
          </div>
        );
      })()}
    </div>
  );
}
