import { Html } from '@react-three/drei'
import type { HoverState } from './types'
import { NODE_TYPE_HEX } from './constants'

interface NodeTooltipProps {
  hovered: HoverState | null
}

export default function NodeTooltip({ hovered }: NodeTooltipProps) {
  if (!hovered) return null

  const { node, position } = hovered
  const color = NODE_TYPE_HEX[node.type] || NODE_TYPE_HEX.default

  return (
    <Html position={position} center style={{ pointerEvents: 'none' }}>
      <div className="brain-3d-tooltip">
        <div className="flex items-center gap-2 mb-1">
          <span className="w-2 h-2 rounded-full shrink-0" style={{ background: color }} />
          <span className="text-[10px] font-semibold uppercase tracking-wider" style={{ color }}>
            {node.type}
          </span>
        </div>
        <p className="text-xs text-slate-200 leading-snug max-w-48 break-words">
          {node.label}
        </p>
        <p className="text-[10px] text-slate-500 mt-1">
          Confidence: {(node.confidence * 100).toFixed(0)}% &middot; Connections: {node.degree}
        </p>
      </div>
    </Html>
  )
}
