import React, { useState, useRef, useEffect, memo } from 'react';
import styles from './NotificationModal.module.css'; // Используем существующие стили
import feedbackStyles from './FeedbackModal.module.css'; // Дополнительные стили для формы

export interface FeedbackData {
  text: string;
  images: File[];
}

interface FeedbackModalProps {
  isVisible: boolean;
  onClose: () => void;
  onSubmit: (data: FeedbackData) => Promise<boolean> | boolean;
}

// Мемоизированный компонент превью изображения
const ImagePreview = memo(({ 
  file, 
  index, 
  onRemove, 
  disabled 
}: { 
  file: File; 
  index: number; 
  onRemove: (index: number) => void; 
  disabled: boolean;
}) => {
  const [url, setUrl] = useState<string | null>(null);
  
  useEffect(() => {
    // Создаем URL для превью
    const objectUrl = URL.createObjectURL(file);
    setUrl(objectUrl);
    
    // Очищаем URL при размонтировании
    return () => {
      URL.revokeObjectURL(objectUrl);
    };
  }, [file]);
  
  return (
    <div className={feedbackStyles.imagePreview}>
      {url ? (
        <img src={url} alt={`Preview ${index}`} />
      ) : (
        <div className={feedbackStyles.imageLoading}>Загрузка...</div>
      )}
      <button 
        className={feedbackStyles.removeImageButton}
        onClick={() => onRemove(index)}
        type="button"
        disabled={disabled}
      >
        ✕
      </button>
    </div>
  );
});

const FeedbackModal: React.FC<FeedbackModalProps> = ({ isVisible, onClose, onSubmit }) => {
  const [text, setText] = useState('');
  const [images, setImages] = useState<File[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const textareaRef = useRef<HTMLTextAreaElement>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);
  
  // Сброс формы при закрытии
  const handleClose = () => {
    setText('');
    setImages([]);
    setError(null);
    onClose();
  };
  
  // Функция для сворачивания клавиатуры
  const dismissKeyboard = () => {
    if (textareaRef.current) {
      textareaRef.current.blur();
    }
  };

  // Обработчик нажатия клавиш
  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    // Если нажата клавиша Enter (или Done на iOS)
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault(); // Предотвращаем добавление новой строки
      dismissKeyboard(); // Сворачиваем клавиатуру
    }
  };
  
  // Функция для обработки выбранного файла
  const handleFileSelect = (file: File) => {
    console.log('Обработка выбранного файла:', file.name, file.type);
    
    // Проверяем, что это изображение
    if (file && file.type.startsWith('image/')) {
      console.log('Файл является изображением, добавляем в список');
      
      // Добавляем файл в список изображений
      setImages(prevImages => [...prevImages, file]);
    } else {
      console.error('Выбранный файл не является изображением');
      setError('Пожалуйста, выберите файл изображения (JPEG, PNG и т.д.)');
    }
  };
  
  // Обработчик добавления изображений
  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    console.log('Событие выбора файла сработало');
    
    try {
      const file = e.target.files?.[0];
      console.log('Выбранный файл:', file ? `${file.name} (${file.type})` : 'нет файла');
      
      if (file) {
        handleFileSelect(file);
        
        // Сбрасываем значение input, чтобы можно было выбрать тот же файл повторно
        e.target.value = '';
      }
    } catch (err) {
      console.error('Ошибка при обработке выбранного файла:', err);
      setError('Произошла ошибка при выборе файла. Пожалуйста, попробуйте еще раз.');
    }
  };
  
  // Обработчик удаления изображения
  const handleRemoveImage = (index: number) => {
    setImages(prevImages => prevImages.filter((_, i) => i !== index));
  };
  
  // Обработчик отправки формы
  const handleSubmit = async () => {
    // Проверяем, что есть текст или изображения
    if (!text.trim() && images.length === 0) {
      setError('Пожалуйста, введите текст или добавьте изображение');
      return;
    }
    
    try {
      setIsLoading(true);
      setError(null);
      
      const result = await onSubmit({
        text: text.trim(),
        images
      });
      
      if (result) {
        handleClose();
      } else {
        setError('Не удалось отправить обратную связь. Пожалуйста, попробуйте позже.');
      }
    } catch (err) {
      console.error('Ошибка при отправке обратной связи:', err);
      setError('Произошла ошибка при отправке. Пожалуйста, попробуйте позже.');
    } finally {
      setIsLoading(false);
    }
  };
  
  if (!isVisible) return null;

  return (
    <div className={styles.overlay}>
      <div className={styles.modal}>
        <div className={styles.header}>
          <div className={styles.title}>
            {isLoading && <span className={styles.spinner}></span>}
            Обратная связь
          </div>
          <div className={styles.message}>Расскажите нам о проблеме или предложении</div>
        </div>
        
        {/* Поле для ввода текста */}
        <textarea 
          ref={textareaRef}
          className={feedbackStyles.textarea}
          placeholder="Опишите вашу проблему или предложение..."
          value={text}
          onChange={(e) => setText(e.target.value)}
          onKeyDown={handleKeyDown}
          enterKeyHint="done"
          disabled={isLoading}
        />
        
        {/* Блок для загрузки изображений */}
        <div className={feedbackStyles.imageUploadContainer}>
          <button 
            className={feedbackStyles.addImageButton}
            onClick={() => fileInputRef.current?.click()}
            type="button"
            disabled={isLoading}
          >
            Добавить изображение
          </button>
          <input
            ref={fileInputRef}
            type="file"
            accept="image/*"
            onChange={handleFileChange}
            className={feedbackStyles.fileInput}
            disabled={isLoading}
          />
          
          {/* Превью загруженных изображений */}
          {images.length > 0 && (
            <div className={feedbackStyles.imagePreviewContainer}>
              {images.map((file, index) => (
                <ImagePreview
                  key={`${file.name}-${index}`}
                  file={file}
                  index={index}
                  onRemove={handleRemoveImage}
                  disabled={isLoading}
                />
              ))}
            </div>
          )}
        </div>
        
        {/* Сообщение об ошибке */}
        {error && (
          <div className={feedbackStyles.errorMessage}>
            {error}
          </div>
        )}
        
        {/* Кнопки действий */}
        <div className={styles.buttons}>
          <button 
            className={`${styles.button} ${styles.secondaryButton}`}
            onClick={handleClose}
            type="button"
            disabled={isLoading}
          >
            Отмена
          </button>
          <button 
            className={`${styles.button} ${styles.primaryButton}`}
            onClick={handleSubmit}
            type="button"
            disabled={isLoading}
          >
            {isLoading ? 'Отправка...' : 'Отправить'}
          </button>
        </div>
      </div>
    </div>
  );
};

export default FeedbackModal;
