import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { MOCK_USER } from '../../constants/mock';
import { getUserInfo, isTelegramWebAppAvailable } from '../../constants/user';
import { images } from '../../assets';
import styles from './Header.module.css';

const Header: React.FC = () => {
  const [user, setUser] = useState(MOCK_USER);
  
  useEffect(() => {
    // Получаем информацию о пользователе
    const userInfo = getUserInfo();
    
    // Если есть данные из Telegram, обновляем состояние
    if (isTelegramWebAppAvailable()) {
      setUser({
        telegramId: userInfo.id,
        username: userInfo.first_name + (userInfo.last_name ? ` ${userInfo.last_name}` : ''),
        avatarUrl: userInfo.photo_url || MOCK_USER.avatarUrl, // Используем фото из Telegram или дефолтное
        balance: MOCK_USER.balance // Баланс оставляем из моковых данных
      });
    }
  }, []);

  return (
    <header className={styles.header}>
      <div className={styles.container}>
        <div className={styles.content}>
          {/* Профиль пользователя */}
          <Link to="/profile" className={styles.profile}>
            <div className={styles.avatar}>
              <img
                src={user.avatarUrl}
                alt="Avatar"
                className={styles.avatarImage}
                onError={(e) => {
                  e.currentTarget.onerror = null;
                  e.currentTarget.src = 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><circle cx="12" cy="8" r="4"/><path d="M12 13c-4 0-8 2-8 6v1h16v-1c0-4-4-6-8-6z"/></svg>';
                }}
              />
            </div>
            <span className={styles.username}>
              {user.username}
            </span>
          </Link>

          {/* Баланс токенов */}
          <button 
            className={styles.balance} 
            onClick={() => alert('Пополнить баланс')}
            title="Нажмите чтобы пополнить баланс"
          >
            <span className={styles.balanceIcon}>
              <img src={images.tokenIcon} alt="Токены" className={styles.tokenImage} />
            </span>
            <span className={styles.balanceValue}>
              {user.balance}
            </span>
          </button>
        </div>
      </div>
    </header>
  );
};

export default Header;