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

const attachmentVariants = cva(
  'group/attachment flex items-center gap-3 rounded-md border bg-bg-elevated px-3 py-2 text-sm text-text shadow-sm transition-colors',
  {
    variants: {
      state: {
        pending: 'border-border bg-bg-elevated',
        uploading: 'border-primary-border bg-primary-bg text-text',
        done: 'border-success-border bg-success-bg text-text',
        error: 'border-error-border bg-error-bg text-text',
      },
    },
    defaultVariants: {
      state: 'pending',
    },
  }
)

export interface AttachmentProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof attachmentVariants> {}

const Attachment = React.forwardRef<HTMLDivElement, AttachmentProps>(
  ({ className, state = 'pending', ...props }, ref) => (
    <div
      ref={ref}
      data-slot="attachment"
      data-state={state}
      className={cn(attachmentVariants({ state, className }))}
      {...props}
    />
  )
)
Attachment.displayName = 'Attachment'

export type AttachmentMediaProps = React.HTMLAttributes<HTMLDivElement>

const AttachmentMedia = React.forwardRef<HTMLDivElement, AttachmentMediaProps>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      data-slot="attachment-media"
      className={cn(
        'flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-sm border border-border-tertiary bg-fill-secondary text-text-secondary',
        '[&_img]:size-full [&_img]:object-cover [&_svg]:size-4',
        className
      )}
      {...props}
    />
  )
)
AttachmentMedia.displayName = 'AttachmentMedia'

export type AttachmentContentProps = React.HTMLAttributes<HTMLDivElement>

const AttachmentContent = React.forwardRef<HTMLDivElement, AttachmentContentProps>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      data-slot="attachment-content"
      className={cn('flex min-w-0 flex-1 flex-col gap-0.5', className)}
      {...props}
    />
  )
)
AttachmentContent.displayName = 'AttachmentContent'

export type AttachmentTitleProps = React.HTMLAttributes<HTMLDivElement>

const AttachmentTitle = React.forwardRef<HTMLDivElement, AttachmentTitleProps>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      data-slot="attachment-title"
      className={cn('truncate text-sm font-medium leading-sm text-text', className)}
      {...props}
    />
  )
)
AttachmentTitle.displayName = 'AttachmentTitle'

export type AttachmentDescriptionProps = React.HTMLAttributes<HTMLDivElement>

const AttachmentDescription = React.forwardRef<HTMLDivElement, AttachmentDescriptionProps>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      data-slot="attachment-description"
      className={cn('truncate text-xs leading-xs text-text-tertiary', className)}
      {...props}
    />
  )
)
AttachmentDescription.displayName = 'AttachmentDescription'

export type AttachmentActionsProps = React.HTMLAttributes<HTMLDivElement>

const AttachmentActions = React.forwardRef<HTMLDivElement, AttachmentActionsProps>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      data-slot="attachment-actions"
      className={cn('ml-auto flex shrink-0 items-center gap-1', className)}
      {...props}
    />
  )
)
AttachmentActions.displayName = 'AttachmentActions'

export type AttachmentActionProps = React.ButtonHTMLAttributes<HTMLButtonElement>

const AttachmentAction = React.forwardRef<HTMLButtonElement, AttachmentActionProps>(
  ({ className, type = 'button', ...props }, ref) => (
    <button
      ref={ref}
      type={type}
      data-slot="attachment-action"
      className={cn(
        'inline-flex size-7 items-center justify-center rounded-sm text-text-tertiary transition-colors',
        'hover:bg-fill-secondary hover:text-text',
        'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-border focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base',
        'disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4',
        className
      )}
      {...props}
    />
  )
)
AttachmentAction.displayName = 'AttachmentAction'

export {
  Attachment,
  AttachmentMedia,
  AttachmentContent,
  AttachmentTitle,
  AttachmentDescription,
  AttachmentActions,
  AttachmentAction,
  attachmentVariants,
}