"use client"
import React, { useEffect } from 'react'

interface ScreenshotGalleryProps {
  screenshots: string[]
  symbol: string
  timeframes: string[]
  enlargedImage: string | null
  onImageClick: (src: string) => void
  onClose: () => void
}

export default function ScreenshotGallery({ 
  screenshots, 
  symbol, 
  timeframes, 
  enlargedImage, 
  onImageClick, 
  onClose 
}: ScreenshotGalleryProps) {
  // Debug logging
  console.log('ScreenshotGallery props:', { 
    screenshots, 
    symbol, 
    timeframes, 
    enlargedImage,
    screenshotsLength: screenshots?.length 
  })

  // Handle ESC key to close enlarged image
  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === 'Escape' && enlargedImage) {
        onClose()
      }
    }

    if (enlargedImage) {
      document.addEventListener('keydown', handleKeyDown)
      return () => document.removeEventListener('keydown', handleKeyDown)
    }
  }, [enlargedImage, onClose])

  if (screenshots.length === 0) {
    console.log('ScreenshotGallery: No screenshots to display')
    
    // TEMPORARY: Show a test gallery with known screenshots for debugging
    const testScreenshots = [
      '/screenshots/SOLUSD_240_ai_1752447978639.png',
      '/screenshots/SOLUSD_15_ai_1752441315672.png'
    ]
    
    console.log('ScreenshotGallery: Using test screenshots for debugging:', testScreenshots)
    
    return (
      <>
        {/* Test Gallery Grid */}
        <div className="mt-6 p-4 bg-gradient-to-br from-red-500/10 to-orange-500/10 border border-red-500/30 rounded-lg">
          <div className="flex items-center justify-between mb-4">
            <h4 className="text-lg font-bold text-white flex items-center">
              <span className="w-6 h-6 bg-gradient-to-br from-red-400 to-red-600 rounded-lg flex items-center justify-center mr-2 text-sm">
                🧪
              </span>
              Test Screenshots (Debug Mode)
            </h4>
            <div className="text-xs text-gray-400">
              {testScreenshots.length} test images • Click to enlarge
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {testScreenshots.map((screenshot, index) => {
              const filename = screenshot.split('/').pop() || ''
              const timeframe = index === 0 ? '4h' : '15m'
              
              return (
                <div 
                  key={index}
                  className="group relative bg-gray-800/30 rounded-lg overflow-hidden border border-gray-700 hover:border-red-500/50 transition-all cursor-pointer transform hover:scale-[1.02]"
                  onClick={() => {
                    console.log('Test image clicked:', screenshot)
                    onImageClick(screenshot)
                  }}
                >
                  <div className="aspect-video bg-gray-800 flex items-center justify-center relative">
                    <img
                      src={screenshot}
                      alt={`${symbol} - ${timeframe} chart`}
                      className="w-full h-full object-cover"
                      onLoad={() => console.log(`Test image loaded successfully: ${screenshot}`)}
                      onError={(e: any) => {
                        console.error(`Test image failed to load: ${screenshot}`, e)
                        const target = e.target as HTMLImageElement
                        target.style.display = 'none'
                      }}
                    />
                  </div>
                  <div className="p-3">
                    <div className="flex items-center justify-between">
                      <div>
                        <div className="text-sm font-medium text-white">{symbol}</div>
                        <div className="text-xs text-red-300">{timeframe} Timeframe (Test)</div>
                      </div>
                      <div className="text-xs text-gray-400">
                        Click to view
                      </div>
                    </div>
                  </div>
                </div>
              )
            })}
          </div>
        </div>
        
        {/* Test Enlarged Image Modal */}
        {enlargedImage && (
          <div 
            className="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center p-4 z-50"
            onClick={onClose}
          >
            <div className="relative max-w-6xl max-h-[90vh] w-full" onClick={(e: any) => e.stopPropagation()}>
              <button
                onClick={onClose}
                className="absolute top-4 right-4 w-10 h-10 bg-black/50 hover:bg-black/70 rounded-full flex items-center justify-center text-white z-10 transition-colors"
              >
                ✕
              </button>
              <img
                src={enlargedImage}
                alt="Enlarged chart"
                className="w-full h-full object-contain rounded-lg border border-gray-600"
                onError={(e: any) => {
                  console.error('Failed to load enlarged image:', enlargedImage)
                  const target = e.target as HTMLImageElement
                  target.alt = 'Failed to load image'
                }}
              />
              <div className="absolute bottom-4 left-4 right-4 bg-black/70 backdrop-blur-sm rounded-lg p-4">
                <div className="flex items-center justify-between">
                  <div>
                    <div className="text-white font-medium">{symbol} Chart Analysis (Test Mode)</div>
                    <div className="text-gray-300 text-sm">Debug screenshot • High resolution view</div>
                  </div>
                  <div className="text-xs text-gray-400">
                    ESC to close • Click outside to close
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}
      </>
    )
  }

  // Helper function to format screenshot URL
  const formatScreenshotUrl = (screenshot: string) => {
    // Extract just the filename from the full path
    const filename = screenshot.split('/').pop() || screenshot
    // Return the Next.js API route format
    return `/screenshots/${filename}`
  }

  return (
    <>
      {/* Gallery Grid */}
      <div className="mt-6 p-4 bg-gradient-to-br from-purple-500/10 to-indigo-500/10 border border-purple-500/30 rounded-lg">
        <div className="flex items-center justify-between mb-4">
          <h4 className="text-lg font-bold text-white flex items-center">
            <span className="w-6 h-6 bg-gradient-to-br from-purple-400 to-purple-600 rounded-lg flex items-center justify-center mr-2 text-sm">
              📸
            </span>
            Chart Screenshots
          </h4>
          <div className="text-xs text-gray-400">
            {screenshots.length} captured • Click to enlarge
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {screenshots.map((screenshot, index) => {
            const filename = screenshot.split('/').pop() || ''
            // Extract timeframe from filename (e.g., SOLUSD_5_ai_timestamp.png -> "5m")
            const extractTimeframeFromFilename = (filename: string) => {
              const match = filename.match(/_(\d+|D)_/)
              if (!match) return 'Unknown'
              const tf = match[1]
              if (tf === 'D') return '1D'
              if (tf === '5') return '5m'
              if (tf === '15') return '15m'
              if (tf === '60') return '1h'
              if (tf === '240') return '4h'
              return `${tf}m`
            }
            
            const timeframe = timeframes[index] || extractTimeframeFromFilename(filename)
            const imageUrl = formatScreenshotUrl(screenshot)
            
            console.log(`Screenshot ${index}:`, { screenshot, filename, timeframe, imageUrl })
            
            return (
              <div 
                key={index}
                className="group relative bg-gray-800/30 rounded-lg overflow-hidden border border-gray-700 hover:border-purple-500/50 transition-all cursor-pointer transform hover:scale-[1.02]"
                onClick={() => onImageClick(imageUrl)}
              >
                {/* Preview Image */}
                <div className="aspect-video bg-gray-800 flex items-center justify-center relative">
                  <img
                    src={imageUrl}
                    alt={`${symbol} - ${timeframe} chart`}
                    className="w-full h-full object-cover"
                    onLoad={() => console.log(`Image loaded successfully: ${imageUrl}`)}
                    onError={(e: any) => {
                      console.error(`Failed to load image: ${imageUrl}`, e)
                      const target = e.target as HTMLImageElement
                      target.style.display = 'none'
                      const fallback = target.nextElementSibling as HTMLElement
                      if (fallback) fallback.classList.remove('hidden')
                    }}
                  />
                  <div className="hidden absolute inset-0 flex items-center justify-center text-gray-400">
                    <div className="text-center">
                      <div className="text-3xl mb-2">📊</div>
                      <div className="text-sm">Chart Preview</div>
                      <div className="text-xs text-gray-500">{filename}</div>
                    </div>
                  </div>
                  
                  {/* Overlay */}
                  <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-all flex items-center justify-center">
                    <div className="opacity-0 group-hover:opacity-100 transition-opacity">
                      <div className="w-12 h-12 bg-purple-500/80 rounded-full flex items-center justify-center">
                        <span className="text-white text-xl">🔍</span>
                      </div>
                    </div>
                  </div>
                </div>

                {/* Image Info */}
                <div className="p-3">
                  <div className="flex items-center justify-between">
                    <div>
                      <div className="text-sm font-medium text-white">{symbol}</div>
                      <div className="text-xs text-purple-300">{timeframe} Timeframe</div>
                    </div>
                    <div className="text-xs text-gray-400">
                      Click to view
                    </div>
                  </div>
                </div>
              </div>
            )
          })}
        </div>
      </div>

      {/* Enlarged Image Modal */}
      {enlargedImage && (
        <div 
          className="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center p-4 z-50"
          onClick={onClose}
        >
          <div className="relative max-w-6xl max-h-[90vh] w-full" onClick={(e: any) => e.stopPropagation()}>
            {/* Close Button */}
            <button
              onClick={onClose}
              className="absolute top-4 right-4 w-10 h-10 bg-black/50 hover:bg-black/70 rounded-full flex items-center justify-center text-white z-10 transition-colors"
            >
              ✕
            </button>

            {/* Image */}
            <img
              src={enlargedImage}
              alt="Enlarged chart"
              className="w-full h-full object-contain rounded-lg border border-gray-600"
              onError={(e: any) => {
                console.error('Failed to load enlarged image:', enlargedImage)
                const target = e.target as HTMLImageElement
                target.alt = 'Failed to load image'
              }}
            />

            {/* Image Info Overlay */}
            <div className="absolute bottom-4 left-4 right-4 bg-black/70 backdrop-blur-sm rounded-lg p-4">
              <div className="flex items-center justify-between">
                <div>
                  <div className="text-white font-medium">{symbol} Chart Analysis</div>
                  <div className="text-gray-300 text-sm">AI analyzed screenshot • High resolution view</div>
                </div>
                <div className="text-xs text-gray-400">
                  ESC to close • Click outside to close
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  )
}