import {
	BellIcon,
	ComposeFilledIcon,
	HorizontalDotsIcon,
	PlusIcon,
	SearchIcon,
} from "@lume/icons";
import { Event, Kind } from "@lume/types";
import { User } from "@/components/user";
import {
	cn,
	decodeZapInvoice,
	displayNpub,
	sendNativeNotification,
} from "@lume/utils";
import { Outlet, createFileRoute } from "@tanstack/react-router";
import { invoke } from "@tauri-apps/api/core";
import { getCurrent } from "@tauri-apps/api/window";
import { useEffect, useMemo, useState } from "react";
import { toast } from "sonner";
import * as Popover from "@radix-ui/react-popover";

export const Route = createFileRoute("/$account")({
	beforeLoad: async ({ context }) => {
		const ark = context.ark;
		const accounts = await ark.get_all_accounts();

		return { accounts };
	},
	component: Screen,
});

function Screen() {
	const { ark, platform } = Route.useRouteContext();
	const navigate = Route.useNavigate();

	return (
		<div className="flex h-screen w-screen flex-col">
			<div
				data-tauri-drag-region
				className={cn(
					"flex h-11 shrink-0 items-center justify-between pr-2",
					platform === "macos" ? "ml-2 pl-20" : "pl-4",
				)}
			>
				<div className="flex items-center gap-3">
					<Accounts />
					<button
						type="button"
						onClick={() => navigate({ to: "/landing/" })}
						className="inline-flex size-8 shrink-0 items-center justify-center rounded-full bg-black/10 text-neutral-800 hover:bg-black/20 dark:bg-white/10 dark:text-neutral-200 dark:hover:bg-white/20"
					>
						<PlusIcon className="size-5" />
					</button>
				</div>
				<div className="flex items-center gap-2">
					<button
						type="button"
						onClick={() => ark.open_editor()}
						className="inline-flex h-8 w-max items-center justify-center gap-1 rounded-full bg-blue-500 px-3 text-sm font-medium text-white hover:bg-blue-600"
					>
						<ComposeFilledIcon className="size-4" />
						New Post
					</button>
					<Bell />
					<button
						type="button"
						onClick={() => ark.open_search()}
						className="inline-flex size-8 items-center justify-center rounded-full text-neutral-800 hover:bg-black/10 dark:text-neutral-200 dark:hover:bg-white/10"
					>
						<SearchIcon className="size-5" />
					</button>
					<div id="toolbar" />
				</div>
			</div>
			<div className="flex-1">
				<Outlet />
			</div>
		</div>
	);
}

function Accounts() {
	const { ark, accounts } = Route.useRouteContext();
	const { account } = Route.useParams();

	const [windowWidth, setWindowWidth] = useState<number>(null);

	const navigate = Route.useNavigate();
	const sortedList = useMemo(() => {
		const list = accounts;

		for (const [i, item] of list.entries()) {
			if (item === account) {
				list.splice(i, 1);
				list.unshift(item);
			}
		}

		return list;
	}, [accounts]);

	const changeAccount = async (npub: string) => {
		if (npub === account) {
			return await ark.open_profile(account);
		}

		// change current account and update signer
		const select = await ark.load_selected_account(npub);

		if (select) {
			return navigate({ to: "/$account/home", params: { account: npub } });
		} else {
			toast.warning("Something wrong.");
		}
	};

	const getWindowDimensions = () => {
		const { innerWidth: width, innerHeight: height } = window;
		return {
			width,
			height,
		};
	};

	useEffect(() => {
		function handleResize() {
			setWindowWidth(getWindowDimensions().width);
		}

		if (!windowWidth) setWindowWidth(getWindowDimensions().width);
		window.addEventListener("resize", handleResize);

		return () => window.removeEventListener("resize", handleResize);
	}, []);

	return (
		<div data-tauri-drag-region className="flex items-center gap-3">
			{sortedList
				.slice(0, windowWidth > 500 ? account.length : 2)
				.map((user) => (
					<button key={user} type="button" onClick={() => changeAccount(user)}>
						<User.Provider pubkey={user}>
							<User.Root
								className={cn(
									"shrink-0 rounded-full transition-all ease-in-out duration-150 will-change-auto",
									user === account
										? "ring-1 ring-teal-500 ring-offset-2 ring-offset-neutral-200 dark:ring-offset-neutral-950"
										: "",
								)}
							>
								<User.Avatar
									className={cn(
										"aspect-square h-auto rounded-full object-cover transition-all ease-in-out duration-150 will-change-auto",
										user === account ? "w-7" : "w-8",
									)}
								/>
							</User.Root>
						</User.Provider>
					</button>
				))}
			{accounts.length >= 3 && windowWidth <= 700 ? (
				<Popover.Root>
					<Popover.Trigger className="inline-flex size-8 shrink-0 items-center justify-center rounded-full bg-black/10 text-neutral-800 hover:bg-black/20 dark:bg-white/10 dark:text-neutral-200 dark:hover:bg-white/20">
						<HorizontalDotsIcon className="size-5" />
					</Popover.Trigger>
					<Popover.Portal>
						<Popover.Content className="flex h-11 select-none items-center justify-center rounded-md bg-neutral-950 p-1 text-sm text-neutral-50 will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade dark:bg-neutral-50 dark:text-neutral-950">
							{sortedList.slice(2).map((user) => (
								<button
									key={user}
									type="button"
									onClick={() => changeAccount(user)}
									className="size-9 inline-flex items-center justify-center hover:bg-white/10 rounded-md"
								>
									<User.Provider pubkey={user}>
										<User.Root className="rounded-full ring-1 ring-white/10">
											<User.Avatar className="size-7 aspect-square h-auto rounded-full object-cover" />
										</User.Root>
									</User.Provider>
								</button>
							))}
							<Popover.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
						</Popover.Content>
					</Popover.Portal>
				</Popover.Root>
			) : null}
		</div>
	);
}

function Bell() {
	const { ark } = Route.useRouteContext();
	const { account } = Route.useParams();

	const [count, setCount] = useState(0);

	useEffect(() => {
		const unlisten = getCurrent().listen<string>(
			"activity",
			async (payload) => {
				setCount((prevCount) => prevCount + 1);
				await invoke("set_badge", { count });

				const event: Event = JSON.parse(payload.payload);
				const user = await ark.get_profile(event.pubkey);
				const userName =
					user.display_name || user.name || displayNpub(event.pubkey, 16);

				switch (event.kind) {
					case Kind.Text: {
						sendNativeNotification("Mentioned you in a note", userName);
						break;
					}
					case Kind.Repost: {
						sendNativeNotification("Reposted your note", userName);
						break;
					}
					case Kind.ZapReceipt: {
						const amount = decodeZapInvoice(event.tags);
						sendNativeNotification(
							`Zapped ₿ ${amount.bitcoinFormatted}`,
							userName,
						);
						break;
					}
					default:
						break;
				}
			},
		);

		return () => {
			unlisten.then((f) => f());
		};
	}, []);

	return (
		<button
			type="button"
			onClick={() => {
				setCount(0);
				ark.open_activity(account);
			}}
			className="relative inline-flex size-8 items-center justify-center rounded-full text-neutral-800 hover:bg-black/10 dark:text-neutral-200 dark:hover:bg-white/10"
		>
			<BellIcon className="size-5" />
			{count > 0 ? (
				<span className="absolute right-0 top-0 block size-2 rounded-full bg-teal-500 ring-1 ring-black/5" />
			) : null}
		</button>
	);
}