import React, { useMemo } from 'react';
import { Box, Typography, Paper, Chip, Button } from '@mui/material';
import CustomTooltip from './Notifications/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;
}

const GRADIENT =
  'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)';

export default function CapeCard({
  cape,
  mode,
  onAction,
  actionDisabled = false,
}: CapeCardProps) {
  const capeId = cape.cape_id || cape.id || '';
  const capeName = cape.cape_name || cape.name || 'Без названия';
  const capeDescription = cape.cape_description || cape.description || '';

  const action = useMemo(() => {
    if (mode === 'shop') {
      return { text: 'Купить', variant: 'gradient' as const };
    }
    return cape.is_active
      ? { text: 'Снять', variant: 'danger' as const }
      : { text: 'Надеть', variant: 'success' as const };
  }, [mode, cape.is_active]);

  const topRightChip =
    mode === 'shop' && cape.price !== undefined
      ? `${cape.price} коинов`
      : cape.is_active
        ? 'Активен'
        : undefined;

  return (
    <CustomTooltip arrow title={capeDescription} placement="bottom">
      <Paper
        elevation={0}
        sx={{
          width: '16.5vw',
          borderRadius: '1.2vw',
          overflow: 'hidden',
          position: 'relative',
          color: 'white',
          background:
            'radial-gradient(circle at 10% 10%, rgba(242,113,33,0.14), transparent 55%), radial-gradient(circle at 90% 20%, rgba(233,64,205,0.12), transparent 55%), rgba(10,10,20,0.86)',
          border: '1px solid rgba(255,255,255,0.08)',
          boxShadow: '0 1.2vw 3.2vw rgba(0,0,0,0.55)',
          backdropFilter: 'blur(14px)',
          transition:
            'transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease',
          '&:hover': {
            transform: 'scale(1.01)',
            borderColor: 'rgba(242,113,33,0.35)',
            boxShadow: '0 1.4vw 3.8vw rgba(0,0,0,0.60)',
          },
        }}
      >
        {/* градиентная полоска-акцент (как у твоих блоков) */}
        <Box
          sx={{
            position: 'absolute',
            left: 0,
            top: 0,
            bottom: 0,
            width: '0.35vw',
            background: GRADIENT,
            opacity: 0.9,
            pointerEvents: 'none',
            zIndex: 2,
          }}
        />

        {/* chip справа сверху */}
        {topRightChip && (
          <Chip
            label={topRightChip}
            size="small"
            sx={{
              position: 'absolute',
              top: '0.8vw',
              right: '0.8vw',
              zIndex: 3,
              height: '1.55rem',
              fontSize: '0.72rem',
              fontWeight: 900,
              color: 'white',
              borderRadius: '999px',
              background:
                mode === 'shop'
                  ? 'rgba(0,0,0,0.65)'
                  : 'linear-gradient(120deg, rgba(242,113,33,0.22), rgba(233,64,205,0.14), rgba(138,35,135,0.18))',
              border: '1px solid rgba(255,255,255,0.10)',
              backdropFilter: 'blur(12px)',
            }}
          />
        )}

        {/* preview */}
        <Box
          sx={{
            px: '1.1vw',
            pt: '1.0vw',
            pb: '0.7vw',
            display: 'flex',
            justifyContent: 'center',
          }}
        >
          <Box
            sx={{
              borderRadius: '1.0vw',
              overflow: 'hidden',
              border: '1px solid rgba(255,255,255,0.10)',
              background: 'rgba(255,255,255,0.04)',
              maxHeight: '21vw',
            }}
          >
            {/* Здесь показываем ЛЕВУЮ половину текстуры (лицевую часть) */}
            <Box
              sx={{
                width: '44vw',
                height: '36vw',
                minWidth: '462px',
                minHeight: '380px',
                imageRendering: 'pixelated',
                backgroundImage: `url(${cape.image_url})`,
                backgroundRepeat: 'no-repeat',
                backgroundSize: '200% 100%', // важно: режем пополам “кадром”
                backgroundPosition: 'left center',
                ml: '-2vw',
                // если нужно чуть увеличить/сдвинуть — делай через backgroundPosition
              }}
            />
          </Box>
        </Box>

        {/* content */}
        <Box sx={{ px: '1.1vw', pb: '1.1vw' }}>
          <Typography
            sx={{
              fontFamily: 'Benzin-Bold',
              fontSize: '0.95vw',
              minFontSize: 14,
              color: 'rgba(255,255,255,0.92)',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              whiteSpace: 'nowrap',
            }}
          >
            {capeName}
          </Typography>

          {/* действия */}
          <Box sx={{ mt: '0.9vw', display: 'flex', justifyContent: 'center' }}>
            <Button
              fullWidth
              disableRipple
              onClick={() => onAction(capeId)}
              disabled={actionDisabled || !capeId}
              sx={{
                borderRadius: '999px',
                py: '0.75vw',
                fontFamily: 'Benzin-Bold',
                fontWeight: 900,
                color: '#fff',
                background:
                  action.variant === 'gradient'
                    ? GRADIENT
                    : action.variant === 'success'
                      ? 'rgba(0, 134, 0, 0.95)'
                      : 'rgba(190, 35, 35, 0.95)',
                boxShadow: '0 1.0vw 2.8vw rgba(0,0,0,0.40)',
                transition: 'transform 0.18s ease, filter 0.18s ease, opacity 0.18s ease',
                '&:hover': {
                  transform: 'scale(1.01)',
                  filter: 'brightness(1.05)',
                },
                '&.Mui-disabled': {
                  background: 'rgba(255,255,255,0.10)',
                  color: 'rgba(255,255,255,0.55)',
                },
              }}
            >
              {action.text}
            </Button>
          </Box>
        </Box>
      </Paper>
    </CustomTooltip>
  );
}
