/* global React, getLessonButtonState */
// Phase 3: 실제 영상 API 연결 (YouTube IFrame / Vimeo / Bunny 선택 — 비용/보안/진행도 추적 기준 재논의)
// Phase C-2.2-fix: 컨텍스트 의존 4-state(5-variant) 버튼 적용.
//   - props 에 lessons + index + context 받아 getLessonButtonState() 로 판정
//   - context='home' 기본 (home 에서만 next-course variant 노출)
function VideoProgressCard({ thumbnail, title, progress, totalLessons, completedLessons, lessons, index, context }) {
  const fallback = () => {
    if (progress === 100) return { state: 'done', label: '완료' };
    if (progress > 0)     return { state: 'resume', label: '이어보기' };
    return { state: 'start-next', label: '시작하기' };
  };
  const btn = (lessons && typeof index === 'number' && typeof window.getLessonButtonState === 'function')
    ? window.getLessonButtonState(lessons, index, context || 'home')
    : fallback();

  const handlePlay = (e) => {
    if (e) e.stopPropagation();
    if (!window.showToast) return;
    if (btn.state === 'next-course') {
      window.showToast('다음 강의 이동은 Phase 3에서 구현됩니다');
    } else if (btn.state === 'done') {
      window.showToast(`${title} — 재시청은 Phase 3에서 구현됩니다`);
    } else {
      window.showToast(`${title} — 영상 재생은 Phase 3에서 구현됩니다`);
    }
  };

  return (
    <div className="s-video-card" onClick={handlePlay}>
      <div
        className="s-video-thumb"
        style={{ backgroundImage: `url(${thumbnail})` }}
        role="img"
        aria-label={title}
      ></div>
      <div className="s-video-body">
        <h3 className="s-video-title" title={title}>{title}</h3>
        <div className="s-video-progress-bar">
          <div className="s-video-progress-fill" style={{ width: `${progress}%` }}></div>
        </div>
        <div className="s-video-progress-text">
          {completedLessons !== undefined && totalLessons !== undefined
            ? `${completedLessons}강 / ${totalLessons}강 · ${progress}%`
            : `${progress}%`}
        </div>
        <button
          className={`s-video-action s-video-action--${btn.state}`}
          onClick={handlePlay}
        >
          {btn.label}
        </button>
      </div>
    </div>
  );
}
window.VideoProgressCard = VideoProgressCard;