import { motion, useReducedMotion } from 'framer-motion';
import { assetUrl } from '../lib/assetUrl';

const ACCENT_GRADIENTS = [
  'radial-gradient(circle at top right, rgba(139, 92, 246, 0.08) 0%, transparent 50%), linear-gradient(to bottom, #FAF9FA 0%, #F6F2F5 100%)',
  'radial-gradient(circle at top right, rgba(16, 185, 129, 0.08) 0%, transparent 50%), linear-gradient(to bottom, #FAF9FA 0%, #F6F2F5 100%)',
  'radial-gradient(circle at top right, rgba(245, 158, 11, 0.08) 0%, transparent 50%), linear-gradient(to bottom, #FAF9FA 0%, #F6F2F5 100%)',
];

export default function ProductCard({ product, isMobile, delay = 0, index = 0 }) {
  if (!product) return null;
  const shouldReduceMotion = useReducedMotion();

  const dashWidth = isMobile ? '92%' : '520px';
  const dashLeft = isMobile ? '4%' : '32%';
  const dashHeight = isMobile ? '200px' : '320px';
  const shadowHeight = isMobile ? '170px' : '280px';

  return (
    <motion.div
      initial={shouldReduceMotion ? false : { opacity: 0, y: 40 }}
      whileInView={shouldReduceMotion ? undefined : { opacity: 1, y: 0 }}
      viewport={{ once: true, amount: 0.15 }}
      transition={{ duration: 0.8, ease: [0.22, 1, 0.36, 1], delay }}
      style={{ height: '100%' }}
    >
      <div
        className="product-card"
        style={{
          borderRadius: isMobile ? '20px' : '28px',
          border: `${isMobile ? 4 : 6}px solid #EAE3E8`,
          background: ACCENT_GRADIENTS[index % ACCENT_GRADIENTS.length],
          padding: isMobile ? '1.75rem 1.25rem 0' : '3rem 2.5rem 0 2.5rem',
          boxShadow: '0 4px 24px rgba(234, 227, 232, 0.25)',
          position: 'relative',
          overflow: 'hidden',
          display: 'flex',
          flexDirection: 'column',
          height: '100%',
          minHeight: isMobile ? '380px' : '600px',
          transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
        }}
        onMouseEnter={(e) => {
          if (isMobile) return;
          e.currentTarget.style.transform = 'translateY(-6px)';
          e.currentTarget.style.boxShadow = '0 10px 30px rgba(255, 170, 0, 0.2)';
          e.currentTarget.style.borderColor = '#ffaa00';
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.transform = 'translateY(0)';
          e.currentTarget.style.boxShadow = '0 4px 24px rgba(234, 227, 232, 0.25)';
          e.currentTarget.style.borderColor = '#EAE3E8';
        }}
      >
        <div
          style={{
            position: 'absolute',
            inset: 0,
            backgroundImage: 'radial-gradient(#E0D2DC 1.5px, transparent 1.5px)',
            backgroundSize: '12px 12px',
            WebkitMaskImage: 'linear-gradient(to top, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0) 65%)',
            maskImage: 'linear-gradient(to top, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0) 65%)',
            pointerEvents: 'none',
            zIndex: 1,
          }}
        />

        <h3 style={{
          fontSize: isMobile ? '1.5rem' : '2rem',
          fontWeight: 800,
          color: '#0f172a',
          margin: '0 0 0.75rem 0',
          letterSpacing: '-0.02em',
          position: 'relative',
          zIndex: 3,
        }}>
          {product.name}
        </h3>

        <p style={{
          color: '#475569',
          fontSize: isMobile ? '0.95rem' : '1.05rem',
          lineHeight: '1.6',
          margin: '0 0 1.5rem 0',
          fontWeight: 400,
          maxWidth: '100%',
          position: 'relative',
          zIndex: 3,
        }}>
          {product.description}
        </p>

        <div style={{
          position: 'absolute',
          bottom: 0,
          left: dashLeft,
          width: dashWidth,
          height: shadowHeight,
          borderRadius: '20px 20px 0 0',
          boxShadow: '-20px -20px 45px rgba(0,0,0,0.12)',
          zIndex: 2,
          pointerEvents: 'none',
        }} />

        <div style={{
          position: 'absolute',
          bottom: isMobile ? '-16px' : '-40px',
          left: dashLeft,
          width: dashWidth,
          height: dashHeight,
          borderRadius: '16px',
          border: '1.5px solid rgba(255, 255, 255, 0.4)',
          overflow: 'hidden',
          zIndex: 2,
          background: 'transparent',
        }}>
          <img
            src={assetUrl(product.image)}
            alt={`${product.name} dashboard`}
            style={{
              position: 'absolute',
              top: isMobile ? '0' : '-8%',
              left: isMobile ? '0' : '-40%',
              width: isMobile ? '100%' : '160%',
              height: isMobile ? '100%' : '145%',
              objectFit: 'cover',
            }}
          />
        </div>

        {product.stats?.[0] && (
          <div style={{
            position: 'absolute',
            bottom: isMobile ? '110px' : '160px',
            left: isMobile ? '6%' : '18%',
            background: 'rgba(255, 255, 255, 0.25)',
            backdropFilter: 'blur(12px)',
            border: '1px solid rgba(255, 255, 255, 0.3)',
            padding: isMobile ? '0.5rem 0.75rem' : '0.8rem 1.2rem',
            borderRadius: '12px',
            boxShadow: '0 8px 32px rgba(31, 38, 135, 0.15)',
            zIndex: 5,
          }}>
            <span style={{ fontWeight: 800, color: '#000000', fontSize: isMobile ? '1.1rem' : '1.4rem', display: 'block', lineHeight: 1.1 }}>
              {product.stats[0].value}
            </span>
            <span style={{ fontSize: isMobile ? '0.65rem' : '0.75rem', color: '#000000', fontWeight: 600 }}>
              {product.stats[0].label}
            </span>
          </div>
        )}

        {product.stats?.[1] && (
          <div style={{
            position: 'absolute',
            bottom: isMobile ? '36px' : '50px',
            right: isMobile ? '5%' : '8%',
            background: 'rgba(20, 20, 25, 0.55)',
            backdropFilter: 'blur(12px)',
            border: '1px solid rgba(255, 255, 255, 0.15)',
            padding: isMobile ? '0.5rem 0.75rem' : '0.8rem 1.2rem',
            borderRadius: '12px',
            boxShadow: '0 8px 32px rgba(0, 0, 0, 0.25)',
            zIndex: 5,
          }}>
            <span style={{ fontWeight: 800, color: '#ffffff', fontSize: isMobile ? '1.1rem' : '1.4rem', display: 'block', lineHeight: 1.1 }}>
              {product.stats[1].value}
            </span>
            <span style={{ fontSize: isMobile ? '0.65rem' : '0.75rem', color: '#ffffff', fontWeight: 500 }}>
              {product.stats[1].label}
            </span>
          </div>
        )}
      </div>
    </motion.div>
  );
}