import { useEffect, useState } from 'react';

import Alert from '@mui/material/Alert';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Container from '@mui/material/Container';
import Paper from '@mui/material/Paper';
import Stack from '@mui/material/Stack';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
import { useNavigate } from 'react-router';

import { adminApi } from '../../../api/index.ts';
import { ApiError, getAdminAuthToken } from '../../../api/httpClient.ts';

const initialForm = {
  username: '',
  password: '',
};

export const AdminLoginForm: React.FC = () => {
  const navigate = useNavigate();
  const [form, setForm] = useState(initialForm);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isCheckingSession, setIsCheckingSession] = useState(false);

  useEffect(() => {
    const token = getAdminAuthToken();
    if (!token) {
      return;
    }

    const verify = async () => {
      setIsCheckingSession(true);
      try {
        const profile = await adminApi.profile();
        setSuccess(`Вы уже вошли как ${profile.username}. Перенаправляем...`);
        navigate('/admin/dashboard');
      } catch (err) {
        adminApi.logout();
        if (err instanceof ApiError) {
          setError('Сессия истекла. Пожалуйста, войдите снова.');
        } else {
          setError('Не удалось проверить текущую сессию. Попробуйте снова.');
        }
      } finally {
        setIsCheckingSession(false);
      }
    };

    void verify();
  }, [navigate]);

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = event.target;
    setForm((prev) => ({
      ...prev,
      [name]: value,
    }));
  };

  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    if (!form.username || !form.password) {
      setError('Введите логин и пароль');
      return;
    }

    setIsSubmitting(true);
    setError(null);
    setSuccess(null);

    try {
      await adminApi.login(form);
      setSuccess('Вы успешно вошли в админ-панель.');
      navigate('/admin/dashboard');
    } catch (err) {
      if (err instanceof ApiError) {
        setError(err.message || 'Не удалось выполнить вход. Повторите попытку.');
      } else {
        setError('Не удалось выполнить вход. Повторите попытку.');
      }
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <Box
      sx={{
        minHeight: '100vh',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: (theme) => theme.palette.grey[100],
        py: 4,
      }}
    >
      <Container maxWidth="sm">
        <Paper elevation={3} sx={{ p: { xs: 3, md: 4 } }}>
          <Stack spacing={3} component="form" onSubmit={handleSubmit}>
            <div>
              <Typography variant="h4" component="h1" gutterBottom>
                Вход в админ-панель
              </Typography>
              <Typography variant="body2" color="text.secondary">
                Используйте учётные данные администратора
              </Typography>
            </div>
            {error && <Alert severity="error">{error}</Alert>}
            {isCheckingSession && !error && <Alert severity="info">Проверяем активную сессию...</Alert>}
            {success && <Alert severity="success">{success}</Alert>}
            <TextField
              required
              label="Имя пользователя"
              name="username"
              value={form.username}
              onChange={handleChange}
              autoComplete="username"
              fullWidth
            />
            <TextField
              required
              label="Пароль"
              type="password"
              name="password"
              value={form.password}
              onChange={handleChange}
              autoComplete="current-password"
              fullWidth
            />
            <Button type="submit" variant="contained" disabled={isSubmitting || isCheckingSession}>
              {isSubmitting ? 'Входим…' : 'Войти'}
            </Button>
          </Stack>
        </Paper>
      </Container>
    </Box>
  );
};
