"use client"

import { useState } from 'react'
import Image from 'next/image'
import { Download, Maximize2 } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { ImageLightbox } from '@/components/ui/image-lightbox'

interface ImageMessageProps {
  imageUrl: string
  fileName: string
  fileSize?: number
  isCurrentUser?: boolean
}

export function ImageMessage({ imageUrl, fileName, fileSize, isCurrentUser = false }: ImageMessageProps) {
  const [isLoading, setIsLoading] = useState(true)
  const [isLightboxOpen, setIsLightboxOpen] = useState(false)

  const formatFileSize = (bytes?: number) => {
    if (!bytes) return ''
    const k = 1024
    const sizes = ['Bytes', 'KB', 'MB', 'GB']
    const i = Math.floor(Math.log(bytes) / Math.log(k))
    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i]
  }

  const handleDownload = async (e: React.MouseEvent) => {
    e.stopPropagation()
    console.log('🔽 Начинаем скачивание изображения:', fileName, imageUrl)
    
    try {
      // Используем наш API endpoint для проксирования скачивания
      const downloadUrl = `/api/download-file?url=${encodeURIComponent(imageUrl)}&filename=${encodeURIComponent(fileName)}`
      console.log('📡 Скачиваем через API endpoint:', downloadUrl)
      
      // Создаем ссылку для прямого скачивания
      const link = document.createElement('a')
      link.href = downloadUrl
      link.download = fileName || 'image'
      link.style.display = 'none'
      
      document.body.appendChild(link)
      console.log('⬇️ Запускаем скачивание через API...')
      link.click()
      
      // Очистка с задержкой
      setTimeout(() => {
        try {
          document.body.removeChild(link)
          console.log('✅ Скачивание изображения через API успешно запущено')
        } catch (cleanupError) {
          console.warn('⚠️ Ошибка очистки:', cleanupError)
        }
      }, 1000)
      
    } catch (error) {
      console.error('❌ Ошибка скачивания через API:', error)
      fallbackDownload()
    }
    
    function fallbackDownload() {
      console.log('🚨 Используем fallback метод - открытие в новой вкладке')
      window.open(imageUrl, '_blank')
    }
  }

  const handleOpenLightbox = () => {
    setIsLightboxOpen(true)
  }

  const handleCloseLightbox = () => {
    setIsLightboxOpen(false)
  }

  return (
    <>
      <div className={`relative group max-w-xs ${
        isCurrentUser 
          ? 'bg-blue-500/20 border border-blue-500/30' 
          : 'bg-white/10 border border-white/20'
      } rounded-lg overflow-hidden`}>
        <div className="relative">
          <Image
            src={imageUrl}
            alt={fileName}
            width={300}
            height={300}
            className="w-full h-auto cursor-pointer transition-opacity duration-200"
            style={{ 
              opacity: isLoading ? 0 : 1,
              maxHeight: '300px',
              objectFit: 'cover'
            }}
            onLoad={() => setIsLoading(false)}
            onClick={handleOpenLightbox}
          />
          
          {isLoading && (
            <div className="absolute inset-0 bg-gray-700 animate-pulse flex items-center justify-center">
              <div className="text-white/60 text-sm">Загрузка...</div>
            </div>
          )}

          {/* Overlay с кнопками при наведении */}
          <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center justify-center space-x-2">
            <Button
              onClick={handleOpenLightbox}
              size="sm"
              variant="ghost"
              className="text-white hover:bg-white/20"
              title="Открыть в полном размере"
            >
              <Maximize2 className="h-4 w-4" />
            </Button>
            <Button
              onClick={handleDownload}
              size="sm"
              variant="ghost"
              className="text-white hover:bg-white/20"
              title="Скачать изображение"
            >
              <Download className="h-4 w-4" />
            </Button>
          </div>
        </div>

        {/* Информация о файле */}
        <div className="p-2">
          <p className={`text-xs ${
            isCurrentUser ? 'text-blue-300/70' : 'text-white/60'
          } truncate`}>
            {fileName}
          </p>
          {fileSize && (
            <p className={`text-xs ${
              isCurrentUser ? 'text-blue-300/50' : 'text-white/40'
            }`}>
              {formatFileSize(fileSize)}
            </p>
          )}
        </div>
      </div>

      {/* Lightbox для полноэкранного просмотра */}
      <ImageLightbox
        imageUrl={imageUrl}
        fileName={fileName}
        fileSize={fileSize}
        isOpen={isLightboxOpen}
        onClose={handleCloseLightbox}
      />
    </>
  )
} 