/**
 * @ai-summary Quick action menu popup for center FAB button
 * @ai-context Opens above bottom navigation with quick shortcuts
 * @ai-note Uses Portal to escape transformed parent containers
 */

import React from 'react';
import { createPortal } from 'react-dom';
import {
  Box,
  Paper,
  List,
  ListItemButton,
  ListItemIcon,
  ListItemText,
  Backdrop,
  useTheme,
  Fade
} from '@mui/material';
import { quickActions, QuickAction } from './quickActions';

interface QuickActionMenuProps {
  open: boolean;
  onClose: () => void;
  onAction: (action: QuickAction) => void;
}

export const QuickActionMenu: React.FC<QuickActionMenuProps> = ({
  open,
  onClose,
  onAction
}) => {
  const theme = useTheme();

  const handleAction = (action: QuickAction) => {
    onAction(action);
    onClose();
  };

  // Use portal to render at document body level, escaping any transformed parents
  return createPortal(
    <>
      <Backdrop
        open={open}
        onClick={onClose}
        sx={{
          zIndex: theme.zIndex.modal - 1,
          backgroundColor: 'rgba(0, 0, 0, 0.3)'
        }}
      />
      <Box
        sx={{
          position: 'fixed',
          bottom: 120,
          left: '50%',
          transform: 'translateX(-50%)',
          zIndex: theme.zIndex.modal,
          pointerEvents: open ? 'auto' : 'none',
          paddingBottom: 'env(safe-area-inset-bottom, 0px)'
        }}
      >
        <Fade in={open}>
          <Paper
            elevation={8}
            sx={{
              borderRadius: 3,
              overflow: 'hidden',
              minWidth: 200,
              backgroundColor: theme.palette.background.paper
            }}
          >
            <List disablePadding>
              {quickActions.map(({ action, label, icon }) => (
                <ListItemButton
                  key={action}
                  onClick={() => handleAction(action)}
                  sx={{
                    py: 1.5,
                    px: 2,
                    minHeight: 56,
                    '&:hover': {
                      backgroundColor: theme.palette.action.hover
                    }
                  }}
                >
                  <ListItemIcon
                    sx={{
                      minWidth: 40,
                      color: theme.palette.primary.main
                    }}
                  >
                    {icon}
                  </ListItemIcon>
                  <ListItemText
                    primary={label}
                    primaryTypographyProps={{
                      fontWeight: 500,
                      fontSize: '0.95rem'
                    }}
                  />
                </ListItemButton>
              ))}
            </List>
          </Paper>
        </Fade>
      </Box>
    </>,
    document.body
  );
};
