// CoinsDisplay.tsx
import { Box, Typography } from '@mui/material';
import CustomTooltip from './Notifications/CustomTooltip';
import { useEffect, useState } from 'react';
import { fetchCoins } from '../api';
import type { SxProps, Theme } from '@mui/material/styles';

interface CoinsDisplayProps {
  // Основные пропсы
  value?: number; // Передаем значение напрямую
  username?: string; // Или получаем по username из API

  // Опции отображения
  size?: 'small' | 'medium' | 'large';
  showTooltip?: boolean;
  tooltipText?: string;
  showIcon?: boolean;
  iconColor?: string;

  // Опции обновления
  autoUpdate?: boolean; // Автоматическое обновление из API
  updateInterval?: number; // Интервал обновления в миллисекундах

  // Стилизация
  backgroundColor?: string;
  textColor?: string;

  sx?: SxProps<Theme>;
}

export default function CoinsDisplay({
  // Основные пропсы
  value: externalValue,
  username,

  // Опции отображения
  size = 'medium',
  showTooltip = true,
  tooltipText = 'Попы — внутриигровая валюта, начисляемая за время игры на серверах.',
  showIcon = true,
  iconColor = '#2bff00ff',

  // Опции обновления
  autoUpdate = false,
  updateInterval = 60000,

  // Стилизация
  backgroundColor = 'rgba(0, 0, 0, 0.2)',
  textColor = 'white',

  sx,
}: CoinsDisplayProps) {
  const [coins, setCoins] = useState<number>(externalValue || 0);
  const [isLoading, setIsLoading] = useState<boolean>(false);

  // Определяем размеры в зависимости от параметра size
  const getSizes = () => {
    switch (size) {
      case 'small':
        return {
          containerPadding: '0.4vw 0.8vw',
          iconSize: '1.4vw',
          fontSize: '1vw',
          borderRadius: '2vw',
          gap: '0.6vw',
        };
      case 'large':
        return {
          containerPadding: '0.4vw 1.2vw',
          iconSize: '2.2vw',
          fontSize: '1.6vw',
          borderRadius: '1.8vw',
          gap: '0.8vw',
        };
      case 'medium':
      default:
        return {
          containerPadding: '0.4vw 1vw',
          iconSize: '2vw',
          fontSize: '1.4vw',
          borderRadius: '1.6vw',
          gap: '0.6vw',
        };
    }
  };

  const sizes = getSizes();

  // Функция для получения количества монет из API
  const fetchCoinsData = async () => {
    if (!username) return;

    setIsLoading(true);
    try {
      const coinsData = await fetchCoins(username);
      setCoins(coinsData.coins);
    } catch (error) {
      console.error('Ошибка при получении количества монет:', error);
    } finally {
      setIsLoading(false);
    }
  };

  // Эффект для внешнего значения
  useEffect(() => {
    if (externalValue !== undefined) {
      setCoins(externalValue);
    }
  }, [externalValue]);

  // Эффект для API обновлений
  useEffect(() => {
    if (username && autoUpdate) {
      fetchCoinsData();

      // Создаем интервалы для периодического обновления данных
      const coinsInterval = setInterval(fetchCoinsData, updateInterval);

      return () => {
        clearInterval(coinsInterval);
      };
    }
  }, [username, autoUpdate, updateInterval]);

  // Ручное обновление данных
  const handleRefresh = () => {
    if (username) {
      fetchCoinsData();
    }
  };

  // Форматирование числа с разделителями тысяч
  const formatNumber = (num: number): string => {
    return num.toLocaleString('ru-RU');
  };

  const coinsDisplay = (
    <Box
      sx={{
        display: 'flex',
        alignItems: 'center',
        gap: sizes.gap,
        backgroundColor,
        borderRadius: sizes.borderRadius,
        padding: sizes.containerPadding,
        border: '1px solid rgba(255, 255, 255, 0.1)',
        cursor: showTooltip ? 'help' : 'default',
        opacity: isLoading ? 0.7 : 1,
        transition: 'opacity 0.2s ease',

        ...sx,
      }}
      onClick={username ? handleRefresh : undefined}
      title={username ? 'Нажмите для обновления' : undefined}
    >
      {showIcon && (
        <Box
          sx={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            width: sizes.iconSize,
            height: sizes.iconSize,
            borderRadius: '50%',
            backgroundColor: 'rgba(255, 255, 255, 0.1)',
          }}
        >
          <Typography
            sx={{
              color: iconColor,
              fontWeight: 'bold',
              fontSize: `calc(${sizes.fontSize} * 0.8)`,
            }}
          >
            P
          </Typography>
        </Box>
      )}

      <Typography
        variant="body1"
        sx={{
          color: textColor,
          fontWeight: 'bold',
          fontSize: sizes.fontSize,
          lineHeight: 1,
          fontFamily: 'Benzin-Bold, sans-serif',
        }}
      >
        {isLoading ? '...' : formatNumber(coins)}
      </Typography>
    </Box>
  );

  if (showTooltip) {
    return (
      <CustomTooltip
        title={tooltipText}
        arrow
        placement="bottom"
        TransitionProps={{ timeout: 300 }}
      >
        {coinsDisplay}
      </CustomTooltip>
    );
  }

  return coinsDisplay;
}

// Примеры использования в комментариях для разработчика:
/*
// Пример 1: Простое отображение числа
<CoinsDisplay value={1500} />

// Пример 2: Получение данных по username с автообновлением
<CoinsDisplay
  username="player123"
  autoUpdate={true}
  updateInterval={30000} // обновлять каждые 30 секунд
/>

// Пример 3: Кастомная стилизация без иконки
<CoinsDisplay
  value={9999}
  size="small"
  showIcon={false}
  showTooltip={false}
  backgroundColor="rgba(255, 100, 100, 0.2)"
  textColor="#ffcc00"
/>

// Пример 4: Большой отображение для профиля
<CoinsDisplay
  username="player123"
  size="large"
  tooltipText="Ваш текущий баланс"
  iconColor="#00ffaa"
/>
*/
