import { type Accessor, createMemo, createSignal, For, type JSX, onCleanup, onMount, type Setter } from "solid-js";

type DropPosition = "before" | "after" | null;

interface DraggableListProps<T> {
	id?: string;
	items: Accessor<T[]>;
	setItems: Setter<T[]>;
	children: (
		item: T,
		index: number,
		handlers: {
			dragHandlers: {
				draggable: boolean;
				onDragStart: (e: DragEvent) => void;
				onTouchStart: (e: TouchEvent) => void;
			};
			isDragging: Accessor<boolean>;
			dropPosition: Accessor<DropPosition>;
		},
	) => JSX.Element;
}

export function DraggableList<T>(props: DraggableListProps<T>) {
	const [draggingItem, setDraggingItem] = createSignal<T | null>(null);
	const [dragStartIndex, setDragStartIndex] = createSignal<number | null>(null);
	const [dragOverIndex, setDragOverIndex] = createSignal<number | null>(null);

	let listRef!: HTMLDivElement;
	let rafId: number | null = null;
	let lastClientY = 0;
	let scrollInterval: undefined | number;

	function scheduleUpdate(clientY: number) {
		lastClientY = clientY;
		if (rafId != null) return;
		rafId = requestAnimationFrame(() => {
			updateDragOverIndex(lastClientY);
			rafId = null;
		});
	}

	function startAutoScrollLoop() {
		function step() {
			const rect = listRef.getBoundingClientRect();
			const edgeThreshold = 75;
			const scrollAmount = (distance: number) => Math.min(15, 1 + (distance / edgeThreshold) * 5);

			if (lastClientY < rect.top + edgeThreshold) {
				const distance = rect.top + edgeThreshold - lastClientY;
				listRef.scrollTop -= scrollAmount(distance);
			} else if (lastClientY > rect.bottom - edgeThreshold) {
				const distance = lastClientY - (rect.bottom - edgeThreshold);
				listRef.scrollTop += scrollAmount(distance);
			}

			scheduleUpdate(lastClientY);
		}

		//@ts-expect-error
		scrollInterval = setInterval(step, 10);
	}

	function stopAutoScrollLoop() {
		clearInterval(scrollInterval);
		scrollInterval = undefined;
	}

	function moveDraggedItem() {
		const items = props.items();
		const movedItem = draggingItem();
		const startIdx = dragStartIndex();
		const dropIdx = dragOverIndex();

		if (movedItem && startIdx != null && dropIdx != null && startIdx !== dropIdx) {
			const newItems = [...items];
			newItems.splice(startIdx, 1);
			const adjustedIndex = startIdx < dropIdx ? dropIdx - 1 : dropIdx;
			newItems.splice(adjustedIndex, 0, movedItem);
			props.setItems(newItems);
		}
	}

	function endDrag(move: boolean) {
		if (rafId) cancelAnimationFrame(rafId);
		rafId = null;
		stopAutoScrollLoop();
		if (move) moveDraggedItem();
		setDraggingItem(null);
		setDragStartIndex(null);
		setDragOverIndex(null);
	}

	function updateDragOverIndex(clientY: number) {
		const items = Array.from(listRef.querySelectorAll(".draggable-item")) as HTMLElement[];
		for (let i = 0; i < items.length; i++) {
			const rect = items[i].getBoundingClientRect();
			if (clientY < rect.top + rect.height / 2) {
				setDragOverIndex(i);
				return;
			}
		}
		setDragOverIndex(items.length);
	}

	function handleDragStart(item: T, index: number, dragElement: HTMLElement | null, e: DragEvent) {
		if (!dragElement) return;
		setDraggingItem(() => item);
		setDragStartIndex(index);
		if (!e.dataTransfer) return;
		e.dataTransfer.effectAllowed = "move";
		e.dataTransfer.setDragImage(dragElement, dragElement.offsetWidth / 20, dragElement.offsetHeight / 2);
	}

	function handleTouchStart(item: T, index: number, e: TouchEvent) {
		setDraggingItem(() => item);
		setDragStartIndex(index);
		lastClientY = e.touches[0].clientY;
	}

	function handleTouchMove(e: TouchEvent) {
		if (!draggingItem()) return;
		if (!scrollInterval) startAutoScrollLoop();
		e.preventDefault();
		scheduleUpdate(e.touches[0].clientY);
	}

	function handleDragOver(e: DragEvent) {
		e.preventDefault();
		scheduleUpdate(e.clientY);
		if (!e.dataTransfer) return;
		e.dataTransfer.dropEffect = "move";
	}

	function handleDrop(e: DragEvent) {
		e.preventDefault();
		endDrag(true);
	}

	onMount(() => {
		const cancelDrag = () => endDrag(false);
		const doDrag = () => endDrag(true);

		listRef.addEventListener("touchmove", handleTouchMove, { passive: false });
		listRef.addEventListener("touchend", doDrag);
		listRef.addEventListener("touchcancel", cancelDrag);

		onCleanup(() => {
			listRef?.removeEventListener("touchmove", handleTouchMove);
			listRef?.removeEventListener("touchend", doDrag);
			listRef?.removeEventListener("touchcancel", cancelDrag);
			stopAutoScrollLoop();
		});
	});

	return (
		<div
			id={props.id}
			class="draggable-list"
			ref={listRef}
			onDragOver={handleDragOver}
			onDrop={handleDrop}
			onDragEnd={() => endDrag(true)}
		>
			<For each={props.items()}>
				{(item, index) => {
					const isDragging = createMemo(() => draggingItem() === item);
					const dropPosition = createMemo(() => {
						const overIdx = dragOverIndex();
						return overIdx === index() ? "before" : overIdx === index() + 1 ? "after" : null;
					});

					return props.children(item, index(), {
						dragHandlers: {
							draggable: true,
							onDragStart: (e) => handleDragStart(item, index(), (e.currentTarget as HTMLElement)?.parentElement, e),
							onTouchStart: (e) => handleTouchStart(item, index(), e),
						},
						isDragging: isDragging,
						dropPosition: dropPosition,
					});
				}}
			</For>
			<div class="drop-area-end" />
		</div>
	);
}