import React, { forwardRef, HTMLAttributes } from 'react';
import { clsx } from 'clsx';

export interface CardProps extends HTMLAttributes<HTMLDivElement> {
  variant?: 'elevated' | 'outlined' | 'filled' | 'ghost';
  padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
  shadow?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
  hoverable?: boolean;
  interactive?: boolean;
}

export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
  padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
  divider?: boolean;
}

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

export interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
  padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
  divider?: boolean;
  justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
}

export interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
}

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

const Card = forwardRef<HTMLDivElement, CardProps>(({
  variant = 'elevated',
  padding = 'md',
  rounded = 'md',
  shadow = 'md',
  hoverable = false,
  interactive = false,
  className,
  children,
  ...props
}, ref) => {
  const baseClasses = [
    'relative',
    'transition-all duration-200 ease-in-out',
    'bg-[var(--bg-primary)]',
  ];

  const variantClasses = {
    elevated: [
      'border border-[var(--border-primary)]',
    ],
    outlined: [
      'border-2 border-[var(--border-primary)]',
      'bg-transparent',
    ],
    filled: [
      'bg-[var(--bg-secondary)]',
      'border border-transparent',
    ],
    ghost: [
      'bg-transparent',
      'border border-transparent',
    ],
  };

  const paddingClasses = {
    none: '',
    sm: 'p-3',
    md: 'p-4',
    lg: 'p-6',
    xl: 'p-8',
  };

  const roundedClasses = {
    none: 'rounded-none',
    sm: 'rounded-sm',
    md: 'rounded-lg',
    lg: 'rounded-xl',
    xl: 'rounded-2xl',
    full: 'rounded-full',
  };

  const shadowClasses = {
    none: '',
    sm: 'shadow-sm',
    md: 'shadow-md',
    lg: 'shadow-lg',
    xl: 'shadow-xl',
    '2xl': 'shadow-2xl',
  };

  const interactiveClasses = {
    hoverable: 'hover:shadow-lg hover:-translate-y-1',
    interactive: 'cursor-pointer hover:shadow-lg hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/20 focus:ring-offset-2',
  };

  const classes = clsx(
    baseClasses,
    variantClasses[variant],
    paddingClasses[padding],
    roundedClasses[rounded],
    shadowClasses[shadow],
    {
      [interactiveClasses.hoverable]: hoverable && !interactive,
      [interactiveClasses.interactive]: interactive,
    },
    className
  );

  const Component = interactive ? 'button' : 'div';

  return (
    <Component
      ref={ref}
      className={classes}
      {...props}
    >
      {children}
    </Component>
  );
});

const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(({
  padding = 'md',
  divider = true,
  className,
  children,
  ...props
}, ref) => {
  const paddingClasses = {
    none: '',
    sm: 'p-3',
    md: 'p-4',
    lg: 'p-6',
    xl: 'p-8',
  };

  const classes = clsx(
    'flex items-center justify-between',
    paddingClasses[padding],
    {
      'border-b border-[var(--border-primary)]': divider,
    },
    className
  );

  return (
    <div
      ref={ref}
      className={classes}
      {...props}
    >
      {children}
    </div>
  );
});

const CardBody = forwardRef<HTMLDivElement, CardBodyProps>(({
  padding = 'md',
  className,
  children,
  ...props
}, ref) => {
  const paddingClasses = {
    none: '',
    sm: 'p-3',
    md: 'p-4',
    lg: 'p-6',
    xl: 'p-8',
  };

  const classes = clsx(
    paddingClasses[padding],
    className
  );

  return (
    <div
      ref={ref}
      className={classes}
      {...props}
    >
      {children}
    </div>
  );
});

const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(({
  padding = 'md',
  divider = true,
  justify = 'end',
  className,
  children,
  ...props
}, ref) => {
  const paddingClasses = {
    none: '',
    sm: 'p-3',
    md: 'p-4',
    lg: 'p-6',
    xl: 'p-8',
  };

  const justifyClasses = {
    start: 'justify-start',
    end: 'justify-end',
    center: 'justify-center',
    between: 'justify-between',
    around: 'justify-around',
    evenly: 'justify-evenly',
  };

  const classes = clsx(
    'flex items-center gap-3',
    paddingClasses[padding],
    justifyClasses[justify],
    {
      'border-t border-[var(--border-primary)]': divider,
    },
    className
  );

  return (
    <div
      ref={ref}
      className={classes}
      {...props}
    >
      {children}
    </div>
  );
});

const CardTitle = forwardRef<HTMLHeadingElement, CardTitleProps>(({
  as: Component = 'h3',
  className,
  children,
  ...props
}, ref) => {
  const classes = clsx(
    'text-lg font-semibold leading-none tracking-tight',
    className
  );

  return (
    <Component
      ref={ref}
      className={classes}
      {...props}
    >
      {children}
    </Component>
  );
});

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

  const classes = clsx(
    paddingClasses[padding],
    'flex-1',
    className
  );

  return (
    <div
      ref={ref}
      className={classes}
      {...props}
    >
      {children}
    </div>
  );
});

const CardDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(({
  className,
  children,
  ...props
}, ref) => {
  const classes = clsx(
    'text-sm text-[var(--text-secondary)]',
    className
  );

  return (
    <p
      ref={ref}
      className={classes}
      {...props}
    >
      {children}
    </p>
  );
});

Card.displayName = 'Card';
CardHeader.displayName = 'CardHeader';
CardBody.displayName = 'CardBody';
CardFooter.displayName = 'CardFooter';
CardTitle.displayName = 'CardTitle';
CardDescription.displayName = 'CardDescription';
CardContent.displayName = 'CardContent';

export default Card;
export { CardHeader, CardBody, CardFooter, CardContent, CardTitle, CardDescription };