"use client";

import { motion } from "motion/react";
import * as React from "react";
import { Button } from "@/components/ui/button";
import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuItem,
	DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Logo } from "@/components/ui/logo";
import { cn } from "@/lib/utils";

function useActiveItem(itemIds: string[]) {
	const [activeId, setActiveId] = React.useState<string | null>(null);

	React.useEffect(() => {
		const observer = new IntersectionObserver(
			(entries) => {
				for (const entry of entries) {
					if (entry.isIntersecting) {
						setActiveId(entry.target.id);
					}
				}
			},
			{ rootMargin: "0% 0% -80% 0%" }
		);

		for (const id of itemIds ?? []) {
			const element = document.getElementById(id);
			if (element) {
				observer.observe(element);
			}
		}

		return () => {
			for (const id of itemIds ?? []) {
				const element = document.getElementById(id);
				if (element) {
					observer.unobserve(element);
				}
			}
		};
	}, [itemIds]);

	return activeId;
}

export function DocsTableOfContents({
	toc,
	variant = "list",
	className,
}: {
	toc: {
		title?: React.ReactNode;
		url: string;
		depth: number;
	}[];
	variant?: "dropdown" | "list";
	className?: string;
}) {
	const [open, setOpen] = React.useState(false);
	const itemIds = React.useMemo(
		() => toc.map((item) => item.url.replace("#", "")),
		[toc]
	);
	const activeHeading = useActiveItem(itemIds);

	if (!toc?.length) {
		return null;
	}

	if (variant === "dropdown") {
		return (
			<DropdownMenu onOpenChange={setOpen} open={open}>
				<DropdownMenuTrigger asChild>
					<Button
						className={cn("h-8 md:h-7", className)}
						size="sm"
						variant="outline"
					>
						On This Page
					</Button>
				</DropdownMenuTrigger>
				<DropdownMenuContent
					align="start"
					className="no-scrollbar max-h-[70svh]"
				>
					{toc.map((item) => (
						<DropdownMenuItem
							asChild
							className="data-[depth=3]:pl-6 data-[depth=4]:pl-8"
							data-depth={item.depth}
							key={item.url}
							onClick={() => {
								setOpen(false);
							}}
						>
							<a href={item.url}>{item.title}</a>
						</DropdownMenuItem>
					))}
				</DropdownMenuContent>
			</DropdownMenu>
		);
	}

	return (
		<div className={cn("flex flex-col gap-2 p-4 pt-0 text-sm", className)}>
			<p className="sticky top-0 h-6 bg-background font-medium text-primary/80 text-xs">
				On this page
			</p>
			{toc.map((item) => (
				<a
					className="relative text-[0.8rem] text-muted-foreground no-underline transition-colors hover:text-foreground data-[depth=3]:pl-4 data-[depth=4]:pl-6 data-[active=true]:text-foreground"
					data-active={item.url === `#${activeHeading}`}
					data-depth={item.depth}
					href={item.url}
					key={item.url}
				>
					{item.url === `#${activeHeading}` && (
						<motion.div className="-left-7 absolute" layoutId="logo">
							<Logo className="size-4 text-cossistant-orange" />
						</motion.div>
					)}
					{item.title}
				</a>
			))}
		</div>
	);
}
