"use client";

import {
	BestFriendsHomeSect,
	FriendsHomeSect
} from "@/components/roblox/FriendsOnline";
import { GameCard } from "@/components/roblox/GameCard";
import { HomeLoggedInHeader } from "@/components/site/HomeUserHeader";
import { Card, CardContent } from "@/components/ui/card";
import { getOmniRecommendationsHome } from "@/lib/omniRecommendation";
import { getThumbnails, ThumbnailRequest } from "@/lib/thumbnailLoader";
import { useQuery, useQueryClient } from "@tanstack/react-query";

export default function Home() {
	const SORTS_ALLOWED_IDS = [100000003, 100000001];
	const queryClient = useQueryClient();

	const { data: rec, isLoading } = useQuery({
		queryKey: ["omni-recommendations"],
		queryFn: async () => {
			const r = await getOmniRecommendationsHome();
			if (r) {
				// Prefetch game thumbnails into React Query cache
				const gameRequests: ThumbnailRequest[] = Object.entries(
					r.contentMetadata.Game
				).map(([_, g]) => ({
					type: "GameThumbnail" as const,
					targetId: Number(g.rootPlaceId),
					format: "webp",
					size: "384x216"
				}));

				await queryClient.prefetchQuery({
					queryKey: [
						"thumbnails",
						gameRequests.map((r) => r.targetId)
					],
					queryFn: () => getThumbnails(gameRequests)
				});
			}
			return r;
		},
		staleTime: 1000 * 60 * 5, // 5 minutes
		refetchOnWindowFocus: false
	});

	return (
		<>
			<HomeLoggedInHeader />
			<div className="h-4" />
			<div className="mx-auto w-full max-w-6xl px-4 sm:px-8">
				<BestFriendsHomeSect className="pt-2" />
				<FriendsHomeSect className="pt-2" />
			</div>
			{/* <div className="justify-center w-screen px-8 pt-6">
				<Alert variant="default" className="bg-base/50 space-x-2">
					<AlertTriangleIcon />
					<AlertTitle>Warning</AlertTitle>
					<AlertDescription>
						This is work in progress, you can follow the development
						process on GitHub.
					</AlertDescription>
				</Alert>
			</div> */}

			<div className="mx-auto w-full max-w-6xl px-4 sm:px-8 pb-16 space-y-10 no-scrollbar">
				{isLoading ? (
					<div className="space-y-6">
						<div className="h-6 w-56 bg-surface0/60 rounded-lg animate-pulse" />
						<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
							{Array.from({ length: 4 }).map((_, index) => (
								<Card key={`home-skeleton-${index}`}>
									<CardContent className="p-4 space-y-3">
										<div className="aspect-video rounded-xl bg-surface0/60 animate-pulse" />
										<div className="h-4 w-2/3 rounded bg-surface0/60 animate-pulse" />
										<div className="h-3 w-1/3 rounded bg-surface0/60 animate-pulse" />
									</CardContent>
								</Card>
							))}
						</div>
					</div>
				) : !rec ? (
					<Card>
						<CardContent className="p-6 text-sm text-subtext1">
							We could not load recommendations right now. Try
							again in a moment.
						</CardContent>
					</Card>
				) : (
					rec.sorts
						.filter((a) => SORTS_ALLOWED_IDS.includes(a.topicId))
						.map((sort, idx) => (
							<section key={idx} className="space-y-4">
								<div className="flex items-center justify-between">
									<h2 className="text-xl sm:text-2xl font-semibold text-text">
										{sort.topic}
									</h2>
								</div>
								<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
									{(sort.recommendationList || []).map(
										(recommendation, idxb) => {
											const game =
												rec.contentMetadata.Game[
													recommendation.contentId.toString()
												];
											return (
												<GameCard
													key={idxb}
													game={game}
												/>
											);
										}
									)}
								</div>
							</section>
						))
				)}
			</div>
		</>
	);
}