import { Box, Button, Tab, Tabs, Typography } from '@mui/material';
import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
import { useLocation, useNavigate } from 'react-router-dom';
import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
import { useEffect, useState } from 'react';
import { Tooltip } from '@mui/material';
import { fetchCoins } from '../api';
import CustomTooltip from './CustomTooltip';
declare global {
  interface Window {
    electron: {
      ipcRenderer: {
        invoke(channel: string, ...args: unknown[]): Promise<any>;
        on(channel: string, func: (...args: unknown[]) => void): void;
        removeAllListeners(channel: string): void;
      };
    };
  }
}

// Определяем пропсы
interface TopBarProps {
  onRegister?: () => void; // Опционально, если нужен обработчик регистрации
  username?: string;
}

export default function TopBar({ onRegister, username }: TopBarProps) {
  // Получаем текущий путь
  const location = useLocation();
  const isLoginPage = location.pathname === '/login';
  const isLaunchPage = location.pathname.startsWith('/launch');
  const isVersionsExplorerPage = location.pathname.startsWith('/');
  const isRegistrationPage = location.pathname === '/registration';
  const navigate = useNavigate();
  const [coins, setCoins] = useState<number>(0);
  const [value, setValue] = useState(0);
  const [activePage, setActivePage] = useState('versions');

  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
    setValue(newValue);
    if (newValue === 0) {
      navigate('/');
    } else if (newValue === 1) {
      navigate('/profile');
    } else if (newValue === 2) {
      navigate('/shop');
    } else if (newValue === 3) {
      navigate('/marketplace');
    }
  };

  const handleLaunchPage = () => {
    navigate('/');
  };

  const getPageTitle = () => {
    if (isLoginPage) {
      return 'Вход';
    }
    if (isLaunchPage) {
      return 'Запуск';
    }
    if (isVersionsExplorerPage) {
      if (activePage === 'versions') {
        return 'Версии';
      }
      if (activePage === 'profile') {
        return 'Профиль';
      }
      if (activePage === 'shop') {
        return 'Магазин';
      }
      if (activePage === 'marketplace') {
        return 'Рынок';
      }
    }
    return 'Неизвестная страница';
  };

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

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

  useEffect(() => {
    if (username) {
      fetchCoinsData();

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

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

  const logout = () => {
    localStorage.removeItem('launcher_config');
    navigate('/login');
  };

  return (
    <Box
      sx={{
        display: 'flex',
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        height: '7vh',
        zIndex: 1000,
        width: '100%',
        WebkitAppRegion: 'drag',
        overflow: 'hidden',
        justifyContent: 'space-between',
        alignItems: 'center',
        // marginLeft: '1em',
        // marginRight: '1em',
      }}
    >
      {/* Левая часть */}
      <Box
        sx={{
          display: 'flex',
          WebkitAppRegion: 'no-drag',
          gap: '2vw',
          alignItems: 'center',
          marginLeft: '1vw',
        }}
      >
        {(isLaunchPage || isRegistrationPage) && (
          <Button
            variant="outlined"
            onClick={() => handleLaunchPage()}
            sx={{
              width: '3em',
              height: '3em',
              borderRadius: '50%',
              border: 'unset',
              color: 'white',
              minWidth: 'unset',
              minHeight: 'unset',
              transition: 'transform 0.3s ease',
              '&:hover': {
                transform: 'scale(1.2)',
              },
            }}
          >
            <ArrowBackRoundedIcon />
          </Button>
        )}
        {!isLaunchPage && !isRegistrationPage && !isLoginPage && (
          <Box
            sx={{
              borderBottom: 1,
              borderColor: 'transparent',
              '& .MuiTabs-indicator': {
                backgroundColor: 'rgba(255, 77, 77, 1)',
              },
            }}
          >
            <Tabs
              value={value}
              onChange={handleChange}
              aria-label="basic tabs example"
              disableRipple={true}
            >
              <Tab
                label="Версии"
                disableRipple={true}
                onClick={() => {
                  setActivePage('versions');
                }}
                sx={{
                  color: 'white',
                  fontFamily: 'Benzin-Bold',
                  fontSize: '0.7em',
                  '&.Mui-selected': {
                    color: 'rgba(255, 77, 77, 1)',
                  },
                  '&:hover': {
                    color: 'rgb(177, 52, 52)',
                  },
                  transition: 'all 0.3s ease',
                }}
              />
              <Tab
                label="Профиль"
                disableRipple={true}
                onClick={() => {
                  setActivePage('profile');
                }}
                sx={{
                  color: 'white',
                  fontFamily: 'Benzin-Bold',
                  fontSize: '0.7em',
                  '&.Mui-selected': {
                    color: 'rgba(255, 77, 77, 1)',
                  },
                  '&:hover': {
                    color: 'rgb(177, 52, 52)',
                  },
                  transition: 'all 0.3s ease',
                }}
              />
              <Tab
                label="Магазин"
                disableRipple={true}
                onClick={() => {
                  setActivePage('shop');
                }}
                sx={{
                  color: 'white',
                  fontFamily: 'Benzin-Bold',
                  fontSize: '0.7em',
                  '&.Mui-selected': {
                    color: 'rgba(255, 77, 77, 1)',
                  },
                  '&:hover': {
                    color: 'rgb(177, 52, 52)',
                  },
                  transition: 'all 0.3s ease',
                }}
              />
              <Tab
                label="Рынок"
                disableRipple={true}
                onClick={() => {
                  setActivePage('marketplace');
                }}
                sx={{
                  color: 'white',
                  fontFamily: 'Benzin-Bold',
                  fontSize: '0.7em',
                  '&.Mui-selected': {
                    color: 'rgba(255, 77, 77, 1)',
                  },
                  '&:hover': {
                    color: 'rgb(177, 52, 52)',
                  },
                  transition: 'all 0.3s ease',
                }}
              />
            </Tabs>
          </Box>
        )}
      </Box>
      {/* Центр */}
      <Box
        sx={{
          position: 'absolute',
          left: '50%',
          transform: 'translateX(-50%)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          flexGrow: 1,
          WebkitAppRegion: 'drag',
        }}
      >
        <Typography
          variant="h6"
          sx={{ color: 'white', fontFamily: 'Benzin-Bold' }}
        >
          {getPageTitle()}
        </Typography>
      </Box>
      {/* Правая часть со всеми кнопками */}
      <Box
        sx={{
          display: 'flex',
          WebkitAppRegion: 'no-drag',
          gap: '1vw',
          alignItems: 'center',
          marginRight: '1vw',
        }}
      >
        {!isLoginPage && !isRegistrationPage && username && (
          <Button
            variant="outlined"
            color="primary"
            onClick={() => logout()}
            sx={{
              width: '8em',
              height: '3em',
              borderRadius: '2.5vw',
              fontFamily: 'Benzin-Bold',
              fontSize: '0.9em',
              background:
                'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)',
              color: 'white',
              border: 'none',
              transition: 'transform 0.3s ease',
              '&:hover': {
                background:
                  'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)',
                transform: 'scale(1.05)',
                boxShadow: '0 4px 15px rgba(242, 113, 33, 0.4)',
              },
              boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
            }}
          >
            Выйти
          </Button>
        )}
        {/* Кнопка регистрации, если на странице логина */}
        {!isLoginPage && !isRegistrationPage && username && (
          <CustomTooltip
            title="Попы — внутриигровая валюта, начисляемая за время игры на серверах."
            arrow
            placement="bottom"
            TransitionProps={{ timeout: 300 }}
          >
            <Box
              sx={{
                display: 'flex',
                alignItems: 'center',
                gap: '8px',
                backgroundColor: 'rgba(0, 0, 0, 0.2)',
                borderRadius: '16px',
                padding: '6px 12px',
                border: '1px solid rgba(255, 255, 255, 0.1)',
              }}
            >
              <Box
                sx={{
                  display: 'flex',
                  alignItems: 'center',
                  width: '24px',
                  height: '24px',
                }}
              >
                <Typography sx={{ color: '#2bff00ff' }}>P</Typography>
              </Box>
              <Typography
                variant="body1"
                sx={{
                  color: 'white',
                  fontWeight: 'bold',
                  fontSize: '16px',
                  lineHeight: 1,
                }}
              >
                {coins}
              </Typography>
            </Box>
          </CustomTooltip>
        )}
        {isLoginPage && (
          <Button
            variant="contained"
            onClick={() => navigate('/registration')}
            sx={{
              width: '13em',
              height: '3em',
              borderRadius: '2.5vw',
              fontFamily: 'Benzin-Bold',
              fontSize: '0.9em',
              background:
                'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)',
              color: 'white',
              border: 'none',
              transition: 'transform 0.3s ease',
              '&:hover': {
                background:
                  'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)',
                transform: 'scale(1.05)',
                boxShadow: '0 4px 15px rgba(242, 113, 33, 0.4)',
              },
              boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
            }}
          >
            Регистрация
          </Button>
        )}

        {/* Кнопки управления окном */}
        <Button
          onClick={() => {
            window.electron.ipcRenderer.invoke('minimize-app');
          }}
          sx={{
            minWidth: 'unset',
            minHeight: 'unset',
            width: '3em',
            height: '3em',
            borderRadius: '50%',
          }}
        >
          <svg
            className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium"
            focusable="false"
            aria-hidden="true"
            viewBox="0 0 24 24"
          >
            <path
              d="M 7 19 h 10 c 0.55 0 1 0.45 1 1 s -0.45 1 -1 1 H 7 c -0.55 0 -1 -0.45 -1 -1 s 0.45 -1 1 -1"
              fill="white"
            ></path>
          </svg>
        </Button>
        <Button
          onClick={() => {
            window.electron.ipcRenderer.invoke('close-app');
          }}
          sx={{
            minWidth: 'unset',
            minHeight: 'unset',
            width: '3em',
            height: '3em',
            borderRadius: '50%',
          }}
        >
          <CloseRoundedIcon sx={{ color: 'white' }} />
        </Button>
      </Box>
    </Box>
  );
}
