import React, { useEffect, useMemo, useState } from 'react';

import Alert from '@mui/material/Alert';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Divider from '@mui/material/Divider';
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,
  type AdminProfile,
  type AdminRegisterPayload,
  type AdminPasswordChangePayload,
} from '../../../../api/index.ts';
import { ApiError } from '../../../../api/httpClient.ts';

type PasswordFormState = {
  current: string;
  password: string;
  confirm: string;
};

type RegisterFormState = {
  username: string;
  password: string;
  confirm: string;
};

type FormStatus = {
  isSubmitting: boolean;
  success: string | null;
  error: string | null;
};

const defaultPasswordForm: PasswordFormState = {
  current: '',
  password: '',
  confirm: '',
};

const defaultRegisterForm: RegisterFormState = {
  username: '',
  password: '',
  confirm: '',
};

const defaultStatus: FormStatus = {
  isSubmitting: false,
  success: null,
  error: null,
};

const formatDate = (value?: string) => {
  if (!value) {
    return '—';
  }
  const timestamp = new Date(value);
  if (Number.isNaN(timestamp.getTime())) {
    return '—';
  }

  return new Intl.DateTimeFormat('ru-RU', {
    day: '2-digit',
    month: 'long',
    year: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
  }).format(timestamp);
};

const validatePasswordForm = (form: PasswordFormState) => {
  if (!form.current) {
    return 'Введите текущий пароль.';
  }

  if (!form.password || form.password.length < 8) {
    return 'Пароль должен содержать минимум 8 символов.';
  }

  if (form.password !== form.confirm) {
    return 'Пароли не совпадают.';
  }

  return null;
};

const validateRegisterForm = (form: RegisterFormState) => {
  if (!form.username || form.username.length < 3) {
    return 'Логин должен содержать минимум 3 символа.';
  }

  if (!form.password || form.password.length < 8) {
    return 'Пароль должен содержать минимум 8 символов.';
  }

  if (form.password !== form.confirm) {
    return 'Пароли не совпадают.';
  }

  return null;
};

export const AdminDashboardAdmins: React.FC = () => {
  const [profile, setProfile] = useState<AdminProfile | null>(null);
  const [isLoadingProfile, setIsLoadingProfile] = useState(true);
  const [profileError, setProfileError] = useState<string | null>(null);

  const [passwordForm, setPasswordForm] = useState<PasswordFormState>(defaultPasswordForm);
  const [passwordStatus, setPasswordStatus] = useState<FormStatus>(defaultStatus);

  const [registerForm, setRegisterForm] = useState<RegisterFormState>(defaultRegisterForm);
  const [registerStatus, setRegisterStatus] = useState<FormStatus>(defaultStatus);

  const [deleteStatus, setDeleteStatus] = useState<FormStatus>(defaultStatus);

  const navigate = useNavigate();

  useEffect(() => {
    const loadProfile = async () => {
      setIsLoadingProfile(true);
      try {
        const response = await adminApi.profile();
        setProfile(response);
      } catch (err) {
        const message = err instanceof ApiError ? err.message : 'Не удалось загрузить профиль администратора.';
        setProfileError(message);
      } finally {
        setIsLoadingProfile(false);
      }
    };

    void loadProfile();
  }, []);

  const profileDetails = useMemo(() => {
    if (!profile) {
      return null;
    }

    return [
      { label: 'ID', value: profile.id },
      { label: 'Логин', value: profile.username },
      { label: 'Создан', value: formatDate(profile.createdAt) },
    ];
  }, [profile]);

const handlePasswordChange = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    if (!profile) {
      return;
    }

    const validationError = validatePasswordForm(passwordForm);
    if (validationError) {
      setPasswordStatus({
        isSubmitting: false,
        success: null,
        error: validationError,
      });
      return;
    }

    const payload: AdminPasswordChangePayload = {
      currentPassword: passwordForm.current.trim(),
      newPassword: passwordForm.password.trim(),
    };

    const submit = async () => {
      setPasswordStatus({ isSubmitting: true, success: null, error: null });
      try {
        await adminApi.changePassword(profile.id, payload);
        setPasswordStatus({ isSubmitting: false, success: 'Пароль успешно обновлён.', error: null });
        setPasswordForm(defaultPasswordForm);
      } catch (err) {
        const message = err instanceof ApiError ? err.message : 'Не удалось обновить пароль. Попробуйте позже.';
        setPasswordStatus({ isSubmitting: false, success: null, error: message });
      }
    };

    void submit();
  };

  const handleRegisterSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const validationError = validateRegisterForm(registerForm);
    if (validationError) {
      setRegisterStatus({ isSubmitting: false, success: null, error: validationError });
      return;
    }

    const payload: AdminRegisterPayload = {
      username: registerForm.username.trim(),
      password: registerForm.password.trim(),
    };

    const submit = async () => {
      setRegisterStatus({ isSubmitting: true, success: null, error: null });
      try {
        const response = await adminApi.registerAdmin(payload);
        setRegisterStatus({
          isSubmitting: false,
          success: `Администратор ${response.username} зарегистрирован.`,
          error: null,
        });
        setRegisterForm(defaultRegisterForm);
      } catch (err) {
        const message = err instanceof ApiError ? err.message : 'Не удалось зарегистрировать администратора. Попробуйте позже.';
        setRegisterStatus({ isSubmitting: false, success: null, error: message });
      }
    };

    void submit();
  };

  const handleDeleteAccount = async () => {
    if (!profile) {
      return;
    }

    const confirmed = window.confirm('Удалить ваш аккаунт администратора? Действие необратимо.');
    if (!confirmed) {
      return;
    }

    setDeleteStatus({ isSubmitting: true, success: null, error: null });
    try {
      await adminApi.deleteAdmin(profile.id);
      setDeleteStatus({ isSubmitting: false, success: 'Аккаунт удалён. Перенаправляем...', error: null });
      adminApi.logout();
      setTimeout(() => {
        navigate('/admin');
      }, 1200);
    } catch (err) {
      const message = err instanceof ApiError ? err.message : 'Не удалось удалить аккаунт. Попробуйте позже.';
      setDeleteStatus({ isSubmitting: false, success: null, error: message });
    }
  };

  return (
    <Stack spacing={4}>
      <div>
        <Typography variant="h5">Управление доступом</Typography>
        <Typography color="text.secondary">
          Обновите пароль, удалите свой доступ или создайте учётную запись для коллеги.
        </Typography>
      </div>

      {isLoadingProfile && (
        <Alert severity="info" sx={{ width: 'fit-content' }}>
          Загружаем профиль администратора...
        </Alert>
      )}

      {profileError && <Alert severity="error">{profileError}</Alert>}

      {profile && (
        <Box sx={{ border: 1, borderColor: 'divider', borderRadius: 2, p: 3 }}>
          <Typography variant="h6" gutterBottom>
            Текущий администратор
          </Typography>
          <Stack spacing={1}>
            {profileDetails?.map((detail) => (
              <Stack key={detail.label} direction="row" spacing={1} sx={{ flexWrap: 'wrap' }}>
                <Typography sx={{ minWidth: 120 }} color="text.secondary">
                  {detail.label}:
                </Typography>
                <Typography fontWeight={600}>{detail.value}</Typography>
              </Stack>
            ))}
          </Stack>
        </Box>
      )}

      <Divider />

      <Box component="section" sx={{ border: 1, borderColor: 'divider', borderRadius: 2, p: 3 }}>
        <Typography variant="h6" gutterBottom>
          Смена пароля
        </Typography>
        <Typography variant="body2" color="text.secondary" gutterBottom>
          Новый пароль должен содержать минимум 8 символов. Введите его дважды для подтверждения.
        </Typography>
        <Stack component="form" spacing={2} onSubmit={handlePasswordChange}>
          {passwordStatus.error && <Alert severity="error">{passwordStatus.error}</Alert>}
          {passwordStatus.success && <Alert severity="success">{passwordStatus.success}</Alert>}
          <TextField
            type="password"
            label="Текущий пароль"
            value={passwordForm.current}
            onChange={(event) =>
              setPasswordForm((prev) => ({
                ...prev,
                current: event.target.value,
              }))
            }
            required
            autoComplete="current-password"
          />
          <TextField
            type="password"
            label="Новый пароль"
            value={passwordForm.password}
            onChange={(event) =>
              setPasswordForm((prev) => ({
                ...prev,
                password: event.target.value,
              }))
            }
            required
            autoComplete="new-password"
          />
          <TextField
            type="password"
            label="Подтвердите пароль"
            value={passwordForm.confirm}
            onChange={(event) =>
              setPasswordForm((prev) => ({
                ...prev,
                confirm: event.target.value,
              }))
            }
            required
            autoComplete="new-password"
          />
          <Button type="submit" variant="contained" disabled={passwordStatus.isSubmitting || !profile} sx={{ alignSelf: 'flex-start', minWidth: 220 }}>
            {passwordStatus.isSubmitting ? 'Обновляем...' : 'Обновить пароль'}
          </Button>
        </Stack>
      </Box>

      <Divider />

      <Box component="section" sx={{ border: 1, borderColor: 'divider', borderRadius: 2, p: 3 }}>
        <Typography variant="h6" gutterBottom>
          Регистрация нового администратора
        </Typography>
        <Typography variant="body2" color="text.secondary" gutterBottom>
          Создайте дополнительный доступ для коллеги. Сохраните пароль и передайте его безопасным способом.
        </Typography>
        <Stack component="form" spacing={2} onSubmit={handleRegisterSubmit}>
          {registerStatus.error && <Alert severity="error">{registerStatus.error}</Alert>}
          {registerStatus.success && <Alert severity="success">{registerStatus.success}</Alert>}
          <TextField
            label="Логин"
            value={registerForm.username}
            onChange={(event) =>
              setRegisterForm((prev) => ({
                ...prev,
                username: event.target.value,
              }))
            }
            required
            autoComplete="username"
          />
          <TextField
            type="password"
            label="Пароль"
            value={registerForm.password}
            onChange={(event) =>
              setRegisterForm((prev) => ({
                ...prev,
                password: event.target.value,
              }))
            }
            required
            autoComplete="new-password"
          />
          <TextField
            type="password"
            label="Подтвердите пароль"
            value={registerForm.confirm}
            onChange={(event) =>
              setRegisterForm((prev) => ({
                ...prev,
                confirm: event.target.value,
              }))
            }
            required
            autoComplete="new-password"
          />
          <Button type="submit" variant="outlined" disabled={registerStatus.isSubmitting} sx={{ alignSelf: 'flex-start', minWidth: 220 }}>
            {registerStatus.isSubmitting ? 'Создаём...' : 'Создать администратора'}
          </Button>
        </Stack>
      </Box>

      <Divider />

      <Box component="section" sx={{ border: 1, borderColor: 'error.main', borderRadius: 2, p: 3, backgroundColor: 'error.main', color: 'error.contrastText' }}>
        <Typography variant="h6" gutterBottom>
          Опасная зона
        </Typography>
        <Typography variant="body2" gutterBottom>
          Полное удаление вашего аккаунта. После подтверждения доступ будет отозван, а вы будете перенаправлены к форме входа.
        </Typography>
        {deleteStatus.error && (
          <Alert severity="error" sx={{ mt: 2, backgroundColor: 'warning.light', color: 'text.primary' }}>
            {deleteStatus.error}
          </Alert>
        )}
        {deleteStatus.success && (
          <Alert severity="success" sx={{ mt: 2, backgroundColor: 'success.light', color: 'text.primary' }}>
            {deleteStatus.success}
          </Alert>
        )}
        <Button
          variant="contained"
          color="inherit"
          sx={{
            mt: 2,
            minWidth: 220,
            backgroundColor: 'background.paper',
            color: 'error.main',
            '&:hover': { backgroundColor: 'grey.100' },
          }}
          onClick={handleDeleteAccount}
          disabled={deleteStatus.isSubmitting || !profile}
        >
          {deleteStatus.isSubmitting ? 'Удаляем...' : 'Удалить мой аккаунт'}
        </Button>
      </Box>
    </Stack>
  );
};
