'use client';

import { useRouter, useParams } from 'next/navigation';
import { useState } from 'react';

const imgImage2 = "/imgs/image-2.png";
const imgLine58 = "/imgs/line-58.svg";
const img = "/imgs/asset-base.svg";
const imgArrowsDiagramsArrow = "/imgs/arrows-diagrams-arrow.svg";
const imgIcon = "/imgs/icon.svg";
const imgGroup = "/imgs/group.svg";
const imgEllipse2 = "/imgs/ellipse-2.svg";
const imgMusicAudioPlay = "/imgs/music-audio-play.svg";
const imgIcon1 = "/imgs/icon-1.svg";
const imgIcon2 = "/imgs/icon-2.svg";
const imgIcon3 = "/imgs/icon-3.svg";
const imgIcon4 = "/imgs/icon-4.svg";

interface FigmaSelectedLessonPageProps {
  subjectTitle?: string;
  lectureTitle?: string;
}

export default function FigmaSelectedLessonPage({
  subjectTitle = '원자로 운전 및 계통',
  lectureTitle = '6. 원자로 시동, 운전 및 정지 절차',
}: FigmaSelectedLessonPageProps) {
  const router = useRouter();
  const params = useParams();
  const [isVideoCompleted, setIsVideoCompleted] = useState(false);
  const [isXrActive, setIsXrActive] = useState(false);
  const [isVrCompleted, setIsVrCompleted] = useState(false);
  const [isProblemActive, setIsProblemActive] = useState(false);
  const [showVideoModal, setShowVideoModal] = useState(false);
  const [showVrModal, setShowVrModal] = useState(false);
  const [showProblemConfirmModal, setShowProblemConfirmModal] = useState(false);

  const handleVideoComplete = () => {
    setIsVideoCompleted(true);
    setShowVideoModal(true);
  };

  const handleVideoModalProceed = () => {
    setShowVideoModal(false);
    setIsXrActive(true);
  };

  const handleVideoModalReplay = () => {
    setShowVideoModal(false);
    setIsVideoCompleted(false);
  };

  const handleVrComplete = () => {
    setIsVrCompleted(true);
    setShowVrModal(true);
  };

  const handleVrModalProceed = () => {
    setShowVrModal(false);
    setShowProblemConfirmModal(true);
  };

  const handleProblemConfirmProceed = () => {
    setShowProblemConfirmModal(false);
    setIsProblemActive(true);
    // 문제 풀기 페이지로 이동
    const lessonId = params?.lessonId as string;
    if (lessonId) {
      router.push(`/menu/courses/lessons/${lessonId}/review`);
    }
  };

  const handleProblemConfirmReplay = () => {
    setShowProblemConfirmModal(false);
  };

  const handleVrModalReplay = () => {
    setShowVrModal(false);
    setIsVrCompleted(false);
  };

  return (
    <div className="bg-white content-stretch flex flex-col items-center relative size-full">
      <div className="content-stretch flex flex-col items-start max-w-[1440px] relative shrink-0 w-[1440px]">
        <div className="box-border content-stretch flex gap-[10px] h-[100px] items-center px-[32px] py-0 relative shrink-0 w-full">
          <div className="basis-0 content-stretch flex gap-[12px] grow items-center min-h-px min-w-px relative shrink-0">
            <button
              type="button"
              onClick={() => router.back()}
              aria-label="뒤로 가기"
              className="relative shrink-0 size-[32px] rounded-full inline-flex items-center justify-center hover:bg-black/5 cursor-pointer"
            >
              <img alt="" className="block max-w-none size-full" src={imgArrowsDiagramsArrow} />
            </button>
            <div className="basis-0 content-stretch flex flex-col grow items-start justify-center leading-[1.5] min-h-px min-w-px not-italic relative shrink-0">
              <p className="font-['Pretendard:SemiBold',sans-serif] relative shrink-0 text-[#6c7682] text-[16px] w-full">
                {subjectTitle}
              </p>
              <p className="font-['Pretendard:Bold',sans-serif] relative shrink-0 text-[#1b2027] text-[24px] w-full">
                {lectureTitle}
              </p>
            </div>
            <div className="content-stretch flex gap-[20px] h-[81px] items-center justify-center relative shrink-0">
              <div className="relative shrink-0 w-[52px]">
                <div className="bg-clip-padding border-0 border-[transparent] border-solid box-border content-stretch flex flex-col gap-[4px] items-center relative w-[52px]">
                  <div className="bg-[#384fbf] relative rounded-[2.23696e+07px] shrink-0 size-[32px]">
                    <div className="bg-clip-padding border-0 border-[transparent] border-solid box-border content-stretch flex items-center justify-center relative size-[32px]">
                      <p className="font-['Pretendard:Bold',sans-serif] leading-[18px] not-italic relative shrink-0 text-[14px] text-nowrap text-white whitespace-pre">
                        1
                      </p>
                    </div>
                  </div>
                  <p className="font-['Pretendard:SemiBold',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[#384fbf] text-[14px] text-nowrap whitespace-pre">
                    강좌 수강
                  </p>
                </div>
              </div>
              <div className="relative shrink-0 size-[24px]">
                <img alt="" className="block max-w-none size-full" src={imgIcon} />
              </div>
              <div className="relative shrink-0 w-[52px]">
                <div className="bg-clip-padding border-0 border-[transparent] border-solid box-border content-stretch flex flex-col gap-[4px] items-center relative w-[52px]">
                  <div className={`${isXrActive ? 'bg-[#384fbf]' : 'bg-[#dee1e6]'} relative rounded-[2.23696e+07px] shrink-0 size-[32px]`}>
                    <div className="bg-clip-padding border-0 border-[transparent] border-solid box-border content-stretch flex items-center justify-center relative size-[32px]">
                      <p className={`font-['Pretendard:Bold',sans-serif] leading-[18px] not-italic relative shrink-0 text-[14px] text-nowrap whitespace-pre ${isXrActive ? 'text-white' : 'text-[#6c7682]'}`}>
                        2
                      </p>
                    </div>
                  </div>
                  <p className={`font-['Pretendard:SemiBold',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[14px] text-nowrap whitespace-pre ${isXrActive ? 'text-[#384fbf]' : 'text-[#6c7682]'}`}>
                    XR 실습
                  </p>
                </div>
              </div>
              <div className="relative shrink-0 size-[24px]">
                <img alt="" className="block max-w-none size-full" src={imgIcon} />
              </div>
              <div className="relative shrink-0 w-[52px]">
                <div className="bg-clip-padding border-0 border-[transparent] border-solid box-border content-stretch flex flex-col gap-[4px] items-center relative w-[52px]">
                  <div className={`${isProblemActive ? 'bg-[#384fbf]' : 'bg-[#dee1e6]'} relative rounded-[2.23696e+07px] shrink-0 size-[32px]`}>
                    <div className="bg-clip-padding border-0 border-[transparent] border-solid box-border content-stretch flex items-center justify-center relative size-[32px]">
                      <p className={`font-['Pretendard:Bold',sans-serif] leading-[18px] not-italic relative shrink-0 text-[14px] text-nowrap whitespace-pre ${isProblemActive ? 'text-white' : 'text-[#6c7682]'}`}>
                        3
                      </p>
                    </div>
                  </div>
                  <p className={`font-['Pretendard:SemiBold',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[14px] text-nowrap whitespace-pre ${isProblemActive ? 'text-[#384fbf]' : 'text-[#6c7682]'}`}>
                    문제 풀기
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="box-border content-stretch flex flex-col gap-[24px] items-center overflow-clip pb-[80px] pt-[24px] px-8 relative rounded-[8px] shrink-0 w-full">
          {!isXrActive ? (
            // 영상 영역
            <div className="aspect-[1920/1080] bg-black overflow-clip relative rounded-[8px] shrink-0 w-full">
              <div className="absolute left-1/2 size-[120px] top-1/2 translate-x-[-50%] translate-y-[-50%]">
                <div className="absolute contents inset-0">
                  <img alt="" className="block max-w-none size-full" src={imgGroup} />
                </div>
              </div>
              {/* 시청끝 버튼 (더미 중간에 배치) */}
              <div className="absolute left-1/2 top-[40%] translate-x-[-50%] translate-y-[-50%] z-10">
                <button
                  type="button"
                  onClick={handleVideoComplete}
                  className="bg-[#1f2b91] box-border content-stretch flex gap-[4px] h-[40px] items-center justify-center px-[24px] py-0 relative rounded-[8px] shrink-0 cursor-pointer hover:bg-[#1a2370] transition-colors"
                >
                  <p className="font-['Pretendard:SemiBold',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[16px] text-center text-nowrap text-white whitespace-pre">
                    시청끝
                  </p>
                </button>
              </div>
              <div className="absolute bg-gradient-to-t bottom-0 box-border content-stretch flex flex-col from-[rgba(0,0,0,0.8)] gap-[20px] items-center justify-center left-[-0.5px] px-[16px] py-[24px] to-[rgba(0,0,0,0)] w-[1376px]">
                <div className="bg-[#333c47] h-[4px] relative rounded-[3.35544e+07px] shrink-0 w-full">
                  <div className="absolute left-0 size-[12px] top-1/2 translate-y-[-50%]">
                    <img alt="" className="block max-w-none size-full" src={imgEllipse2} />
                  </div>
                </div>
                <div className="content-stretch flex h-[32px] items-center justify-between relative shrink-0 w-full">
                  <div className="relative shrink-0">
                    <div className="bg-clip-padding border-0 border-[transparent] border-solid box-border content-stretch flex gap-[8px] items-center relative">
                      <div className="content-stretch flex gap-[16px] items-center relative shrink-0">
                        <div className="relative shrink-0 size-[32px]">
                          <img alt="" className="block max-w-none size-full" src={imgMusicAudioPlay} />
                        </div>
                        <div className="content-stretch flex gap-[8px] h-[32px] items-center relative shrink-0 w-[120px]">
                          <div className="relative rounded-[4px] shrink-0 size-[32px]">
                            <div className="bg-clip-padding border-0 border-[transparent] border-solid box-border content-stretch flex items-center justify-center relative size-[32px]">
                              <div className="relative shrink-0 size-[18px]">
                                <img alt="" className="block max-w-none size-full" src={imgIcon1} />
                              </div>
                            </div>
                          </div>
                          <div className="basis-0 grow h-[4px] min-h-px min-w-px relative rounded-[3.35544e+07px] shrink-0">
                            <div className="bg-clip-padding border-0 border-[transparent] border-solid box-border h-[4px] w-full" />
                          </div>
                        </div>
                        <p className="font-['Pretendard:Medium',sans-serif] leading-[19.5px] not-italic relative shrink-0 text-[13px] text-nowrap text-white whitespace-pre">
                          0:00 / 12:26
                        </p>
                      </div>
                    </div>
                  </div>
                  <div className="relative shrink-0">
                    <div className="bg-clip-padding border-0 border-[transparent] border-solid box-border content-stretch flex gap-[12px] items-center relative">
                      <div className="bg-[#333c47] box-border content-stretch flex gap-[4px] h-[32px] items-center justify-center px-[16px] py-[3px] relative rounded-[6px] shrink-0 w-[112px]">
                        <div className="relative shrink-0 size-[16px]">
                          <img alt="" className="block max-w-none size-full" src={imgIcon2} />
                        </div>
                        <p className="font-['Pretendard:Medium',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[14px] text-center text-nowrap text-white whitespace-pre">
                          이전 강의
                        </p>
                      </div>
                      <div className="bg-[#333c47] box-border content-stretch flex gap-[4px] h-[32px] items-center justify-center px-[16px] py-[3px] relative rounded-[6px] shrink-0 w-[112px]">
                        <p className="font-['Pretendard:Medium',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[14px] text-center text-nowrap text-white whitespace-pre">
                          다음 강의
                        </p>
                        <div className="flex items-center justify-center relative shrink-0">
                          <div className="flex-none rotate-[180deg] scale-y-[-100%]">
                            <div className="relative size-[16px]">
                              <img alt="" className="block max-w-none size-full" src={imgIcon3} />
                            </div>
                          </div>
                        </div>
                      </div>
                      <div className="content-stretch flex items-center justify-center relative rounded-[4px] shrink-0 size-[32px]">
                        <div className="relative shrink-0 size-[18px]">
                          <img alt="" className="block max-w-none size-full" src={imgIcon4} />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          ) : showProblemConfirmModal ? (
            // 문제 풀기 확인창
            <div className="bg-white content-stretch flex flex-col items-center relative rounded-[12px] shrink-0 w-full">
              <div className="box-border content-stretch flex gap-[10px] items-center overflow-clip p-[24px] relative shrink-0 w-full">
                <div className="basis-0 flex flex-col font-['Pretendard:Bold',sans-serif] grow h-[32px] justify-center leading-[0] min-h-px min-w-px not-italic relative shrink-0 text-[#333c47] text-[20px] text-center">
                  <p className="leading-[1.5]">학습 평가 전 확인해 주세요!</p>
                </div>
              </div>
              <div className="box-border content-stretch flex flex-col gap-[16px] items-center px-[24px] py-0 relative shrink-0">
                <div className="bg-gray-50 border border-[#dee1e6] border-solid box-border content-stretch flex flex-col gap-[8px] items-start justify-center p-[24px] relative rounded-[16px] shrink-0 w-full">
                  <div className="content-stretch flex gap-[10px] items-center justify-center relative shrink-0">
                    <p className="font-['Pretendard:Bold',sans-serif] h-[23px] leading-[1.5] not-italic relative shrink-0 text-[#4c5561] text-[15px] w-full">
                      유의 사항
                    </p>
                  </div>
                  <div className="content-stretch flex flex-col font-['Pretendard:Regular',sans-serif] gap-[4px] items-start leading-[0] not-italic relative shrink-0 text-[#4c5561] text-[15px] text-nowrap w-full">
                    <ul className="[white-space-collapse:collapse] block relative shrink-0">
                      <li className="ms-[22.5px]">
                        <span className="leading-[1.5]">문제는 제한 시간 30분 안에 모두 풀어야 합니다.</span>
                      </li>
                    </ul>
                    <ul className="[white-space-collapse:collapse] block relative shrink-0">
                      <li className="ms-[22.5px]">
                        <span className="leading-[1.5]">제한 시간 내 제출하지 않으면, 강좌 수강을 마친 뒤 다시 응시해야 합니다.</span>
                      </li>
                    </ul>
                    <ul className="[white-space-collapse:collapse] block relative shrink-0">
                      <li className="ms-[22.5px]">
                        <span className="leading-[1.5]">재응시 횟수는 총 3회이며, 합격점은 100점 만점 중 70점 이상입니다.</span>
                      </li>
                    </ul>
                    <ul className="[white-space-collapse:collapse] block relative shrink-0">
                      <li className="ms-[22.5px]">
                        <span className="leading-[1.5]">합격하면, 문제 제출 후 영업일 기준 3~5일 내에 강사 피드백과 함께 수료증이 발급됩니다.</span>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <div className="box-border content-stretch flex flex-col gap-[32px] items-center p-[24px] relative shrink-0 w-full">
                <div className="content-stretch flex gap-[12px] items-start relative shrink-0 w-full">
                  <div className="basis-0 content-stretch flex gap-[12px] grow items-start min-h-px min-w-px relative shrink-0">
                    <button
                      type="button"
                      onClick={handleProblemConfirmReplay}
                      className="basis-0 bg-[#f1f3f5] box-border content-stretch flex flex-col grow h-[56px] items-center justify-center min-h-px min-w-px px-[8px] py-0 relative rounded-[12px] shrink-0 min-w-[90px] cursor-pointer hover:bg-[#e1e5e9] transition-colors"
                    >
                      <p className="font-['Pretendard:SemiBold',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[#4c5561] text-[18px] text-center text-nowrap whitespace-pre">
                        강좌 다시 보기
                      </p>
                    </button>
                    <button
                      type="button"
                      onClick={handleProblemConfirmProceed}
                      className="basis-0 bg-[#1f2b91] box-border content-stretch flex flex-col grow h-[56px] items-center justify-center min-h-px min-w-px p-[8px] relative rounded-[12px] shrink-0 min-w-[90px] cursor-pointer hover:bg-[#1a2370] transition-colors"
                    >
                      <p className="font-['Pretendard:SemiBold',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[18px] text-center text-nowrap text-white whitespace-pre">
                        문제 풀기
                      </p>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          ) : (
            // VR 콘텐츠 영역
            <div className="aspect-[1920/1080] bg-black overflow-clip relative rounded-[8px] shrink-0 w-full">
              <div className="absolute left-1/2 size-[120px] top-1/2 translate-x-[-50%] translate-y-[-50%]">
                <div className="absolute contents inset-0">
                  <img alt="" className="block max-w-none size-full" src={imgGroup} />
                </div>
              </div>
              {/* VR 콘텐츠 시청끝 버튼 (더미 중간에 배치) */}
              <div className="absolute left-1/2 top-[40%] translate-x-[-50%] translate-y-[-50%] z-10">
                <button
                  type="button"
                  onClick={handleVrComplete}
                  className="bg-[#1f2b91] box-border content-stretch flex gap-[4px] h-[40px] items-center justify-center px-[24px] py-0 relative rounded-[8px] shrink-0 cursor-pointer hover:bg-[#1a2370] transition-colors"
                >
                  <p className="font-['Pretendard:SemiBold',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[16px] text-center text-nowrap text-white whitespace-pre">
                    시청끝
                  </p>
                </button>
              </div>
              <div className="absolute bg-gradient-to-t bottom-0 box-border content-stretch flex flex-col from-[rgba(0,0,0,0.8)] gap-[20px] items-center justify-center left-[-0.5px] px-[16px] py-[24px] to-[rgba(0,0,0,0)] w-[1376px]">
                <div className="bg-[#333c47] h-[4px] relative rounded-[3.35544e+07px] shrink-0 w-full">
                  <div className="absolute left-0 size-[12px] top-1/2 translate-y-[-50%]">
                    <img alt="" className="block max-w-none size-full" src={imgEllipse2} />
                  </div>
                </div>
                <div className="content-stretch flex h-[32px] items-center justify-between relative shrink-0 w-full">
                  <div className="relative shrink-0">
                    <div className="bg-clip-padding border-0 border-[transparent] border-solid box-border content-stretch flex gap-[8px] items-center relative">
                      <div className="content-stretch flex gap-[16px] items-center relative shrink-0">
                        <div className="relative shrink-0 size-[32px]">
                          <img alt="" className="block max-w-none size-full" src={imgMusicAudioPlay} />
                        </div>
                        <div className="content-stretch flex gap-[8px] h-[32px] items-center relative shrink-0 w-[120px]">
                          <div className="relative rounded-[4px] shrink-0 size-[32px]">
                            <div className="bg-clip-padding border-0 border-[transparent] border-solid box-border content-stretch flex items-center justify-center relative size-[32px]">
                              <div className="relative shrink-0 size-[18px]">
                                <img alt="" className="block max-w-none size-full" src={imgIcon1} />
                              </div>
                            </div>
                          </div>
                          <div className="basis-0 grow h-[4px] min-h-px min-w-px relative rounded-[3.35544e+07px] shrink-0">
                            <div className="bg-clip-padding border-0 border-[transparent] border-solid box-border h-[4px] w-full" />
                          </div>
                        </div>
                        <p className="font-['Pretendard:Medium',sans-serif] leading-[19.5px] not-italic relative shrink-0 text-[13px] text-nowrap text-white whitespace-pre">
                          0:00 / 12:26
                        </p>
                      </div>
                    </div>
                  </div>
                  <div className="relative shrink-0">
                    <div className="bg-clip-padding border-0 border-[transparent] border-solid box-border content-stretch flex gap-[12px] items-center relative">
                      <div className="bg-[#333c47] box-border content-stretch flex gap-[4px] h-[32px] items-center justify-center px-[16px] py-[3px] relative rounded-[6px] shrink-0 w-[112px]">
                        <div className="relative shrink-0 size-[16px]">
                          <img alt="" className="block max-w-none size-full" src={imgIcon2} />
                        </div>
                        <p className="font-['Pretendard:Medium',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[14px] text-center text-nowrap text-white whitespace-pre">
                          이전 강의
                        </p>
                      </div>
                      <div className="bg-[#333c47] box-border content-stretch flex gap-[4px] h-[32px] items-center justify-center px-[16px] py-[3px] relative rounded-[6px] shrink-0 w-[112px]">
                        <p className="font-['Pretendard:Medium',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[14px] text-center text-nowrap text-white whitespace-pre">
                          다음 강의
                        </p>
                        <div className="flex items-center justify-center relative shrink-0">
                          <div className="flex-none rotate-[180deg] scale-y-[-100%]">
                            <div className="relative size-[16px]">
                              <img alt="" className="block max-w-none size-full" src={imgIcon3} />
                            </div>
                          </div>
                        </div>
                      </div>
                      <div className="content-stretch flex items-center justify-center relative rounded-[4px] shrink-0 size-[32px]">
                        <div className="relative shrink-0 size-[18px]">
                          <img alt="" className="block max-w-none size-full" src={imgIcon4} />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}
          <div className="bg-[#fff9ee] border border-[#ffdd82] border-solid box-border content-stretch flex flex-col h-[55px] items-start pb-px pt-[17px] px-[17px] relative rounded-[8px] shrink-0 w-full">
            <ul className="[white-space-collapse:collapse] block font-['Pretendard:Medium',sans-serif] leading-[0] not-italic relative shrink-0 text-[#333c47] text-[14px] text-nowrap">
              <li className="ms-[21px]">
                <span className="leading-[1.5]">강좌 수강 완료 후 문제를 풀어야 하니 집중해서 강좌 수강해 주세요.</span>
              </li>
            </ul>
          </div>
        </div>
      </div>

      {/* 영상 완료 모달 */}
      {showVideoModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-[2px]">
          <div className="bg-white box-border content-stretch flex flex-col gap-[32px] items-end justify-end p-[24px] relative rounded-[8px] shadow-[0px_8px_20px_0px_rgba(0,0,0,0.06),0px_24px_60px_0px_rgba(0,0,0,0.12)] w-[480px]">
            <div className="content-stretch flex flex-col gap-[16px] items-start justify-center relative shrink-0 w-full">
              <div className="content-stretch flex gap-[8px] items-start relative shrink-0 w-full">
                <div className="basis-0 font-['Pretendard:SemiBold',sans-serif] grow leading-[1.5] min-h-px min-w-px not-italic relative shrink-0 text-[#333c47] text-[18px]">
                  <p className="mb-0">강좌 수강을 완료했습니다.</p>
                  <p>XR 학습을 진행해 주세요.</p>
                </div>
              </div>
            </div>
            <div className="content-stretch flex gap-[8px] items-center justify-end relative shrink-0">
              <button
                type="button"
                onClick={handleVideoModalReplay}
                className="bg-[#f1f3f5] box-border content-stretch flex flex-col h-[40px] items-center justify-center px-[16px] py-0 relative rounded-[8px] shrink-0 min-w-[82px] cursor-pointer hover:bg-[#e1e5e9] transition-colors"
              >
                <p className="font-['Pretendard:SemiBold',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[#4c5561] text-[16px] text-center text-nowrap whitespace-pre">
                  강좌 다시 보기
                </p>
              </button>
              <button
                type="button"
                onClick={handleVideoModalProceed}
                className="bg-[#1f2b91] box-border content-stretch flex flex-col h-[40px] items-center justify-center px-[16px] py-0 relative rounded-[8px] shrink-0 min-w-[82px] cursor-pointer hover:bg-[#1a2370] transition-colors"
              >
                <p className="font-['Pretendard:SemiBold',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[16px] text-center text-nowrap text-white whitespace-pre">
                  진행하기
                </p>
              </button>
            </div>
          </div>
        </div>
      )}

      {/* VR 콘텐츠 완료 모달 */}
      {showVrModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-[2px]">
          <div className="bg-white box-border content-stretch flex flex-col gap-[32px] items-end justify-end p-[24px] relative rounded-[8px] shadow-[0px_8px_20px_0px_rgba(0,0,0,0.06),0px_24px_60px_0px_rgba(0,0,0,0.12)] w-[480px]">
            <div className="content-stretch flex flex-col gap-[16px] items-start justify-center relative shrink-0 w-full">
              <div className="content-stretch flex gap-[8px] items-start relative shrink-0 w-full">
                <div className="basis-0 font-['Pretendard:SemiBold',sans-serif] grow leading-[1.5] min-h-px min-w-px not-italic relative shrink-0 text-[#333c47] text-[18px]">
                  <p className="mb-0">XR 학습을 완료했습니다.</p>
                  <p>문제 풀기를 진행해 주세요.</p>
                </div>
              </div>
            </div>
            <div className="content-stretch flex gap-[8px] items-center justify-end relative shrink-0">
              <button
                type="button"
                onClick={handleVrModalReplay}
                className="bg-[#f1f3f5] box-border content-stretch flex flex-col h-[40px] items-center justify-center px-[16px] py-0 relative rounded-[8px] shrink-0 min-w-[82px] cursor-pointer hover:bg-[#e1e5e9] transition-colors"
              >
                <p className="font-['Pretendard:SemiBold',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[#4c5561] text-[16px] text-center text-nowrap whitespace-pre">
                  XR 다시 보기
                </p>
              </button>
              <button
                type="button"
                onClick={handleVrModalProceed}
                className="bg-[#1f2b91] box-border content-stretch flex flex-col h-[40px] items-center justify-center px-[16px] py-0 relative rounded-[8px] shrink-0 min-w-[82px] cursor-pointer hover:bg-[#1a2370] transition-colors"
              >
                <p className="font-['Pretendard:SemiBold',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[16px] text-center text-nowrap text-white whitespace-pre">
                  진행하기
                </p>
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}


