import React, { useState, useEffect } from 'react';
import styles from './Profile.module.css';
import { MOCK_USER } from '../constants/mock';
import { stickerService } from '../services/stickerService';
import apiService from '../services/api';
import { getCurrentUserId } from '../constants/user';

const Profile: React.FC = () => {
  const [stickersCount, setStickersCount] = useState<number>(0);
  const [packsCount, setPacksCount] = useState<number>(0);
  const [loading, setLoading] = useState<boolean>(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        setLoading(true);
        
        // Получаем список стикерпаков
        const stickerPacks = await stickerService.getUserStickerPacks(getCurrentUserId().toString());
        setPacksCount(stickerPacks.length);
        
        // Получаем список созданных стикеров
        const generatedImages = await apiService.getGeneratedImages();
        setStickersCount(generatedImages.length);
      } catch (error) {
        console.error('Ошибка при загрузке данных профиля:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

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

      <div className={styles.card}>
        <div className={styles.stats}>
          <div className={styles.statItem}>
            <span className={styles.statValue}>{MOCK_USER.balance}</span>
            <span className={styles.statLabel}>Токенов</span>
          </div>
          <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}>0</span>
            <span className={styles.statLabel}>Избранных</span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Profile;
