shanghai-residences/src/components/spotlight/Spotlight.tsx

import { useEffect, useState, useCallback } from 'react'
import { createPortal } from 'react-dom'
import { getBlockingDivs, type Rect } from './utils'

interface SpotlightProps {
  /** 是否可见 */
  visible?: boolean
  /** 目标元素选择器（支持单个或多个） */
  targetSelector?: string | string[] | null
  /** 额外内边距 */
  padding?: number
  /** 圆角 */
  borderRadius?: number
}

const Spotlight: React.FC<SpotlightProps> = ({
  visible = false,
  targetSelector = null,
  padding = 8,
  borderRadius = 16,
}) => {
  const [rects, setRects] = useState<Rect[]>([])

  const measure = useCallback(() => {
    if (!visible || !targetSelector) {
      setRects([])
      return
    }

    const selectors = Array.isArray(targetSelector) ? targetSelector : [targetSelector]
    const pad = Math.max(0, padding)
    const newRects: Rect[] = []

    selectors.forEach((selector) => {
      const elements = document.querySelectorAll(selector)
      elements.forEach((el) => {
        const htmlEl = el as HTMLElement
        const r = htmlEl.getBoundingClientRect()
        // 使用视口坐标（fixed层），不叠加滚动偏移
        newRects.push({
          top: r.top - pad,
          left: r.left - pad,
          width: r.width + pad * 2,
          height: r.height + pad * 2,
        })
      })
    })

    setRects(newRects)
  }, [visible, targetSelector, padding])

  useEffect(() => {
    // 初始测量
    requestAnimationFrame(measure)
  }, [visible, targetSelector, padding, measure])

  useEffect(() => {
    const onResize = () => measure()
    const onScroll = () => measure()

    window.addEventListener('resize', onResize)
    window.addEventListener('scroll', onScroll, {
      passive: true,
    } as AddEventListenerOptions)

    // 使用 ResizeObserver 监听目标元素尺寸变化
    const resizeObserver = new ResizeObserver(() => {
      measure()
    })

    // 观察所有目标元素
    if (visible && targetSelector) {
      const selectors = Array.isArray(targetSelector) ? targetSelector : [targetSelector]

      selectors.forEach((selector) => {
        const elements = document.querySelectorAll(selector)
        elements.forEach((el) => {
          resizeObserver.observe(el)
        })
      })
    }

    // 初始测量（延迟一帧确保 DOM 已渲染）
    requestAnimationFrame(measure)

    return () => {
      window.removeEventListener('resize', onResize)
      window.removeEventListener('scroll', onScroll)
      resizeObserver.disconnect()
    }
  }, [measure, visible, targetSelector])

  if (!visible || rects.length === 0) return null

  // 生成唯一ID用于SVG mask
  const maskId = `spotlight-mask-${Math.random().toString(36).substr(2, 9)}`

  // 计算阻止点击的区域（使用共享工具函数）
  const viewportWidth = typeof window !== 'undefined' ? window.innerWidth : 0
  const viewportHeight = typeof window !== 'undefined' ? window.innerHeight : 0
  const blockingDivs = getBlockingDivs(rects, viewportWidth, viewportHeight)

  return createPortal(
    <div
      style={{
        position: 'fixed',
        inset: 0,
        pointerEvents: 'none',
        zIndex: 100000,
      }}
    >
      {/* SVG 视觉遮罩 */}
      <svg
        style={{
          position: 'absolute',
          inset: 0,
          width: '100%',
          height: '100%',
          pointerEvents: 'none',
        }}
      >
        <defs>
          <mask id={maskId}>
            <rect x="0" y="0" width="100%" height="100%" fill="white" />
            {rects.map((rect, index) => (
              <rect
                key={index}
                x={rect.left}
                y={rect.top}
                width={rect.width}
                height={rect.height}
                rx={borderRadius}
                ry={borderRadius}
                fill="black"
              />
            ))}
          </mask>
        </defs>
        <rect
          x="0"
          y="0"
          width="100%"
          height="100%"
          fill="rgba(0, 0, 0, 0.6)"
          mask={`url(#${maskId})`}
        />
      </svg>

      {/* 阻止点击层 - 使用多个div块覆盖非孔区域 */}
      {blockingDivs.map((block, index) => (
        <div
          key={`block-${index}`}
          style={{
            position: 'absolute',
            top: `${block.top}px`,
            left: typeof block.left === 'number' ? `${block.left}px` : block.left,
            width: typeof block.width === 'number' ? `${block.width}px` : block.width,
            height: typeof block.height === 'number' ? `${block.height}px` : block.height,
            pointerEvents: 'auto',
            // backgroundColor: "rgba(255, 0, 0, 0.1)", // 调试用
          }}
        />
      ))}

      {/* 为每个孔添加高亮边框 */}
      {rects.map((rect, index) => (
        <div
          key={`border-${index}`}
          style={{
            position: 'absolute',
            top: `${rect.top}px`,
            left: `${rect.left}px`,
            width: `${rect.width}px`,
            height: `${rect.height}px`,
            borderRadius: `${borderRadius}px`,
            border: '2px solid rgba(255, 255, 255, 0.3)',
            pointerEvents: 'none',
          }}
        />
      ))}
    </div>,
    document.body
  )
}

export default Spotlight