import {
  useQuery,
  useInfiniteQuery,
  useQueryClient
} from '@tanstack/react-query';
import { useIntersectionObserver } from '../hooks/useIntersectionObserver';

// === 1. Basic Data Lookup ===
function LearningItem({ itemId }) {
  const {
    data,
    isLoading,
    isError,
    error,
    isFetching  // Background revalidation in progress
  } = useQuery({
    queryKey: ['learning-items', itemId],
    queryFn: async () => {
      const res = await fetch(`/api/items/${itemId}`);
      if (!res.ok) throw new Error('Failed to retrieve item');
      return res.json();
    },
    staleTime: 10 * 60 * 1000, // Fresh for 10 minutes
    enabled: !!itemId,
  });

  if (isLoading) return <Skeleton />;
  if (isError) return <ErrorMessage message={error.message} />;

  return (
    <article>
      {isFetching && <span className="refreshing">Refreshing...</span>}
      <h1>{data.title}</h1>
      <p>{data.content}</p>
    </article>
  );
}

// === 2. Infinite Scroll ===
function ItemList() {
  const {
    data,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
    isLoading
  } = useInfiniteQuery({
    queryKey: ['items'],
    queryFn: ({ pageParam = 0 }) =>
      fetch(`/api/items?cursor=${pageParam}&limit=20`).then(r => r.json()),
    getNextPageParam: (lastPage) => lastPage.nextCursor ?? undefined,
  });

  // Detect end of scroll with IntersectionObserver
  const [sentinelRef, isIntersecting] = useIntersectionObserver();

  React.useEffect(() => {
    if (isIntersecting && hasNextPage && !isFetchingNextPage) {
      fetchNextPage();
    }
  }, [isIntersecting, hasNextPage, isFetchingNextPage]);

  if (isLoading) return <Loading />;

  // pages: array of data for each page
  const allItems = data.pages.flatMap(page => page.items);

  return (
    <div>
      {allItems.map(item => (
        <ItemCard key={item.id} item={item} />
      ))}
      {/* Scroll detection sentinel */}
      <div ref={sentinelRef}>
        {isFetchingNextPage && <Spinner />}
        {!hasNextPage && <p>All items have been loaded.</p>}
      </div>
    </div>
  );
}

import { useMutation, useQueryClient } from '@tanstack/react-query';

// === Learning Progress Update + Optimistic Update ===
function ProgressButton({ itemId, isCompleted }) {
  const queryClient = useQueryClient();

  const toggleMutation = useMutation({
    mutationFn: async (completed) => {
      const res = await fetch(`/api/progress/${itemId}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ completed })
      });
      if (!res.ok) throw new Error('Failed to update progress');
      return res.json();
    },

    // Optimistic update: UI changes immediately before response
    onMutate: async (completed) => {
      // Cancel ongoing queries
      await queryClient.cancelQueries({ queryKey: ['progress', itemId] });

      // Snapshot for rollback
      const previousProgress = queryClient.getQueryData(['progress', itemId]);

      // Update UI immediately
      queryClient.setQueryData(['progress', itemId], old => ({
        ...old,
        completed,
        completedAt: completed ? new Date().toISOString() : null
      }));

      return { previousProgress };
    },

    // Rollback on error
    onError: (err, completed, context) => {
      queryClient.setQueryData(
        ['progress', itemId],
        context?.previousProgress
      );
      alert('Update failed: ' + err.message);
    },

    // Re-synchronize with server data after success/failure
    onSettled: () => {
      // Invalidate all related caches (progress + overall progress stats)
      queryClient.invalidateQueries({ queryKey: ['progress', itemId] });
      queryClient.invalidateQueries({ queryKey: ['stats'] });
    }
  });

  return (
    <button
      onClick={() => toggleMutation.mutate(!isCompleted)}
      disabled={toggleMutation.isPending}
      className={isCompleted ? 'completed' : ''}
    >
      {toggleMutation.isPending ? 'Saving...' : (isCompleted ? 'Completed ✓' : 'Mark as Complete')}
    </button>
  );
}