"use client";

import { useRobuxBalance } from "@/hooks/roblox/useRobuxBalance";
import { RobuxIcon } from "../roblox/RobloxIcons";
import React, { useState } from "react";
import { Separator } from "../ui/separator";
import { Bell, SettingsIcon, ShirtIcon } from "lucide-react";
import { StupidHoverThing } from "../util/MiscStuff";
import { toast } from "sonner";
import { OutfitSelector } from "./OutfitQuickChooser";
import { proxyFetch } from "@/lib/utils";
import { loadThumbnails } from "@/lib/thumbnailLoader";
import Link from "next/link";
import { useFriendsHome } from "@/hooks/roblox/useFriends";
import { useBestFriends } from "@/hooks/roblox/useBestFriends";
import { useCurrentAccount } from "@/hooks/roblox/useCurrentAccount";
import { useFriendsPresence } from "@/hooks/roblox/usePresence";

/**
requires csrf token cuz u cant use noblox.js on the web

either go to https://roblox.com/my/avataar or the app to change ur fit
*/
async function updateOutfit(outfit: { id: number }, acc: { id: number }) {
	try {
		const J = (await (
			await proxyFetch(
				`https://avatar.roblox.com/v3/outfits/${outfit.id}/details`
			)
		).json()) as {
			id: number;
			name: string;
			assets: any[];
		};
		await proxyFetch(
			`https://avatar.roblox.com/v1/avatar/set-wearing-assets`,
			{
				method: "POST",
				body: JSON.stringify({
					assetIds: J.assets.map((a) => a.id).filter((a) => !!a)
				})
			}
		);
		loadThumbnails([
			{
				type: "AvatarHeadShot",
				targetId: acc.id,
				format: "webp",
				size: "720x720"
			}
		]).catch((a) => {});
	} catch {}
}

export const QuickTopUI = React.memo(function () {
	const f = useFriendsHome();
	const bf = useBestFriends();
	useCurrentAccount();

	useFriendsPresence([...(f ? f : []), ...(bf ? bf : [])].map(a=>a.id))

	const robux = useRobuxBalance();
	const [isOutfitSelectorVisible, setIsOutfitSelectorVisible] =
		useState<boolean>(false);
	return (
		<>
			{isOutfitSelectorVisible ? (
				<OutfitSelector
					setVisible={setIsOutfitSelectorVisible}
					updateOutfit={updateOutfit}
				/>
			) : (
				<></>
			)}
			<div className="z-50 absolute top-4 right-4 p-4 flex gap-2 items-center text-blue/75">
				<StupidHoverThing text="Change Outfit">
					<button
						className="rounded-full bg-crust/50 flex items-center p-2"
						onClick={() => {
							setIsOutfitSelectorVisible((a) => !a);
						}}
					>
						<ShirtIcon />
					</button>
				</StupidHoverThing>

				<StupidHoverThing
					text={!robux ? "Loading..." : `You have ${robux} Robux`}
				>
					<div className="rounded-full bg-crust/50 flex items-center p-2">
						<RobuxIcon className="w-6 h-6" />
						{robux ? (
							<p className="pl-1">{robux.toLocaleString()}</p>
						) : (
							<></>
						)}
					</div>
				</StupidHoverThing>
			</div>
		</>
	);
});

export const QuickTopUILogoPart = React.memo(function () {
	return (
		<div className="z-[15] relative top-4 left-4 p-4 flex gap-4 items-center text-blue">
			<Link href="/" className="-m-1 w-8 h-8">
				<img src="/icon-512.webp" className="w-8 h-8" alt="" />
			</Link>
			<Link href="/test" className="mt-2">
				<p>{"ocbwoy3-chan's roblox"}</p>
			</Link>
		</div>
	);
});