"use client";

import * as React from "react";
import { useInfiniteScroll } from "@/app/(dashboard)/_hooks/use-infinite-scroll";
import { ContentCard } from "@/components/content-card";
import { Spinner } from "@/components/ui/spinner";
import type { Content, PaginatedResponse } from "@/types/content";

interface ContentListProps {
	fetchFn: (params: {
		limit: number;
		offset: number;
	}) => Promise<PaginatedResponse<Content>>;
	title?: string;
}

export function ContentList({ fetchFn, title }: ContentListProps) {
	const [contents, setContents] = React.useState<Content[]>([]);
	const [loading, setLoading] = React.useState(true);
	const [offset, setOffset] = React.useState(0);
	const [hasMore, setHasMore] = React.useState(true);

	const fetchInitial = React.useCallback(async () => {
		setLoading(true);
		try {
			const response = await fetchFn({
				limit: 10,
				offset: 0,
			});
			setContents(response.data);
			setOffset(0);
			setHasMore(response.data.length === 10);
		} catch (error) {
			console.error("Failed to fetch contents:", error);
		} finally {
			setLoading(false);
		}
	}, [fetchFn]);

	React.useEffect(() => {
		fetchInitial();
	}, [fetchInitial]);

	const loadMore = React.useCallback(async () => {
		if (!hasMore || loading) return;

		setLoading(true);
		try {
			const response = await fetchFn({
				limit: 10,
				offset: offset + 10,
			});

			setContents((prev) => [...prev, ...response.data]);
			setOffset((prev) => prev + 10);
			setHasMore(response.data.length === 10);
		} catch (error) {
			console.error("Failed to load more contents:", error);
		} finally {
			setLoading(false);
		}
	}, [offset, hasMore, loading, fetchFn]);

	const { loaderRef } = useInfiniteScroll({
		hasMore,
		loading,
		onLoadMore: loadMore,
	});

	return (
		<div className="max-w-2xl mx-auto py-8 px-4 space-y-8">
			{title && <h1 className="text-2xl font-bold">{title}</h1>}
			<div className="flex flex-col gap-6">
				{contents.map((content) => (
					<ContentCard key={content.id} content={content} onUpdate={fetchInitial} />
				))}
			</div>

			<div ref={loaderRef} className="py-8 flex justify-center">
				{loading && <Spinner className="h-8 w-8 text-primary" />}
				{!hasMore && contents.length > 0 && (
					<p className="text-muted-foreground text-sm italic">
						Vous avez atteint la fin ! 🐐
					</p>
				)}
				{!loading && contents.length === 0 && (
					<p className="text-muted-foreground text-sm italic">
						Aucun mème trouvé ici... pour l'instant !
					</p>
				)}
			</div>
		</div>
	);
}
