import { Box } from '@/ui/Box';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Surface } from '@/ui/Surface';
import { Text } from '@/ui/Text';
import { motion, useReducedMotion } from 'framer-motion';
import { LucideIcon } from 'lucide-react';
import { useEffect, useState } from 'react';

interface BenefitCardProps {
  icon: LucideIcon;
  title: string;
  description: string;
  stats?: {
    value: string;
    label: string;
  };
  variant?: 'default' | 'highlight';
  delay?: number;
}

export function BenefitCard({
  icon,
  title,
  description,
  stats,
  variant = 'default',
  delay = 0,
}: BenefitCardProps) {
  const shouldReduceMotion = useReducedMotion();
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
  }, []);

  const isHighlight = variant === 'highlight';

  const cardContent = (
    <Surface
      variant="muted"
      rounded="xl"
      border={true}
      padding={6}
      borderColor={isHighlight ? 'rgba(25, 140, 255, 0.3)' : 'var(--ui-color-border-low)'}
      hoverBorderColor={isHighlight ? 'rgba(25, 140, 255, 0.5)' : 'var(--ui-color-border-default)'}
      transition="all 0.3s ease"
      group
      position="relative"
      fullHeight
      bg={isHighlight ? 'linear-gradient(to bottom right, rgba(25, 140, 255, 0.1), rgba(25, 140, 255, 0.05))' : undefined}
    >
      {/* Icon */}
      <Box 
        width="12" 
        height="12" 
        rounded="xl" 
        display="flex" 
        center 
        mb={4}
        bg={isHighlight ? 'rgba(25, 140, 255, 0.2)' : 'var(--ui-color-bg-surface-muted)'}
        border={!isHighlight}
        borderColor="var(--ui-color-border-low)"
      >
        <Icon icon={icon} size={6} intent={isHighlight ? 'primary' : 'low'} />
      </Box>

      {/* Content */}
      <Heading level={3} mb={2}>{title}</Heading>
      <Text size="sm" variant="low" block leading="relaxed">{description}</Text>

      {/* Stats */}
      {stats && (
        <Box mt={4} pt={4} borderTop={true} borderColor="var(--ui-color-border-low)">
          <Box display="flex" alignItems="baseline" gap={2}>
            <Text size="2xl" weight="bold" variant={isHighlight ? 'primary' : 'high'}>
              {stats.value}
            </Text>
            <Text size="sm" variant="low">{stats.label}</Text>
          </Box>
        </Box>
      )}

      {/* Highlight Glow Effect */}
      {isHighlight && (
        <Box 
          position="absolute" 
          inset="0" 
          rounded="xl" 
          bg="linear-gradient(to bottom right, rgba(25, 140, 255, 0.2), transparent)"
          opacity={0}
          groupHoverOpacity={1}
          transition="opacity 0.3s ease"
          pointerEvents="none" 
        />
      )}
    </Surface>
  );

  if (!isMounted || shouldReduceMotion) {
    return <Box fullHeight>{cardContent}</Box>;
  }

  return (
    <Box
      as={motion.div}
      fullHeight
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.4, delay }}
      whileHover={{ y: -4, transition: { duration: 0.2 } }}
    >
      {cardContent}
    </Box>
  );
}