import classNames from 'classnames'
import React from 'react'

import { renderTypeIcon } from './utils/icons'

export { default as AttachmentThumbnail } from './Thumbnail'
export type {
  AttachmentThumbnailProps,
  AttachmentThumbnailVariant,
} from './Thumbnail'
export type { MediaPlayerProps } from './MediaPlayer'
export { renderTypeIcon } from './utils/icons'
export {
  getSourceType,
  type AttachmentSourceType,
  type DocumentIconType,
} from './utils/mimeType'

export interface AttachmentCardProps {
  variant: 'light' | 'dark'
  thumbnail: React.ReactNode
  title?: string
  placeholderTitle?: string
  mimeType: string
  detail?: string
  statusBadge?: React.ReactNode
  action?: React.ReactNode
  topLeft?: React.ReactNode
  topRight?: React.ReactNode
  rootRef?: React.Ref<HTMLDivElement>
  'data-testid'?: string
}

const AttachmentCard: React.FC<AttachmentCardProps> = ({
  variant,
  thumbnail,
  title,
  placeholderTitle = 'Attachment title',
  mimeType,
  detail,
  statusBadge,
  action,
  topLeft,
  topRight,
  rootRef,
  'data-testid': dataTestId,
}) => {
  const isDark = variant === 'dark'
  const displayTitle = isDark ? (title ?? placeholderTitle) : (title ?? '')
  const titleDimmed = isDark && !title

  return (
    <div
      ref={rootRef}
      data-testid={dataTestId}
      className={classNames(
        'relative w-[280px] select-none overflow-hidden rounded-[24px] shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_4px_8px_rgba(0,0,0,0.06)]',
        isDark ? 'bg-[#1e2330]' : 'bg-white'
      )}
    >
      {topLeft ? (
        <div className="pointer-events-auto absolute left-3 top-3 z-50">
          {topLeft}
        </div>
      ) : null}
      {topRight ? (
        <div className="pointer-events-auto absolute right-3 top-3 z-50">
          {topRight}
        </div>
      ) : null}

      {thumbnail}

      <div className="px-4 pb-3 pt-3">
        {displayTitle.trim() !== '' && (
          <p
            className={classNames('mb-0.5 truncate text-base font-medium', {
              'text-black': !isDark,
              'text-white/30': isDark && titleDimmed,
              'text-white': isDark && !titleDimmed,
            })}
          >
            {displayTitle}
          </p>
        )}

        <div className="flex flex-wrap items-center gap-1">
          {renderTypeIcon(mimeType, {
            className: classNames(
              'size-5 shrink-0',
              isDark ? 'text-white/55' : 'text-black/55'
            ),
            weight: 'regular',
          })}

          {detail != null && detail !== '' && (
            <span
              className={classNames(
                'text-xs font-medium',
                isDark ? 'text-white/55' : 'text-black/55'
              )}
            >
              {detail}
            </span>
          )}

          {statusBadge}
        </div>

        {action}
      </div>
    </div>
  )
}

export default AttachmentCard