import { Box, Button, Slider, TextField, Typography } from '@mui/material';
import { useEffect, useState } from 'react';

export default function Login() {
  const [config, setConfig] = useState({
    username: '',
    password: '',
    memory: 4096,
    comfortVersion: '',
    accessToken: '',
    clientToken: '',
  });
  const [status, setStatus] = useState('');

  const loadInitialConfig = () => {
    try {
      const savedConfig = localStorage.getItem('launcher_config');
      if (savedConfig) {
        return JSON.parse(savedConfig);
      }
    } catch (error) {
      console.log('Ошибка загрузки конфигурации:', error);
    }
    // Возвращаем значения по умолчанию
    return {
      username: '',
      password: '',
      memory: 4096,
      comfortVersion: '',
      accessToken: '',
      clientToken: '',
    };
  };

  useEffect(() => {
    const savedConfig = loadInitialConfig();
    setConfig(savedConfig);
  }, []);

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setConfig((prev) => ({ ...prev, [name]: value }));
  };

  const saveConfig = (
    username,
    memory,
    accessToken = '',
    clientToken = '',
    comfortVersion = '',
    password = '',
  ) => {
    try {
      const newConfig = {
        username,
        memory,
        accessToken: accessToken || config.accessToken,
        clientToken: clientToken || config.clientToken,
        comfortVersion: comfortVersion || config.comfortVersion,
        password: password || config.password,
      };
      setConfig(newConfig);
      localStorage.setItem('launcher_config', JSON.stringify(newConfig));
    } catch (error) {
      console.log(`Ошибка при сохранении конфигурации: ${error.message}`);
    }
  };

  const loadConfig = () => {
    try {
      const savedConfig = localStorage.getItem('launcher_config');
      if (savedConfig) {
        const parsedConfig = JSON.parse(savedConfig);
        setConfig(parsedConfig);
        return parsedConfig;
      }
    } catch (error) {
      console.log(`Ошибка при загрузке конфигурации: ${error.message}`);
    }
    return config;
  };

  const refreshSession = async (accessToken, clientToken) => {
    try {
      const refreshData = {
        accessToken: accessToken,
        clientToken: clientToken,
      };

      const response = await fetch('https://authserver.ely.by/auth/refresh', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(refreshData),
      });

      if (response.ok) {
        const data = await response.json();
        const newAccessToken = data.accessToken;
        const profile = data.selectedProfile;
        const uuid = profile.id;
        const name = profile.name;

        if (newAccessToken && uuid && name) {
          saveConfig(
            config.username,
            config.memory,
            newAccessToken,
            clientToken,
          );
          return {
            accessToken: newAccessToken,
            uuid: uuid,
            username: name,
            clientToken: clientToken,
          };
        }
      }
      return null;
    } catch (error) {
      console.log(`Ошибка при обновлении сессии: ${error.message}`);
      return null;
    }
  };

  const authenticateWithElyBy = async (username, password) => {
    try {
      const clientToken = crypto.randomUUID();
      const authData = {
        username: username,
        password: password,
        clientToken: clientToken,
        requestUser: true,
      };

      console.log(`Аутентификация пользователя ${username} на Ely.by...`);

      const response = await fetch(
        'https://authserver.ely.by/auth/authenticate',
        {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(authData),
        },
      );

      const responseData = await response.json();
      if (response.ok) {
        const accessToken = responseData.accessToken;
        const profile = responseData.selectedProfile;
        const uuid = profile.id;
        const name = profile.name;

        if (accessToken && uuid && name) {
          saveConfig(
            username,
            config.memory,
            accessToken,
            clientToken,
            '',
            password,
          );
          console.log(`Аутентификация успешна: UUID=${uuid}, Username=${name}`);

          return {
            accessToken: accessToken,
            uuid: uuid,
            username: name,
            clientToken: clientToken,
          };
        }
      } else {
        if (responseData.error === 'Account protected with two factor auth') {
          const totpToken = prompt(
            'Введите код двухфакторной аутентификации:',
            '',
          );

          if (totpToken) {
            authData.password = `${password}:${totpToken}`;
            const totpResponse = await fetch(
              'https://authserver.ely.by/auth/authenticate',
              {
                method: 'POST',
                headers: {
                  'Content-Type': 'application/json',
                },
                body: JSON.stringify(authData),
              },
            );
            if (totpResponse.ok) {
              const totpData = await totpResponse.json();
              const newAccessToken = totpData.accessToken;
              const newProfile = totpData.selectedProfile;
              const newUuid = newProfile.id;
              const newName = newProfile.name;

              if (newAccessToken && newUuid && newName) {
                saveConfig(
                  username,
                  config.memory,
                  newAccessToken,
                  clientToken,
                  '',
                  password,
                );
                return {
                  accessToken: newAccessToken,
                  uuid: newUuid,
                  username: newName,
                  clientToken: clientToken,
                };
              }
            }
          }
        }

        throw new Error(responseData.error || 'Ошибка авторизации');
      }
    } catch (error) {
      console.log(`Ошибка авторизации: ${error.message}`);
      return null;
    }
  };

  const authorization = async () => {
    console.log('Начинаем процесс авторизации...');

    if (!config.username.trim()) {
      console.log('Ошибка: не указан никнейм');
      alert('Введите никнейм!');
      return;
    }

    try {
      // Проверяем, есть ли сохранённый токен
      if (config.accessToken && config.clientToken) {
        console.log('Проверка валидности существующего токена...');
        const isValid = await validateSession(config.accessToken);

        if (!isValid) {
          console.log('Токен недействителен, пытаемся обновить...');
          const refreshedSession = await refreshSession(
            config.accessToken,
            config.clientToken,
          );

          if (!refreshedSession) {
            console.log(
              'Не удалось обновить токен, требуется новая авторизация',
            );
            const newSession = await authenticateWithElyBy(
              config.username,
              config.password,
            );
            if (!newSession) {
              console.log('Авторизация не удалась');
              return;
            }
          }
        } else {
          console.log('Токен действителен');
        }
      } else {
        console.log('Токен отсутствует, выполняем авторизацию...');
        const session = await authenticateWithElyBy(
          config.username,
          config.password,
        );
        if (!session) {
          console.log('Авторизация не удалась');
          return;
        }
      }

      console.log('Авторизация успешно завершена');
      // Здесь можно добавить логику для запуска игры
    } catch (error) {
      console.log(`ОШИБКА при авторизации: ${error.message}`);
    }
  };

  return (
    <Box>
      <Box sx={{ display: 'flex' }}>
        <Typography variant="h3">POPA</Typography>
        <Typography variant="h3">-</Typography>
        <Typography
          variant="h3"
          sx={{
            background: '-webkit-linear-gradient(200.96deg, #88BCFF, #FD71FF)',
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
          }}
        >
          POPA
        </Typography>
      </Box>
      <Box sx={{ display: 'flex', flexDirection: 'column', gap: '1.5vw' }}>
        <TextField
          required
          name="username"
          label="Введите ник"
          variant="outlined"
          value={config.username}
          onChange={handleInputChange}
        />
        <TextField
          required
          type="password"
          name="password"
          label="Введите пароль"
          variant="outlined"
          value={config.password}
          onChange={handleInputChange}
        />
        <Slider
          name="memory"
          aria-label="Temperature"
          defaultValue={4096}
          valueLabelDisplay="auto"
          shiftStep={1024}
          step={1024}
          marks
          min={1024}
          max={32628}
          value={config.memory}
          onChange={handleInputChange}
        />
        <Button onClick={authorization} variant="contained">
          Войти
        </Button>
      </Box>
    </Box>
  );
}