import Button from '@mui/material/Button'
import InputAdornment from '@mui/material/InputAdornment'
import Stack from '@mui/material/Stack'
import TextField from '@mui/material/TextField'
import { useMutation } from '@tanstack/react-query'
import { Mail } from 'lucide-react'
import { useForm } from 'react-hook-form'
import { apiClient } from '@/shared/api/client'
import { getApiErrorMessage } from '@/shared/lib/get-api-error-message'
import { tokenSet } from '@/shared/model/auth'

type AuthResponse = {
  token: string
  user: {
    id: string
    email: string
    displayName?: string | null
    avatar?: string | null
    avatarStyle?: string | null
  }
}

type FormValues = {
  email: string
  code: string
}

type Props = {
  onSuccess: () => void
}

export function AuthCodeForm({ onSuccess }: Props) {
  const { register, watch } = useForm<FormValues>({
    defaultValues: { email: '', code: '' },
    mode: 'onChange',
  })

  const email = watch('email')
  const code = watch('code')

  const requestCodeMutation = useMutation({
    mutationFn: async () => {
      await apiClient.post('auth/request-code', { email })
    },
  })

  const verifyCodeMutation = useMutation({
    mutationFn: async () => {
      const { data } = await apiClient.post<AuthResponse>('auth/verify-code', { email, code })
      tokenSet(data.token)
    },
    onSuccess,
  })

  return (
    <Stack spacing={2}>
      <TextField
        label="Email"
        {...register('email')}
        fullWidth
        slotProps={{
          input: {
            startAdornment: (
              <InputAdornment position="start">
                <Mail size={18} />
              </InputAdornment>
            ),
          },
        }}
      />
      <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
        <Button
          variant="outlined"
          onClick={() => requestCodeMutation.mutate()}
          disabled={!email || requestCodeMutation.isPending}
          sx={{ whiteSpace: 'nowrap' }}
        >
          Отправить код
        </Button>
        <TextField label="Код (6 цифр)" inputMode="numeric" {...register('code')} sx={{ flex: 1 }} />
        <Button
          variant="contained"
          onClick={() => verifyCodeMutation.mutate()}
          disabled={!email || code.length !== 6 || verifyCodeMutation.isPending}
          sx={{ whiteSpace: 'nowrap' }}
        >
          Войти
        </Button>
      </Stack>

      {(requestCodeMutation.error || verifyCodeMutation.error) && (
        <TextField
          error
          helperText={getApiErrorMessage(requestCodeMutation.error) || getApiErrorMessage(verifyCodeMutation.error)}
          sx={{ display: 'none' }}
        />
      )}
    </Stack>
  )
}