Card

'use client';

import { motion } from 'framer-motion';
import { type ReactNode } from 'react';

export type CardVariant = 'default' | 'bordered' | 'elevated' | 'glass' | 'gradient';
export type CardTone = 'default' | 'success' | 'warning' | 'danger' | 'info';

export interface CardProps {
  variant?: CardVariant;
  tone?: CardTone;
  header?: ReactNode;
  children?: ReactNode;
  footer?: ReactNode;
  media?: ReactNode;
  mediaPosition?: 'top' | 'bottom';
  clickable?: boolean;
  onClick?: () => void;
  href?: string;
  className?: string;
  padding?: 'none' | 'sm' | 'md' | 'lg';
  hoverEffect?: boolean;
}

const variantStyles: Record<CardVariant, string> = {
  default: 'bg-(--surface-elevated) border border-(--border)',
  bordered: 'bg-(--surface-elevated) border-2 border-brand-500/20',
  elevated: 'bg-(--surface-elevated) border border-(--border) shadow-(--shadow-card)',
  glass: 'bg-(--surface-elevated)/60 backdrop-blur-xl border border-(--border) shadow-(--shadow-card)',
  gradient: 'bg-linear-to-br from-brand-500/5 via-(--surface-elevated) to-brand-300/5 border border-brand-500/10',
};

const toneStyles: Record<CardTone, string> = {
  default: '',
  success: 'border-success-500/40 bg-success-500/[0.03]',
  warning: 'border-warn-500/40 bg-warn-500/[0.03]',
  danger:  'border-danger-500/40 bg-danger-500/[0.03]',
  info:    'border-brand-500/40 bg-brand-500/[0.03]',
};

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

export function Card({
  variant = 'default',
  tone = 'default',
  header,
  children,
  footer,
  media,
  mediaPosition = 'top',
  clickable = false,
  onClick,
  href,
  className = '',
  padding = 'md',
  hoverEffect = true,
}: CardProps) {
  const isInteractive = clickable || !!onClick || !!href;

  const cardContent = (
    <>
      {media && mediaPosition === 'top' && (
        <div className="overflow-hidden rounded-t-xl">
          {media}
        </div>
      )}
      {header && (
        <div className={`${padding !== 'none' ? paddingStyles[padding] : 'px-5 pt-5'} ${media && mediaPosition === 'top' ? 'pt-4' : ''}`}>
          {header}
        </div>
      )}
      {children && (
        <div className={`${paddingStyles[padding]} ${header ? 'pt-0' : ''} ${footer ? 'pb-0' : ''}`}>
          {children}
        </div>
      )}
      {media && mediaPosition === 'bottom' && (
        <div className="overflow-hidden rounded-b-xl">
          {media}
        </div>
      )}
      {footer && (
        <div className={`${padding !== 'none' ? paddingStyles[padding] : 'px-5 pb-5'} ${children ? 'pt-0' : ''} border-t border-(--border) mt-auto`}>
          <div className="pt-4">
            {footer}
          </div>
        </div>
      )}
    </>
  );

  const interactiveClasses = isInteractive
    ? 'cursor-pointer focus-visible:outline-2 focus-visible:outline-(--ring) focus-visible:outline-offset-2'
    : '';

  const baseClasses = `rounded-xl overflow-hidden flex flex-col ${variantStyles[variant]} ${toneStyles[tone]} ${interactiveClasses} ${className}`;

  const motionProps = hoverEffect
    ? {
        whileHover: isInteractive
          ? { y: -4, boxShadow: 'var(--shadow-card-hover)' }
          : { y: -2, boxShadow: 'var(--shadow-card-hover)' },
        transition: { type: 'spring' as const, stiffness: 300, damping: 22 },
      }
    : {};

  if (href) {
    return (
      <motion.a
        href={href}
        className={baseClasses}
        {...motionProps}
      >
        {cardContent}
      </motion.a>
    );
  }

  return (
    <motion.div
      className={baseClasses}
      onClick={onClick}
      role={isInteractive ? 'button' : undefined}
      tabIndex={isInteractive ? 0 : undefined}
      onKeyDown={isInteractive ? (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          onClick?.();
        }
      } : undefined}
      {...motionProps}
    >
      {cardContent}
    </motion.div>
  );
}

export interface CardHeaderProps {
  title: string;
  subtitle?: string;
  action?: ReactNode;
  className?: string;
}

export function CardHeader({ title, subtitle, action, className = '' }: CardHeaderProps) {
  return (
    <div className={`flex items-start justify-between gap-4 ${className}`}>
      <div>
        <h3 className="text-sm font-semibold text-(--text)">{title}</h3>
        {subtitle && <p className="text-xs text-(--text-muted) mt-1">{subtitle}</p>}
      </div>
      {action && <div className="shrink-0">{action}</div>}
    </div>
  );
}

export interface CardMediaProps {
  src: string;
  alt: string;
  aspectRatio?: 'video' | 'square' | 'wide';
  className?: string;
}

const aspectStyles: Record<string, string> = {
  video: 'aspect-video',
  square: 'aspect-square',
  wide: 'aspect-[21/9]',
};

export function CardMedia({ src, alt, aspectRatio = 'video', className = '' }: CardMediaProps) {
  return (
    <div className={`${aspectStyles[aspectRatio]} overflow-hidden ${className}`}>
      <img
        src={src}
        alt={alt}
        className="w-full h-full object-cover"
      />
    </div>
  );
}

export interface CardFooterProps {
  children: ReactNode;
  align?: 'start' | 'between' | 'end';
  className?: string;
}

const footerAlignStyles: Record<'start' | 'between' | 'end', string> = {
  start: 'justify-start',
  between: 'justify-between',
  end: 'justify-end',
};

export function CardFooter({ children, align = 'end', className = '' }: CardFooterProps) {
  return (
    <div className={`flex items-center gap-2 ${footerAlignStyles[align]} ${className}`}>
      {children}
    </div>
  );
}