import React, { Suspense } from 'react'

import type {
  MediaCardDraftProps,
  MediaCardOtherProps,
  MediaCardOwnProps,
  MediaCardPreviewProps,
} from './components/Media/types'
import type {
  TextCardOtherProps,
  TextCardOwnProps,
} from './components/Text/types'

const TextCardLazy = React.lazy(() => import('./components/Text/Card'))
const MediaCardLazy = React.lazy(() => import('./components/Media/Card'))

const LockedAttachmentFallback = () => (
  <div
    className="w-[280px] min-h-[200px] animate-pulse rounded-md bg-black/[0.06] shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_1px_2px_rgba(0,0,0,0.04),0_8px_32px_rgba(0,0,0,0.1)]"
    aria-hidden
  />
)

export type DraftProps = MediaCardDraftProps & {
  /** Drafting is always the sender — doesn't apply here. */
  isMine?: never
  /**
   * "text" renders as a chat bubble showing the real draft `text` instead of
   * a media thumbnail card. Media-only fields below are ignored in text mode.
   * Defaults to `"media"`.
   */
  contentType?: 'text' | 'media'
  /** The message's own text, shown as-is (not redacted yet). Only used when `contentType` is `"text"`. */
  renderedText?: React.ReactNode
}

export type PreviewProps = MediaCardPreviewProps & {
  /** Drafting is always the sender — doesn't apply here. */
  isMine?: never
  /**
   * "text" renders as a chat bubble instead of a media thumbnail card.
   * Media-only fields below are ignored in text mode. Defaults to `"media"`.
   */
  contentType?: 'text' | 'media'
}

export type SentTextOwnProps = TextCardOwnProps & {
  contentType: 'text'
  /** Sender's view has no unlock flow — doesn't apply here. */
  onUnlockClick?: never
  isUnlocking?: never
}

export type SentTextOtherProps = TextCardOtherProps & {
  contentType: 'text'
}

export type SentMediaOwnProps = MediaCardOwnProps & {
  contentType?: 'media'
  /** Sender's view has no unlock/download flow — doesn't apply here. */
  onUnlockClick?: never
  isUnlocking?: never
  onDownloadClick?: never
}

export type SentMediaOtherProps = MediaCardOtherProps & {
  contentType?: 'media'
}

/**
 * The card for a paid attachment — a still-drafting `isDraft` card, a static
 * receiver-facing `isPreview` mockup, or a sent text/media card discriminated
 * by `isMine` + `contentType`. Internally lazy-loads only the one underlying
 * implementation the resolved branch needs.
 */
export type LockedAttachmentProps =
  | DraftProps
  | PreviewProps
  | SentTextOwnProps
  | SentTextOtherProps
  | SentMediaOwnProps
  | SentMediaOtherProps

const LockedAttachment: React.FC<LockedAttachmentProps> = (props) => {
  return (
    <Suspense fallback={<LockedAttachmentFallback />}>
      {props.contentType === 'text' ? (
        <TextCardLazy {...props} />
      ) : (
        <MediaCardLazy {...props} />
      )}
    </Suspense>
  )
}

export default LockedAttachment
export type { PurchaseStatusBadgeProps } from './components/_shared/PurchaseStatusBadge'
export type {
  PaymentStatus,
  FetchSourceHandler,
  LockedAttachmentSource,
  LockedAttachmentGalleryItem,
  LockedAttachmentContextValue,
} from './types'
