import Alert from '@mui/material/Alert'
import Box from '@mui/material/Box'
import Divider from '@mui/material/Divider'
import Stack from '@mui/material/Stack'
import Typography from '@mui/material/Typography'
import { useUnit } from 'effector-react'
import { $user } from '@/shared/model/auth'
import { AuthMethodsSection } from './AuthMethodsSection'
import { AvatarSection } from './AvatarSection'
import { DeleteAccountSection } from './DeleteAccountSection'
import { ProfileSection } from './ProfileSection'

export function SettingsPage() {
  const user = useUnit($user)

  if (!user) {
    return <Alert severity="info">Нужно войти. Перейдите на страницу «Вход».</Alert>
  }

  return (
    <Box>
      <Typography variant="h4" gutterBottom>
        Настройки
      </Typography>
      <Typography color="text.secondary" sx={{ mb: 3 }}>
        Текущая почта: <b>{user.email}</b>
      </Typography>

      <Stack spacing={3} sx={{ maxWidth: 560 }}>
        <ProfileSection />
        <Divider />
        <AvatarSection />
        {!user.isAdmin && (
          <>
            <Divider />
            <AuthMethodsSection />
          </>
        )}
        <DeleteAccountSection />
      </Stack>
    </Box>
  )
}