import React, { useRef, useEffect } from 'react';
import { getAnalyserData } from '../engine/audioEngine.js';

export default function ScopeDisplay({ moduleId }) {
  const canvasRef = useRef(null);
  const rafRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    const w = canvas.width = 160;
    const h = canvas.height = 60;

    const draw = () => {
      ctx.fillStyle = '#050510';
      ctx.fillRect(0, 0, w, h);

      // Grid lines
      ctx.strokeStyle = '#151530';
      ctx.lineWidth = 0.5;
      ctx.beginPath();
      ctx.moveTo(0, h / 2); ctx.lineTo(w, h / 2);
      ctx.moveTo(0, h / 4); ctx.lineTo(w, h / 4);
      ctx.moveTo(0, h * 3 / 4); ctx.lineTo(w, h * 3 / 4);
      ctx.stroke();

      const data = getAnalyserData(moduleId);
      if (data && data.length > 0) {
        ctx.strokeStyle = '#00e5ff';
        ctx.lineWidth = 1.5;
        ctx.beginPath();
        const step = w / data.length;
        for (let i = 0; i < data.length; i++) {
          const y = h / 2 + data[i] * h / 2 * -1;
          if (i === 0) ctx.moveTo(0, y);
          else ctx.lineTo(i * step, y);
        }
        ctx.stroke();
      }

      rafRef.current = requestAnimationFrame(draw);
    };
    draw();

    return () => { if (rafRef.current) cancelAnimationFrame(rafRef.current); };
  }, [moduleId]);

  return <canvas ref={canvasRef} className="scope-canvas" />;
}