import { useRef, useEffect } from 'react';

interface DroneMonitorGaugeProps {
  label: string;
  data: number[];
  unit: string;
  color: string;
  width?: number;
  height?: number;
}

export default function DroneMonitorGauge({
  label,
  data,
  unit,
  color,
  width = 320,
  height = 160,
}: DroneMonitorGaugeProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    const ctx = canvas.getContext('2d');
    if (!ctx) return;

    const dpr = window.devicePixelRatio || 1;
    canvas.width = width * dpr;
    canvas.height = height * dpr;
    ctx.scale(dpr, dpr);

    // Background
    ctx.fillStyle = '#0a0a0a';
    ctx.fillRect(0, 0, width, height);

    // Grid lines
    ctx.strokeStyle = '#1a1a1a';
    ctx.lineWidth = 1;
    for (let y = 0; y < 4; y++) {
      const yy = (height / 4) * y;
      ctx.beginPath();
      ctx.moveTo(0, yy);
      ctx.lineTo(width, yy);
      ctx.stroke();
    }

    // Border frame — sharp edge like studio equipment
    ctx.strokeStyle = '#2a2a2a';
    ctx.lineWidth = 1;
    ctx.strokeRect(0.5, 0.5, width - 1, height - 1);

    if (data.length < 2) return;

    // Plot the waveform
    const padX = 8;
    const padY = 8;
    const plotW = width - padX * 2;
    const plotH = height - padY * 2;
    const maxVal = 100;

    // Gradient fill under the trace
    const gradient = ctx.createLinearGradient(0, padY, 0, padY + plotH);
    gradient.addColorStop(0, color + '40');
    gradient.addColorStop(1, color + '05');
    ctx.fillStyle = gradient;
    ctx.beginPath();
    ctx.moveTo(padX, padY + plotH);
    for (let i = 0; i < data.length; i++) {
      const x = padX + (i / (data.length - 1)) * plotW;
      const y = padY + plotH - (Math.min(Math.max(data[i] ?? 0, 0), maxVal) / maxVal) * plotH;
      if (i === 0) ctx.lineTo(x, y);
      else ctx.lineTo(x, y);
    }
    ctx.lineTo(padX + plotW, padY + plotH);
    ctx.closePath();
    ctx.fill();

    // Trace line with glow
    ctx.shadowColor = color;
    ctx.shadowBlur = 6;
    ctx.strokeStyle = color;
    ctx.lineWidth = 1.5;
    ctx.beginPath();
    for (let i = 0; i < data.length; i++) {
      const x = padX + (i / (data.length - 1)) * plotW;
      const y = padY + plotH - (Math.min(Math.max(data[i] ?? 0, 0), maxVal) / maxVal) * plotH;
      if (i === 0) ctx.moveTo(x, y);
      else ctx.lineTo(x, y);
    }
    ctx.stroke();
    ctx.shadowBlur = 0;

    // Current value readout
    const latest = data[data.length - 1] ?? 0;
    ctx.fillStyle = '#d4d4d4';
    ctx.font = 'bold 24px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
    ctx.textAlign = 'center';
    ctx.fillText(`${Math.round(latest)}${unit}`, width / 2, height - 12);

    // Label
    ctx.fillStyle = '#737373';
    ctx.font = '11px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
    ctx.textAlign = 'center';
    ctx.fillText(label, width / 2, 16);
  }, [data, label, unit, color, width, height]);

  return (
    <canvas
      ref={canvasRef}
      style={{ width, height }}
      className="block"
    />
  );
}
