import { useState } from 'react'
import Alert from '@mui/material/Alert'
import Box from '@mui/material/Box'
import FormControlLabel from '@mui/material/FormControlLabel'
import Stack from '@mui/material/Stack'
import Switch from '@mui/material/Switch'
import Typography from '@mui/material/Typography'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import {
  fetchUserNotificationSettings,
  updateUserNotificationSettings,
} from '@/entities/notification/api/notifications-api'
import type { UserNotificationSettings } from '@/entities/notification/api/notifications-api'

function isOrderStatusChangesOn(s: UserNotificationSettings): boolean {
  return s.orderCreated && s.orderStatusChanged && s.paymentStatusChanged && s.deliveryFeeAdjusted
}

const orderStatusChangesPayload = (on: boolean) => ({
  orderCreated: on,
  orderStatusChanged: on,
  paymentStatusChanged: on,
  deliveryFeeAdjusted: on,
})

export function NotificationsPage() {
  const queryClient = useQueryClient()
  const [error, setError] = useState<string | null>(null)

  const { data, isLoading } = useQuery({
    queryKey: ['me', 'notifications', 'settings'],
    queryFn: fetchUserNotificationSettings,
  })

  const mutation = useMutation({
    mutationFn: updateUserNotificationSettings,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['me', 'notifications', 'settings'] })
    },
    onError: (err: { response?: { data?: { error?: string } } }) => {
      setError(err.response?.data?.error || 'Ошибка сохранения')
    },
  })

  if (isLoading) return <Typography>Загрузка...</Typography>

  const settings = data?.settings
  if (!settings) return <Alert severity="error">Не удалось загрузить настройки</Alert>

  const handleToggle = (field: string, value: boolean) => {
    setError(null)
    mutation.mutate({ [field]: value })
  }

  const statusChangesOn = isOrderStatusChangesOn(settings)

  return (
    <Box>
      <Typography variant="h4" gutterBottom>
        Оповещения
      </Typography>
      <Typography color="text.secondary" sx={{ mb: 3 }}>
        Настройте, какие уведомления вы хотите получать на почту.
      </Typography>

      {error && (
        <Alert severity="error" sx={{ mb: 2 }}>
          {error}
        </Alert>
      )}

      <Stack spacing={3} sx={{ maxWidth: 480 }}>
        <Box>
          <FormControlLabel
            control={
              <Switch
                checked={settings.globalEnabled}
                onChange={(e) => handleToggle('globalEnabled', e.target.checked)}
              />
            }
            label={<Typography sx={{ fontWeight: 600 }}>Получать оповещения</Typography>}
          />
          <Typography variant="body2" color="text.secondary" sx={{ ml: 4 }}>
            Включите, чтобы получать уведомления о заказах на почту.
          </Typography>
        </Box>

        <Box sx={{ pl: 4 }}>
          <FormControlLabel
            control={
              <Switch
                checked={statusChangesOn}
                disabled={!settings.globalEnabled}
                onChange={(e) => mutation.mutate(orderStatusChangesPayload(e.target.checked))}
              />
            }
            label="Изменения статуса заказа"
          />
          <FormControlLabel
            control={
              <Switch
                checked={settings.orderMessageReceived}
                disabled={!settings.globalEnabled}
                onChange={(e) => handleToggle('orderMessageReceived', e.target.checked)}
              />
            }
            label="Сообщения в чате заказа"
          />
        </Box>
      </Stack>
    </Box>
  )
}