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

interface StyledCardProps extends HTMLAttributes<HTMLDivElement> {
  variant?: 'default' | 'outline' | 'elevated' | 'bordered' | 'column';
  color?:
    | 'default'
    | 'primary'
    | 'success'
    | 'destructive'
    | 'accent'
    | 'purple'
    | 'yellow'
    | 'green'
    | 'blue'
    | 'gray';
}

const StyledCard = forwardRef<HTMLDivElement, StyledCardProps>(
  ({ className, variant = 'default', color = 'default', ...props }, ref) => {
    const variants = {
      default:
        'bg-[var(--card)]/50 border border-[var(--border)]/50 relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-transparent before:via-[color-mix(in_srgb,var(--primary)_2%,transparent)] before:to-[color-mix(in_srgb,var(--primary)_1%,transparent)] before:opacity-40',
      outline:
        'bg-transparent border border-[var(--border)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--primary)_3%,transparent)] before:via-transparent before:to-transparent before:opacity-30',
      elevated:
        'bg-[var(--card)]/80 border border-[var(--border)]/50 shadow-lg shadow-[var(--card)]/20 relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--primary)_4%,transparent)] before:via-[color-mix(in_srgb,var(--primary)_2%,transparent)] before:to-transparent before:opacity-50',
      bordered:
        'bg-[var(--card)]/50 border border-[var(--primary)]/30 shadow-[var(--primary)]/10 shadow-lg relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--primary)_6%,transparent)] before:via-[color-mix(in_srgb,var(--primary)_3%,transparent)] before:to-[color-mix(in_srgb,var(--primary)_1%,transparent)] before:opacity-60',
      column:
        'bg-[var(--card-column)] border border-[var(--border)]/50 shadow-lg shadow-[var(--card)]/20 relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-transparent before:via-[color-mix(in_srgb,var(--primary)_3%,transparent)] before:to-[color-mix(in_srgb,var(--primary)_1%,transparent)] before:opacity-50',
    };

    const colors = {
      default: '',
      primary:
        'bg-gradient-to-br from-[color-mix(in_srgb,var(--primary)_12%,transparent)] via-[color-mix(in_srgb,var(--primary)_8%,transparent)] to-[color-mix(in_srgb,var(--primary)_4%,transparent)] border-[color-mix(in_srgb,var(--primary)_30%,var(--border))] text-[var(--primary)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--primary)_6%,transparent)] before:via-transparent before:to-transparent before:opacity-50',
      success:
        'bg-gradient-to-br from-[color-mix(in_srgb,var(--success)_12%,transparent)] via-[color-mix(in_srgb,var(--success)_8%,transparent)] to-[color-mix(in_srgb,var(--success)_4%,transparent)] border-[color-mix(in_srgb,var(--success)_30%,var(--border))] text-[var(--success)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--success)_6%,transparent)] before:via-transparent before:to-transparent before:opacity-50',
      destructive:
        'bg-gradient-to-br from-[color-mix(in_srgb,var(--destructive)_12%,transparent)] via-[color-mix(in_srgb,var(--destructive)_8%,transparent)] to-[color-mix(in_srgb,var(--destructive)_4%,transparent)] border-[color-mix(in_srgb,var(--destructive)_30%,var(--border))] text-[var(--destructive)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--destructive)_6%,transparent)] before:via-transparent before:to-transparent before:opacity-50',
      accent:
        'bg-gradient-to-br from-[color-mix(in_srgb,var(--accent)_12%,transparent)] via-[color-mix(in_srgb,var(--accent)_8%,transparent)] to-[color-mix(in_srgb,var(--accent)_4%,transparent)] border-[color-mix(in_srgb,var(--accent)_30%,var(--border))] text-[var(--accent)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--accent)_6%,transparent)] before:via-transparent before:to-transparent before:opacity-50',
      purple:
        'bg-gradient-to-br from-[color-mix(in_srgb,var(--purple)_12%,transparent)] via-[color-mix(in_srgb,var(--purple)_8%,transparent)] to-[color-mix(in_srgb,var(--purple)_4%,transparent)] border-[color-mix(in_srgb,var(--purple)_30%,var(--border))] text-[var(--purple)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--purple)_6%,transparent)] before:via-transparent before:to-transparent before:opacity-50',
      yellow:
        'bg-gradient-to-br from-[color-mix(in_srgb,var(--yellow)_12%,transparent)] via-[color-mix(in_srgb,var(--yellow)_8%,transparent)] to-[color-mix(in_srgb,var(--yellow)_4%,transparent)] border-[color-mix(in_srgb,var(--yellow)_30%,var(--border))] text-[var(--yellow)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--yellow)_6%,transparent)] before:via-transparent before:to-transparent before:opacity-50',
      green:
        'bg-gradient-to-br from-[color-mix(in_srgb,var(--green)_12%,transparent)] via-[color-mix(in_srgb,var(--green)_8%,transparent)] to-[color-mix(in_srgb,var(--green)_4%,transparent)] border-[color-mix(in_srgb,var(--green)_30%,var(--border))] text-[var(--green)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--green)_6%,transparent)] before:via-transparent before:to-transparent before:opacity-50',
      blue: 'bg-gradient-to-br from-[color-mix(in_srgb,var(--blue)_12%,transparent)] via-[color-mix(in_srgb,var(--blue)_8%,transparent)] to-[color-mix(in_srgb,var(--blue)_4%,transparent)] border-[color-mix(in_srgb,var(--blue)_30%,var(--border))] text-[var(--blue)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--blue)_6%,transparent)] before:via-transparent before:to-transparent before:opacity-50',
      gray: 'bg-gradient-to-br from-[color-mix(in_srgb,var(--gray)_12%,transparent)] via-[color-mix(in_srgb,var(--gray)_8%,transparent)] to-[color-mix(in_srgb,var(--gray)_4%,transparent)] border-[color-mix(in_srgb,var(--gray)_30%,var(--border))] text-[var(--gray)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--gray)_6%,transparent)] before:via-transparent before:to-transparent before:opacity-50',
    };

    return (
      <div
        ref={ref}
        className={cn(
          'rounded-lg backdrop-blur-sm transition-all duration-200',
          variants[variant],
          colors[color],
          className
        )}
        {...props}
      />
    );
  }
);

StyledCard.displayName = 'StyledCard';

export { StyledCard };
