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

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

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

  const totalDone = ALL_COURSES.filter((c) => completedSlugs.has(c.slug)).length;
  const totalCount = ALL_COURSES.length;
  const percent = totalCount === 0 ? 0 : Math.round((totalDone / totalCount) * 100);

  return (
    <div>
      <div className="hero">
        <div className="eyebrow">Learning Center</div>
        <h1>어썸데브 학습 센터</h1>
        <p>
          하드웨어에서 네트워크, 서버, 코드, 디자인까지 — 아래에서 위로 쌓는 순서 그대로.
          코스를 다 읽으면 하단의 <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">카테고리당 12강좌</span>
          <span className="chip">강좌당 40~90분</span>
        </div>
        {/* 회사 한 줄 소개 — 대시보드와 같은 문구(홈페이지 모토) */}
        <p className="muted" style={{ fontSize: 13, marginTop: 14, marginBottom: 0 }}>
          ㈜어썸데브 — 고객과 함께 더 나은 세상을 만들어 나가는 기업
        </p>
      </div>

      {COURSE_CATEGORIES.map((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,
                        }}
                      >
                        <span style={{ fontSize: 26 }}>{course.icon}</span>
                        <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>
  );
}
