import type { ReactNode } from 'react'
import { useEffect, useState } from 'react'
import { createPortal } from 'react-dom'
import { useScale } from '@/contexts/ScaleContext'

export interface ScaledPortalProps {
  /** 是否启用（不启用则直接渲染 children） */
  enabled?: boolean
  /** z-index 层级（建议 > ExhibitOverlay 的 9999） */
  zIndex?: number
  /** 子元素 */
  children: ReactNode
}

/**
 * ScaledPortal
 * - 使用 Portal 渲染到 document.body，避免被其他 Portal/遮罩层挡住
 * - 使用 useScale 的 offset/scale 做视觉对齐（与 ExhibitOverlay 一致）
 */
const ScaledPortal = ({ enabled = true, zIndex = 10050, children }: ScaledPortalProps) => {
  const [mounted, setMounted] = useState(false)
  const { scale, offsetX, offsetY, DESIGN_WIDTH, DESIGN_HEIGHT } = useScale()

  useEffect(() => {
    setMounted(true)
  }, [])

  if (!enabled) return <>{children}</>
  if (!mounted) return null

  const scaled = (
    <div
      style={{
        position: 'fixed',
        inset: 0,
        width: `${DESIGN_WIDTH}px`,
        height: `${DESIGN_HEIGHT}px`,
        left: `${offsetX}px`,
        top: `${offsetY}px`,
        transform: `scale(${scale})`,
        transformOrigin: 'top left',
        pointerEvents: 'auto',
        zIndex,
      }}
    >
      {children}
    </div>
  )

  return createPortal(scaled, document.body)
}

export default ScaledPortal