import React, { useState, useCallback, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import BlockRenderer from '../components/blocks/BlockRenderer';
// import UploadPhotoBlock from '../components/blocks/UploadPhotoBlock'; // Не используется
import styles from './Home.module.css';
import { homeScreenConfig } from '../config/homeScreen';
import { stylePresets } from '../config/stylePresets';
import apiService from '../services/api';
import NotificationModal from '../components/shared/NotificationModal';

const Home: React.FC = () => {
  const navigate = useNavigate();
  
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const [previewUrl, setPreviewUrl] = useState<string | undefined>(() => {
    // Проверяем, есть ли превью в состоянии навигации или localStorage
    const state = window.history.state?.usr;
    return state?.previewUrl || localStorage.getItem('stickerPreviewUrl') || undefined;
  });

  const [imageData, _setImageData] = useState<string | undefined>(() => {
    const state = window.history.state?.usr;
    return state?.imageData || localStorage.getItem('stickerImageData') || undefined;
  });
  const [isInputVisible, setIsInputVisible] = useState(false);
  const [selectedStyle, setSelectedStyle] = useState<string>('chibi'); // По умолчанию выбран первый стиль
  const [selectedButtonId, setSelectedButtonId] = useState<string | undefined>(undefined); // Для хранения ID выбранной кнопки стиля
  const [customPrompt, setCustomPrompt] = useState<string>(''); // Для хранения пользовательского промпта
  
  // Состояния для модального окна уведомления
  const [isNotificationVisible, setIsNotificationVisible] = useState(false);
  const [notificationTitle, setNotificationTitle] = useState('');
  const [notificationMessage, setNotificationMessage] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [promptText, setPromptText] = useState('');
  
  // Обработчики для модального окна
  const handleGalleryClick = useCallback(() => {
    setIsNotificationVisible(false);
    navigate('/gallery');
  }, [navigate]);

  const handleContinueClick = useCallback(() => {
    setIsNotificationVisible(false);
  }, []);

  const handleBlockAction = useCallback(async (actionType: string, actionValue: string, _blockId?: string, buttonId?: string) => {
    if (actionType === 'function') {
      if (actionValue === 'startGeneration') {
        if (!imageData) {
          alert('Сначала загрузите изображение');
          return;
        }

        try {
          // Показываем уведомление о начале генерации
          setNotificationTitle('Генерация стикера');
          setNotificationMessage('Отправка запроса...');
          setIsLoading(true);
          setPromptText('');
          setIsNotificationVisible(true);

          // Если выбран "Свой промпт" и введен текст, используем его
          const userPrompt = selectedButtonId === 'customPrompt' && customPrompt ? customPrompt : undefined;
          
          // Отправляем запрос на генерацию
          const response = await apiService.generateImage(imageData, selectedStyle, selectedButtonId, userPrompt);
          console.log('Generation response:', response);
          
          // Проверяем, была ли ошибка перевода
          if (response.translationFailed) {
            setNotificationTitle('Недопустимый промпт');
            setNotificationMessage('Промпт содержит недопустимый контент. Пожалуйста, используйте более нейтральные формулировки.');
            
            // Логирование деталей ошибки для отладки
            if (response.errorDetails) {
              console.error('Детали ошибки перевода:', response.errorDetails);
            }
            
            setIsLoading(false);
            return;
          }
          
          // Если нет ошибки перевода, продолжаем обработку результата
          if (response.result && response.usedPrompt) {
            // Получаем результат и использованный промпт
            const { result, usedPrompt } = response;
            
            // Обновляем уведомление с информацией о позиции в очереди
            if (result.queue_position !== undefined) {
              const estimatedTime = apiService.calculateEstimatedWaitTime(result.queue_position);
              const minutes = Math.floor(estimatedTime / 60);
              const seconds = estimatedTime % 60;
              const timeString = minutes > 0 
                ? `${minutes} мин ${seconds} сек` 
                : `${seconds} сек`;
                
              setNotificationMessage(`Ваша задача отправлена на генерацию!\nПозиция в очереди: ${result.queue_position}\nПримерное время ожидания: ${timeString}`);
            } else {
              setNotificationMessage('Ваша задача отправлена на генерацию!');
            }
            
            // Устанавливаем использованный промпт и убираем индикатор загрузки
            setPromptText(usedPrompt);
          }
          
          setIsLoading(false);
        } catch (error) {
          console.error('Generation failed:', error);
          setNotificationTitle('Ошибка');
          setNotificationMessage('Не удалось начать генерацию');
          setIsLoading(false);
          setIsNotificationVisible(true);
        }
        return;
      }

      if (actionValue === 'toggleInput') {
        setIsInputVisible(prev => !prev);
        // Устанавливаем selectedButtonId в 'customPrompt' при нажатии на кнопку "Свой промпт"
        setSelectedButtonId('customPrompt');
        console.log('Выбран свой промпт, установлен ID:', 'customPrompt');
        return;
      }
      
      if (actionValue === 'openTelegramBot') {
        // Проверяем, доступен ли объект Telegram
        if (window.Telegram && window.Telegram.WebApp) {
          window.Telegram.WebApp.openTelegramLink('https://t.me/youtube_s_loader_bot');
        } else {
          // Запасной вариант, если API Telegram недоступен
          window.open('https://t.me/youtube_s_loader_bot', '_blank');
        }
        return;
      }
    } else if (actionType === 'route') {
      // Добавляем обработку для действий типа 'route'
      navigate(actionValue);
      return;
    } else if (actionType === 'selectStyle') {
      // Обработка выбора стиля
      setSelectedStyle(actionValue);
      console.log('Selected style:', actionValue);
      return;
    } else if (actionType === 'selectPreset') {
      // Обработка выбора пресета
      setSelectedButtonId(buttonId);
      console.log('Selected preset:', actionValue);
      return;
    }

    // Если выбрана любая другая кнопка, скрываем поле ввода
    setIsInputVisible(false);
  }, [navigate, imageData, selectedStyle, selectedButtonId, customPrompt]);

  // Эффект для обновления window.history.state при загрузке из localStorage
  useEffect(() => {
    // Если есть данные в localStorage, но нет в history.state, обновляем history.state
    const state = window.history.state?.usr;
    const localStoragePreviewUrl = localStorage.getItem('stickerPreviewUrl');
    const localStorageImageData = localStorage.getItem('stickerImageData');
    
    if (!state?.previewUrl && localStoragePreviewUrl && localStorageImageData) {
      window.history.replaceState(
        { 
          usr: { 
            previewUrl: localStoragePreviewUrl,
            imageData: localStorageImageData
          } 
        },
        '',
        window.location.pathname
      );
    }
  }, []);
  
  // Эффект для обработки закрытия приложения
  useEffect(() => {
    // Обработчик события beforeunload для очистки данных при закрытии приложения
    const handleBeforeUnload = () => {
      localStorage.removeItem('stickerPreviewUrl');
      localStorage.removeItem('stickerImageData');
    };
    
    window.addEventListener('beforeunload', handleBeforeUnload);
    
    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
    };
  }, []);

  // Функция для получения кнопок в зависимости от блока
  const getBlockButtons = useCallback((block: any) => {
    if (block.id === 'quickActions') {
      // Берем кнопку "Свой промпт" из конфигурации
      const customPromptButton = block.buttons[0];
      // Добавляем к ней кнопки из выбранного стиля
      return [customPromptButton, ...(stylePresets[selectedStyle]?.buttons || [])];
    }
    return block.buttons;
  }, [selectedStyle]);

  return (
    <div className={styles.container}>
      {/* Модальное окно уведомления */}
      <NotificationModal
        isVisible={isNotificationVisible}
        title={notificationTitle}
        message={notificationMessage}
        isLoading={isLoading}
        promptText={promptText}
        onGalleryClick={handleGalleryClick}
        onContinueClick={handleContinueClick}
      />
      
      <div className={styles.content}>
        {/* Блоки из конфигурации */}
        <div className={styles.blocks}>
          {homeScreenConfig.homeScreen.blocks
            .filter(block => block.type !== 'generateButton')
            .map((block) => {
              // Создаем копию блока с модифицированными кнопками
              const modifiedBlock = {
                ...block,
                buttons: getBlockButtons(block)
              };
              
              return (
                <BlockRenderer 
                  key={block.id} 
                  block={modifiedBlock} 
                  onAction={handleBlockAction}
                  extraProps={block.type === 'textInput' ? { 
                    visible: isInputVisible,
                    onTextChange: setCustomPrompt 
                  } : undefined}
                />
              );
            })}
        </div>
        {homeScreenConfig.homeScreen.blocks
          .filter(block => block.type === 'generateButton')
          .map((block) => (
              <div className={styles.generateButtonContainer} key={block.id}>
              <BlockRenderer 
                block={block} 
                onAction={handleBlockAction}
                extraProps={undefined}
              />
            </div>
          ))}
      </div>
    </div>
  );
};

export default Home;
