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';

const AddStickerToPackScreen: React.FC = () => {
  const navigate = useNavigate();
  const { packName } = useParams<{ packName: string }>();
  const [selectedImage, setSelectedImage] = useState<GeneratedImage | null>(null);
  const [emoji, setEmoji] = useState('😊');
  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('');

  // Загрузка доступных изображений и информации о стикерпаке
  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 handleImageSelect = (image: GeneratedImage) => {
    setSelectedImage(image);
  };

  // Обработчик добавления стикера
  const handleAddSticker = async () => {
    if (!selectedImage) {
      setError('Выберите изображение для стикера');
      return;
    }

    if (!emoji.trim()) {
      setError('Введите эмодзи для стикера');
      return;
    }

    if (!packName) {
      setError('Не указано имя стикерпака');
      return;
    }

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

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

      // Добавляем стикер в стикерпак, используя file_id изображения
      await stickerService.addStickerToPack(
        packName,
        getCurrentUserId().toString(),
        selectedImage.link,
        emoji,
        packTitle // Передаем заголовок стикерпака
      );

      // Возвращаемся на страницу стикерпаков
      navigate('/packs');
    } catch (err) {
      console.error('Ошибка при добавлении стикера:', err);
      setError('Не удалось добавить стикер');
    } 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}>1. Выберите изображение</h2>
              
              {availableImages.length === 0 ? (
                <p className={styles.noImages}>
                  У вас пока нет сгенерированных изображений. 
                  Сначала создайте изображения в разделе "Создать стикер".
                </p>
              ) : (
                <div className={styles.imagesGrid}>
                  {availableImages.map((image, index) => (
                    <div 
                      key={index} 
                      className={`${styles.imageItem} ${selectedImage?.id === image.id ? styles.selected : ''}`}
                      onClick={() => handleImageSelect(image)}
                    >
                      <img 
                        src={image.url || ''} 
                        alt={`Изображение ${index + 1}`} 
                        className={styles.image}
                      />
                    </div>
                  ))}
                </div>
              )}
            </div>

            <div className={styles.section}>
              <h2 className={styles.sectionTitle}>2. Выберите эмодзи</h2>
              <div className={styles.emojiSelector}>
                <input
                  type="text"
                  value={emoji}
                  onChange={(e) => setEmoji(e.target.value)}
                  className={styles.emojiInput}
                  maxLength={2}
                  placeholder="😊"
                />
                <p className={styles.emojiHelp}>
                  Введите один или два эмодзи, которые будут ассоциироваться со стикером
                </p>
              </div>
            </div>

            <div className={styles.actions}>
              <button 
                className={styles.addButton}
                onClick={handleAddSticker}
                disabled={adding || !selectedImage}
              >
                {adding ? 'Добавление...' : 'Добавить стикер'}
              </button>
            </div>
          </>
        )}
      </div>
    </div>
  );
};

export default AddStickerToPackScreen;
