import React, { useState, useEffect } from 'react';
import styles from './Profile.module.css';
import { stickerService } from '../services/stickerService';
import apiService from '../services/api';
import { getCurrentUserId } from '../constants/user';
import TokenPacksList from '../components/tokens/TokenPacksList';
import { tokenPacks, TokenPack } from '../constants/tokenPacks';
import { paymentService } from '../services/paymentService';
import NotificationModal from '../components/shared/NotificationModal';

const Profile: React.FC = () => {
  const [stickersCount, setStickersCount] = useState<number>(0);
  const [packsCount, setPacksCount] = useState<number>(0);
  const [loading, setLoading] = useState<boolean>(true);
  const [showPaymentSuccessModal, setShowPaymentSuccessModal] = useState<boolean>(false);
  const [lastPurchasedPack, setLastPurchasedPack] = useState<TokenPack | null>(null);
  const [userBalance, setUserBalance] = useState<number>(0);

  useEffect(() => {
    fetchUserData();
  }, []);

  const fetchUserData = async () => {
    try {
      setLoading(true);
      
      // Получаем список стикерпаков
      const stickerPacks = await stickerService.getUserStickerPacks(getCurrentUserId().toString());
      setPacksCount(stickerPacks.length);
      
      // Получаем список созданных стикеров
      const generatedImages = await apiService.getGeneratedImages();
      setStickersCount(generatedImages.length);

      // Получаем баланс пользователя
      const balance = await apiService.getBalance();
      setUserBalance(balance);
    } catch (error) {
      console.error('Ошибка при загрузке данных профиля:', error);
    } finally {
      setLoading(false);
    }
  };

  const handleBuyPack = (packId: string) => {
    const pack = tokenPacks.find(p => p.id === packId);
    if (!pack) return;

    setLastPurchasedPack(pack);

    paymentService.showBuyTokensPopup(pack, async (userData) => {
      if (userData) {
        // Обновляем данные на основе полученной информации
        if (userData.stickers_count !== undefined) {
          setStickersCount(userData.stickers_count);
        }
        if (userData.packs_count !== undefined) {
          setPacksCount(userData.packs_count);
        }
        if (userData.balance !== undefined) {
          setUserBalance(userData.balance);
        }
        
        // Показываем модальное окно с информацией об успешной оплате
        setShowPaymentSuccessModal(true);
      } else {
        // Если данные не получены, делаем запрос на получение данных пользователя
        try {
          await fetchUserData();
          // Показываем модальное окно с информацией об успешной оплате
          setShowPaymentSuccessModal(true);
        } catch (error) {
          console.error('Ошибка при обновлении данных пользователя:', error);
        }
      }
    });
  };

  const handleClosePaymentSuccessModal = () => {
    setShowPaymentSuccessModal(false);
  };

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <h1 className={styles.title}>Профиль</h1>
        <p className={styles.subtitle}>Ваша статистика и настройки</p>
      </div>

      <div className={styles.compactStats}>
        <div className={styles.statItem}>
          <span className={styles.statValue}>{loading ? '...' : stickersCount}</span>
          <span className={styles.statLabel}>Стикеров создано</span>
        </div>
        <div className={styles.statItem}>
          <span className={styles.statValue}>{loading ? '...' : packsCount}</span>
          <span className={styles.statLabel}>Стикерпаков</span>
        </div>
        <div className={styles.statItem}>
          <span className={styles.statValue}>{loading ? '...' : userBalance}</span>
          <span className={styles.statLabel}>Токенов</span>
        </div>
      </div>

      <TokenPacksList 
        onBuyPack={handleBuyPack}
        className={styles.tokenPacks}
      />

      {/* Модальное окно успешной оплаты */}
      <NotificationModal
        isVisible={showPaymentSuccessModal}
        title="Оплата успешна!"
        message={lastPurchasedPack ? `Вы успешно приобрели ${lastPurchasedPack.tokens + lastPurchasedPack.bonusTokens} токенов. Ваш текущий баланс: ${userBalance} токенов.` : "Оплата прошла успешно!"}
        onGalleryClick={handleClosePaymentSuccessModal}
        onContinueClick={handleClosePaymentSuccessModal}
        showGalleryButton={false}
        continueButtonText="Закрыть"
      />
    </div>
  );
};

export default Profile;
