import { HelpOutline } from '@mui/icons-material'
import { Box, Card, IconButton, Typography } from '@mui/joy'
import { useState } from 'react'
import ModalActions from '../../components/common/ModalActions'
import { useResponsiveModal } from '../../hooks/useResponsiveModal'

const MultiSelectHelp = ({ isVisible = true }) => {
  const { ResponsiveModal } = useResponsiveModal()

  const [isHelpOpen, setIsHelpOpen] = useState(false)

  if (!isVisible) return null

  return (
    <>
      {/* Help Button */}
      <IconButton
        size='sm'
        variant='soft'
        color='neutral'
        onClick={() => setIsHelpOpen(true)}
        sx={{
          position: 'fixed',
          bottom: 24,
          right: 24,
          zIndex: 1000,
          width: 48,
          height: 48,
          borderRadius: '50%',
          boxShadow: 'lg',
        }}
        aria-label='Show keyboard shortcuts'
        title='Show keyboard shortcuts'
      >
        <HelpOutline />
      </IconButton>

      {/* Help Modal */}
      <ResponsiveModal
        open={isHelpOpen}
        onClose={() => setIsHelpOpen(false)}
        title='Multi-select Mode'
        description='Use these keyboard shortcuts to work more efficiently.'
        footer={
          <ModalActions
            primary={{ label: 'Got it', onClick: () => setIsHelpOpen(false) }}
          />
        }
      >
        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
          {/* Selection shortcuts */}
          <Card variant='soft' sx={{ p: 2 }}>
            <Typography level='title-sm' sx={{ mb: 1.5, color: 'primary.600' }}>
              Selection
            </Typography>
            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
              <ShortcutItem
                keys={['Ctrl', 'A']}
                description='Select all visible tasks'
              />
              <ShortcutItem
                keys={['Esc']}
                description='Clear selection or exit multi-select mode'
              />
            </Box>
          </Card>

          {/* Action shortcuts */}
          <Card variant='soft' sx={{ p: 2 }}>
            <Typography level='title-sm' sx={{ mb: 1.5, color: 'success.600' }}>
              Actions
            </Typography>
            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
              <ShortcutItem
                keys={['Enter']}
                description='Mark selected tasks as completed'
              />
              <ShortcutItem
                keys={['Del', '⌫']}
                description='Delete selected tasks'
              />
            </Box>
          </Card>

          {/* Interface shortcuts */}
          <Card variant='soft' sx={{ p: 2 }}>
            <Typography level='title-sm' sx={{ mb: 1.5, color: 'warning.600' }}>
              Interface
            </Typography>
            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
              <ShortcutItem
                keys={['Ctrl', 'K']}
                description='Quick add new task'
              />
            </Box>
          </Card>
        </Box>
      </ResponsiveModal>
    </>
  )
}

const ShortcutItem = ({ keys, description }) => (
  <Box
    sx={{
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      gap: 2,
    }}
  >
    <Box sx={{ flex: 1, display: 'flex', alignItems: 'center' }}>
      <Typography level='body-sm'>{description}</Typography>
    </Box>
    <Box sx={{ display: 'flex', gap: 0.5 }}>
      {keys.map((key, index) => (
        <Box
          key={index}
          sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}
        >
          {index > 0 && (
            <Typography level='body-xs' color='text.secondary'>
              +
            </Typography>
          )}
          <Box
            sx={{
              px: 1,
              py: 0.25,
              bgcolor: 'background.level2',
              borderRadius: 'sm',
              border: '1px solid',
              borderColor: 'divider',
              minWidth: 32,
              textAlign: 'center',
            }}
          >
            <Typography level='body-xs' fontWeight='bold'>
              {key}
            </Typography>
          </Box>
        </Box>
      ))}
    </Box>
  </Box>
)

export default MultiSelectHelp