import { forwardRef, type ReactNode } from 'react';
import { motion, type HTMLMotionProps } from 'framer-motion';
import { cn } from '@/lib/cn';

type CardVariant = 'default' | 'glass' | 'interactive' | 'accent' | 'glow' | 'elevated';
type CardPadding = 'none' | 'sm' | 'md' | 'lg';

interface CardProps extends HTMLMotionProps<'div'> {
  variant?: CardVariant;
  accentColor?: 'green' | 'red' | 'amber' | 'blue' | 'orange' | 'purple' | 'cyan';
  children: ReactNode;
  padding?: boolean | CardPadding;
  hover?: boolean;
}

const variantStyles: Record<CardVariant, string> = {
  default: 'bg-bg-card border border-border rounded-2xl shadow-[0_2px_12px_rgba(0,0,0,0.2)]',
  glass: 'glass-strong rounded-2xl shadow-[0_4px_24px_rgba(0,0,0,0.25)]',
  interactive: 'card-glow rounded-2xl cursor-pointer',
  accent: 'bg-bg-card border border-border rounded-2xl border-l-[3px] shadow-[0_2px_12px_rgba(0,0,0,0.2)]',
  glow: 'glow-border rounded-2xl shadow-[0_4px_30px_rgba(0,0,0,0.3)]',
  elevated: 'bg-bg-elevated border border-border rounded-2xl shadow-[0_8px_40px_rgba(0,0,0,0.35),0_0_1px_rgba(255,255,255,0.05)_inset]',
};

const accentColors: Record<string, string> = {
  green: 'border-l-emerald-500',
  red: 'border-l-red-500',
  amber: 'border-l-amber-500',
  blue: 'border-l-blue-500',
  orange: 'border-l-[#ff6b2c]',
  purple: 'border-l-violet-500',
  cyan: 'border-l-cyan-400',
};

const paddingStyles: Record<CardPadding, string> = {
  none: '',
  sm: 'p-4',
  md: 'p-5 sm:p-6',
  lg: 'p-6 sm:p-8',
};

export const Card = forwardRef<HTMLDivElement, CardProps>(
  ({ variant = 'default', accentColor, padding = true, hover = false, className, children, ...props }, ref) => {
    const isInteractive = variant === 'interactive' || hover;

    const paddingClass =
      typeof padding === 'boolean' ? (padding ? 'p-5 sm:p-6' : '') : paddingStyles[padding];

    return (
      <motion.div
        ref={ref}
        whileHover={
          isInteractive
            ? { y: -2, transition: { duration: 0.2, ease: 'easeOut' } }
            : undefined
        }
        className={cn(
          variantStyles[variant],
          variant === 'accent' && accentColor && accentColors[accentColor],
          paddingClass,
          isInteractive && 'transition-all duration-200',
          className
        )}
        {...props}
      >
        {children}
      </motion.div>
    );
  }
);

Card.displayName = 'Card';
