import { useEffect, useState } from 'react';
import { createPortal } from 'react-dom';

/**
 * FloatingTooltip — 跨容器漂浮 tooltip 包装
 *
 * 特性：
 *  - 通过 React Portal 挂到 document.body，彻底脱离父级 overflow:hidden / clip 截断
 *  - 使用 position: fixed + viewport 坐标（clientX / clientY）
 *  - 自动避让视口边缘：右侧不够空间向左翻；顶部不够空间向下翻
 *  - 不影响布局与命中（pointer-events: none）
 *  - 仅在 mouse 提供时挂载
 *
 * Props:
 *  - mouse: { clientX:number, clientY:number } | null   鼠标 viewport 坐标
 *  - offset: number  与鼠标的间距，默认 12
 *  - children: 实际 tooltip 视觉内容（通常是 <ChartTooltip /> ）
 */
export default function FloatingTooltip({ mouse, offset = 12, children }) {
  const [size, setSize] = useState({ w: 0, h: 0 });
  const [el, setEl] = useState(null);

  useEffect(() => {
    if (!el) return;
    const r = el.getBoundingClientRect();
    setSize({ w: Math.ceil(r.width), h: Math.ceil(r.height) });
  }, [el, mouse?.clientX, mouse?.clientY, children]);

  if (!mouse || typeof document === 'undefined') return null;

  const vw = typeof window !== 'undefined' ? window.innerWidth : 0;
  const vh = typeof window !== 'undefined' ? window.innerHeight : 0;

  // 默认放在鼠标右上方
  let left = mouse.clientX + offset;
  let top = mouse.clientY - offset - size.h;

  // 视口右侧空间不足 → 翻到左上
  if (left + size.w + 8 > vw) {
    left = mouse.clientX - offset - size.w;
  }
  // 视口顶部空间不足 → 翻到右下
  if (top < 8) {
    top = mouse.clientY + offset;
  }
  // 仍越界则贴边
  left = Math.max(8, Math.min(left, vw - size.w - 8));
  top = Math.max(8, Math.min(top, vh - size.h - 8));

  return createPortal(
    <div
      ref={setEl}
      style={{
        position: 'fixed',
        left,
        top,
        zIndex: 2147483000,
        pointerEvents: 'none',
      }}
    >
      {children}
    </div>,
    document.body,
  );
}
