import './index.css';

// Type definitions
interface Point {
  x: number;
  y: number;
}

// Select canvas element
const canvas = document.getElementById('bg-canvas') as HTMLCanvasElement;
if (canvas) {
  const ctx = canvas.getContext('2d');
  if (ctx) {
    // Interactive coordinates
    let mouseX = -1000;
    let mouseY = -1000;
    let targetX = -1000;
    let targetY = -1000;
    
    let isUserInteracting = false;
    let lastInteractionTime = 0;
    
    // Core geometry points (re-calculated on resize)
    let px = 0.75 * window.innerWidth;
    let py = 0.35 * window.innerHeight;

    // Set initial target on the right half of the screen
    targetX = px;
    targetY = py;
    mouseX = px;
    mouseY = py;

    // Handles canvas resizing to fill parent perfectly
    function resizeCanvas() {
      const parent = canvas.parentElement;
      const width = parent ? parent.clientWidth : window.innerWidth;
      const height = parent ? parent.clientHeight : window.innerHeight;
      
      canvas.width = width;
      canvas.height = height;

      // Recalculate physical dimensions of the vertex (golden layout ratio)
      px = 0.75 * width;
      py = 0.35 * height;

      // Snap mouse tracking close to node if off-screen after resize
      if (!isUserInteracting) {
        targetX = px;
        targetY = py;
      }
    }

    // Track mouse events
    function handleMouseMove(e: MouseEvent) {
      isUserInteracting = true;
      lastInteractionTime = Date.now();
      targetX = e.clientX;
      targetY = e.clientY;
    }

    // Mouse leaves screen
    function handleMouseLeave() {
      isUserInteracting = false;
    }

    // Touch events for mobile screens
    function handleTouchMove(e: TouchEvent) {
      if (e.touches.length > 0) {
        isUserInteracting = true;
        lastInteractionTime = Date.now();
        targetX = e.touches[0].clientX;
        targetY = e.touches[0].clientY;
      }
    }

    // Bind event listeners
    window.addEventListener('resize', resizeCanvas);
    window.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseleave', handleMouseLeave);
    window.addEventListener('touchmove', handleTouchMove, { passive: true });

    // Initial resize execution
    resizeCanvas();

    // Main animation loop
    function render() {
      const W = canvas.width;
      const H = canvas.height;

      // Clear canvas with a completely transparent background to let the CSS background image layer show
      ctx.clearRect(0, 0, W, H);

      const now = Date.now();

      // Idle light floating effect when there is no interaction for 3.5 seconds
      if (!isUserInteracting || (now - lastInteractionTime > 3500)) {
        isUserInteracting = false;
        const driftTime = now * 0.00075;
        // Float in a soft elliptical pattern around the intersection node area of the static image
        targetX = px + Math.cos(driftTime) * 110;
        targetY = py + Math.sin(driftTime * 1.3) * 70;
      }

      // Smooth lag / interpolation (damping) for high-end feel
      mouseX += (targetX - mouseX) * 0.085;
      mouseY += (targetY - mouseY) * 0.085;

      // Set blend mode to 'screen' so overlapping light elements blend beautifully
      ctx.globalCompositeOperation = 'screen';

      // --- LAYER 1: Mouse Cursor Ambient Leak / Illumination ---
      // A soft general glow around the mouse to represent an interactive light source illuminating the background
      if (mouseX > -500 && mouseY > -500) {
        const mouseGlowRadius = 250;
        const mouseGrad = ctx.createRadialGradient(
          mouseX, mouseY, 0,
          mouseX, mouseY, mouseGlowRadius
        );
        // Beautiful elegant soft white glow to highlight the static matte background
        mouseGrad.addColorStop(0, 'rgba(255, 255, 255, 0.055)');
        mouseGrad.addColorStop(0.4, 'rgba(255, 255, 255, 0.018)');
        mouseGrad.addColorStop(1, 'rgba(255, 255, 255, 0)');
        
        ctx.fillStyle = mouseGrad;
        ctx.beginPath();
        ctx.arc(mouseX, mouseY, mouseGlowRadius, 0, Math.PI * 2);
        ctx.fill();
      }

      // Continue animating on next screen refresh
      requestAnimationFrame(render);
    }

    // Launch the animation loop
    requestAnimationFrame(render);
  }
}