import { forwardRef, type HTMLAttributes } from 'react'

import { cn } from './utils'

export type CardTone = 'glass' | 'shadcn'

export interface CardProps extends HTMLAttributes<HTMLDivElement> {
  variant?: 'default' | 'glass' | 'solid'
  glowColor?: 'rose' | 'amber' | 'violet' | 'cyan' | 'none'
  /**
   * Visual tone. `'glass'` (default) renders the library's translucent
   * glass surface with optional glow. `'shadcn'` emits the canonical
   * shadcn `bg-card text-card-foreground border shadow rounded-xl`
   * surface so the card matches a Tailwind-v4 / shadcn host app.
   */
  tone?: CardTone
}

const Card = forwardRef<HTMLDivElement, CardProps>(
  ({ className, variant = 'glass', glowColor = 'none', tone = 'glass', ...props }, ref) => (
    <div
      ref={ref}
      data-tone={tone}
      className={cn(
        tone === 'shadcn'
          ? 'bg-card text-card-foreground rounded-xl border shadow'
          : [
              'relative overflow-hidden rounded-[18px] transition-all duration-300',
              // Glass variant (default)
              variant === 'glass' && ['bg-glass backdrop-blur-[20px]', 'border border-transparent'],
              // Solid variant
              variant === 'solid' && [
                'bg-glass-solid backdrop-blur-[40px]',
                'border border-transparent',
              ],
              // Default variant (non-glass)
              variant === 'default' && ['bg-background-surface', 'border-border-subtle border'],
              // Glow effects on hover
              glowColor === 'rose' && 'hover:shadow-glow-rose border-top-rose',
              glowColor === 'amber' && 'hover:shadow-glow-amber border-top-amber',
              glowColor === 'violet' && 'hover:shadow-glow-violet border-top-violet',
              glowColor === 'cyan' && 'hover:shadow-glow-cyan border-top-cyan',
              // Hover lift effect
              glowColor !== 'none' && 'hover:-translate-y-1',
            ],
        className
      )}
      {...props}
    />
  )
)
Card.displayName = 'Card'

const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      className={cn(
        'border-border-glass flex items-center justify-between border-b px-[22px] py-[18px]',
        className
      )}
      {...props}
    />
  )
)
CardHeader.displayName = 'CardHeader'

const CardTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
  ({ className, ...props }, ref) => (
    <h3
      ref={ref}
      className={cn('text-foreground text-[15px] font-semibold tracking-[-0.3px]', className)}
      {...props}
    />
  )
)
CardTitle.displayName = 'CardTitle'

const CardBody = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => <div ref={ref} className={cn('p-5', className)} {...props} />
)
CardBody.displayName = 'CardBody'

export { Card, CardHeader, CardTitle, CardBody }
