"use client";

import { useRouter } from "next/navigation";
import * as React from "react";
import { ContentCard } from "@/components/content-card";
import {
	Dialog,
	DialogContent,
	DialogDescription,
	DialogTitle,
} from "@/components/ui/dialog";
import { Spinner } from "@/components/ui/spinner";
import { ViewCounter } from "@/components/view-counter";
import { ContentService } from "@/services/content.service";
import type { Content } from "@/types/content";

export default function MemeModal({
	params,
}: {
	params: Promise<{ slug: string }>;
}) {
	const { slug } = React.use(params);
	const router = useRouter();
	const [content, setContent] = React.useState<Content | null>(null);
	const [loading, setLoading] = React.useState(true);

	React.useEffect(() => {
		ContentService.getOne(slug)
			.then(setContent)
			.catch(console.error)
			.finally(() => setLoading(false));
	}, [slug]);

	return (
		<Dialog open onOpenChange={(open) => !open && router.back()}>
			<DialogContent className="max-w-3xl p-0 overflow-hidden bg-transparent border-none">
				<DialogTitle className="sr-only">
					{content?.title || "Détail du mème"}
				</DialogTitle>
				<DialogDescription className="sr-only">
					Affiche le mème en grand avec ses détails
				</DialogDescription>
				{loading ? (
					<div className="h-[500px] flex items-center justify-center bg-zinc-950/50 rounded-lg">
						<Spinner className="h-10 w-10 text-white" />
					</div>
				) : content ? (
					<div className="bg-white dark:bg-zinc-900 rounded-lg overflow-hidden">
						<ViewCounter contentId={content.id} />
						<ContentCard content={content} />
					</div>
				) : (
					<div className="p-8 bg-white dark:bg-zinc-900 rounded-lg text-center">
						<p>Impossible de charger ce mème.</p>
					</div>
				)}
			</DialogContent>
		</Dialog>
	);
}