'use client';

import { useEffect } from 'react';

/**
 * ViewportLock:
 * Guarantees the viewport stays locked at 100% of device width.
 * Prevents accidental pinch-to-zoom, gesture zoom, and desktop trackpad zoom,
 * while keeping 1-finger vertical and horizontal scrolling 100% smooth and native.
 */
export default function ViewportLock() {
  useEffect(() => {
    // 1. Prevent Safari proprietary pinch gesture zooming
    const handleGesture = (e: Event) => {
      e.preventDefault();
    };

    // 2. Prevent multi-touch pinch-to-zoom on iOS & Android
    // (Only triggers when 2 or more fingers touch the screen; 1-finger scroll is completely unaffected)
    const handleTouchMove = (e: TouchEvent) => {
      if (e.touches && e.touches.length > 1) {
        e.preventDefault();
      }
    };

    // 3. Prevent Ctrl + Wheel zoom on desktops & laptop touchpads
    const handleWheel = (e: WheelEvent) => {
      if (e.ctrlKey) {
        e.preventDefault();
      }
    };

    // 4. Prevent Ctrl + Plus / Minus / Zero keyboard zoom
    const handleKeyDown = (e: KeyboardEvent) => {
      if (
        (e.ctrlKey || e.metaKey) &&
        (e.key === '+' || e.key === '-' || e.key === '=' || e.key === '0')
      ) {
        e.preventDefault();
      }
    };

    // Register non-passive listeners where preventDefault() is required
    document.addEventListener('gesturestart', handleGesture, { passive: false });
    document.addEventListener('gesturechange', handleGesture, { passive: false });
    document.addEventListener('gestureend', handleGesture, { passive: false });
    document.addEventListener('touchmove', handleTouchMove, { passive: false });
    window.addEventListener('wheel', handleWheel, { passive: false });
    window.addEventListener('keydown', handleKeyDown);

    return () => {
      document.removeEventListener('gesturestart', handleGesture);
      document.removeEventListener('gesturechange', handleGesture);
      document.removeEventListener('gestureend', handleGesture);
      document.removeEventListener('touchmove', handleTouchMove);
      window.removeEventListener('wheel', handleWheel);
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, []);

  return null;
}