'use client';

import * as React from 'react';

/**
 * EN: Swipe gesture configuration
 * VI: Cấu hình cử chỉ vuốt
 */
export interface SwipeGestureConfig {
  /**
   * EN: Minimum swipe distance in pixels / VI: Khoảng cách vuốt tối thiểu tính bằng pixel
   */
  minSwipeDistance?: number;
  /**
   * EN: Callback when swipe left is detected / VI: Callback khi phát hiện vuốt trái
   */
  onSwipeLeft?: () => void;
  /**
   * EN: Callback when swipe right is detected / VI: Callback khi phát hiện vuốt phải
   */
  onSwipeRight?: () => void;
  /**
   * EN: Callback when swipe up is detected / VI: Callback khi phát hiện vuốt lên
   */
  onSwipeUp?: () => void;
  /**
   * EN: Callback when swipe down (pull down) is detected / VI: Callback khi phát hiện vuốt xuống (kéo xuống)
   */
  onSwipeDown?: () => void;
  /**
   * EN: Callback when long press is detected / VI: Callback khi phát hiện nhấn giữ
   */
  onLongPress?: () => void;
  /**
   * EN: Long press duration in milliseconds / VI: Thời gian nhấn giữ tính bằng mili giây
   */
  longPressDuration?: number;
}

/**
 * EN: useSwipeGestures hook - Handles touch gestures (swipe, long press)
 * VI: Hook useSwipeGestures - Xử lý cử chỉ chạm (vuốt, nhấn giữ)
 *
 * Features:
 * - Swipe left/right/up/down detection
 * - Long press detection
 * - Minimum swipe distance threshold
 *
 * Tính năng:
 * - Phát hiện vuốt trái/phải/lên/xuống
 * - Phát hiện nhấn giữ
 * - Ngưỡng khoảng cách vuốt tối thiểu
 *
 * @example
 * ```tsx
 * const swipeHandlers = useSwipeGestures({
 *   onSwipeLeft: () => handleDelete(),
 *   onSwipeRight: () => handleArchive(),
 *   onSwipeDown: () => handleRefresh(),
 *   onLongPress: () => handleContextMenu(),
 * });
 *
 * <div {...swipeHandlers}>Content</div>
 * ```
 */
export function useSwipeGestures(config: SwipeGestureConfig = {}) {
  const {
    minSwipeDistance = 50,
    onSwipeLeft,
    onSwipeRight,
    onSwipeUp,
    onSwipeDown,
    onLongPress,
    longPressDuration = 500,
  } = config;

  const [touchStart, setTouchStart] = React.useState<{ x: number; y: number; time: number } | null>(null);
  const [touchEnd, setTouchEnd] = React.useState<{ x: number; y: number } | null>(null);
  const longPressTimerRef = React.useRef<NodeJS.Timeout | null>(null);

  // EN: Handle touch start / VI: Xử lý bắt đầu chạm
  const handleTouchStart = (e: React.TouchEvent) => {
    const touch = e.targetTouches[0];
    const startData = {
      x: touch.clientX,
      y: touch.clientY,
      time: Date.now(),
    };
    setTouchStart(startData);
    setTouchEnd(null);

    // EN: Start long press timer / VI: Bắt đầu timer nhấn giữ
    if (onLongPress) {
      longPressTimerRef.current = setTimeout(() => {
        onLongPress();
      }, longPressDuration);
    }
  };

  // EN: Handle touch move / VI: Xử lý di chuyển chạm
  const handleTouchMove = (e: React.TouchEvent) => {
    const touch = e.targetTouches[0];
    setTouchEnd({
      x: touch.clientX,
      y: touch.clientY,
    });

    // EN: Cancel long press if user moves / VI: Hủy nhấn giữ nếu người dùng di chuyển
    if (longPressTimerRef.current) {
      clearTimeout(longPressTimerRef.current);
      longPressTimerRef.current = null;
    }
  };

  // EN: Handle touch end / VI: Xử lý kết thúc chạm
  const handleTouchEnd = () => {
    // EN: Cancel long press timer / VI: Hủy timer nhấn giữ
    if (longPressTimerRef.current) {
      clearTimeout(longPressTimerRef.current);
      longPressTimerRef.current = null;
    }

    if (!touchStart || !touchEnd) {
      setTouchStart(null);
      setTouchEnd(null);
      return;
    }

    const distanceX = touchStart.x - touchEnd.x;
    const distanceY = touchStart.y - touchEnd.y;
    const absDistanceX = Math.abs(distanceX);
    const absDistanceY = Math.abs(distanceY);

    // EN: Determine swipe direction (prioritize larger movement) / VI: Xác định hướng vuốt (ưu tiên chuyển động lớn hơn)
    if (absDistanceX > absDistanceY && absDistanceX > minSwipeDistance) {
      // EN: Horizontal swipe / VI: Vuốt ngang
      if (distanceX > 0) {
        onSwipeLeft?.();
      } else {
        onSwipeRight?.();
      }
    } else if (absDistanceY > absDistanceX && absDistanceY > minSwipeDistance) {
      // EN: Vertical swipe / VI: Vuốt dọc
      if (distanceY > 0) {
        onSwipeUp?.();
      } else {
        onSwipeDown?.();
      }
    }

    setTouchStart(null);
    setTouchEnd(null);
  };

  // EN: Cleanup on unmount / VI: Dọn dẹp khi unmount
  React.useEffect(() => {
    return () => {
      if (longPressTimerRef.current) {
        clearTimeout(longPressTimerRef.current);
      }
    };
  }, []);

  return {
    onTouchStart: handleTouchStart,
    onTouchMove: handleTouchMove,
    onTouchEnd: handleTouchEnd,
  };
}
