import { observer } from "mobx-react-lite";
import { useAccountStore } from "@/contexts/AccountContext";
import Plus from "@/icons/plus.svg?react";
import Books from "@/icons/books.svg?react";
import Discord from "@/icons/discord.svg?react";
import Profile from "@/icons/profile.svg?react";
import ThreeDots from "@/icons/three-dots.svg?react";

import { LINKS } from "@/lib/constants";
import { useEffect, useRef, useState, type ReactNode } from "react";
import { Button, type ButtonVariantType } from "../ui/button";
import { Link, useMatchRoute, useParams } from "@tanstack/react-router";

import Logo from "@/icons/logo.svg?react";
import LogoWithText from "@/icons/logo-with-text.svg?react";
import Sidebar from "@/icons/sidebar.svg?react";

interface MenuItemType extends ButtonVariantType {
	name: string;
	icon: ReactNode;
	path: string;
}

const MENU_ITEMS: MenuItemType[] = [
	{
		name: "New Chat",
		icon: <Plus className="scale-80" />,
		path: "/",
		variant: "primary",
	},
	{
		name: "All chats",
		icon: <Books className="scale-90" />,
		path: "/all-chats",
		variant: "secondary",
	},
	{
		name: "Support",
		icon: <Discord width={12} height={12} className="text-[#5865F2]" />,
		path: LINKS.discord,
		variant: "secondary",
	},
];

const MainMenu = observer(() => {
	const { isMainMenuOpen } = useAccountStore();

	return (
		<div
			data-open={isMainMenuOpen}
			className="w-[64px]  data-[open=true]:w-[227px] transition-all border-r  border-r border-fill-150"
		>
			<MainMenuContent />
		</div>
	);
});

const MOCK_CHATS = Array.from({ length: 20 }, (_, i) => ({
	id: i,
	title: `Chat ${i + 1}`,
}));

const MainMenuContent = observer(() => {
	const { isMainMenuOpen, setIsMainMenuOpen } = useAccountStore();
	const containerRef = useRef<HTMLDivElement>(null);
	const [hasScrolled, setHasScrolled] = useState(false);

	useEffect(() => {
		const container = containerRef.current;
		if (!container) return;

		const handleScroll = () => {
			setHasScrolled(container.scrollTop > 0);
		};

		container.addEventListener("scroll", handleScroll);
		handleScroll();

		return () => {
			container.removeEventListener("scroll", handleScroll);
		};
	}, []);

	return (
		<div
			data-open={isMainMenuOpen}
			ref={containerRef}
			className="relative w-full h-full overflow-x-hidden data-[open=true]:overflow-y-auto overflow-y-hidden flex flex-col"
		>
			<header
				data-scrolled={hasScrolled}
				className="data-[scrolled=true]:border-b data-[scrolled=true]:border-fill-150  sticky top-0 z-10 bg-white pt-[30px] space-y-12 flex flex-col w-full px-4 pb-4 transition-shadow"
			>
				<div className="relative w-full h-[32px]">
					{isMainMenuOpen ? (
						<div className="flex items-center justify-between w-full">
							<LogoWithText />
							<Button
								className="w-8 h-8 hover:cursor-w-resize"
								variant="ghost"
								onClick={() => setIsMainMenuOpen(false)}
							>
								<Sidebar />
							</Button>
						</div>
					) : (
						<div className="relative group px-1">
							<Logo className="transition-opacity duration-150 group-hover:opacity-0" />
							<Button
								className="w-8 h-8 absolute top-0 left-0 opacity-0 group-hover:opacity-100 transition-opacity duration-150 hover:cursor-e-resize"
								variant="ghost"
								onClick={() => setIsMainMenuOpen(true)}
							>
								<Sidebar />
							</Button>
						</div>
					)}
				</div>

				<div
					data-open={isMainMenuOpen}
					className="space-y-4 w-full data-[open=true]:flex data-[open=true]:flex-col data-[open=true]:items-center"
				>
					{MENU_ITEMS.map((item) => (
						<MenuItem item={item} key={item.name} />
					))}
				</div>
			</header>

			<div
				data-open={isMainMenuOpen}
				className="data-[open=false]:opacity-0 transition-opacity px-4 flex-1 mt-5"
			>
				<p className="text-text-light-200 font-[500] text-[14px] mb-2">
					Recent
				</p>

				<ul className=" pb-10">
					{MOCK_CHATS.map((chat) => (
						<ChatCell
							chat={{ id: chat.id.toString(), title: chat.title }}
							key={chat.id}
						/>
					))}
				</ul>
			</div>

			<footer className="sticky bottom-0 z-10 bg-white w-full p-4 border-t border-fill-150">
				<Button
					data-open={isMainMenuOpen}
					className="w-8 h-8 p-2 transition-all data-[open=true]:w-full data-[open=true]:h-10 items-center justify-start data-[open=true]:py-2 data-[open=true]:px-4"
					variant="secondary"
				>
					<Profile />
					<div
						data-open={isMainMenuOpen}
						className="data-[open=true]:opacity-100 opacity-0 transition-opacity duration-200 font-[500] text-[14px]"
					>
						username
					</div>
				</Button>
			</footer>
		</div>
	);
});

const MenuItem = ({ item }: { item: MenuItemType }) => {
	const { isMainMenuOpen } = useAccountStore();

	return (
		<Link
			to={item.path}
			className="group flex items-center gap-3 w-full whitespace-nowrap"
			viewTransition={{ types: ["warp"] }}
		>
			<Button
				data-variant={item.variant}
				variant={item.variant}
				className="w-8 h-8 data-[variant=secondary]:group-hover:bg-fill-150 data-[variant=primary]:group-hover:bg-fill-700 transition-colors"
			>
				{item.icon}
			</Button>
			<div
				data-open={isMainMenuOpen}
				className="data-[open=true]:opacity-100 opacity-0 transition-opacity duration-200 font-[500] text-[14px]"
			>
				{item.name}
			</div>
		</Link>
	);
};

const ChatCell = ({ chat }: { chat: { id: string; title: string } }) => {
	const matchRoute = useMatchRoute();
	const match = matchRoute({ to: "/interaction-panel/$id", fuzzy: true });

	const activeChatId = match ? match.id : undefined;

	return (
		<div
			data-active={activeChatId === chat.id}
			className="data-[active=true]:bg-fill-150 block rounded-md h-10  hover:bg-fill-100 cursor-pointer transition-colors group flex items-center"
		>
			<Link
				to="/interaction-panel/$id"
				params={{ id: chat.id }}
				viewTransition={{ types: ["warp"] }}
				key={chat.id}
				className="flex-1  h-full items-center flex pl-3"
			>
				<div className="text-sm font-medium text-text-light-900 truncate">
					{chat.title}
				</div>
			</Link>

			<button
				className="opacity-0 group-hover:opacity-100 duration-300 cursor-pointer flex items-center pr-3  justify-end   w-5 h-full"
				type="button"
			>
				<ThreeDots />
			</button>
		</div>
	);
};

export { MainMenu, MenuItem, MENU_ITEMS, MainMenuContent };
