import { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import { Overlay } from "@/components/ui/overlay";
import { useToast } from "@/components/ui/toast";
import { getAppPortalRoot, useCourseCanvas } from "@/course/canvas";
import {
	DragDropProvider,
	type DragDropProviderProps,
	Draggable,
	Droppable,
} from "@/course/interactions/drag-drop";
import { cn } from "@/lib/cn";
import { useUserStore } from "@/stores";
import { getUserStorage, setUserStorage } from "@/utils/yiban";
import {
	courseCategories,
	courseResources,
	createEmptyProgress,
	parseProgress,
} from "./CourseDemo.data";
import { courseDemoDialog } from "./CourseDemo.dialog";
import { courseDemoSpotlight } from "./CourseDemo.spotlight";
import type { CourseFlowProgress } from "./CourseDemo.types";
import { CourseDemoGuideDialog } from "./CourseDemoGuideDialog";
import { CourseDemoGuideSpotlight } from "./CourseDemoGuideSpotlight";

const LESSON_ID = "course-flow";
const PROGRESS_KEY = "resource-classification";

export default function CourseDemo() {
	const { scale } = useCourseCanvas();
	const toast = useToast();
	const { courseId, userId, yibanConnectionStatus } = useUserStore();
	const [progress, setProgress] =
		useState<CourseFlowProgress>(createEmptyProgress);
	const [restored, setRestored] = useState(false);
	const [completionOpen, setCompletionOpen] = useState(false);
	const placedIds = Object.values(progress.placed).flat();
	const progressPercent = Math.round(
		(placedIds.length / courseResources.length) * 100,
	);

	useEffect(() => {
		let active = true;
		getUserStorage(LESSON_ID, PROGRESS_KEY)
			.then((result) => {
				if (!active || result.status !== "success") return;
				const savedProgress = parseProgress(result.content);
				if (savedProgress) setProgress(savedProgress);
			})
			.catch(() => {
				if (active) toast.warning("暂时无法恢复进度，将从本节开始学习。");
			})
			.finally(() => {
				if (active) setRestored(true);
			});
		return () => {
			active = false;
		};
	}, [toast]);

	const persistProgress = async (nextProgress: CourseFlowProgress) => {
		try {
			await setUserStorage(
				LESSON_ID,
				PROGRESS_KEY,
				JSON.stringify(nextProgress),
			);
		} catch {
			toast.warning("学习结果已保留在当前页面，远端同步稍后重试。");
		}
	};

	const handleDragEnd: DragDropProviderProps["onDragEnd"] = (event) => {
		const resource = courseResources.find(
			(item) => item.id === String(event.active.id),
		);
		const categoryId = event.over ? String(event.over.id) : null;
		if (!resource || !categoryId) {
			toast.error("请把资源放入一个分类区域。");
			return;
		}
		if (resource.category !== categoryId) {
			toast.error(`“${resource.title}”不属于这个分类，再想一想。`);
			return;
		}
		if (placedIds.includes(resource.id)) return;

		const placed = {
			...progress.placed,
			[resource.category]: [...progress.placed[resource.category], resource.id],
		};
		const completed =
			Object.values(placed).flat().length === courseResources.length;
		const nextProgress = {
			placed,
			completed,
			updatedAt: new Date().toISOString(),
		};
		setProgress(nextProgress);
		void persistProgress(nextProgress);
		toast.success(
			completed
				? "全部资源分类正确，本节练习已完成。"
				: `分类正确：${resource.title}`,
		);
		if (completed) setCompletionOpen(true);
	};

	const resetProgress = () => {
		const nextProgress = createEmptyProgress();
		setProgress(nextProgress);
		setCompletionOpen(false);
		void persistProgress(nextProgress);
		toast.info("练习已重置，可以重新完成分类。");
	};

	return (
		<>
			<div className="mx-auto max-w-7xl space-y-6 px-6 py-6 text-left">
				<header className="grid gap-6 rounded-3xl bg-gradient-to-br from-slate-950 via-blue-950 to-indigo-950 p-7 text-white shadow-xl lg:grid-cols-[1fr_360px] lg:items-center">
					<div className="space-y-3">
						<p className="text-sm font-semibold uppercase tracking-[0.28em] text-blue-200">
							学生资助政策 · 互动学习
						</p>
						<h1 className="text-4xl font-bold">建立你的课程资源地图</h1>
						<p className="max-w-3xl leading-7 text-blue-100">
							阅读每张资源卡片，将它拖入“政策学习、互动实践、学习支持”中的正确位置。
						</p>
						<div className="flex flex-wrap gap-3 pt-2">
							<Button onClick={() => courseDemoDialog.start()}>
								进入课程导入
							</Button>
							<Button
								variant="outline"
								onClick={() => courseDemoSpotlight.start()}
							>
								查看操作引导
							</Button>
						</div>
					</div>
					<div
						className="rounded-2xl border border-white/15 bg-white/10 p-5 backdrop-blur"
						data-guide="course-progress"
					>
						<div className="flex items-center justify-between text-sm text-blue-100">
							<span>本节进度</span>
							<strong>{progressPercent}%</strong>
						</div>
						<div className="mt-3 h-2 overflow-hidden rounded-full bg-white/15">
							<div
								className="h-full rounded-full bg-gradient-to-r from-cyan-300 to-emerald-300 transition-[width] duration-300"
								style={{ width: `${progressPercent}%` }}
							/>
						</div>
						<div className="mt-4 grid grid-cols-2 gap-3 text-xs text-blue-100">
							<span>
								已完成 {placedIds.length}/{courseResources.length}
							</span>
							<span className="text-right">
								{restored ? "进度已恢复" : "正在恢复进度"}
							</span>
							<span>scale {scale.toFixed(3)}</span>
							<span className="text-right">{yibanConnectionStatus}</span>
						</div>
					</div>
				</header>

				<DragDropProvider
					scale={scale}
					onDragEnd={handleDragEnd}
					renderOverlay={({ activeId }) => {
						const resource = courseResources.find(
							(item) => item.id === String(activeId),
						);
						return resource ? (
							<ResourceCard resource={resource} overlay />
						) : null;
					}}
				>
					<section className="grid gap-5 lg:grid-cols-[360px_1fr]">
						<aside
							className="rounded-3xl border border-slate-200 bg-white p-5 shadow-sm"
							data-guide="course-resources"
						>
							<div className="mb-4 flex items-center justify-between">
								<div>
									<p className="text-sm font-semibold text-blue-600">
										待分类资源
									</p>
									<h2 className="text-xl font-bold text-slate-950">资源卡片</h2>
								</div>
								<Button size="sm" variant="ghost" onClick={resetProgress}>
									重新开始
								</Button>
							</div>
							<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-1">
								{courseResources
									.filter((resource) => !placedIds.includes(resource.id))
									.map((resource) => (
										<Draggable
											key={resource.id}
											id={resource.id}
											data={{
												id: resource.id,
												title: resource.title,
												category: resource.category,
											}}
										>
											<ResourceCard resource={resource} />
										</Draggable>
									))}
								{progress.completed && (
									<p className="rounded-2xl bg-emerald-50 p-5 text-center text-sm font-medium text-emerald-700">
										所有资源都已进入正确分类。
									</p>
								)}
							</div>
						</aside>

						<main
							className="grid gap-4 md:grid-cols-3"
							data-guide="course-categories"
						>
							{courseCategories.map((category) => (
								<Droppable key={category.id} id={category.id}>
									{({ isOver }) => (
										<div
											className={cn(
												"flex min-h-[410px] flex-col rounded-3xl border-2 border-dashed bg-white p-5 shadow-sm transition",
												isOver
													? "border-blue-500 bg-blue-50 shadow-blue-100"
													: "border-slate-200",
											)}
										>
											<div className="text-3xl">{category.icon}</div>
											<h2 className="mt-3 text-xl font-bold text-slate-950">
												{category.title}
											</h2>
											<p className="mt-2 text-sm leading-6 text-slate-500">
												{category.description}
											</p>
											<div className="mt-5 space-y-3">
												{progress.placed[category.id].map((resourceId) => {
													const resource = courseResources.find(
														(item) => item.id === resourceId,
													);
													return resource ? (
														<ResourceCard
															key={resource.id}
															resource={resource}
															placed
														/>
													) : null;
												})}
											</div>
											<p className="mt-auto pt-5 text-xs font-medium text-slate-400">
												拖到这里完成分类
											</p>
										</div>
									)}
								</Droppable>
							))}
						</main>
					</section>
				</DragDropProvider>

				<footer className="flex flex-wrap items-center justify-between gap-3 rounded-2xl border border-slate-200 bg-white px-5 py-4 text-sm text-slate-500">
					<span>
						课程 {courseId ?? "本地预览"} · 学员 {userId ?? "访客"}
					</span>
					<span>每次正确分类都会自动保存，刷新页面后继续学习。</span>
				</footer>
			</div>

			<Overlay
				open={completionOpen}
				onClose={() => setCompletionOpen(false)}
				container={getAppPortalRoot}
				contentClassName="flex items-center justify-center p-8"
			>
				<div className="w-[560px] max-w-full rounded-3xl bg-white p-8 text-center shadow-2xl">
					<div className="text-5xl">🎉</div>
					<p className="mt-4 text-sm font-semibold text-emerald-600">
						本节完成
					</p>
					<h2 className="mt-2 text-3xl font-bold text-slate-950">
						资源地图已建立
					</h2>
					<p className="mt-3 leading-7 text-slate-600">
						你已经能够区分政策材料、互动练习和学习支持资源。学习结果已保存，可以进入下一节课程。
					</p>
					<Button className="mt-6" onClick={() => setCompletionOpen(false)}>
						继续学习
					</Button>
				</div>
			</Overlay>
			<CourseDemoGuideDialog />
			<CourseDemoGuideSpotlight />
		</>
	);
}

function ResourceCard({
	resource,
	overlay = false,
	placed = false,
}: {
	resource: (typeof courseResources)[number];
	overlay?: boolean;
	placed?: boolean;
}) {
	return (
		<div
			className={cn(
				"flex items-start gap-3 rounded-2xl border border-slate-200 bg-white p-4 text-left shadow-sm",
				overlay &&
					"pointer-events-none w-[330px] shadow-xl ring-4 ring-blue-100",
				placed && "border-emerald-200 bg-emerald-50",
			)}
		>
			<span className="flex size-10 shrink-0 items-center justify-center rounded-xl bg-slate-100 text-xl">
				{resource.icon}
			</span>
			<span>
				<strong className="block text-sm text-slate-900">
					{resource.title}
				</strong>
				<span className="mt-1 block text-xs leading-5 text-slate-500">
					{resource.description}
				</span>
			</span>
		</div>
	);
}