src/components/NiiVueViewer.tsx

import { useRef, useEffect, useState } from 'react'
import { Niivue } from '@niivue/niivue'

interface NiiVueViewerProps {
  backgroundUrl: string
  overlayUrl?: string
  onError?: (error: string) => void
}

export function NiiVueViewer({ backgroundUrl, overlayUrl, onError }: NiiVueViewerProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const nvRef = useRef<Niivue | null>(null)
  const onErrorRef = useRef(onError)
  const [loadError, setLoadError] = useState<string | null>(null)

  // Keep onError ref current without triggering effect re-runs
  useEffect(() => {
    onErrorRef.current = onError
  })

  // Effect 1: Mount/unmount - instantiate and cleanup NiiVue ONCE
  useEffect(() => {
    if (!canvasRef.current) return

    const nv = new Niivue({
      backColor: [0.05, 0.05, 0.05, 1],
      show3Dcrosshair: true,
      crosshairColor: [1, 0, 0, 0.5],
    })
    nv.attachToCanvas(canvasRef.current)
    nvRef.current = nv

    // Cleanup on unmount ONLY - CRITICAL: Release WebGL context
    // Browsers limit WebGL contexts (~16 in Chrome). Without cleanup,
    // navigating between cases will exhaust contexts and break the viewer.
    return () => {
      // Capture gl BEFORE cleanup (cleanup may null internal state)
      const gl = nv.gl
      try {
        // NiiVue's cleanup() releases event listeners and observers
        // See: https://niivue.github.io/niivue/devdocs/classes/Niivue.html#cleanup
        nv.cleanup()
        // Force WebGL context loss to free GPU memory immediately
        if (gl) {
          const ext = gl.getExtension('WEBGL_lose_context')
          ext?.loseContext()
        }
      } catch {
        // Ignore cleanup errors
      }
      nvRef.current = null
    }
  }, [])

  // Effect 2: URL changes - reload volumes on existing NiiVue instance
  // Uses isCurrent flag to ignore stale loads when URLs change rapidly
  useEffect(() => {
    const nv = nvRef.current
    if (!nv) return

    let isCurrent = true

    // Clear previous error before new load (valid pattern for async operations)
    // eslint-disable-next-line react-hooks/set-state-in-effect
    setLoadError(null)

    const volumes: Array<{ url: string; colormap: string; opacity: number }> = [
      { url: backgroundUrl, colormap: 'gray', opacity: 1 },
    ]

    if (overlayUrl) {
      volumes.push({
        url: overlayUrl,
        colormap: 'red',
        opacity: 0.5,
      })
    }

    // Load volumes with error handling - ignore stale results
    nv.loadVolumes(volumes).catch((err: unknown) => {
      if (!isCurrent) return // Ignore errors from stale loads
      const message = err instanceof Error ? err.message : 'Failed to load volume'
      setLoadError(message)
      onErrorRef.current?.(message)
    })

    // Cleanup: mark this effect instance as stale
    return () => {
      isCurrent = false
    }
  }, [backgroundUrl, overlayUrl])

  return (
    <div className="bg-gray-900 rounded-lg p-2">
      <canvas ref={canvasRef} className="w-full h-[500px] rounded" />
      {loadError && (
        <div className="mt-2 p-2 bg-red-900/50 rounded text-red-300 text-sm">
          Failed to load volume: {loadError}
        </div>
      )}
      <div className="flex gap-4 mt-2 text-xs text-gray-400">
        <span>Scroll: Navigate slices</span>
        <span>Drag: Adjust contrast</span>
        <span>Right-click: Pan</span>
      </div>
    </div>
  )
}