import { Image, Typography } from 'antd'
import type { CSSProperties } from 'react'

type ConsignmentEvidenceGalleryProps = {
  /** 凭证图片地址列表；空数组 / 空值时渲染 emptyText */
  images?: string[] | null
  /** 没有凭证时的占位文案（灰色小字） */
  emptyText?: string
  /** 列表里最多铺几张缩略图，超出的用「+N」覆盖层提示 */
  max?: number
  /** 缩略图边长（px） */
  size?: number
}

const DEFAULT_MAX = 3
const DEFAULT_SIZE = 52

/**
 * 寄卖凭证画廊：把一组凭证图渲染成「缩略图 + 点击看大图」。
 *
 * 客服原来只能看到一张 48x48 的小图，既看不清是什么、也看不到全部；
 * 这里统一成缩略图 + `共 N 张` 提示，点击任意缩略图即可放大预览**全部**图片
 * （预览项来自 `items`，所以被 `max` 折叠的图在大图预览里依然可以左右切换）。
 */
export default function ConsignmentEvidenceGallery({
  images,
  emptyText = '无',
  max = DEFAULT_MAX,
  size = DEFAULT_SIZE,
}: ConsignmentEvidenceGalleryProps) {
  const list = normalizeImages(images)

  if (list.length === 0) {
    return (
      <Typography.Text type="secondary" style={{ fontSize: 12 }}>
        {emptyText}
      </Typography.Text>
    )
  }

  const visibleCount = Math.max(1, Math.min(max, list.length))
  const visible = list.slice(0, visibleCount)
  const hiddenCount = list.length - visible.length

  return (
    <Image.PreviewGroup items={list}>
      <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 6 }}>
        {visible.map((src, index) => (
          <div key={`${index}-${src}`} style={{ position: 'relative', lineHeight: 0 }}>
            <Image
              src={src}
              width={size}
              height={size}
              style={{ objectFit: 'cover', borderRadius: 6, border: '1px solid #e5e7eb' }}
            />
            {hiddenCount > 0 && index === visible.length - 1 ? (
              <span style={MORE_OVERLAY_STYLE} title={`还有 ${hiddenCount} 张，点击看全部`}>
                +{hiddenCount}
              </span>
            ) : null}
          </div>
        ))}
        {hiddenCount > 0 ? (
          <Typography.Text type="secondary" style={{ fontSize: 12 }}>
            共 {list.length} 张
          </Typography.Text>
        ) : null}
      </div>
    </Image.PreviewGroup>
  )
}

/** 「+N」覆盖层：不吃鼠标事件，点击仍然穿透到缩略图打开大图预览 */
const MORE_OVERLAY_STYLE: CSSProperties = {
  position: 'absolute',
  inset: 0,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  borderRadius: 6,
  background: 'rgba(0, 0, 0, 0.45)',
  color: '#fff',
  fontSize: 13,
  fontWeight: 600,
  lineHeight: 1,
  pointerEvents: 'none',
}

function normalizeImages(images?: string[] | null) {
  if (!Array.isArray(images)) return []
  return images.map((src) => String(src ?? '').trim()).filter(Boolean)
}