import { Box, Button, Typography } from '@mui/material'
import type { SxProps, Theme } from '@mui/material'
import { ShieldOff } from 'lucide-react'
import { useNavigate } from 'react-router'

interface AccessDeniedProps {
  title?: string
  message?: string
  onBack?: () => void
  sx?: SxProps<Theme>
}

export function AccessDenied({
  title = 'Kein Zugriff',
  message = 'Sie haben keine Berechtigung, diesen Bereich zu öffnen.',
  onBack,
  sx,
}: AccessDeniedProps) {
  const navigate = useNavigate()

  function handleBack() {
    if (onBack) {
      onBack()
    } else {
      navigate(-1)
    }
  }

  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        minHeight: 400,
        gap: 2,
        p: 4,
        ...sx,
      }}
    >
      <Box
        sx={{
          width: 56,
          height: 56,
          borderRadius: '50%',
          bgcolor: 'rgba(239,68,68,0.08)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <ShieldOff size={28} color="#ef4444" />
      </Box>

      <Box sx={{ textAlign: 'center', maxWidth: 400 }}>
        <Typography variant="h6" sx={{ fontWeight: 600, mb: 0.5 }}>
          {title}
        </Typography>
        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
          {message}
        </Typography>
      </Box>

      <Button
        variant="outlined"
        size="small"
        onClick={handleBack}
        sx={{ mt: 1, textTransform: 'none' }}
      >
        Zurück
      </Button>
    </Box>
  )
}