import React, { useState, useEffect, useRef } from 'react';
import styles from './ImageWithFallback.module.css';

interface ImageWithFallbackProps {
  src: string;
  alt: string;
  className?: string;
  onClick?: () => void;
  onContextMenu?: (e: React.MouseEvent<HTMLDivElement>) => void;
  maxRetries?: number;
  isDeleteMode?: boolean;
}

const ImageWithFallback: React.FC<ImageWithFallbackProps> = ({
  src,
  alt,
  className = '',
  onClick,
  onContextMenu,
  maxRetries = 2, // По умолчанию 2 попытки автоматической перезагрузки
  isDeleteMode = false
}) => {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);
  const [retryCount, setRetryCount] = useState(0);
  const [imageSrc, setImageSrc] = useState(src);
  const imgRef = useRef<HTMLImageElement>(null);

  // Сбрасываем состояние при изменении src
  useEffect(() => {
    setLoading(true);
    setError(false);
    setRetryCount(0);
    setImageSrc(src);
  }, [src]);
  
  // Проверяем, загружено ли изображение из кэша
  useEffect(() => {
    // Если изображение уже загружено (из кэша), сразу устанавливаем состояние
    if (imgRef.current && imgRef.current.complete && imgRef.current.naturalWidth > 0) {
      console.log('Изображение уже загружено (из кэша):', src);
      setLoading(false);
      setError(false);
    }
    
    // Устанавливаем таймаут для предотвращения бесконечной загрузки
    const timeoutId = setTimeout(() => {
      if (loading) {
        console.log('Таймаут загрузки изображения:', src);
        // Проверяем, загружено ли изображение фактически
        if (imgRef.current && imgRef.current.complete && imgRef.current.naturalWidth > 0) {
          // Изображение загружено, но событие onLoad не сработало
          console.log('Изображение фактически загружено, но событие onLoad не сработало:', src);
          setLoading(false);
          setError(false);
        } else {
          // Изображение действительно не загрузилось
          console.error('Изображение не загрузилось после таймаута:', src);
          setLoading(false);
          setError(true);
        }
      }
    }, 5000); // 5 секунд
    
    return () => clearTimeout(timeoutId);
  }, [loading, src]);

  // Функция для перезагрузки изображения
  const handleRetry = () => {
    setLoading(true);
    setError(false);
    // Добавляем случайный параметр к URL для предотвращения кэширования
    setImageSrc(`${src}${src.includes('?') ? '&' : '?'}retry=${Date.now()}`);
    setRetryCount(prevCount => prevCount + 1);
  };

  // Обработчик успешной загрузки
  const handleLoad = () => {
    console.log('Изображение успешно загружено:', src);
    setLoading(false);
    setError(false);
  };

  // Обработчик ошибки загрузки
  const handleError = () => {
    console.error('Ошибка загрузки изображения:', src);
    setLoading(false);
    setError(true);
    
    // Автоматически пытаемся перезагрузить изображение, если не превышено максимальное количество попыток
    if (retryCount < maxRetries) {
      console.log(`Автоматическая попытка перезагрузки изображения (${retryCount + 1}/${maxRetries}):`, src);
      // Увеличиваем задержку с каждой попыткой (экспоненциальный backoff)
      const delay = Math.pow(2, retryCount) * 1000;
      setTimeout(handleRetry, delay); // Пауза перед повторной попыткой
    } else {
      console.error('Не удалось загрузить изображение после нескольких попыток:', src);
    }
  };

  // Обработчик клика по изображению
  const handleClick = () => {
    // Если есть ошибка и пользователь кликает на изображение с ошибкой, пытаемся перезагрузить
    if (error) {
      handleRetry();
    } else if (onClick) {
      // Иначе вызываем переданный обработчик клика
      onClick();
    }
  };

  return (
    <div 
      className={`${styles.container} ${className}`} 
      onClick={handleClick}
      onContextMenu={onContextMenu}
    >
      {/* Показываем индикатор загрузки, если изображение загружается */}
      {loading && (
        <div className={styles.loadingContainer}>
          <div className={styles.spinner}></div>
        </div>
      )}
      
      {/* Показываем изображение */}
      <img
        ref={imgRef}
        src={imageSrc}
        alt={alt}
        draggable="false"
        className={`${styles.image} ${error ? styles.hidden : ''}`}
        onLoad={handleLoad}
        onError={handleError}
      />
      
      {/* Показываем сообщение об ошибке и кнопку перезагрузки, если произошла ошибка */}
      {error && (
        <div className={styles.errorContainer}>
          <div className={styles.errorIcon}>!</div>
          <div className={styles.errorMessage}>Ошибка загрузки</div>
          <button 
            className={styles.retryButton}
            onClick={(e) => {
              e.stopPropagation(); // Предотвращаем всплытие события
              handleRetry();
            }}
          >
            Перезагрузить
          </button>
        </div>
      )}
    </div>
  );
};

export default ImageWithFallback;
