import { HTMLAttributes, forwardRef } from 'react';
import { cn } from '@/lib/utils';

interface CardProps extends HTMLAttributes<HTMLDivElement> {
  variant?: 'default' | 'elevated' | 'bordered' | 'column';
  shadow?: 'none' | 'sm' | 'md' | 'lg';
  border?: 'none' | 'default' | 'primary' | 'accent';
  background?: 'default' | 'column' | 'muted';
}

const Card = forwardRef<HTMLDivElement, CardProps>(
  ({ className, variant = 'default', shadow = 'sm', border = 'default', background = 'default', ...props }, ref) => {
    const backgrounds = {
      default: 'bg-[var(--card)]',
      column: 'bg-[var(--card-column)]',
      muted: 'bg-[var(--muted)]/10'
    };

    const borders = {
      none: '',
      default: 'border border-[var(--border)]',
      primary: 'border border-[var(--primary)]/30',
      accent: 'border border-[var(--accent)]/30'
    };

    const shadows = {
      none: '',
      sm: 'shadow-sm',
      md: 'shadow-md',
      lg: 'shadow-lg'
    };

    // Variants prédéfinis pour la rétrocompatibilité
    const variantStyles = {
      default: '',
      elevated: 'shadow-lg',
      bordered: 'border-[var(--primary)]/30 shadow-lg',
      column: 'bg-[var(--card-column)] shadow-lg'
    };

    // Appliquer le variant si spécifié, sinon utiliser les props individuelles
    const finalShadow = variant !== 'default' ? variantStyles[variant] : shadows[shadow];
    const finalBorder = variant !== 'default' ? variantStyles[variant] : borders[border];
    const finalBackground = variant !== 'default' ? variantStyles[variant] : backgrounds[background];
    
    return (
      <div
        ref={ref}
        className={cn(
          'rounded-lg backdrop-blur-sm transition-all duration-200',
          finalBackground,
          finalBorder,
          finalShadow,
          className
        )}
        {...props}
      />
    );
  }
);

Card.displayName = 'Card';

interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
  separator?: boolean;
  padding?: 'sm' | 'md' | 'lg';
}

const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(
  ({ className, separator = true, padding = 'md', ...props }, ref) => {
    const paddings = {
      sm: 'p-2',
      md: 'p-4',
      lg: 'p-6'
    };

    return (
      <div
        ref={ref}
        className={cn(
          paddings[padding],
          separator && 'border-b border-[var(--border)]',
          className
        )}
        {...props}
      />
    );
  }
);

CardHeader.displayName = 'CardHeader';

interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
  size?: 'sm' | 'md' | 'lg';
}

const CardTitle = forwardRef<HTMLHeadingElement, CardTitleProps>(
  ({ className, size = 'md', ...props }, ref) => {
    const sizes = {
      sm: 'text-sm',
      md: 'text-base',
      lg: 'text-lg'
    };

    return (
      <h3
        ref={ref}
        className={cn(
          'font-mono font-semibold text-[var(--foreground)] tracking-wide',
          sizes[size],
          className
        )}
        {...props}
      />
    );
  }
);

CardTitle.displayName = 'CardTitle';

interface CardContentProps extends HTMLAttributes<HTMLDivElement> {
  padding?: 'sm' | 'md' | 'lg' | 'none';
}

const CardContent = forwardRef<HTMLDivElement, CardContentProps>(
  ({ className, padding = 'md', ...props }, ref) => {
    const paddings = {
      none: '',
      sm: 'p-2',
      md: 'p-4',
      lg: 'p-6'
    };

    return (
      <div
        ref={ref}
        className={cn(paddings[padding], className)}
        {...props}
      />
    );
  }
);

CardContent.displayName = 'CardContent';

interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
  separator?: boolean;
  padding?: 'sm' | 'md' | 'lg';
}

const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(
  ({ className, separator = true, padding = 'md', ...props }, ref) => {
    const paddings = {
      sm: 'p-2',
      md: 'p-4',
      lg: 'p-6'
    };

    return (
      <div
        ref={ref}
        className={cn(
          paddings[padding],
          separator && 'border-t border-[var(--border)]',
          className
        )}
        {...props}
      />
    );
  }
);

CardFooter.displayName = 'CardFooter';

export { Card, CardHeader, CardTitle, CardContent, CardFooter };