import React from 'react';
import { Card, CardContent, CardMedia, Box, Typography, Chip } from '@mui/material';
import { Star as StarIcon, ShoppingBag as ShoppingBagIcon } from '@mui/icons-material';

interface CardRewardProps {
  reward: {
    id: number;
    title: string;
    description?: string;
    image_url?: string;
    price_stars: number;
    delivery_type?: 'physical' | 'digital';
    instructions?: string;
    stock: number;
    is_active: boolean;
  };
  onBuy: (rewardId: number) => void;
  userStars: number;
}

export const CardReward: React.FC<CardRewardProps> = ({
  reward,
  onBuy,
  userStars,
}) => {
  const canAfford = userStars >= reward.price_stars;
  const inStock = reward.stock === -1 || reward.stock > 0; // -1 = infinite stock
  const isActive = reward.is_active;

  const handleBuy = () => {
    if (canAfford && inStock && isActive) {
      onBuy(reward.id);
    }
  };

  return (
    <Card
      sx={{
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
        transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
        border: '1px solid rgba(255, 255, 255, 0.1)',
        position: 'relative',
        overflow: 'hidden',
        '&:hover': {
          transform: 'translateY(-4px)',
          border: '1px solid rgba(255, 215, 0, 0.3)',
          boxShadow: '0 12px 40px rgba(0, 0, 0, 0.5)',
        },
        '&::before': {
          content: '""',
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          background: isActive
            ? 'linear-gradient(135deg, rgba(255, 215, 0, 0.05) 0%, rgba(255, 215, 0, 0.02) 100%)'
            : 'linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.01) 100%)',
          zIndex: 0,
        },
        opacity: isActive ? 1 : 0.6,
      }}
    >
      {/* Image with overlay */}
      <Box sx={{ position: 'relative', overflow: 'hidden' }}>
        <CardMedia
          component="img"
          height="200"
          image={reward.image_url || '/placeholder-reward.jpg'}
          alt={reward.title}
          sx={{
            width: '100%',
            height: '200px',
            objectFit: 'cover',
            objectPosition: 'center',
            transition: 'transform 0.3s ease',
            '&:hover': {
              transform: 'scale(1.05)',
            },
          }}
        />

        {/* Stock badge */}
        {!inStock && (
          <Chip
            label="Нет в наличии"
            size="small"
            sx={{
              position: 'absolute',
              top: 12,
              right: 12,
              backgroundColor: 'rgba(244, 67, 54, 0.9)',
              color: '#FFFFFF',
              fontWeight: 'bold',
              border: 'none',
              zIndex: 2,
            }}
          />
        )}

        {!isActive && (
          <Chip
            label="Неактивно"
            size="small"
            sx={{
              position: 'absolute',
              top: 12,
              right: 12,
              backgroundColor: 'rgba(158, 158, 158, 0.9)',
              color: '#FFFFFF',
              fontWeight: 'bold',
              border: 'none',
              zIndex: 2,
            }}
          />
        )}

        {inStock && isActive && reward.stock > 0 && (
          <Chip
            label={`Осталось: ${reward.stock}`}
            size="small"
            sx={{
              position: 'absolute',
              top: 12,
              right: 12,
              backgroundColor: 'rgba(76, 175, 80, 0.9)',
              color: '#FFFFFF',
              fontWeight: 'bold',
              border: 'none',
              zIndex: 2,
            }}
          />
        )}

        {inStock && isActive && reward.stock === -1 && (
          <Chip
            label="∞"
            size="small"
            sx={{
              position: 'absolute',
              top: 12,
              right: 12,
              backgroundColor: 'rgba(76, 175, 80, 0.9)',
              color: '#FFFFFF',
              fontWeight: 'bold',
              border: 'none',
              zIndex: 2,
            }}
          />
        )}

        {/* Delivery type badge */}
        {reward.delivery_type && (
          <Chip
            label={reward.delivery_type === 'digital' ? 'Цифровой' : 'Физический'}
            size="small"
            sx={{
              position: 'absolute',
              top: 12,
              left: 12,
              backgroundColor: reward.delivery_type === 'digital' ? 'rgba(33, 150, 243, 0.9)' : 'rgba(156, 39, 176, 0.9)',
              color: '#FFFFFF',
              fontWeight: 'bold',
              border: 'none',
              zIndex: 2,
            }}
          />
        )}
      </Box>

      <CardContent
        sx={{
          flexGrow: 1,
          display: 'flex',
          flexDirection: 'column',
          p: 3,
          position: 'relative',
          zIndex: 1,
        }}
      >
        {/* Title */}
        <Typography
          variant="h6"
          sx={{
            color: '#FFFFFF',
            fontWeight: 600,
            mb: 1,
            lineHeight: 1.3,
            fontSize: 18,
          }}
        >
          {reward.title}
        </Typography>

        {/* Description */}
        <Typography
          variant="body2"
          sx={{
            color: '#B0B0B0',
            mb: 3,
            flexGrow: 1,
            display: '-webkit-box',
            WebkitLineClamp: 3,
            WebkitBoxOrient: 'vertical',
            overflow: 'hidden',
            lineHeight: 1.5,
          }}
        >
          {reward.description}
        </Typography>

        {/* Price */}
        <Box
          sx={{
            display: 'flex',
            alignItems: 'center',
            gap: 1,
            mb: 3,
          }}
        >
          <Chip
            icon={
              <StarIcon
                sx={{
                  fontSize: 16,
                  color: '#FFD700',
                }}
              />
            }
            label={`${reward.price_stars.toLocaleString()} ⭐`}
            size="small"
            sx={{
              backgroundColor: canAfford
                ? 'rgba(255, 215, 0, 0.15)'
                : 'rgba(244, 67, 54, 0.15)',
              color: canAfford ? '#FFD700' : '#F44336',
              border: canAfford
                ? '1px solid rgba(255, 215, 0, 0.3)'
                : '1px solid rgba(244, 67, 54, 0.3)',
              fontWeight: 600,
              '& .MuiChip-icon': {
                color: canAfford ? '#FFD700' : '#F44336',
              },
            }}
          />
        </Box>

        {/* Action button */}
        <Box
          sx={{
            mt: 'auto',
          }}
        >
          <Box
            sx={{
              position: 'relative',
              overflow: 'hidden',
              cursor: canAfford && inStock && isActive ? 'pointer' : 'default',
              '&::before': {
                content: '""',
                position: 'absolute',
                top: 0,
                left: '-100%',
                width: '100%',
                height: '100%',
                background: 'linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent)',
                transition: 'left 0.5s',
              },
              '&:hover::before': {
                left: '100%',
              },
            }}
            onClick={handleBuy}
          >
            <Box
              sx={{
                p: 2.5,
                textAlign: 'center',
                background: canAfford && inStock && isActive
                  ? 'linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%)'
                  : !canAfford
                  ? 'linear-gradient(135deg, #F44336 0%, #EF5350 100%)'
                  : !inStock
                  ? 'linear-gradient(135deg, #666666 0%, #555555 100%)'
                  : 'linear-gradient(135deg, #666666 0%, #555555 100%)',
                borderRadius: 1,
                boxShadow: canAfford && inStock && isActive
                  ? '0 4px 15px rgba(76, 175, 80, 0.3)'
                  : 'none',
                transition: 'all 0.3s ease',
                '&:hover': {
                  transform: canAfford && inStock && isActive ? 'translateY(-2px)' : 'none',
                  boxShadow: canAfford && inStock && isActive
                    ? '0 6px 20px rgba(76, 175, 80, 0.4)'
                    : 'none',
                },
              }}
            >
              <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 1 }}>
                <ShoppingBagIcon
                  sx={{
                    color: canAfford && inStock && isActive ? '#FFFFFF' : '#FFFFFF',
                    fontSize: 18,
                  }}
                />
                <Typography
                  variant="body1"
                  sx={{
                    color: '#FFFFFF',
                    fontWeight: 700,
                    fontSize: 16,
                  }}
                >
                  {!canAfford
                    ? `Не хватает ${reward.price_stars - userStars} ⭐`
                    : !inStock
                    ? 'Нет в наличии'
                    : !isActive
                    ? 'Недоступно'
                    : 'Купить'}
                </Typography>
              </Box>
            </Box>
          </Box>
        </Box>
      </CardContent>
    </Card>
  );
};