import React, { useState } from 'react';
import {
  IconButton,
  Menu,
  MenuItem,
  ListItemIcon,
  ListItemText,
  Divider
} from '@mui/material';
import {
  MoreVert as MoreVertIcon,
  Publish as PublishIcon,
  Edit as EditIcon,
  Image as ImageIcon,
  GetApp as ExportIcon,
  Delete as DeleteIcon
} from '@mui/icons-material';
import { WordPressPublish } from './WordPressPublish';

interface ContentActionsMenuProps {
  contentId: string;
  contentTitle: string;
  imageGenerationStatus: 'pending' | 'generating' | 'complete' | 'failed';
  wordpressStatus: 'draft' | 'publishing' | 'published' | 'failed';
  onEdit?: () => void;
  onGenerateImage?: () => void;
  onExport?: () => void;
  onDelete?: () => void;
  onWordPressStatusChange?: (status: string) => void;
}

export const ContentActionsMenu: React.FC<ContentActionsMenuProps> = ({
  contentId,
  contentTitle,
  imageGenerationStatus,
  wordpressStatus,
  onEdit,
  onGenerateImage,
  onExport,
  onDelete,
  onWordPressStatusChange
}) => {
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const [showWordPressDialog, setShowWordPressDialog] = useState(false);
  const open = Boolean(anchorEl);

  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const handlePublishClick = () => {
    setShowWordPressDialog(true);
    handleClose();
  };

  const handleMenuAction = (action: () => void) => {
    action();
    handleClose();
  };

  // Check if WordPress publishing is available
  const canPublishToWordPress = imageGenerationStatus === 'complete' && 
                               wordpressStatus !== 'published' && 
                               wordpressStatus !== 'publishing';

  return (
    <>
      <IconButton
        aria-label="more actions"
        id="content-actions-button"
        aria-controls={open ? 'content-actions-menu' : undefined}
        aria-expanded={open ? 'true' : undefined}
        aria-haspopup="true"
        onClick={handleClick}
        size="small"
      >
        <MoreVertIcon />
      </IconButton>
      
      <Menu
        id="content-actions-menu"
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
        MenuListProps={{
          'aria-labelledby': 'content-actions-button',
        }}
        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
      >
        {/* WordPress Publishing - Only show if images are ready */}
        {canPublishToWordPress && (
          <>
            <MenuItem onClick={handlePublishClick}>
              <ListItemIcon>
                <PublishIcon fontSize="small" />
              </ListItemIcon>
              <ListItemText>Publish to WordPress</ListItemText>
            </MenuItem>
            <Divider />
          </>
        )}
        
        {/* Edit Action */}
        {onEdit && (
          <MenuItem onClick={() => handleMenuAction(onEdit)}>
            <ListItemIcon>
              <EditIcon fontSize="small" />
            </ListItemIcon>
            <ListItemText>Edit</ListItemText>
          </MenuItem>
        )}
        
        {/* Generate Image Action */}
        {onGenerateImage && (
          <MenuItem onClick={() => handleMenuAction(onGenerateImage)}>
            <ListItemIcon>
              <ImageIcon fontSize="small" />
            </ListItemIcon>
            <ListItemText>Generate Image Prompts</ListItemText>
          </MenuItem>
        )}
        
        {/* Export Action */}
        {onExport && (
          <MenuItem onClick={() => handleMenuAction(onExport)}>
            <ListItemIcon>
              <ExportIcon fontSize="small" />
            </ListItemIcon>
            <ListItemText>Export</ListItemText>
          </MenuItem>
        )}
        
        {/* Delete Action */}
        {onDelete && (
          <>
            <Divider />
            <MenuItem onClick={() => handleMenuAction(onDelete)} sx={{ color: 'error.main' }}>
              <ListItemIcon>
                <DeleteIcon fontSize="small" color="error" />
              </ListItemIcon>
              <ListItemText>Delete</ListItemText>
            </MenuItem>
          </>
        )}
      </Menu>
      
      {/* WordPress Publish Dialog */}
      {showWordPressDialog && (
        <WordPressPublish
          contentId={contentId}
          contentTitle={contentTitle}
          currentStatus={wordpressStatus}
          imageGenerationStatus={imageGenerationStatus}
          onStatusChange={onWordPressStatusChange}
          showOnlyIfImagesReady={true}
          size="medium"
        />
      )}
    </>
  );
};