import { memo } from 'react';
import { useQuery } from '@tanstack/react-query';
import { requestsApi } from '@/lib/api';

export const BookCard = memo(function BookCard({ book }: BookCardProps) {
  const { data: requests } = useQuery({
    queryKey: ['book-requests', book.hardcoverId],
    queryFn: () => requestsApi.getByHardcoverId(book.hardcoverId),
    enabled: !!book.hardcoverId,
    staleTime: 60_000,
  });

  return <div>{/* Component JSX */}</div>;
});

export function useTrendingBooks(limit = 12) {
  const booksQuery = useQuery({
    queryKey: ['hardcover', 'trending', limit],
    queryFn: () => getTrendingBooks(limit),
    staleTime: 24 * 60 * 60 * 1000,
  });

  const enrichedQuery = useQuery({
    queryKey: ['hardcover', 'trending', limit, 'availability'],
    queryFn: () => enrichAvailability(booksQuery.data!),
    enabled: !!booksQuery.data?.length,  // Chain to first query
  });

  return { ...booksQuery, data: enrichedQuery.data ?? booksQuery.data };
}

const { data } = useQuery({
  queryKey: ['requests', hardcoverId],
  queryFn: () => requestsApi.getByHardcoverId(hardcoverId),
  enabled: open && !!hardcoverId,  // Only fetch when dialog open AND ID exists
});

const queryClient = useQueryClient();

const mutation = useMutation({
  mutationFn: (data) => requestsApi.create(data),
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ['requests'] });
    queryClient.invalidateQueries({ queryKey: ['book-requests', hardcoverId] });
  },
});