import React, { useState, useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import styles from './AddStickerToPackScreen.module.css';
import { stickerService } from '../services/stickerService';
import apiService from '../services/api';
import { GeneratedImage } from '../types/api';
import { getCurrentUserId } from '../constants/user';
import EmojiPickerModal from '../components/shared/EmojiPickerModal';
import ValidationModal from '../components/shared/ValidationModal';

const AddStickerToPackScreen: React.FC = () => {
  const navigate = useNavigate();
  const { packName } = useParams<{ packName: string }>();
  const [selectedImages, setSelectedImages] = useState<GeneratedImage[]>([]);
  const [emojis, setEmojis] = useState<string[]>([]);
  const [availableImages, setAvailableImages] = useState<GeneratedImage[]>([]);
  const [loading, setLoading] = useState(true);
  const [adding, setAdding] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [packTitle, setPackTitle] = useState('');
  
  // Состояния для модального окна эмодзи
  const [isEmojiPickerVisible, setIsEmojiPickerVisible] = useState(false);
  const [activeEmojiIndex, setActiveEmojiIndex] = useState<number | null>(null);
  
  // Состояния для модального окна валидации
  const [validationTitle, setValidationTitle] = useState<string>('');
  const [validationMessage, setValidationMessage] = useState<string>('');
  const [isValidationModalVisible, setIsValidationModalVisible] = useState<boolean>(false);

  // Загрузка доступных изображений и информации о стикерпаке
  useEffect(() => {
    const fetchData = async () => {
      try {
        setLoading(true);
        
        // Загружаем изображения
        const images = await apiService.getGeneratedImages();
        setAvailableImages(images);
        
        // Загружаем информацию о стикерпаке
        if (packName) {
          const packInfo = await stickerService.getStickerPack(packName);
          setPackTitle(packInfo.title);
        }
        
        setError(null);
      } catch (err) {
        console.error('Ошибка при загрузке данных:', err);
        setError('Не удалось загрузить данные');
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [packName]);

  // Функция для открытия пикера эмодзи
  const openEmojiPicker = (index: number, e: React.MouseEvent) => {
    e.stopPropagation();
    setActiveEmojiIndex(index);
    setIsEmojiPickerVisible(true);
  };

  // Функция для закрытия пикера эмодзи без выбора
  const handleCancelEmojiPicker = () => {
    setIsEmojiPickerVisible(false);
    setActiveEmojiIndex(null);
  };

  // Функция для выбора эмодзи
  const handleSelectEmoji = (emoji: string) => {
    if (activeEmojiIndex !== null) {
      handleEmojiChange(activeEmojiIndex, emoji);
    }
    setIsEmojiPickerVisible(false);
    setActiveEmojiIndex(null);
  };

  // Обработчик изменения эмодзи
  const handleEmojiChange = (index: number, emoji: string) => {
    setEmojis(prev => {
      const newEmojis = [...prev];
      newEmojis[index] = emoji;
      return newEmojis;
    });
  };

  // Обработчик закрытия модального окна валидации
  const handleValidationModalClose = () => {
    setIsValidationModalVisible(false);
  };

  // Обработчик выбора изображения
  const handleImageSelect = (image: GeneratedImage) => {
    // Проверяем, выбрано ли уже изображение
    const isSelected = selectedImages.some(img => img.id === image.id);
    
    if (isSelected) {
      // Если изображение уже выбрано, удаляем его из выбранных
      setSelectedImages(prev => prev.filter(img => img.id !== image.id));
      setEmojis(prev => {
        const index = selectedImages.findIndex(img => img.id === image.id);
        return prev.filter((_, i) => i !== index);
      });
    } else {
      // Если изображение не выбрано, добавляем его в выбранные
      setSelectedImages(prev => [...prev, image]);
      setEmojis(prev => [...prev, '😊']); // Добавляем эмодзи по умолчанию
    }
  };

  // Обработчик добавления стикеров
  const handleAddStickers = async () => {
    if (selectedImages.length === 0) {
      setValidationTitle('Стикеры не выбраны');
      setValidationMessage('Пожалуйста, выберите хотя бы одно изображение для добавления в стикерпак.');
      setIsValidationModalVisible(true);
      return;
    }

    if (!packName) {
      setValidationTitle('Ошибка');
      setValidationMessage('Не указано имя стикерпака.');
      setIsValidationModalVisible(true);
      return;
    }

    try {
      setAdding(true);
      setError(null);

      // Добавляем каждый стикер по очереди
      for (let i = 0; i < selectedImages.length; i++) {
        const image = selectedImages[i];
        const emoji = emojis[i] || '😊';

        // Проверяем, что link существует и является строкой
        if (typeof image.link !== 'string') {
          console.error('Некорректный формат link:', image.link);
          continue;
        }

        // Добавляем стикер в стикерпак
        await stickerService.addStickerToPack(
          packName,
          getCurrentUserId().toString(),
          image.link,
          emoji,
          packTitle
        );
      }

      // Возвращаемся на страницу стикерпаков
      navigate('/packs');
    } catch (err) {
      console.error('Ошибка при добавлении стикеров:', err);
      setValidationTitle('Ошибка');
      setValidationMessage('Не удалось добавить стикеры в стикерпак. Пожалуйста, попробуйте еще раз.');
      setIsValidationModalVisible(true);
    } finally {
      setAdding(false);
    }
  };

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <button 
          className={styles.backButton}
          onClick={() => navigate('/packs')}
        >
          ← Назад
        </button>
        <h1 className={styles.title}>
          Добавление стикеров в "{packTitle || packName}"
        </h1>
      </div>

      <div className={styles.content}>
        {loading && (
          <div className={styles.loading}>
            <p>Загрузка данных...</p>
          </div>
        )}

        {error && (
          <div className={styles.error}>
            <p>{error}</p>
          </div>
        )}

        {!loading && (
          <>
            <div className={styles.section}>
              <h2 className={styles.sectionTitle}>Выберите изображения для стикеров</h2>
              
              {availableImages.length === 0 ? (
                <p className={styles.noImages}>
                  У вас пока нет сгенерированных изображений. 
                  Сначала создайте изображения в разделе "Создать стикер".
                </p>
              ) : (
                <div className={styles.imagesGrid}>
                  {availableImages.map((image, index) => {
                    const isSelected = selectedImages.some(img => img.id === image.id);
                    const selectedIndex = selectedImages.findIndex(img => img.id === image.id);
                    
                    return (
                      <div 
                        key={index} 
                        className={`${styles.imageItem} ${isSelected ? styles.selected : ''}`}
                        onClick={() => handleImageSelect(image)}
                      >
                        <img 
                          src={image.url || ''} 
                          alt={`Изображение ${index + 1}`} 
                          className={styles.image}
                        />
                        
                        {isSelected && (
                          <div className={styles.emojiSelector}>
                            <button
                              className={styles.emojiButton}
                              onClick={(e) => openEmojiPicker(selectedIndex, e)}
                            >
                              {emojis[selectedIndex] || '😊'}
                            </button>
                          </div>
                        )}
                      </div>
                    );
                  })}
                </div>
              )}
            </div>
          </>
        )}
      </div>

      <div className={styles.addButtonContainer}>
        <button 
          className={styles.addButton}
          onClick={handleAddStickers}
          disabled={adding}
        >
          {adding ? 'Добавление...' : 'Добавить стикеры'}
        </button>
      </div>

      {/* Модальное окно выбора эмодзи */}
      <EmojiPickerModal
        isVisible={isEmojiPickerVisible && activeEmojiIndex !== null}
        onCancel={handleCancelEmojiPicker}
        onSelect={handleSelectEmoji}
        initialEmoji={activeEmojiIndex !== null ? (emojis[activeEmojiIndex] || '😊') : '😊'}
      />

      {/* Модальное окно валидации */}
      <ValidationModal
        isVisible={isValidationModalVisible}
        title={validationTitle}
        message={validationMessage}
        onContinue={handleValidationModalClose}
      />
    </div>
  );
};

export default AddStickerToPackScreen;
