// src/renderer/components/CapeCard.tsx
import React from 'react';
import {
  Card,
  CardMedia,
  CardContent,
  Typography,
  CardActions,
  Button,
  Tooltip,
  Box,
  Chip,
} from '@mui/material';
import CustomTooltip from './CustomTooltip';
// Тип для плаща с необязательными полями для обоих вариантов использования
export interface CapeCardProps {
  cape: {
    cape_id?: string;
    id?: string;
    cape_name?: string;
    name?: string;
    cape_description?: string;
    description?: string;
    image_url: string;
    is_active?: boolean;
    price?: number;
    purchased_at?: string;
  };
  mode: 'profile' | 'shop';
  onAction: (capeId: string) => void;
  actionDisabled?: boolean;
}

export default function CapeCard({
  cape,
  mode,
  onAction,
  actionDisabled = false,
}: CapeCardProps) {
  // Определяем текст и цвет кнопки в зависимости от режима
  const getActionButton = () => {
    if (mode === 'shop') {
      return {
        text: 'Купить',
        color: 'primary',
      };
    } else {
      // Профиль
      return cape.is_active
        ? { text: 'Снять', color: 'error' }
        : { text: 'Надеть', color: 'success' };
    }
  };

  const actionButton = getActionButton();

  // В функции компонента добавьте нормализацию данных
  const capeId = cape.cape_id || cape.id || '';
  const capeName = cape.cape_name || cape.name || '';
  const capeDescription = cape.cape_description || cape.description || '';

  return (
    <CustomTooltip arrow title={capeDescription}>
      <Card
        sx={{
          bgcolor: 'rgba(255, 255, 255, 0.05)',
          width: 200,
          overflow: 'hidden',
          position: 'relative', // для позиционирования ценника
          borderRadius: '1vw',
        }}
      >
        {/* Ценник для магазина */}
        {mode === 'shop' && cape.price !== undefined && (
          <Chip
            label={`${cape.price} коинов`}
            sx={{
              position: 'absolute',
              top: 8,
              right: 8,
              zIndex: 2,
              bgcolor: 'rgba(0, 0, 0, 0.7)',
              color: 'white',
              fontWeight: 'bold',
            }}
          />
        )}

        <CardMedia
          component="img"
          image={cape.image_url}
          alt={capeName}
          sx={{
            display: 'block',
            width: '100%',
            transform: 'scale(2.9) translateX(66px) translateY(32px)',
            imageRendering: 'pixelated',
          }}
        />

        <CardContent
          sx={{
            bgcolor: 'rgba(255, 255, 255, 0.05)',
            pt: '6vw',
            minHeight: '5vw',
          }}
        >
          <Typography sx={{ color: 'white' }}>{capeName}</Typography>
        </CardContent>

        <CardActions sx={{ display: 'flex', justifyContent: 'center' }}>
          <Button
            variant="contained"
            color={actionButton.color as 'primary' | 'success' | 'error'}
            onClick={() => onAction(capeId)}
            disabled={actionDisabled}
            sx={{
              borderRadius: '2vw',
              p: '0.5vw 2.5vw',
              color: 'white',
              backgroundColor: 'rgb(0, 134, 0)',
              '&:hover': {
                backgroundColor: 'rgba(0, 134, 0, 0.5)',
              },
              fontFamily: 'Benzin-Bold',
            }}
          >
            {actionButton.text}
          </Button>
        </CardActions>
      </Card>
    </CustomTooltip>
  );
}