import Alert from '@mui/material/Alert'
import Button from '@mui/material/Button'
import Snackbar from '@mui/material/Snackbar'
import { useUnit } from 'effector-react'
import { useNavigate } from 'react-router-dom'
import { $cartSnackOpen, cartDismissed } from '@/shared/model/cart-notifications'

export function CartSnackbar() {
  const open = useUnit($cartSnackOpen)
  const navigate = useNavigate()

  const handleClose = (_event: React.SyntheticEvent | Event, reason?: string) => {
    if (reason === 'clickaway') return
    cartDismissed()
  }

  const handleGoToCart = () => {
    cartDismissed()
    navigate('/cart')
  }

  return (
    <Snackbar
      open={open}
      onClose={handleClose}
      anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
      autoHideDuration={4000}
      sx={{
        '& .MuiSnackbarContent-root': {
          borderRadius: 12,
          border: '1px solid',
          borderColor: 'rgba(0,0,0,0.06)',
          bgcolor: 'background.paper',
          boxShadow: '0 4px 20px rgba(0,0,0,0.08)',
        },
      }}
    >
      <Alert
        severity="success"
        variant="standard"
        onClose={handleClose}
        sx={{
          bgcolor: 'transparent',
          border: 'none',
          boxShadow: 'none',
          p: 1.5,
          alignItems: 'center',
          '& .MuiAlert-icon': {
            padding: 0,
            mr: 1.5,
            display: 'flex',
            alignItems: 'center',
          },
          '& .MuiAlert-message': {
            padding: 0,
            fontSize: '0.875rem',
            fontWeight: 600,
          },
          '& .MuiAlert-action': {
            padding: 0,
            mr: 0,
            ml: 1,
          },
        }}
        action={
          <Button
            size="small"
            variant="text"
            onClick={handleGoToCart}
            sx={{
              fontWeight: 600,
              fontSize: '0.8125rem',
              px: 1.5,
              py: 0.5,
              borderRadius: 8,
              color: 'success.main',
              '&:hover': {
                bgcolor: 'action.hover',
              },
            }}
          >
            Перейти в корзину
          </Button>
        }
      >
        Товар добавлен в корзину
      </Alert>
    </Snackbar>
  )
}
