let courseData = [
  {
    id: 1,
    title: "Intro to Design",
    lessons: [
      {
        id: "v1",
        title: "What is UI Design?",
        duration: "05:10",
        videoUrl: "../assets/video/python-class.mp4",
        completed: true,
      },
      {
        id: "v2",
        title: "Design Mindset",
        duration: "10:20",
        videoUrl: "../assets/video/python-class.mp4",
        completed: true,
      },
    ],
  },
  {
    id: 2,
    title: "Visual Principles",
    lessons: [
      {
        id: "v3",
        title: "Color Theory Basics",
        duration: "15:00",
        videoUrl: "../assets/video/python-class.mp4",
        completed: true,
      },
      {
        id: "v4",
        title: "Typography Rules",
        duration: "12:45",
        videoUrl: "../assets/video/python-class.mp4",
        completed: true,
      },
    ],
  },
];

function renderCurriculum() {
  const container = document.getElementById("curriculum-container");
  container.innerHTML = "";

  courseData.forEach((milestone, mIndex) => {
    container.innerHTML += `
            <div class="border border-white/10 rounded-2xl overflow-hidden bg-[#1A1A1A]/30">
              <button onclick="toggleMilestone('m${milestone.id}')" class="w-full flex items-center justify-between p-4">
                <div class="flex items-center gap-4 text-left">
                  <div class="w-10 h-10 rounded-full bg-green-500 flex items-center justify-center">
                    <span class="text-white font-bold text-sm">${milestone.id}</span>
                  </div>
                  <div>
                    <h3 class="text-white text-sm font-semibold">${milestone.title}</h3>
                    <p class="text-[#A4ACB9] text-[10px]">${milestone.lessons.length} Lessons Completed</p>
                  </div>
                </div>
                <img src="../assets/icons/dropdown.svg" class="w-5 h-5 transition-transform" id="icon-m${milestone.id}" />
              </button>
              <div id="m${milestone.id}" class="milestone-content ${mIndex === 0 ? "open" : ""}">
                <div class="p-3 pt-0 flex flex-col gap-2">
                  ${milestone.lessons
                    .map(
                      (lesson) => `
                    <div onclick="openVideo('${lesson.videoUrl}', '${lesson.title}')" 
                         class="flex items-center justify-between p-3 rounded-xl bg-white/5 border border-white/5 cursor-pointer hover:bg-white/10 transition-all">
                      <div class="flex items-center gap-3">
                        <img src="../assets/icons/acadamic.svg" class="w-4 h-4 text-white/50" />
                        <span class="text-xs text-white/70">${lesson.title}</span>
                      </div>
                      <img src="../assets/icons/downlodTik.svg" class="w-4 h-4 text-green-500" />
                    </div>
                  `,
                    )
                    .join("")}
                </div>
              </div>
            </div>`;
  });
}

function openVideo(url, title) {
  const modal = document.getElementById("videoModal");
  const player = document.getElementById("mainVideoPlayer");
  document.getElementById("videoSource").src = url;
  document.getElementById("modalVideoTitle").innerText = title;
  player.load();
  modal.classList.remove("hidden");
  modal.classList.add("flex");
  document.body.style.overflow = "hidden";
  player.play();
}

function closeVideo() {
  const modal = document.getElementById("videoModal");
  document.getElementById("mainVideoPlayer").pause();
  modal.classList.add("hidden");
  modal.classList.remove("flex");
  document.body.style.overflow = "auto";
}

function toggleMilestone(id) {
  document.getElementById(id).classList.toggle("open");
  document.getElementById("icon-" + id).classList.toggle("rotate-180");
}

renderCurriculum();
