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

/**
 * Транслитерирует кириллический текст в латиницу.
 * Заменяет все недопустимые символы на подчеркивания.
 * Заменяет множественные подчеркивания на одиночные.
 */
function transliterate(text: string): string {
  const cyrillicToLatin: Record<string, string> = {
    'а': 'a', 'б': 'b', 'в': 'v', 'г': 'g', 'д': 'd', 'е': 'e', 'ё': 'e',
    'ж': 'zh', 'з': 'z', 'и': 'i', 'й': 'y', 'к': 'k', 'л': 'l', 'м': 'm',
    'н': 'n', 'о': 'o', 'п': 'p', 'р': 'r', 'с': 's', 'т': 't', 'у': 'u',
    'ф': 'f', 'х': 'kh', 'ц': 'ts', 'ч': 'ch', 'ш': 'sh', 'щ': 'sch',
    'ъ': '', 'ы': 'y', 'ь': '', 'э': 'e', 'ю': 'yu', 'я': 'ya',
    // Добавляем заглавные буквы
    'А': 'A', 'Б': 'B', 'В': 'V', 'Г': 'G', 'Д': 'D', 'Е': 'E', 'Ё': 'E',
    'Ж': 'Zh', 'З': 'Z', 'И': 'I', 'Й': 'Y', 'К': 'K', 'Л': 'L', 'М': 'M',
    'Н': 'N', 'О': 'O', 'П': 'P', 'Р': 'R', 'С': 'S', 'Т': 'T', 'У': 'U',
    'Ф': 'F', 'Х': 'Kh', 'Ц': 'Ts', 'Ч': 'Ch', 'Ш': 'Sh', 'Щ': 'Sch',
    'Ъ': '', 'Ы': 'Y', 'Ь': '', 'Э': 'E', 'Ю': 'Yu', 'Я': 'Ya'
  };

  // Транслитерация
  let result = '';
  for (let i = 0; i < text.length; i++) {
    const char = text[i];
    result += cyrillicToLatin[char] || char;
  }

  // Заменяем недопустимые символы на подчеркивания и приводим к нижнему регистру
  result = result.toLowerCase().replace(/[^a-z0-9_]/g, '_');
  
  // Заменяем множественные подчеркивания на одиночные
  result = result.replace(/_+/g, '_');
  
  // Убираем подчеркивания в начале и конце
  result = result.replace(/^_+|_+$/g, '');
  
  // Ограничиваем длину
  return result.substring(0, 30);
}

const CreateStickerPack: React.FC = () => {
  const navigate = useNavigate();
  const [title, setTitle] = useState('');
  const [selectedImages, setSelectedImages] = useState<GeneratedImage[]>([]);
  const [emojis, setEmojis] = useState<string[]>([]);
  const [availableImages, setAvailableImages] = useState<GeneratedImage[]>([]);
  const [loading, setLoading] = useState(true);
  const [creating, setCreating] = useState(false);
  const [error, setError] = useState<string | null>(null);

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

    fetchImages();
  }, []);

  // Обработчик выбора изображения
  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 handleEmojiChange = (index: number, emoji: string) => {
    setEmojis(prev => {
      const newEmojis = [...prev];
      newEmojis[index] = emoji;
      return newEmojis;
    });
  };

  // Обработчик создания стикерпака
  const handleCreateStickerPack = async () => {
    if (!title.trim()) {
      setError('Введите название стикерпака');
      return;
    }

    if (selectedImages.length === 0) {
      setError('Выберите хотя бы одно изображение');
      return;
    }

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

      // Используем file_id изображений для создания стикеров
      const fileIds = selectedImages.map(img => {
        // Проверяем, что link существует и является строкой
        if (typeof img.link !== 'string') {
          console.error('Некорректный формат link:', img.link);
          return '';
        }
        return img.link;
      }).filter(fileId => fileId !== ''); // Удаляем пустые значения

      // Генерируем имя стикерпака на основе заголовка с использованием транслитерации
      // для корректной обработки кириллицы
      const packName = transliterate(title);

      console.log(`Создание стикерпака: ${title}, имя: ${packName}`);

      // Создаем стикерпак
      await stickerService.createStickerPack(
        title,
        getCurrentUserId().toString(),
        fileIds,
        emojis,
        packName
      );

      // Переходим на страницу стикерпаков
      navigate('/packs');
    } catch (err) {
      console.error('Ошибка при создании стикерпака:', err);
      setError('Не удалось создать стикерпак');
    } finally {
      setCreating(false);
    }
  };

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <button 
          className={styles.backButton}
          onClick={() => navigate('/packs')}
        >
          ← Назад
        </button>
        <h1 className={styles.title}>Создание стикерпака</h1>
      </div>

      <div className={styles.form}>
        <div className={styles.formGroup}>
          <label htmlFor="title" className={styles.label}>Название стикерпака</label>
          <input
            id="title"
            type="text"
            className={styles.input}
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            placeholder="Введите название стикерпака"
          />
        </div>

        <div className={styles.formGroup}>
          <label className={styles.label}>Выберите изображения для стикеров</label>
          
          {loading && <p className={styles.loading}>Загрузка изображений...</p>}
          
          {!loading && availableImages.length === 0 && (
            <p className={styles.noImages}>
              У вас пока нет сгенерированных изображений. 
              Сначала создайте изображения в разделе "Создать стикер".
            </p>
          )}
          
          {!loading && availableImages.length > 0 && (
            <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}>
                        <input
                          type="text"
                          value={emojis[selectedIndex]}
                          onChange={(e) => handleEmojiChange(selectedIndex, e.target.value)}
                          className={styles.emojiInput}
                          maxLength={2}
                          onClick={(e) => e.stopPropagation()}
                        />
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          )}
        </div>

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

        <div className={styles.actions}>
          <button 
            className={styles.createButton}
            onClick={handleCreateStickerPack}
            disabled={creating || selectedImages.length === 0}
          >
            {creating ? 'Создание...' : 'Создать стикерпак'}
          </button>
        </div>
      </div>
    </div>
  );
};

export default CreateStickerPack;
