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

// === 1. 基本データ照会 ===
function LearningItem({ itemId }) {
  const {
    data,
    isLoading,
    isError,
    error,
    isFetching  // バックグラウンド再検証中
  } = useQuery({
    queryKey: ['learning-items', itemId],
    queryFn: async () => {
      const res = await fetch(`/api/items/${itemId}`);
      if (!res.ok) throw new Error('項目照会失敗');
      return res.json();
    },
    staleTime: 10 * 60 * 1000, // 10分間新鮮
    enabled: !!itemId,
  });

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

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

// === 2. 無限スクロール ===
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,
  });

  // IntersectionObserverでスクロールの終わりを検出
  const [sentinelRef, isIntersecting] = useIntersectionObserver();

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

  if (isLoading) return <Loading />;

  // pages: 各ページデータ配列
  const allItems = data.pages.flatMap(page => page.items);

  return (
    <div>
      {allItems.map(item => (
        <ItemCard key={item.id} item={item} />
      ))}
      {/* スクロール検出センチネル */}
      <div ref={sentinelRef}>
        {isFetchingNextPage && <Spinner />}
        {!hasNextPage && <p>すべての項目を読み込みました。</p>}
      </div>
    </div>
  );
}

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

// === 学習進捗の更新 + 楽観的更新 ===
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('進捗の更新に失敗しました');
      return res.json();
    },

    // 楽観的更新: 応答前にUIを即時変更
    onMutate: async (completed) => {
      // 進行中のクエリをキャンセル
      await queryClient.cancelQueries({ queryKey: ['progress', itemId] });

      // ロールバック用のスナップショット
      const previousProgress = queryClient.getQueryData(['progress', itemId]);

      // UIを即時更新
      queryClient.setQueryData(['progress', itemId], old => ({
        ...old,
        completed,
        completedAt: completed ? new Date().toISOString() : null
      }));

      return { previousProgress };
    },

    // エラー時にロールバック
    onError: (err, completed, context) => {
      queryClient.setQueryData(
        ['progress', itemId],
        context?.previousProgress
      );
      alert('更新失敗: ' + err.message);
    },

    // 成功/失敗後にサーバーデータで再同期
    onSettled: () => {
      // 関連するキャッシュをすべて無効化 (progress + 全体進捗統計)
      queryClient.invalidateQueries({ queryKey: ['progress', itemId] });
      queryClient.invalidateQueries({ queryKey: ['stats'] });
    }
  });

  return (
    <button
      onClick={() => toggleMutation.mutate(!isCompleted)}
      disabled={toggleMutation.isPending}
      className={isCompleted ? 'completed' : ''}
    >
      {toggleMutation.isPending ? '保存中...' : (isCompleted ? '完了 ✓' : '完了する')}
    </button>
  );
}