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

import { renderTypeIcon } from '../../AttachmentCard'
import type { BubbleVariant } from '../types'

import { buildCompactMetaLabel } from './fileMeta'

export interface CompactDocumentRowProps {
  variant: BubbleVariant
  /** Filename — drives the title (when no `title` set) and the `EXT` label. */
  filename?: string
  /** Override displayed title. Defaults to `filename`. */
  title?: string
  mimeType?: string
  fileSize?: number
  /**
   * When set, the icon + filename area becomes a `<button>` that fires
   * this handler. Lets the row's primary activation (e.g. opening the
   * PDF viewer) live separately from the trailing slot's own button
   * (e.g. a download icon) without nesting `<button>` inside `<button>`.
   * When omitted, the row renders as a plain presentational `<div>`
   * and the caller is responsible for any outer activation wrapper.
   */
  onActivate?: () => void
  /**
   * Required when `onActivate` is set. Visible to assistive tech as
   * the inner button's label (e.g. `'Open ESOP-summary.pdf'`).
   */
  activateLabel?: string
  /**
   * Optional trailing slot — sits outside the activation button so it
   * can host its own interactive controls (e.g. a download `<button>`,
   * the Composer's `DismissButton`) without nesting one button inside
   * another.
   */
  trailingAction?: React.ReactNode
}

// Meta line + icon tile are tinted relative to the bubble background,
// so they stay variant-aware. The title inherits the bubble's text
// color (set on the parent `Bubble`).
//
// `text-black/55` on the `#f2f1ef` light bubble lands right at the
// WCAG AA 4.5:1 small-text threshold (≈4.5:1) — bump to `/65` so
// the meta line has a comfortable margin on the light bubble. The
// dark variant (`text-white/55` on `#1e2330`) already passes AA,
// so we leave it alone.
const META_CLASS_BY_VARIANT: Record<BubbleVariant, string> = {
  dark: 'text-white/55',
  light: 'text-black/65',
}

const ICON_BG_BY_VARIANT: Record<BubbleVariant, string> = {
  dark: 'bg-white/10',
  light: 'bg-black/5',
}

const ICON_COLOR_BY_VARIANT: Record<BubbleVariant, string> = {
  dark: 'text-white/85',
  light: 'text-black/85',
}

/**
 * Compact icon-row used by `Pdf` / `File` `MessageAttachment` variants.
 * Mirrors the mobile chat document attachment from
 * `EARN-8448/pr-2-chat-bubbles-and-file-icons` — a 40x40 typed icon
 * tile on the left, filename + `EXT · SIZE` meta on the right.
 *
 * The row is always wrapped by `Bubble`, which contributes the bubble
 * background, padding, border, and (when the parent wires it up) the
 * click target.
 */
const CompactDocumentRow: React.FC<CompactDocumentRowProps> = ({
  variant,
  filename,
  title,
  mimeType = 'application/octet-stream',
  fileSize,
  onActivate,
  activateLabel,
  trailingAction,
}) => {
  const resolvedTitle = title ?? filename ?? 'File'
  const metaLabel = buildCompactMetaLabel(mimeType, filename, fileSize)

  const iconTile = (
    <div
      className={classNames(
        'flex size-10 shrink-0 items-center justify-center rounded-sm',
        ICON_BG_BY_VARIANT[variant]
      )}
      aria-hidden
    >
      {renderTypeIcon(mimeType, {
        className: classNames('size-6', ICON_COLOR_BY_VARIANT[variant]),
        weight: 'regular',
      })}
    </div>
  )

  const textBlock = (
    <div className="flex min-w-0 flex-1 flex-col text-left">
      <p className="truncate font-medium leading-snug">{resolvedTitle}</p>
      {metaLabel ? (
        <p
          className={classNames(
            'truncate text-xs leading-4',
            META_CLASS_BY_VARIANT[variant]
          )}
        >
          {metaLabel}
        </p>
      ) : null}
    </div>
  )

  // When the row is activatable, its body (icon + text) becomes the
  // click target — wrapping it in a `<button>` rather than wrapping
  // the entire row preserves the trailing slot for its own buttons
  // (download / dismiss) instead of nesting them inside one.
  const body = onActivate ? (
    <button
      type="button"
      onClick={onActivate}
      aria-label={activateLabel}
      className={classNames(
        'flex min-w-0 flex-1 items-center gap-3 rounded-sm text-left transition-colors',
        variant === 'dark' ? 'hover:bg-white/[0.04]' : 'hover:bg-black/[0.04]'
      )}
    >
      {iconTile}
      {textBlock}
    </button>
  ) : (
    <>
      {iconTile}
      {textBlock}
    </>
  )

  return (
    <div className="flex items-center gap-3 px-3 py-2">
      {body}
      {trailingAction ? <div className="shrink-0">{trailingAction}</div> : null}
    </div>
  )
}

export default CompactDocumentRow