'use client';

import * as React from 'react';
import {
  Box,
  Card,
  CardContent,
  CardMedia,
  Chip,
  IconButton,
  Menu,
  MenuItem,
  Typography,
  useTheme,
} from '@mui/material';
import { DotsThreeVertical as DotsThreeVerticalIcon } from '@phosphor-icons/react/dist/ssr/DotsThreeVertical';
import { Eye as EyeIcon } from '@phosphor-icons/react/dist/ssr/Eye';
import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
import { Trash as TrashIcon } from '@phosphor-icons/react/dist/ssr/Trash';
import { Folder as FolderIcon } from '@phosphor-icons/react/dist/ssr/Folder';
import dayjs from 'dayjs';
import type { TrainingCategory } from '@/services/training.service';

interface TrainingCategoryCardProps {
  category: TrainingCategory;
  onEdit: (category: TrainingCategory) => void;
  onDelete: (category: TrainingCategory) => void;
  onDetail: (category: TrainingCategory) => void;
}

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

  const handleMenuClick = (event: React.MouseEvent<HTMLElement>) => {
    event.stopPropagation();
    setAnchorEl(event.currentTarget);
  };

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

  const handleEdit = (event: React.MouseEvent) => {
    event.stopPropagation();
    handleMenuClose();
    onEdit(category);
  };

  const handleDelete = (event: React.MouseEvent) => {
    event.stopPropagation();
    handleMenuClose();
    onDelete(category);
  };

  const handleDetail = () => {
    onDetail(category);
  };

  return (
    <Card
      onClick={handleDetail}
      sx={{
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
        cursor: 'pointer',
        borderRadius: 3,
        overflow: 'hidden',
        background: theme.palette.mode === 'dark' 
          ? 'linear-gradient(145deg, #1e293b 0%, #334155 100%)' 
          : 'linear-gradient(145deg, #ffffff 0%, #f8fafc 100%)',
        border: theme.palette.mode === 'dark' 
          ? '1px solid #475569' 
          : '1px solid rgba(255, 255, 255, 0.2)',
        boxShadow: theme.palette.mode === 'dark' 
          ? '0 4px 20px rgba(0, 0, 0, 0.3)' 
          : '0 4px 20px rgba(0, 0, 0, 0.08)',
        transition: 'all 0.3s ease',
        '&:hover': {
          transform: 'translateY(-4px)',
          boxShadow: theme.palette.mode === 'dark' 
            ? '0 8px 40px rgba(0, 0, 0, 0.4)' 
            : '0 8px 40px rgba(0, 0, 0, 0.12)',
        },
      }}
    >
      {/* Header */}
      <Box
        sx={{
          position: 'relative',
          background: 'linear-gradient(135deg, #f59e0b15 0%, #f59e0b25 100%)',
          p: 2,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
        }}
      >
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
          <FolderIcon size={24} color="#f59e0b" />
          <Chip
            label="Category"
            size="small"
            sx={{
              bgcolor: '#f59e0b20',
              color: '#f59e0b',
              fontWeight: 600,
              border: '1px solid #f59e0b40',
            }}
          />
        </Box>

        <IconButton
          onClick={handleMenuClick}
          size="small"
          sx={{
            color: theme.palette.mode === 'dark' ? '#94a3b8' : '#64748b',
            '&:hover': {
              bgcolor: theme.palette.mode === 'dark' ? 'rgba(148, 163, 184, 0.1)' : 'rgba(100, 116, 139, 0.1)',
            },
          }}
        >
          <DotsThreeVerticalIcon size={20} />
        </IconButton>
      </Box>

      {/* Category Image */}
      {category.mediaData?.fileUrl && (
        <Box
          sx={{
            position: 'relative',
            height: 180,
            overflow: 'hidden',
          }}
        >
          <CardMedia
            component="img"
            height="180"
            image={category.mediaData.fileUrl}
            alt={category.categoryName}
            sx={{
              objectFit: 'cover',
              transition: 'transform 0.3s ease',
              '&:hover': {
                transform: 'scale(1.05)',
              },
            }}
          />
          {/* Overlay */}
          <Box
            sx={{
              position: 'absolute',
              bottom: 0,
              left: 0,
              right: 0,
              background: 'linear-gradient(transparent, rgba(0,0,0,0.7))',
              p: 2,
              color: 'white',
            }}
          >
            <Typography variant="h6" fontWeight={600}>
              {category.categoryName}
            </Typography>
          </Box>
        </Box>
      )}

      {/* Content */}
      <CardContent sx={{ flexGrow: 1, p: 3 }}>
        <Typography
          variant="h6"
          component="h3"
          gutterBottom
          sx={{
            fontWeight: 600,
            color: theme.palette.mode === 'dark' ? '#f1f5f9' : '#1e293b',
            display: '-webkit-box',
            WebkitLineClamp: 2,
            WebkitBoxOrient: 'vertical',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            lineHeight: 1.4,
            minHeight: '2.8em',
          }}
        >
          {category.categoryName}
        </Typography>

        <Typography
          variant="body2"
          color="text.secondary"
          sx={{
            mb: 2,
            lineHeight: 1.5,
          }}
        >
          Training category for organizing educational content and resources.
        </Typography>

        {/* Footer */}
        <Box
          sx={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            mt: 'auto',
            pt: 2,
            borderTop: `1px solid ${theme.palette.mode === 'dark' ? '#475569' : '#e2e8f0'}`,
          }}
        >
          <Typography variant="caption" color="text.secondary">
            Created {dayjs(category.createdAt).format('MMM D, YYYY')}
          </Typography>
          <Chip
            label="Active"
            size="small"
            color="success"
            variant="outlined"
          />
        </Box>
      </CardContent>

      {/* Menu */}
      <Menu
        anchorEl={anchorEl}
        open={open}
        onClose={handleMenuClose}
        PaperProps={{
          sx: {
            minWidth: 160,
            borderRadius: 2,
            boxShadow: theme.palette.mode === 'dark' 
              ? '0 8px 32px rgba(0, 0, 0, 0.4)' 
              : '0 8px 32px rgba(0, 0, 0, 0.15)',
          },
        }}
      >
        <MenuItem onClick={handleDetail} sx={{ py: 1.5 }}>
          <EyeIcon size={18} style={{ marginRight: 12 }} />
          View Details
        </MenuItem>
        {/* <MenuItem onClick={handleEdit} sx={{ py: 1.5 }}>
          <PencilSimpleIcon size={18} style={{ marginRight: 12 }} />
          Edit Category
        </MenuItem>
        <MenuItem onClick={handleDelete} sx={{ py: 1.5, color: 'error.main' }}>
          <TrashIcon size={18} style={{ marginRight: 12 }} />
          Delete Category
        </MenuItem> */}
      </Menu>
    </Card>
  );
}