"use client";

import { useEffect } from "react";
import { useQuery } from "@tanstack/react-query";
import { notFound } from "next/navigation";
import { Separator } from "@/components/ui/separator";
import { getUserByUserId, UserProfileDetails } from "@/lib/profile";
import { UserProfileHeader } from "@/components/roblox/UserProfileHeader";
import { Skeleton } from "@/components/ui/skeleton";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { ShieldBanIcon } from "lucide-react";
import Link from "next/link";
import { useFriendsHome } from "@/hooks/roblox/useFriends";
import { FriendCarousel } from "@/components/roblox/FriendCarousel";

interface UserProfileContentProps {
	userId: string;
}

function ProfileMoreDetails({ profile }: { profile: UserProfileDetails }) {
	const theirFriends = useFriendsHome(profile.id.toString());

	return (
		<>
			{!theirFriends && <Skeleton className="w-full h-64" />}
			{/*
			//@ts-expect-error */}
			<FriendCarousel
				title={<span className="pl-4">Friends</span>}
				className="overflow-visible -ml-4"
				friends={theirFriends || []}
			/>
		</>
	);
}

export default function UserProfileContent({
	userId
}: UserProfileContentProps) {
	const { data: profile, isLoading } = useQuery({
		queryKey: ["user-profile", userId],
		queryFn: () => getUserByUserId(userId),
		enabled: !!userId
	});

	// Set dynamic document title
	useEffect(() => {
		if (profile?.displayName) {
			document.title = `${profile.displayName}'s profile | Roblox`;
		}
	}, [profile]);

	if (isLoading) return <div className="p-4">Loading user profile...</div>;
	if (!profile) notFound();

	return (
		<div className="p-4 space-y-6">
			<UserProfileHeader user={profile} />
			<Separator />
			<div className="break-all pl-4 whitespace-pre-line">
				{profile.description}
			</div>
			{profile.isBanned && (
				<>
					<div className="justify-center w-full pt-6">
						<Alert
							variant="default"
							className="bg-base/50 space-x-2"
						>
							<ShieldBanIcon />
							<AlertTitle>This user is banned</AlertTitle>
							<AlertDescription>
								Their Roblox account appears to be terminated
								from the platform. You can see their inventory
								and RAP history on{" "}
								<Link
									className="text-blue decoration-blue underline"
									href={`https://www.rolimons.com/player/${profile.id}`}
								>
									Rolimons
								</Link>
							</AlertDescription>
						</Alert>
					</div>
				</>
			)}
			{!profile.isBanned && <ProfileMoreDetails profile={profile} />}
		</div>
	);
}