import { useState, useEffect, useCallback } from 'react'
import { cn } from '@/lib/utils'
import { Loader2, AlertCircle, RefreshCw, ZoomIn, ZoomOut, Maximize2 } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { apiClientV2 } from '@/services/apiV2'
import type {
  PreprocessingMode,
  PreprocessingConfig,
  PreprocessingPreviewResponse,
  ImageQualityMetrics,
} from '@/types/apiV2'

interface PreprocessingPreviewProps {
  taskId: string
  mode: PreprocessingMode
  config: PreprocessingConfig
  page?: number
  className?: string
}

export default function PreprocessingPreview({
  taskId,
  mode,
  config,
  page = 1,
  className,
}: PreprocessingPreviewProps) {
  const { t } = useTranslation()
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [previewData, setPreviewData] = useState<PreprocessingPreviewResponse | null>(null)
  const [originalImageUrl, setOriginalImageUrl] = useState<string | null>(null)
  const [preprocessedImageUrl, setPreprocessedImageUrl] = useState<string | null>(null)
  const [zoom, setZoom] = useState(1)
  const [showFullscreen, setShowFullscreen] = useState<'original' | 'preprocessed' | null>(null)

  // Debounce config changes to avoid too many API calls
  const [debouncedConfig, setDebouncedConfig] = useState(config)
  const [debouncedMode, setDebouncedMode] = useState(mode)

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedConfig(config)
      setDebouncedMode(mode)
    }, 500)
    return () => clearTimeout(timer)
  }, [config, mode])

  // Fetch preview when debounced config changes
  const fetchPreview = useCallback(async () => {
    if (!taskId || debouncedMode === 'disabled') {
      setPreviewData(null)
      setOriginalImageUrl(null)
      setPreprocessedImageUrl(null)
      return
    }

    setIsLoading(true)
    setError(null)

    try {
      const response = await apiClientV2.previewPreprocessing(taskId, {
        page,
        mode: debouncedMode,
        config: debouncedMode === 'manual' ? debouncedConfig : undefined,
      })

      setPreviewData(response)

      // Fetch images as blobs to handle authentication
      const [originalBlob, preprocessedBlob] = await Promise.all([
        apiClientV2.getPreviewImage(taskId, 'original', page),
        apiClientV2.getPreviewImage(taskId, 'preprocessed', page),
      ])

      // Revoke old URLs to prevent memory leaks
      if (originalImageUrl) URL.revokeObjectURL(originalImageUrl)
      if (preprocessedImageUrl) URL.revokeObjectURL(preprocessedImageUrl)

      setOriginalImageUrl(URL.createObjectURL(originalBlob))
      setPreprocessedImageUrl(URL.createObjectURL(preprocessedBlob))
    } catch (err: any) {
      console.error('Preview fetch error:', err)
      setError(err.response?.data?.detail || err.message || 'Failed to load preview')
    } finally {
      setIsLoading(false)
    }
  }, [taskId, debouncedMode, debouncedConfig, page])

  useEffect(() => {
    fetchPreview()
  }, [fetchPreview])

  // Cleanup URLs on unmount
  useEffect(() => {
    return () => {
      if (originalImageUrl) URL.revokeObjectURL(originalImageUrl)
      if (preprocessedImageUrl) URL.revokeObjectURL(preprocessedImageUrl)
    }
  }, [])

  const handleZoomIn = () => setZoom((z) => Math.min(z + 0.25, 3))
  const handleZoomOut = () => setZoom((z) => Math.max(z - 0.25, 0.5))
  const handleResetZoom = () => setZoom(1)

  const formatMetric = (value: number) => value.toFixed(2)

  const getMetricQuality = (metric: keyof ImageQualityMetrics, value: number) => {
    const pp = 'processing.preprocessing.previewPanel'
    if (metric === 'contrast') {
      if (value < 30) return { label: t(`${pp}.qualityLow`), color: 'text-red-600' }
      if (value < 50) return { label: t(`${pp}.qualityMedium`), color: 'text-yellow-600' }
      return { label: t(`${pp}.qualityHigh`), color: 'text-green-600' }
    }
    if (metric === 'edge_strength') {
      if (value < 20) return { label: t(`${pp}.qualityBlurry`), color: 'text-red-600' }
      if (value < 40) return { label: t(`${pp}.qualityNormal`), color: 'text-yellow-600' }
      return { label: t(`${pp}.qualitySharp`), color: 'text-green-600' }
    }
    return { label: '', color: '' }
  }

  if (debouncedMode === 'disabled') {
    return (
      <div className={cn('border rounded-lg p-6 bg-gray-50 text-center', className)}>
        <p className="text-sm text-gray-500">
          {t('processing.preprocessing.mode.disabledDesc', '前處理已停用，將直接使用原始影像')}
        </p>
      </div>
    )
  }

  return (
    <div className={cn('border rounded-lg bg-white overflow-hidden', className)}>
      {/* Header */}
      <div className="flex items-center justify-between px-4 py-3 border-b bg-gray-50">
        <h4 className="text-sm font-medium text-gray-700">
          {t('processing.preprocessing.preview', '前處理預覽')}
        </h4>
        <div className="flex items-center gap-2">
          {/* Zoom controls */}
          <div className="flex items-center gap-1 bg-white rounded-md border px-1">
            <button
              type="button"
              onClick={handleZoomOut}
              className="p-1 hover:bg-gray-100 rounded"
              title="縮小"
            >
              <ZoomOut className="w-4 h-4 text-gray-600" />
            </button>
            <button
              type="button"
              onClick={handleResetZoom}
              className="px-2 py-1 text-xs text-gray-600 hover:bg-gray-100 rounded min-w-[3rem]"
            >
              {Math.round(zoom * 100)}%
            </button>
            <button
              type="button"
              onClick={handleZoomIn}
              className="p-1 hover:bg-gray-100 rounded"
              title="放大"
            >
              <ZoomIn className="w-4 h-4 text-gray-600" />
            </button>
          </div>
          {/* Refresh button */}
          <button
            type="button"
            onClick={fetchPreview}
            disabled={isLoading}
            className={cn(
              'p-1.5 rounded-md hover:bg-gray-200 transition-colors',
              isLoading && 'opacity-50 cursor-not-allowed'
            )}
            title="重新整理預覽"
          >
            <RefreshCw className={cn('w-4 h-4 text-gray-600', isLoading && 'animate-spin')} />
          </button>
        </div>
      </div>

      {/* Loading state */}
      {isLoading && !previewData && (
        <div className="flex items-center justify-center py-16">
          <div className="text-center">
            <Loader2 className="w-8 h-8 animate-spin text-blue-500 mx-auto mb-2" />
            <p className="text-sm text-gray-500">{t('processing.preprocessing.previewPanel.loading')}</p>
          </div>
        </div>
      )}

      {/* Error state */}
      {error && (
        <div className="p-4">
          <div className="flex items-start gap-3 p-3 bg-red-50 rounded-lg border border-red-200">
            <AlertCircle className="w-5 h-5 text-red-500 flex-shrink-0 mt-0.5" />
            <div>
              <p className="text-sm font-medium text-red-700">{t('processing.preprocessing.previewPanel.loadError')}</p>
              <p className="text-xs text-red-600 mt-1">{error}</p>
            </div>
          </div>
        </div>
      )}

      {/* Preview content */}
      {previewData && originalImageUrl && preprocessedImageUrl && (
        <>
          {/* Image quality metrics */}
          <div className="px-4 py-3 border-b bg-blue-50">
            <div className="flex items-center justify-between">
              <span className="text-xs font-medium text-blue-700">{t('processing.preprocessing.previewPanel.qualityAnalysis')}</span>
              <div className="flex items-center gap-4">
                <div className="flex items-center gap-2">
                  <span className="text-xs text-gray-600">{t('processing.preprocessing.previewPanel.contrast')}:</span>
                  <span className={cn('text-xs font-medium', getMetricQuality('contrast', previewData.quality_metrics.contrast).color)}>
                    {formatMetric(previewData.quality_metrics.contrast)}
                    <span className="ml-1">({getMetricQuality('contrast', previewData.quality_metrics.contrast).label})</span>
                  </span>
                </div>
                <div className="flex items-center gap-2">
                  <span className="text-xs text-gray-600">{t('processing.preprocessing.previewPanel.sharpness')}:</span>
                  <span className={cn('text-xs font-medium', getMetricQuality('edge_strength', previewData.quality_metrics.edge_strength).color)}>
                    {formatMetric(previewData.quality_metrics.edge_strength)}
                    <span className="ml-1">({getMetricQuality('edge_strength', previewData.quality_metrics.edge_strength).label})</span>
                  </span>
                </div>
              </div>
            </div>
          </div>

          {/* Side-by-side comparison */}
          <div className="grid grid-cols-2 divide-x">
            {/* Original */}
            <div className="relative">
              <div className="px-3 py-2 border-b bg-gray-100">
                <div className="flex items-center justify-between">
                  <span className="text-xs font-medium text-gray-600">{t('processing.preprocessing.previewPanel.original')}</span>
                  <button
                    type="button"
                    onClick={() => setShowFullscreen('original')}
                    className="p-1 hover:bg-gray-200 rounded"
                    title={t('processing.preprocessing.previewPanel.fullscreen')}
                  >
                    <Maximize2 className="w-3.5 h-3.5 text-gray-500" />
                  </button>
                </div>
              </div>
              <div className="overflow-auto max-h-[400px] bg-gray-200">
                <div
                  className="flex items-center justify-center min-h-[300px] p-2"
                  style={{ transform: `scale(${zoom})`, transformOrigin: 'center center' }}
                >
                  <img
                    src={originalImageUrl}
                    alt="Original"
                    className="max-w-full h-auto shadow-md"
                    loading="lazy"
                  />
                </div>
              </div>
            </div>

            {/* Preprocessed */}
            <div className="relative">
              <div className="px-3 py-2 border-b bg-blue-100">
                <div className="flex items-center justify-between">
                  <span className="text-xs font-medium text-blue-700">{t('processing.preprocessing.previewPanel.preprocessed')}</span>
                  <button
                    type="button"
                    onClick={() => setShowFullscreen('preprocessed')}
                    className="p-1 hover:bg-blue-200 rounded"
                    title={t('processing.preprocessing.previewPanel.fullscreen')}
                  >
                    <Maximize2 className="w-3.5 h-3.5 text-blue-500" />
                  </button>
                </div>
              </div>
              <div className="overflow-auto max-h-[400px] bg-gray-200">
                <div
                  className="flex items-center justify-center min-h-[300px] p-2"
                  style={{ transform: `scale(${zoom})`, transformOrigin: 'center center' }}
                >
                  <img
                    src={preprocessedImageUrl}
                    alt="Preprocessed"
                    className="max-w-full h-auto shadow-md"
                    loading="lazy"
                  />
                </div>
              </div>
            </div>
          </div>

          {/* Auto config info */}
          {debouncedMode === 'auto' && previewData.auto_config && (
            <div className="px-4 py-3 border-t bg-green-50">
              <div className="text-xs text-green-700">
                <span className="font-medium">{t('processing.preprocessing.previewPanel.autoDetectedConfig')}:</span>
                <span className="ml-2">
                  {t('processing.preprocessing.previewPanel.contrastEnhancement')}: {previewData.auto_config.contrast}
                  {previewData.auto_config.contrast !== 'none' && ` (${previewData.auto_config.contrast_strength.toFixed(1)})`}
                </span>
                <span className="mx-2">|</span>
                <span>
                  {t('processing.preprocessing.sharpen')}: {previewData.auto_config.sharpen ? t('processing.preprocessing.previewPanel.sharpenEnabled') : t('processing.preprocessing.previewPanel.sharpenDisabled')}
                  {previewData.auto_config.sharpen && ` (${previewData.auto_config.sharpen_strength.toFixed(1)})`}
                </span>
              </div>
            </div>
          )}

          {/* Loading overlay for refresh */}
          {isLoading && (
            <div className="absolute inset-0 bg-white/50 flex items-center justify-center">
              <Loader2 className="w-8 h-8 animate-spin text-blue-500" />
            </div>
          )}
        </>
      )}

      {/* Fullscreen modal */}
      {showFullscreen && (
        <div
          className="fixed inset-0 z-50 bg-black/90 flex items-center justify-center"
          onClick={() => setShowFullscreen(null)}
        >
          <button
            type="button"
            className="absolute top-4 right-4 text-white hover:text-gray-300 text-xl"
            onClick={() => setShowFullscreen(null)}
          >
            ✕
          </button>
          <img
            src={showFullscreen === 'original' ? originalImageUrl! : preprocessedImageUrl!}
            alt={showFullscreen === 'original' ? 'Original (fullscreen)' : 'Preprocessed (fullscreen)'}
            className="max-w-[90vw] max-h-[90vh] object-contain"
            onClick={(e) => e.stopPropagation()}
          />
          <div className="absolute bottom-4 left-1/2 -translate-x-1/2 bg-white/90 px-4 py-2 rounded-full text-sm font-medium">
            {showFullscreen === 'original'
              ? t('processing.preprocessing.previewPanel.original')
              : t('processing.preprocessing.previewPanel.preprocessed')}
          </div>
        </div>
      )}
    </div>
  )
}
