import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import styles from './CreateSticker.module.css';
import TokenPacksModal from '../components/tokens/TokenPacksModal';
import { tokenPacks } from '../constants/tokenPacks';
import { paymentService } from '../services/paymentService';
import apiService from '../services/api';
import { getCurrentUserId } from '../constants/user';
import NotificationModal from '../components/shared/NotificationModal';

const TOKENS_PER_GENERATION = 10;

const CreateSticker: React.FC = () => {
  const navigate = useNavigate();
  const [showTokensModal, setShowTokensModal] = useState(false);
  const [missingTokens, setMissingTokens] = useState(0);
  const [lastPurchasedPack, setLastPurchasedPack] = useState<any>(null);
  
  // Состояния для модального окна уведомления
  const [showNotificationModal, setShowNotificationModal] = useState(false);
  const [notificationTitle, setNotificationTitle] = useState('');
  const [notificationMessage, setNotificationMessage] = useState('');

  const checkTokensAndProceed = async () => {
    try {
      const userTokens = await apiService.getBalance(getCurrentUserId());
      if (userTokens < TOKENS_PER_GENERATION) {
        setMissingTokens(TOKENS_PER_GENERATION - userTokens);
        setShowTokensModal(true);
        return false;
      }

      return true;
    } catch (error) {
      console.error('Error checking balance:', error);
      alert('Произошла ошибка при проверке баланса. Попробуйте позже.');
      return false;
    }
  };

  const handleUploadClick = async () => {
    const canProceed = await checkTokensAndProceed();
    if (canProceed) {
      // Здесь будет логика загрузки фото
      console.log('Загрузка фото...');
    }
  };

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <h1 className={styles.title}>
          Создание стикера
        </h1>
        <p className={styles.subtitle}>
          Загрузите фотографию для создания стикера
        </p>
      </div>

      <div 
        className={styles.uploadArea}
        onClick={handleUploadClick}
      >
        <div className={styles.uploadBox}>
          <span className={styles.uploadIcon}>📷</span>
          <span className={styles.uploadText}>
            Нажмите чтобы выбрать фото
          </span>
          <span className={styles.uploadHint}>
            или перетащите файл сюда
          </span>
          <span className={styles.tokenCost}>
            Стоимость: {TOKENS_PER_GENERATION} токенов
          </span>
        </div>
      </div>

      <TokenPacksModal
        isVisible={showTokensModal}
        onClose={() => setShowTokensModal(false)}
        onShowAllPacks={() => navigate('/profile')}
        missingTokens={missingTokens}
        onBuyPack={(packId: string) => {
          const pack = tokenPacks.find(p => p.id === packId);
          if (!pack) return;
          
          setShowTokensModal(false);
          setLastPurchasedPack(pack);
          
          paymentService.showBuyTokensPopup(pack, async (userData) => {
            if (userData) {
              // Обновляем данные на основе полученной информации
              // Показываем модальное окно с информацией об успешной оплате
              setNotificationTitle('Оплата успешна!');
              setNotificationMessage(`Вы успешно приобрели ${pack.tokens + pack.bonusTokens} токенов.`);
              setShowNotificationModal(true);
            } else {
              // Если данные не получены, делаем запрос на получение данных пользователя
              try {
                // Получаем баланс пользователя
                const balance = await apiService.getBalance(getCurrentUserId());
                
                // Показываем модальное окно с информацией об успешной оплате
                setNotificationTitle('Оплата успешна!');
                setNotificationMessage(`Вы успешно приобрели ${pack.tokens + pack.bonusTokens} токенов. Ваш текущий баланс: ${balance} токенов.`);
                setShowNotificationModal(true);
              } catch (error) {
                console.error('Ошибка при обновлении данных пользователя:', error);
              }
            }
          });
        }}
      />
      
      {/* Модальное окно уведомления */}
      <NotificationModal
        isVisible={showNotificationModal}
        title={notificationTitle}
        message={notificationMessage}
        onGalleryClick={() => setShowNotificationModal(false)}
        onContinueClick={() => setShowNotificationModal(false)}
        showGalleryButton={false}
        continueButtonText="Закрыть"
      />
    </div>
  );
};

export default CreateSticker;