import { useState } from "react";
import {
	DragDropProvider,
	type DragDropProviderProps,
	Draggable,
	Droppable,
} from "@/components/course-interactions/drag-drop";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/cn";
import { useScale } from "@/utils";
import type {
	DragDemoItem,
	DragDemoZone,
	DragDropDemoResult,
} from "./DragDropDemo.types";

const dragItems = [
	{
		id: "apple",
		label: "苹果",
		description: "富含维生素的水果",
		icon: "🍎",
		tone: "rose",
		targetZoneId: "fruit-zone",
	},
	{
		id: "banana",
		label: "香蕉",
		description: "常见的热带水果",
		icon: "🍌",
		tone: "lime",
		targetZoneId: "fruit-zone",
	},
	{
		id: "car",
		label: "汽车",
		description: "陆地出行工具",
		icon: "🚗",
		tone: "blue",
		targetZoneId: "traffic-zone",
	},
	{
		id: "bike",
		label: "自行车",
		description: "绿色低碳出行工具",
		icon: "🚲",
		tone: "cyan",
		targetZoneId: "traffic-zone",
	},
	{
		id: "book",
		label: "书本",
		description: "阅读和学习资料",
		icon: "📘",
		tone: "amber",
		targetZoneId: "study-zone",
	},
	{
		id: "pencil",
		label: "铅笔",
		description: "书写和绘画工具",
		icon: "✏️",
		tone: "indigo",
		targetZoneId: "study-zone",
	},
] satisfies DragDemoItem[];

const dropZones = [
	{
		id: "fruit-zone",
		title: "水果类",
		description: "把可以食用的水果放到这里",
		icon: "🍓",
		tone: "emerald",
	},
	{
		id: "traffic-zone",
		title: "交通工具",
		description: "把出行相关物品放到这里",
		icon: "🚌",
		tone: "sky",
	},
	{
		id: "study-zone",
		title: "学习用品",
		description: "把学习和书写用品放到这里",
		icon: "🎒",
		tone: "violet",
	},
] satisfies DragDemoZone[];

const dragItemClassNames = {
	rose: "border-rose-200 bg-rose-50 text-rose-700 shadow-rose-100",
	blue: "border-blue-200 bg-blue-50 text-blue-700 shadow-blue-100",
	amber: "border-amber-200 bg-amber-50 text-amber-700 shadow-amber-100",
	lime: "border-lime-200 bg-lime-50 text-lime-700 shadow-lime-100",
	cyan: "border-cyan-200 bg-cyan-50 text-cyan-700 shadow-cyan-100",
	indigo: "border-indigo-200 bg-indigo-50 text-indigo-700 shadow-indigo-100",
};

const zoneIconClassNames = {
	emerald: "bg-emerald-100 text-emerald-600",
	sky: "bg-sky-100 text-sky-600",
	violet: "bg-violet-100 text-violet-600",
};

const zoneOverClassNames = {
	emerald:
		"border-emerald-400 bg-emerald-50 shadow-[0_0_0_6px_rgba(16,185,129,0.10),0_18px_45px_rgba(16,185,129,0.16)]",
	sky: "border-sky-400 bg-sky-50 shadow-[0_0_0_6px_rgba(14,165,233,0.10),0_18px_45px_rgba(14,165,233,0.16)]",
	violet:
		"border-violet-400 bg-violet-50 shadow-[0_0_0_6px_rgba(139,92,246,0.10),0_18px_45px_rgba(139,92,246,0.16)]",
};

const findDragItem = (itemId: string) =>
	dragItems.find((item) => item.id === itemId);

const getZoneTotal = (zoneId: string) =>
	dragItems.filter((item) => item.targetZoneId === zoneId).length;

const renderDragItem = (item: DragDemoItem, className?: string) => (
	<div
		className={cn(
			"flex h-16 items-center gap-3 rounded-2xl border px-4 font-medium shadow-sm select-none",
			dragItemClassNames[item.tone],
			className,
		)}
	>
		<span className="flex size-10 items-center justify-center rounded-full bg-white/70 text-xl shadow-sm">
			{item.icon}
		</span>
		<span className="min-w-0">
			<span className="block truncate">{item.label}</span>
			<span className="mt-0.5 block truncate text-xs opacity-70">
				{item.description}
			</span>
		</span>
	</div>
);

const renderPlacedItem = (item: DragDemoItem) => (
	<div
		className={cn(
			"flex items-center gap-2 rounded-xl border px-3 py-2 text-sm font-medium shadow-sm",
			dragItemClassNames[item.tone],
		)}
	>
		<span className="flex size-7 items-center justify-center rounded-full bg-white/70 text-base shadow-sm">
			{item.icon}
		</span>
		<span>{item.label}</span>
	</div>
);

export function DragDropDemo() {
	const scale = useScale();
	const [dropResult, setDropResult] = useState<DragDropDemoResult>(null);
	const [placedItemIds, setPlacedItemIds] = useState<Record<string, string[]>>(
		{},
	);
	const placedIds = Object.values(placedItemIds).flat();
	const placedCount = placedIds.length;
	const progress = Math.round((placedCount / dragItems.length) * 100);
	const isCompleted = placedCount === dragItems.length;

	const handleDragEnd: DragDropProviderProps["onDragEnd"] = (event) => {
		if (isCompleted) {
			return;
		}

		const draggedId = String(event.active.id);
		const droppedId = event.over ? String(event.over.id) : null;
		const draggedItem = findDragItem(draggedId);

		if (!droppedId || !draggedItem) {
			setDropResult({
				type: "error",
				message: "没有放入目标区域，请再试一次。",
			});
			return;
		}

		if (placedIds.includes(draggedId)) {
			return;
		}

		if (draggedItem.targetZoneId !== droppedId) {
			setDropResult({
				type: "error",
				message: `还不对：${draggedItem.label} 不属于这个分类。`,
			});
			return;
		}

		const nextPlacedItemIds = {
			...placedItemIds,
			[droppedId]: [...(placedItemIds[droppedId] ?? []), draggedId],
		};
		const nextPlacedCount = Object.values(nextPlacedItemIds).flat().length;

		setPlacedItemIds(nextPlacedItemIds);
		setDropResult({
			type: "success",
			message:
				nextPlacedCount === dragItems.length
					? "全部分类完成，做得很好！"
					: `答对了：${draggedItem.label} 已放入正确分类。`,
		});
	};

	const handleDragStart = () => {
		if (!isCompleted) {
			setDropResult(null);
		}
	};

	const handleDragCancel = () => {
		if (!isCompleted) {
			setDropResult(null);
		}
	};

	const handleRetry = () => {
		setDropResult(null);
		setPlacedItemIds({});
	};

	return (
		<section className="overflow-hidden rounded-3xl border border-slate-200 bg-gradient-to-br from-slate-50 to-white shadow-sm">
			<div className="border-slate-200 border-b bg-white/80 px-6 py-5">
				<div className="flex flex-wrap items-end justify-between gap-4">
					<div className="space-y-2">
						<p className="text-sm font-semibold text-sky-600">
							Interactive Course Demo
						</p>
						<h2 className="text-2xl font-semibold text-slate-950">
							Drag and Drop 分类挑战
						</h2>
						<p className="max-w-2xl text-slate-500">
							将左侧物品拖入右侧正确分类。拖拽预览使用自定义
							DragOverlay，释放区根据是否匹配给出颜色反馈。
						</p>
					</div>
					<div className="flex items-center gap-2">
						<div className="rounded-full bg-slate-100 px-3 py-1 text-xs font-medium text-slate-500">
							完成 {placedCount}/{dragItems.length}
						</div>
						<div className="rounded-full bg-slate-100 px-3 py-1 text-xs font-medium text-slate-500">
							scale {scale.toFixed(3)}
						</div>
					</div>
				</div>

				<div className="mt-5 h-2 overflow-hidden rounded-full bg-slate-100">
					<div
						className="h-full rounded-full bg-gradient-to-r from-sky-400 to-emerald-400 transition-[width] duration-300"
						style={{ width: `${progress}%` }}
					/>
				</div>
			</div>

			<div className="p-6">
				<DragDropProvider
					scale={scale}
					onDragStart={handleDragStart}
					onDragEnd={handleDragEnd}
					onDragCancel={handleDragCancel}
					renderOverlay={({ activeId }) => {
						const activeItem = findDragItem(String(activeId));

						return activeItem
							? renderDragItem(
									activeItem,
									"pointer-events-none w-[300px] shadow-xl ring-4 ring-white/70",
								)
							: null;
					}}
				>
					<div className="grid gap-5 lg:grid-cols-[320px_1fr]">
						<div className="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
							<div className="mb-4 flex items-start justify-between gap-3">
								<div>
									<div className="text-sm font-semibold text-slate-800">
										待分类物品
									</div>
									<div className="mt-1 text-xs text-slate-400">
										拖动物品到右侧对应区域
									</div>
								</div>
								<div className="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-medium text-slate-500">
									{dragItems.length - placedCount} left
								</div>
							</div>

							<div className="grid gap-3">
								{dragItems
									.filter((item) => !placedIds.includes(item.id))
									.map((item) => (
										<Draggable
											key={item.id}
											id={item.id}
											disabled={isCompleted}
										>
											{renderDragItem(item)}
										</Draggable>
									))}
								{isCompleted && (
									<div className="rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm font-medium text-emerald-700">
										所有物品都已完成分类
									</div>
								)}
							</div>
						</div>

						<div className="grid gap-4 xl:grid-cols-3">
							{dropZones.map((zone) => {
								const zonePlacedIds = placedItemIds[zone.id] ?? [];
								const placedItems = zonePlacedIds
									.map((itemId) => findDragItem(itemId))
									.filter((item): item is DragDemoItem => Boolean(item));
								const zoneTotal = getZoneTotal(zone.id);

								return (
									<Droppable
										key={zone.id}
										id={zone.id}
										canDrop={(activeId) => {
											const activeItem = findDragItem(String(activeId));

											return (
												activeItem?.targetZoneId === zone.id &&
												!zonePlacedIds.includes(String(activeId))
											);
										}}
										className={({ isOver, canDrop }) =>
											cn(
												"min-h-80 rounded-3xl border-2 border-dashed border-slate-300 bg-white p-5 transition-[background-color,border-color,box-shadow] duration-150",
												isOver && canDrop && zoneOverClassNames[zone.tone],
												isOver &&
													!canDrop &&
													"border-rose-300 bg-rose-50 shadow-[0_0_0_6px_rgba(244,63,94,0.08)]",
											)
										}
									>
										<div className="flex h-full flex-col">
											<div className="mb-4 flex items-start justify-between gap-3">
												<div>
													<div
														className={cn(
															"mb-3 flex size-12 items-center justify-center rounded-2xl text-xl",
															zoneIconClassNames[zone.tone],
														)}
													>
														{zone.icon}
													</div>
													<div className="font-semibold text-slate-800">
														{zone.title}
													</div>
													<div className="mt-1 text-sm text-slate-400">
														{zone.description}
													</div>
												</div>
												<div className="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-medium text-slate-500">
													{placedItems.length}/{zoneTotal}
												</div>
											</div>

											<div className="mt-auto grid gap-2">
												{placedItems.length > 0 ? (
													placedItems.map((item) => (
														<div key={item.id}>{renderPlacedItem(item)}</div>
													))
												) : (
													<div className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-5 text-center text-sm text-slate-400">
														等待放入正确物品
													</div>
												)}
											</div>
										</div>
									</Droppable>
								);
							})}
						</div>
					</div>
				</DragDropProvider>

				{dropResult && (
					<div
						className={cn(
							"mt-4 flex items-center justify-between gap-3 rounded-2xl border bg-white px-4 py-3 text-sm shadow-sm",
							dropResult.type === "success"
								? "border-emerald-200 text-emerald-700"
								: "border-rose-200 text-rose-600",
						)}
					>
						<span>{dropResult.message}</span>
						<Button size="sm" variant="ghost" onClick={handleRetry}>
							重试
						</Button>
					</div>
				)}
			</div>
		</section>
	);
}