import * as React from 'react';
import Avatar from '@mui/material/Avatar';
import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import Divider from '@mui/material/Divider';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import { Clock as ClockIcon } from '@phosphor-icons/react/dist/ssr/Clock';
import dayjs from 'dayjs';
import { CardMedia, useTheme } from '@mui/material';

interface MediaData {
  _id: string;
  fileName: string;
  fileType: string;
  isDeleted: boolean;
  createdAt: string;
  updatedAt: string;
  fileUrl: string;
  thumbnail: string | null;
}
export interface MerchandiseCategory {
  _id: string;
  isDeleted: boolean;
  categoryName: string;
  image: string;
  createdAt: string;
  updatedAt: string;
  mediaData?: MediaData;
}

export interface MerchandiseCategoryCardProps {
  merchandise: MerchandiseCategory;
  onEdit?: (category: MerchandiseCategory) => void;
  onDelete?: (category: MerchandiseCategory) => void;
  onDetail?: (category: MerchandiseCategory) => void;
}

const mediaUrl = process.env.NEXT_PUBLIC_LIVE_API_URL;

export function MerchandiseCategoryCard({ merchandise, onEdit, onDelete, onDetail }: MerchandiseCategoryCardProps): React.JSX.Element {
  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
  const open = Boolean(anchorEl);
  const theme = useTheme();

  const handleMenuClick = (event: React.MouseEvent<HTMLElement>) => {
    event.stopPropagation();
    setAnchorEl(event.currentTarget);
  };
  const handleMenuClose = () => {
    setAnchorEl(null);
  };
  const handleEdit = (e: React.MouseEvent) => {
    e.stopPropagation();
    handleMenuClose();
    if (onEdit) onEdit(merchandise);
  };
  const handleDelete = (e: React.MouseEvent) => {
    e.stopPropagation();
    handleMenuClose();
    if (onDelete) onDelete(merchandise);
  };
  const handleCardClick = (e: React.MouseEvent) => {
    // Prevent detail if menu is open or menu button is clicked
    if (!open && onDetail) {
      onDetail(merchandise);
    }
  };

  return (
    <Card
      sx={{
        display: 'flex',
        flexDirection: 'column',
        height: '100%',
        borderRadius: 3,
        boxShadow: '0 4px 24px rgba(0,0,0,0.08)',
        border: '1px solid',
        borderColor: 'divider',
        transition: 'all 0.3s',
        position: 'relative',
        overflow: 'hidden',
        background: theme.palette.mode === 'dark' ? '#334155' : '#fff',
        cursor: 'pointer',
        '&:hover': {
          boxShadow: '0 8px 25px rgba(0,0,0,0.15)',
          borderColor: 'primary.main',
          transform: 'translateY(-4px)',
        },
        p: 0,
      }}
      onClick={handleCardClick}
    >
      {/* Top accent bar */}
      <Box sx={{
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        height: '4px',
        background: 'linear-gradient(90deg, #1976d2, #42a5f5)',
        zIndex: 2,
      }} />
      <Box sx={{ position: 'relative' }}>
        <CardMedia
          sx={{
            height: 180,
            borderTopLeftRadius: 12,
            borderTopRightRadius: 12,
            width: '100%',
            objectFit: 'cover',
          }}
          image={
            merchandise.mediaData?.fileUrl ||
            (merchandise.mediaData?.fileName ? `${mediaUrl}/${merchandise.mediaData.fileName}` : '')
          }
          title={merchandise.categoryName}
        />
        <IconButton
          size="small"
          onClick={handleMenuClick}
          sx={{
            position: 'absolute',
            top: 12,
            right: 12,
            bgcolor: theme.palette.mode === 'dark'
              ? 'rgba(30, 41, 59, 0.85)'
              : 'rgba(255,255,255,0.85)',
            '&:hover': {
              bgcolor: theme.palette.mode === 'dark' ? '#475569' : 'grey.200',
            },
            zIndex: 3,
            boxShadow: 1,
          }}
        >
          <MoreVertIcon />
        </IconButton>
        <Menu
          anchorEl={anchorEl}
          open={open}
          onClose={handleMenuClose}
          transformOrigin={{ horizontal: 'right', vertical: 'top' }}
          anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
        >
          <MenuItem
            onClick={(e) => {
              e.stopPropagation();
              handleMenuClose();
              if (onDetail) onDetail(merchandise);
            }}
          >
            View Details
          </MenuItem>
          <MenuItem onClick={handleEdit}>Edit</MenuItem>
          <MenuItem onClick={handleDelete} sx={{ color: 'error.main' }}>
            Delete
          </MenuItem>
        </Menu>
      </Box>
      <CardContent sx={{ flex: '1 1 auto', display: 'flex', flexDirection: 'column', alignItems: 'center', p: 3, pt: 2 }}>
        <Typography align="center" variant="h6" fontWeight={700} sx={{ mb: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', width: '100%' }} color="text.primary">
          {merchandise.categoryName}
        </Typography>
      </CardContent>
      <Divider sx={{ width: '80%', margin: 'auto' }} />
      <Stack direction="row" spacing={2} sx={{ alignItems: 'center', justifyContent: 'space-between', p: 2, pt: 1 }}>
        <Stack sx={{ alignItems: 'center' }} direction="row" spacing={1}>
          <ClockIcon fontSize="var(--icon-fontSize-sm)" />
          <Typography color="text.secondary" display="inline" variant="body2">
            Created {dayjs(merchandise.createdAt).format('MMM D, YYYY')}
          </Typography>
        </Stack>
      </Stack>
    </Card>
  );
}