"use client";

import { useState, useEffect } from "react";
import Link from "next/link";
import { Section } from "../Section";
import { CURRICULUM_CONFIG } from "../../config/course";
import { canWatchLesson } from "../../lib/payment";
import { isBookmarked, toggleBookmark, getBookmarks, getCompletedLessons } from "../../lib/learning";

export function CurriculumSection() {
  const [expanded, setExpanded] = useState<Record<number, boolean>>(() =>
    Object.fromEntries(CURRICULUM_CONFIG.modules.map((_, i) => [i, i === 0]))
  );
  const [bookmarks, setBookmarks] = useState<Set<string>>(new Set());
  const [completed, setCompleted] = useState<Set<string>>(new Set());

  useEffect(() => {
    setBookmarks(getBookmarks());
    setCompleted(getCompletedLessons());
    const onB = () => setBookmarks(getBookmarks());
    const onP = () => setCompleted(getCompletedLessons());
    window.addEventListener("learning:bookmarks", onB);
    window.addEventListener("learning:progress", onP);
    return () => {
      window.removeEventListener("learning:bookmarks", onB);
      window.removeEventListener("learning:progress", onP);
    };
  }, []);

  const toggle = (i: number) => {
    setExpanded((prev) => ({ ...prev, [i]: !prev[i] }));
  };

  const allLessons = CURRICULUM_CONFIG.modules.flatMap((m, mi) =>
    m.lessons.map((l, li) => ({ moduleIndex: mi, lessonIndex: li, ...l, moduleTitle: m.title }))
  );
  const filteredByModule = CURRICULUM_CONFIG.modules.map((m, mi) => ({
    ...m,
    lessons: allLessons.filter((l) => l.moduleIndex === mi),
  }));

  return (
    <Section>
      <h2 className="mb-4 text-center text-xl font-bold sm:text-2xl md:text-3xl">
        {CURRICULUM_CONFIG.title}
      </h2>
      <p className="mb-6 text-center text-[var(--muted-foreground)] sm:mb-8 md:mb-10">
        {CURRICULUM_CONFIG.subtitle}
      </p>
      <div className="space-y-2 md:space-y-3">
        {filteredByModule.map((c, i) => {
          const moduleIndex = CURRICULUM_CONFIG.modules.findIndex((m) => m.title === c.title);
          const isOpen = expanded[moduleIndex] ?? true;
          return (
            <div
              key={c.title}
              className="animate__animated animate__fadeInUp overflow-hidden rounded-xl border border-[var(--border)] bg-[var(--card)] md:rounded-2xl"
              style={{ animationDelay: `${i * 0.06}s`, animationFillMode: "both" }}
            >
              <button
                type="button"
                onClick={() => toggle(moduleIndex)}
                className="flex w-full items-center justify-between gap-3 px-4 py-3 text-left transition hover:bg-[var(--muted)] sm:px-5 sm:py-4"
              >
                <span className="flex items-center gap-2 text-base font-semibold sm:text-lg">
                  <span
                    className={`transition-transform duration-200 ${isOpen ? "rotate-90" : ""}`}
                  >
                    ▶
                  </span>
                  <span>{c.emoji}</span>
                  {c.title}
                </span>
                <span className="text-sm text-[var(--muted-foreground)]">
                  {c.lessons.length} 节
                </span>
              </button>
              {isOpen && (
                <ul className="border-t border-[var(--border)]">
                  {c.lessons.map((l) => {
                    const free = false; /* 暂时全部加锁 */
                    const unlocked = canWatchLesson(l.moduleIndex, l.lessonIndex);
                    const key = `${l.moduleIndex}-${l.lessonIndex}`;
                    const bookmarked = isBookmarked(l.moduleIndex, l.lessonIndex);
                    const isCompleted = completed.has(key);
                    return (
                      <li key={key}>
                        <Link
                          href={`/cloudphone/course/${l.moduleIndex}/${l.lessonIndex}`}
                          className="flex flex-col gap-1 px-4 py-3 transition hover:bg-[var(--muted)] sm:flex-row sm:items-center sm:justify-between sm:px-5 sm:py-3"
                        >
                          <span className="flex items-center gap-2 truncate sm:gap-3">
                            <button
                              type="button"
                              onClick={(e) => {
                                e.preventDefault();
                                e.stopPropagation();
                                toggleBookmark(l.moduleIndex, l.lessonIndex);
                              }}
                              className="shrink-0 text-xs"
                              aria-label={bookmarked ? "取消收藏" : "收藏"}
                            >
                              {bookmarked ? "⭐" : "☆"}
                            </button>
                            <span className={unlocked ? "text-[var(--foreground)]" : "text-[var(--muted-foreground)]"}>
                              {l.name}
                            </span>
                            {free && (
                              <span className="shrink-0 rounded bg-[var(--accent)]/20 px-1.5 py-0.5 text-xs text-[var(--accent)]">
                                试看
                              </span>
                            )}
                            {isCompleted && (
                              <span className="shrink-0 rounded bg-green-500/20 px-1.5 py-0.5 text-xs text-green-600 dark:text-green-400">
                                ✓
                              </span>
                            )}
                            {!unlocked && (
                              <span className="shrink-0 text-xs text-[var(--muted-foreground)]">
                                🔒
                              </span>
                            )}
                          </span>
                          <span className="flex shrink-0 items-center gap-2 text-xs text-[var(--muted-foreground)] sm:text-sm">
                            {l.duration}
                            <span className="text-[var(--accent)]">→</span>
                          </span>
                        </Link>
                      </li>
                    );
                  })}
                </ul>
              )}
            </div>
          );
        })}
      </div>
    </Section>
  );
}