import React from "react";
import type { ViewportTransform } from "./types";

interface GraphTooltipProps {
  modelX: number;
  modelY: number;
  screenX: number;
  screenY: number;
  viewport: ViewportTransform;
  evaluator?: (x: number, y: number) => { label: string; value: string }[];
}

export const GraphTooltip: React.FC<GraphTooltipProps> = ({
  modelX,
  modelY,
  screenX,
  screenY,
  viewport,
  evaluator,
}) => {
  const extraItems = evaluator ? evaluator(modelX, modelY) : [];

  const boxWidth = 148;
  const boxHeight = 32 + extraItems.length * 18;

  // Place tooltip slightly offset from cursor, flipping if near edges
  let tipX = screenX + 14;
  if (tipX + boxWidth > viewport.width - 12) {
    tipX = screenX - boxWidth - 14;
  }
  let tipY = screenY - boxHeight - 12;
  if (tipY < viewport.padding.top) {
    tipY = screenY + 14;
  }

  const plotLeft = viewport.padding.left;
  const plotRight = viewport.width - viewport.padding.right;
  const plotTop = viewport.padding.top;
  const plotBottom = viewport.height - viewport.padding.bottom;

  return (
    <g className="graph-tooltip pointer-events-none select-none">
      {/* Crosshair lines within plot area */}
      <line
        x1={screenX}
        y1={plotTop}
        x2={screenX}
        y2={plotBottom}
        stroke="#64748b"
        strokeWidth={1}
        strokeDasharray="3,3"
      />
      <line
        x1={plotLeft}
        y1={screenY}
        x2={plotRight}
        y2={screenY}
        stroke="#64748b"
        strokeWidth={1}
        strokeDasharray="3,3"
      />

      {/* Tooltip Card */}
      <g transform={`translate(${tipX}, ${tipY})`}>
        <rect
          width={boxWidth}
          height={boxHeight}
          rx={6}
          fill="#0f172a"
          fillOpacity={0.92}
          stroke="#334155"
          strokeWidth={1}
          className="drop-shadow-md"
        />

        {/* Primary coordinates */}
        <text
          x={10}
          y={18}
          className="text-xs font-mono font-semibold fill-slate-100"
        >
          {`X: ${modelX.toFixed(2)} • Y: ${modelY.toFixed(2)}`}
        </text>

        {/* Extra evaluated metrics */}
        {extraItems.map((item, idx) => (
          <text
            key={idx}
            x={10}
            y={36 + idx * 18}
            className="text-[11px] font-mono fill-slate-300"
          >
            <tspan className="fill-slate-400">{item.label}: </tspan>
            <tspan className="font-semibold fill-amber-300">{item.value}</tspan>
          </text>
        ))}
      </g>
    </g>
  );
};