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

const messageVariants = cva('flex w-full gap-3', {
  variants: {
    align: {
      start: 'justify-start',
      end: 'justify-end',
    },
  },
  defaultVariants: {
    align: 'start',
  },
})

export interface MessageProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof messageVariants> {}

const Message = React.forwardRef<HTMLDivElement, MessageProps>(
  ({ className, align = 'start', ...props }, ref) => (
    <div
      ref={ref}
      data-slot="message"
      data-align={align}
      className={cn(messageVariants({ align, className }))}
      {...props}
    />
  )
)
Message.displayName = 'Message'

export type MessageContentProps = React.HTMLAttributes<HTMLDivElement>

const MessageContent = React.forwardRef<HTMLDivElement, MessageContentProps>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      data-slot="message-content"
      className={cn('flex min-w-0 max-w-[min(752px,100%)] flex-1 flex-col gap-2', className)}
      {...props}
    />
  )
)
MessageContent.displayName = 'MessageContent'

export type MessageAvatarProps = React.HTMLAttributes<HTMLDivElement>

const MessageAvatar = React.forwardRef<HTMLDivElement, MessageAvatarProps>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      data-slot="message-avatar"
      className={cn(
        'flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-full bg-fill-secondary text-xs font-medium text-text-secondary',
        '[&_img]:size-full [&_img]:object-cover',
        className
      )}
      {...props}
    />
  )
)
MessageAvatar.displayName = 'MessageAvatar'

export type MessageHeaderProps = React.HTMLAttributes<HTMLDivElement>

const MessageHeader = React.forwardRef<HTMLDivElement, MessageHeaderProps>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      data-slot="message-header"
      className={cn('flex min-w-0 items-center gap-2 text-xs leading-xs text-text-tertiary', className)}
      {...props}
    />
  )
)
MessageHeader.displayName = 'MessageHeader'

export type MessageFooterProps = React.HTMLAttributes<HTMLDivElement>

const MessageFooter = React.forwardRef<HTMLDivElement, MessageFooterProps>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      data-slot="message-footer"
      className={cn('flex items-center gap-2 text-xs leading-xs text-text-tertiary', className)}
      {...props}
    />
  )
)
MessageFooter.displayName = 'MessageFooter'

export type MessageGroupProps = React.HTMLAttributes<HTMLDivElement>

const MessageGroup = React.forwardRef<HTMLDivElement, MessageGroupProps>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      data-slot="message-group"
      className={cn('flex w-full flex-col gap-4', className)}
      {...props}
    />
  )
)
MessageGroup.displayName = 'MessageGroup'

export {
  Message,
  MessageContent,
  MessageAvatar,
  MessageHeader,
  MessageFooter,
  MessageGroup,
  messageVariants,
}