import { Box, Button, Typography } from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import MinimizeIcon from '@mui/icons-material/Minimize';
import { useLocation, useNavigate } from 'react-router-dom';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';

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; // Опционально, если нужен обработчик регистрации
}

export default function TopBar({ onRegister }: TopBarProps) {
  // Получаем текущий путь
  const location = useLocation();
  const isLoginPage = location.pathname === '/login';
  const isLaunchPage = location.pathname.startsWith('/launch');
  const isVersionsExplorerPage = location.pathname.startsWith('/');
  const navigate = useNavigate();

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

  const getPageTitle = () => {
    if (isLoginPage) {
      return 'Вход';
    }
    if (isLaunchPage) {
      return 'Запуск';
    }
    if (isVersionsExplorerPage) {
      return 'Версии';
    }
    return 'Неизвестная страница';
  };

  return (
    <Box
      sx={{
        display: 'flex',
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        height: '5vh',
        zIndex: 1000,
        width: '100%',
        WebkitAppRegion: 'drag',
        overflow: 'hidden',
        justifyContent: 'space-between',
        alignItems: 'center',
      }}
    >
      {/* Левая часть */}
      <Box
        sx={{
          display: 'flex',
          WebkitAppRegion: 'no-drag',
          gap: '2vw',
          padding: '1em',
          alignItems: 'center',
        }}
      >
        {isLaunchPage && (
          <Button
            variant="outlined"
            color="primary"
            onClick={() => handleLaunchPage()}
            sx={{
              width: '3em',
              height: '3em',
              borderRadius: '50%',
              border: 'unset',
              color: 'white',
              minWidth: 'unset',
              minHeight: 'unset',
            }}
          >
            <ArrowBackIcon />
          </Button>
        )}
      </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' }}>
          {getPageTitle()}
        </Typography>
      </Box>
      {/* Правая часть со всеми кнопками */}
      <Box
        sx={{
          display: 'flex',
          WebkitAppRegion: 'no-drag',
          gap: '2vw',
          padding: '1em',
          alignItems: 'center',
        }}
      >
        {/* Кнопка регистрации, если на странице логина */}
        {isLoginPage && (
          <Button
            variant="outlined"
            color="primary"
            onClick={() => onRegister && onRegister()}
            sx={{
              width: '10em',
              height: '3em',
              borderRadius: '1.5vw',
              color: 'white',
              backgroundImage: 'linear-gradient(to right, #7BB8FF, #FFB7ED)',
              border: 'unset',
              '&:hover': {
                backgroundImage: 'linear-gradient(to right, #6AA8EE, #EEA7DD)',
              },
              boxShadow: '0.5em 0.5em 0.5em 0px #00000040 inset',
            }}
          >
            Регистрация
          </Button>
        )}

        {/* Кнопки управления окном */}
        <Button
          onClick={() => {
            window.electron.ipcRenderer.invoke('minimize-app');
          }}
          sx={{
            minWidth: 'unset',
            minHeight: 'unset',
            width: '3em',
            height: '3em',
            borderRadius: '50%',
          }}
        >
          <MinimizeIcon sx={{ color: 'white' }} />
        </Button>
        <Button
          onClick={() => {
            window.electron.ipcRenderer.invoke('close-app');
          }}
          sx={{
            minWidth: 'unset',
            minHeight: 'unset',
            width: '3em',
            height: '3em',
            borderRadius: '50%',
          }}
        >
          <CloseIcon sx={{ color: 'white' }} />
        </Button>
      </Box>
    </Box>
  );
}