import { PhotoGrid } from '@/components/PhotoGrid';
import { Photo } from '@prisma/client';

/**
 * Test page to verify direct URL access vs API proxy
 * 
 * This page displays test images to verify:
 * 1. Direct access works for HTTP/HTTPS URLs
 * 2. API proxy works for file system paths
 * 3. Automatic detection is working correctly
 */
// Force dynamic rendering to avoid prerendering issues with query strings
export const dynamic = 'force-dynamic';

export default function TestImagesPage() {
  // Test photos with different path types
  const testPhotos: Photo[] = [
    // Test 1: Direct URL access (public test image)
    {
      id: 9991,
      path: 'https://picsum.photos/800/600?random=1',
      filename: 'test-direct-url-1.jpg',
      date_added: new Date(),
      date_taken: null,
      processed: true,
      media_type: 'image',
    },
    // Test 2: Another direct URL
    {
      id: 9992,
      path: 'https://picsum.photos/800/600?random=2',
      filename: 'test-direct-url-2.jpg',
      date_added: new Date(),
      date_taken: null,
      processed: true,
      media_type: 'image',
    },
    // Test 3: File system path (will use API proxy)
    {
      id: 9993,
      path: '/nonexistent/path/test.jpg',
      filename: 'test-file-system.jpg',
      date_added: new Date(),
      date_taken: null,
      processed: true,
      media_type: 'image',
    },
  ];

  return (
    <main className="container mx-auto px-4 py-8">
      <div className="mb-8">
        <h1 className="text-4xl font-bold text-secondary dark:text-gray-50">
          Image Source Test Page
        </h1>
        <p className="mt-2 text-gray-600 dark:text-gray-400">
          Testing direct URL access vs API proxy
        </p>
      </div>

      <div className="mb-6 rounded-lg bg-blue-50 p-4 dark:bg-blue-900/20">
        <h2 className="mb-2 font-semibold text-blue-900 dark:text-blue-200">
          Test Instructions:
        </h2>
        <ol className="list-inside list-decimal space-y-1 text-sm text-blue-800 dark:text-blue-300">
          <li>Open browser DevTools (F12) → Network tab</li>
          <li>Filter by &quot;Img&quot; to see image requests</li>
          <li>
            <strong>Direct URL images</strong> should show requests to{' '}
            <code className="rounded bg-blue-100 px-1 dark:bg-blue-800">
              picsum.photos
            </code>
          </li>
          <li>
            <strong>File system images</strong> should show requests to{' '}
            <code className="rounded bg-blue-100 px-1 dark:bg-blue-800">
              /api/photos/...
            </code>
          </li>
        </ol>
      </div>

      <div className="mb-4">
        <h2 className="mb-2 text-xl font-semibold">Test Images</h2>
        <div className="mb-2 text-sm text-gray-600 dark:text-gray-400">
          <p>
            <strong>Images 1-2:</strong> Direct URL access (should load from
            picsum.photos)
          </p>
          <p>
            <strong>Image 3:</strong> File system path (will use API proxy, may
            show error if file doesn&apos;t exist)
          </p>
        </div>
      </div>

      <PhotoGrid photos={testPhotos} />

      <div className="mt-8 rounded-lg bg-gray-50 p-4 dark:bg-gray-800">
        <h3 className="mb-2 font-semibold">Path Details:</h3>
        <div className="space-y-2 text-sm">
          {testPhotos.map((photo) => (
            <div key={photo.id} className="font-mono text-xs">
              <div>
                <strong>ID {photo.id}:</strong> {photo.path}
              </div>
              <div className="ml-4 text-gray-600 dark:text-gray-400">
                Type:{' '}
                {photo.path.startsWith('http://') ||
                photo.path.startsWith('https://')
                  ? '✅ Direct URL'
                  : '📁 File System (API Proxy)'}
              </div>
            </div>
          ))}
        </div>
      </div>
    </main>
  );
}


