import { useEffect, useRef } from 'react';

interface Bubble {
  x: number;
  y: number;
  size: number;
  speed: number;
  opacity: number;
  drift: number;
}

export default function OceanWaves() {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const animationFrameRef = useRef<number>();
  const bubblesRef = useRef<Bubble[]>([]);
  const waveOffsetRef = useRef(0);
  const sectionDividersRef = useRef<Array<{ y: number; inverted: boolean }>>([]);
  const isVisibleRef = useRef(true);

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

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

    const findSections = () => {
      const sections = document.querySelectorAll('section, main > div');
      sectionDividersRef.current = [];
      
      sections.forEach((section, index) => {
        if (index === 0) return; // Skip first section
        const rect = section.getBoundingClientRect();
        const scrollY = window.scrollY;
        const sectionTop = rect.top + scrollY;
        
        // Check if section has different background
        const computedStyle = window.getComputedStyle(section);
        const bgColor = computedStyle.backgroundColor;
        const prevSection = sections[index - 1] as HTMLElement;
        const prevBgColor = prevSection ? window.getComputedStyle(prevSection).backgroundColor : '';
        
        // Add divider if sections have different backgrounds or are substantial
        if (bgColor !== prevBgColor || rect.height > 200) {
          sectionDividersRef.current.push({
            y: sectionTop,
            inverted: index % 2 === 0, // Alternate wave direction
          });
        }
      });
    };

    const resizeCanvas = () => {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      
      // Create bubbles (distribute across viewport)
      bubblesRef.current = [];
      const bubbleCount = Math.floor((canvas.width * canvas.height) / 20000);
      for (let i = 0; i < bubbleCount; i++) {
        bubblesRef.current.push({
          x: Math.random() * canvas.width,
          y: Math.random() * canvas.height,
          size: 2 + Math.random() * 8,
          speed: 0.5 + Math.random() * 1.5,
          opacity: 0.2 + Math.random() * 0.4,
          drift: (Math.random() - 0.5) * 0.5,
        });
      }
      
      findSections();
    };

    resizeCanvas();
    window.addEventListener('resize', resizeCanvas);
    window.addEventListener('scroll', findSections, { passive: true });
    
    // Update sections periodically
    const sectionInterval = setInterval(findSections, 1000);

    const drawWave = (ctx: CanvasRenderingContext2D, screenY: number, amplitude: number, frequency: number, speed: number, color: string, opacity: number, inverted: boolean = false) => {
      ctx.save();
      ctx.beginPath();
      
      const direction = inverted ? -1 : 1;
      const waveSpeed = speed * direction;
      
      // Reduced gradient height - only 80px above/below the wave
      const gradientHeight = 80;
      const gradientStart = inverted ? screenY + amplitude : screenY - amplitude;
      const gradientEnd = inverted ? screenY + amplitude - gradientHeight : screenY - amplitude + gradientHeight;
      
      ctx.moveTo(0, screenY);
      
      for (let x = 0; x <= canvas.width; x += 2) {
        const waveY = screenY + Math.sin((x * frequency + waveOffsetRef.current * waveSpeed) * 0.01) * amplitude * direction;
        ctx.lineTo(x, waveY);
      }
      
      if (inverted) {
        // Wave going up - fill above (limited height)
        ctx.lineTo(canvas.width, gradientEnd);
        ctx.lineTo(0, gradientEnd);
      } else {
        // Wave going down - fill below (limited height)
        ctx.lineTo(canvas.width, gradientEnd);
        ctx.lineTo(0, gradientEnd);
      }
      ctx.closePath();
      
      const gradient = ctx.createLinearGradient(0, gradientStart, 0, gradientEnd);
      gradient.addColorStop(0, color + Math.floor(opacity * 255).toString(16).padStart(2, '0'));
      gradient.addColorStop(1, color + '00');
      
      ctx.fillStyle = gradient;
      ctx.fill();
      ctx.restore();
    };

    const drawBubble = (ctx: CanvasRenderingContext2D, bubble: Bubble) => {
      ctx.save();
      ctx.globalAlpha = bubble.opacity;
      
      const scrollY = window.scrollY;
      const screenX = bubble.x;
      const screenY = bubble.y - scrollY;
      
      // Draw bubble
      const gradient = ctx.createRadialGradient(
        screenX - bubble.size * 0.3,
        screenY - bubble.size * 0.3,
        0,
        screenX,
        screenY,
        bubble.size
      );
      gradient.addColorStop(0, 'rgba(255, 255, 255, 0.8)');
      gradient.addColorStop(0.7, 'rgba(0, 212, 255, 0.3)');
      gradient.addColorStop(1, 'rgba(0, 212, 255, 0)');
      
      ctx.fillStyle = gradient;
      ctx.beginPath();
      ctx.arc(screenX, screenY, bubble.size, 0, Math.PI * 2);
      ctx.fill();
      
      // Draw highlight
      ctx.fillStyle = 'rgba(255, 255, 255, 0.6)';
      ctx.beginPath();
      ctx.arc(screenX - bubble.size * 0.3, screenY - bubble.size * 0.3, bubble.size * 0.3, 0, Math.PI * 2);
      ctx.fill();
      
      ctx.restore();
    };

    const handleVisibilityChange = () => {
      isVisibleRef.current = !document.hidden;
    };

    const handleWindowBlur = () => {
      isVisibleRef.current = false;
    };

    const handleWindowFocus = () => {
      isVisibleRef.current = true;
    };

    document.addEventListener('visibilitychange', handleVisibilityChange);
    window.addEventListener('blur', handleWindowBlur);
    window.addEventListener('focus', handleWindowFocus);
    isVisibleRef.current = !document.hidden && document.hasFocus();

    const animate = () => {
      // Pause animation when page is not visible
      if (!isVisibleRef.current) {
        animationFrameRef.current = requestAnimationFrame(animate);
        return;
      }

      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      // Update wave offset
      waveOffsetRef.current += 1;
      
      const scrollY = window.scrollY;
      
      // Draw waves at section dividers
      sectionDividersRef.current.forEach((divider) => {
        const dividerScreenY = divider.y - scrollY;
        
        // Only draw if in or near viewport (reduced range to match smaller gradient)
        if (dividerScreenY > -100 && dividerScreenY < window.innerHeight + 100) {
          if (divider.inverted) {
            // Wave going up - more vibrant colors
            drawWave(ctx, dividerScreenY, 18, 0.5, 1.5, '#00EFFF', 0.25, true);
            drawWave(ctx, dividerScreenY - 15, 15, 0.6, 1.2, '#00C8FF', 0.2, true);
            drawWave(ctx, dividerScreenY - 30, 12, 0.7, 1, '#00A8FF', 0.15, true);
          } else {
            // Wave going down - more vibrant colors
            drawWave(ctx, dividerScreenY, 18, 0.5, 1.5, '#00EFFF', 0.25, false);
            drawWave(ctx, dividerScreenY + 15, 15, 0.6, 1.2, '#00C8FF', 0.2, false);
            drawWave(ctx, dividerScreenY + 30, 12, 0.7, 1, '#00A8FF', 0.15, false);
          }
        }
      });
      
      // Draw waves at the bottom of document (footer)
      const docHeight = Math.max(document.documentElement.scrollHeight, window.innerHeight);
      const bottomWaveDocY = docHeight - 100;
      const bottomWaveScreenY = bottomWaveDocY - scrollY;
      
      // Only draw if in or near viewport (reduced range)
      if (bottomWaveScreenY > -100 && bottomWaveScreenY < window.innerHeight + 100) {
        drawWave(ctx, bottomWaveScreenY, 20, 0.5, 2, '#00EFFF', 0.28);
        drawWave(ctx, bottomWaveScreenY + 20, 16, 0.6, 1.5, '#00C8FF', 0.22);
        drawWave(ctx, bottomWaveScreenY + 40, 14, 0.7, 1, '#00A8FF', 0.18);
      }
      
      // Update and draw bubbles (viewport-relative)
      bubblesRef.current.forEach((bubble) => {
        // Update bubble position (viewport coordinates)
        bubble.y -= bubble.speed;
        bubble.x += bubble.drift;
        
        // Reset if off screen
        if (bubble.y < -bubble.size) {
          bubble.y = window.innerHeight + bubble.size;
          bubble.x = Math.random() * canvas.width;
        }
        if (bubble.y > window.innerHeight + bubble.size) {
          bubble.y = -bubble.size;
          bubble.x = Math.random() * canvas.width;
        }
        
        // Wrap horizontally
        if (bubble.x < -bubble.size) bubble.x = canvas.width + bubble.size;
        if (bubble.x > canvas.width + bubble.size) bubble.x = -bubble.size;
        
        // Draw bubble (already in viewport coordinates)
        drawBubble(ctx, bubble);
      });

      animationFrameRef.current = requestAnimationFrame(animate);
    };

    animate();

    return () => {
      window.removeEventListener('resize', resizeCanvas);
      window.removeEventListener('scroll', findSections);
      document.removeEventListener('visibilitychange', handleVisibilityChange);
      window.removeEventListener('blur', handleWindowBlur);
      window.removeEventListener('focus', handleWindowFocus);
      clearInterval(sectionInterval);
      if (animationFrameRef.current) {
        cancelAnimationFrame(animationFrameRef.current);
      }
    };
  }, []);

  return (
    <canvas
      ref={canvasRef}
      className="fixed top-0 left-0 w-full pointer-events-none z-0"
      style={{ height: '100vh' }}
    />
  );
}