api-client/proposal/screenshot/queries.ts

import { createQueryOptions } from '@/api-client/query-config';
import { useQuery } from '@tanstack/react-query';

// バッチスクリーンショット取得用のフック
export function useBatchScreenshots(urls: Record<string, string>, enabled: boolean = false, dummyMode: boolean = false) {
  return useQuery<Record<string, string>>({
    ...createQueryOptions<Record<string, string>>(),
    queryKey: ['batchScreenshots', urls, dummyMode],
    queryFn: async () => {
      // ダミーモードの場合はプレースホルダー画像を返す
      if (dummyMode) {
        console.log('[useBatchScreenshots] Dummy mode enabled, returning placeholder images');
        const placeholderImage =
          'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==';
        const screenshots: Record<string, string> = {};
        Object.keys(urls).forEach((key) => {
          screenshots[key] = placeholderImage;
        });
        return screenshots;
      }

      const response = await fetch('/api/rpc/screenshot/batch-screenshot', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          urls: Object.entries(urls).map(([key, url]) => ({
            key,
            url,
          })),
          dummyMode,
        }),
      });

      if (!response.ok) {
        throw new Error('Failed to fetch screenshots');
      }

      const data = await response.json();
      console.log('[useBatchScreenshots] Response data:', data);

      const screenshots: Record<string, string> = {};

      Object.entries(data.screenshots || {}).forEach(([key, value]: [string, any]) => {
        // imageBase64フィールドを使用（サーバーはこのフィールドで返している）
        screenshots[key] = value.imageBase64 || value.screenshotBase64;
      });

      console.log('[useBatchScreenshots] Processed screenshots:', {
        keys: Object.keys(screenshots),
        hasA案: !!screenshots['A案'],
      });

      return screenshots;
    },
    enabled,
  });
}

// 単一スクリーンショット取得用のフック
export function useScreenshot(url: string, enabled: boolean = false, dummyMode: boolean = false) {
  return useQuery<string>({
    ...createQueryOptions<string>(),
    queryKey: ['screenshot', url, dummyMode],
    queryFn: async () => {
      // ダミーモードの場合はプレースホルダー画像を返す
      if (dummyMode) {
        console.log('[useScreenshot] Dummy mode enabled, returning placeholder image');
        return 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==';
      }

      const params = new URLSearchParams({
        url: url,
        width: '512',
        height: '768',
        dummyMode: dummyMode.toString(),
      });

      const response = await fetch(`/api/rpc/screenshot?${params.toString()}`, {
        method: 'GET',
        headers: { 'Content-Type': 'application/json' },
      });

      if (!response.ok) {
        throw new Error('Failed to fetch screenshot');
      }

      const data = await response.json();

      // imageBase64が既にdata URLの場合はそのまま返す
      if (data.imageBase64 && data.imageBase64.startsWith('data:')) {
        return data.imageBase64;
      }

      // そうでない場合はdata:プレフィックスを追加
      return `data:${data.mimeType || 'image/jpeg'};base64,${data.imageBase64}`;
    },
    enabled,
  });
}