import { XMarkIcon, BookOpenIcon } from "@heroicons/react/24/outline";
import {
	ChevronDownIcon,
	ClockIcon,
	PlayCircleIcon,
} from "@heroicons/react/24/outline";
import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
import React, { useState, useRef, useContext } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { SectionDto, TaxonomySlug } from "@nice/common";
import { SyllabusHeader } from "./SyllabusHeader";
import { SectionItem } from "./SectionItem";
import { CollapsedButton } from "./CollapsedButton";
import { CourseDetailContext } from "../CourseDetailContext";
import { api } from "@nice/client";

interface CourseSyllabusProps {
	sections: SectionDto[];
	onLectureClick?: (lectureId: string) => void;
	isOpen: boolean;
	onToggle: () => void;
}

export const CourseSyllabus: React.FC<CourseSyllabusProps> = ({
	sections,
	onLectureClick,
	isOpen,
	onToggle,
}) => {
	const { isHeaderVisible } = useContext(CourseDetailContext);
	const [expandedSections, setExpandedSections] = useState<string[]>([]);
	const sectionRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});
	// api.term.findMany.useQuery({
	// 	where: {
	// 		taxonomy: { slug: TaxonomySlug.CATEGORY },
	// 	},
	// });
	const toggleSection = (sectionId: string) => {
		setExpandedSections((prev) =>
			prev.includes(sectionId)
				? prev.filter((id) => id !== sectionId)
				: [...prev, sectionId]
		);

		setTimeout(() => {
			sectionRefs.current[sectionId]?.scrollIntoView({
				behavior: "smooth",
				block: "start",
			});
		}, 100);
	};

	return (
		<>
			<AnimatePresence>
				{/* 收起时的悬浮按钮 */}
				{!isOpen && (
					<motion.div
						initial={{ opacity: 0 }}
						animate={{ opacity: 1 }}
						exit={{ opacity: 0 }}
						className="fixed top-1/3 right-0 -translate-y-1/2 z-20">
						<CollapsedButton onToggle={onToggle} />
					</motion.div>
				)}
			</AnimatePresence>
			<motion.div
				initial={false}
				animate={{
					width: isOpen ? "25%" : "0",
					right: 0,
					top: isHeaderVisible ? "64px" : "0",
				}}
				className="fixed top-0 bottom-0 z-20 bg-white shadow-xl">
				<AnimatePresence>
					{isOpen && (
						<motion.div
							initial={{ opacity: 0, x: 20 }}
							animate={{ opacity: 1, x: 0 }}
							exit={{ opacity: 0, x: 20 }}
							className="h-full flex flex-col">
							<SyllabusHeader onToggle={onToggle} />

							<div className="flex-1 overflow-y-auto p-4">
								<div className="space-y-4">
									{sections.map((section, index) => (
										<SectionItem
											key={section.id}
											ref={(el) =>
												(sectionRefs.current[
													section.id
												] = el)
											}
											index={index + 1}
											section={section}
											isExpanded={expandedSections.includes(
												section.id
											)}
											onToggle={toggleSection}
											onLectureClick={onLectureClick}
										/>
									))}
								</div>
							</div>
						</motion.div>
					)}
				</AnimatePresence>
			</motion.div>
		</>
	);
};