import { fmt } from '../../utils/units.js';
import type { VFPoint } from '../../types.js';

interface Props {
  point: VFPoint;
  /** Pending delta in kHz (from store), if any */
  pendingDeltaKhz?: number;
  /** True if this point is being held up by monotonicity enforcement */
  isClamped?: boolean;
}

/**
 * HTML tooltip rendered as an absolutely-positioned overlay on top of the
 * SVG so it's never clipped by the SVG viewport.
 */
export function CurveTooltip({ point, pendingDeltaKhz, isClamped }: Props) {
  const hasPending = pendingDeltaKhz !== undefined;
  const pendingMhz = hasPending ? pendingDeltaKhz! / 1000 : 0;
  const deltaChange = hasPending ? pendingDeltaKhz! - point.delta_khz : 0;
  const pendingEffMhz = hasPending ? point.freq_mhz + deltaChange / 1000 : null;

  return (
    <div
      className="absolute right-4 bottom-4 pointer-events-none z-50 w-[172px] bg-zinc-800 border border-zinc-700 rounded-md p-2 text-xs shadow-xl"
    >
      <div className="text-zinc-400 mb-1">Point {point.index}</div>
      <div className="text-zinc-200">
        <span className="text-zinc-400">Volt:   </span>{fmt.mv(point.volt_mv, 1)}
      </div>
      <div className="text-zinc-200">
        <span className="text-zinc-400">Offset: </span>
        <span className={point.delta_khz > 0 ? 'text-emerald-400' : point.delta_khz < 0 ? 'text-red-400' : 'text-zinc-400'}>
          {point.delta_khz > 0 ? '+' : ''}{fmt.mhz(point.delta_mhz, 1)}
        </span>
      </div>
      <div className="text-emerald-300 font-semibold">
        <span className="text-zinc-400">Eff.:   </span>{fmt.mhz(point.freq_mhz, 0)}
        {isClamped && <span className="text-amber-500 ml-1">⇡</span>}
      </div>
      {isClamped && (
        <div className="text-amber-500/80 text-[10px] mt-0.5">
          Clamped by lower-voltage point
        </div>
      )}
      {hasPending && (
        <>
          <div className="border-t border-zinc-700 mt-1.5 pt-1.5">
            <div className="text-zinc-200">
              <span className="text-zinc-400">Pending: </span>
              <span className={pendingMhz > 0 ? 'text-cyan-400' : pendingMhz < 0 ? 'text-orange-400' : 'text-zinc-400'}>
                {pendingMhz > 0 ? '+' : ''}{pendingMhz.toFixed(1)} MHz
              </span>
            </div>
            <div className="text-cyan-300 font-semibold">
              <span className="text-zinc-400">→ Eff.: </span>{fmt.mhz(pendingEffMhz, 0)}
            </div>
          </div>
        </>
      )}
    </div>
  );
}