import * as React from 'react'
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'

const bubbleVariants = cva('flex max-w-full flex-col gap-1', {
  variants: {
    align: {
      start: 'items-start',
      end: 'items-end',
    },
  },
  defaultVariants: {
    align: 'start',
  },
})

const bubbleContentVariants = cva(
  'max-w-[min(752px,100%)] rounded-lg px-3 py-2 text-sm leading-sm shadow-sm',
  {
    variants: {
      variant: {
        received: 'bg-bg-elevated text-text border border-border',
        sent: 'bg-sage-bg text-text',
        note: 'bg-fill-secondary text-text-secondary',
        ghost: 'bg-transparent px-0 py-0 shadow-none',
      },
    },
    defaultVariants: {
      variant: 'received',
    },
  }
)

export interface BubbleProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof bubbleVariants> {}

const Bubble = React.forwardRef<HTMLDivElement, BubbleProps>(
  ({ className, align = 'start', ...props }, ref) => (
    <div
      ref={ref}
      data-slot="bubble"
      data-align={align}
      className={cn(bubbleVariants({ align, className }))}
      {...props}
    />
  )
)
Bubble.displayName = 'Bubble'

export interface BubbleContentProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof bubbleContentVariants> {}

const BubbleContent = React.forwardRef<HTMLDivElement, BubbleContentProps>(
  ({ className, variant = 'received', ...props }, ref) => (
    <div
      ref={ref}
      data-slot="bubble-content"
      data-variant={variant}
      className={cn(bubbleContentVariants({ variant, className }))}
      {...props}
    />
  )
)
BubbleContent.displayName = 'BubbleContent'

export type BubbleGroupProps = React.HTMLAttributes<HTMLDivElement>

const BubbleGroup = React.forwardRef<HTMLDivElement, BubbleGroupProps>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      data-slot="bubble-group"
      className={cn('flex w-full flex-col gap-2', className)}
      {...props}
    />
  )
)
BubbleGroup.displayName = 'BubbleGroup'

export type BubbleReactionsProps = React.HTMLAttributes<HTMLDivElement>

const BubbleReactions = React.forwardRef<HTMLDivElement, BubbleReactionsProps>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      data-slot="bubble-reactions"
      className={cn('flex items-center gap-1 text-xs text-text-tertiary', className)}
      {...props}
    />
  )
)
BubbleReactions.displayName = 'BubbleReactions'

export {
  Bubble,
  BubbleContent,
  BubbleGroup,
  BubbleReactions,
  bubbleVariants,
  bubbleContentVariants,
}