// 이 파일이 하는 일: 모든 코스 페이지를 감싸는 "껍데기" — 코스 본문 아래에
// 완료 체크 바(뒤로가기 + 완료 버튼)를 붙여 준다.
//
// 학습 포인트: 코스가 72개인데 완료 버튼을 72개 파일에 각각 넣으면 유지보수 지옥이 된다.
// 라우트에서 코스를 이 컴포넌트로 한 번 감싸면(App.jsx 참고) 모든 코스가 자동으로
// 완료 바를 갖는다 — "공통 기능은 감싸는 컴포넌트로"가 React의 대표 패턴이다.
import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import client from '../api/client';

export default function CourseShell({ course }) {
  const [completed, setCompleted] = useState(false);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);

  // 학습 포인트: 대문자 변수에 담아야 JSX에서 <Component />로 쓸 수 있다.
  // (소문자로 시작하면 React가 HTML 태그로 착각한다)
  const Component = course.Component;

  // 이 코스의 완료 여부를 서버에서 확인
  useEffect(() => {
    let cancelled = false;
    setLoading(true);
    client
      .get('/course-progress/me')
      .then((res) => {
        if (!cancelled) setCompleted(res.data.includes(course.slug));
      })
      .finally(() => {
        if (!cancelled) setLoading(false);
      });
    return () => {
      cancelled = true;
    };
  }, [course.slug]);

  async function toggle() {
    setSaving(true);
    try {
      const res = await client.post(`/course-progress/${course.slug}/toggle`);
      setCompleted(res.data.completed);
    } finally {
      setSaving(false);
    }
  }

  return (
    <div>
      <Component />

      {/* 코스 하단 완료 바 — sticky로 화면 아래에 붙어 다닌다 */}
      <div className={`course-complete-bar${completed ? ' done' : ''}`}>
        <Link to="/learn" className="btn btn-ghost">
          ← 학습 센터
        </Link>
        <span className="course-complete-label">
          {course.icon} {course.title}
          {completed && <span className="badge badge-teal" style={{ marginLeft: 8 }}>완료됨</span>}
        </span>
        <Link to={`/learn/${course.slug}/quiz`} className="btn">
          📝 퀴즈 풀기
        </Link>
        <button
          className={completed ? 'btn' : 'btn btn-primary'}
          onClick={toggle}
          disabled={loading || saving}
        >
          {saving ? '저장 중...' : completed ? '완료 취소' : '✓ 이 코스 완료하기'}
        </button>
      </div>
    </div>
  );
}
