/**
 * EN: useDeviceType Hook
 * VI: Hook useDeviceType
 *
 * A custom hook to detect device type (mobile, tablet, desktop) based on screen width.
 * Hook tùy chỉnh để phát hiện loại thiết bị (mobile, tablet, desktop) dựa trên chiều rộng màn hình.
 *
 * @example
 * ```tsx
 * const { isMobile, isTablet, isDesktop, width } = useDeviceType();
 *
 * if (isMobile) {
 *   return <MobileLayout />;
 * }
 * return <DesktopLayout />;
 * ```
 */

'use client';

import { useState, useEffect } from 'react';

export type DeviceType = 'mobile' | 'tablet' | 'desktop';

export interface DeviceInfo {
  /**
   * Device type based on screen width
   */
  type: DeviceType;

  /**
   * Whether device is mobile (< 768px)
   */
  isMobile: boolean;

  /**
   * Whether device is tablet (768px - 1024px)
   */
  isTablet: boolean;

  /**
   * Whether device is desktop (>= 1024px)
   */
  isDesktop: boolean;

  /**
   * Current viewport width in pixels
   */
  width: number;

  /**
   * Current viewport height in pixels
   */
  height: number;
}

/**
 * Breakpoints for device detection
 * Matching Tailwind CSS default breakpoints
 */
const BREAKPOINTS = {
  mobile: 768,   // < 768px = mobile
  tablet: 1024,  // 768px - 1024px = tablet
  desktop: 1024, // >= 1024px = desktop
} as const;

/**
 * Determine device type based on width
 */
function getDeviceType(width: number): DeviceType {
  if (width < BREAKPOINTS.mobile) {
    return 'mobile';
  }
  if (width < BREAKPOINTS.desktop) {
    return 'tablet';
  }
  return 'desktop';
}

/**
 * Get device info from window dimensions
 */
function getDeviceInfo(): DeviceInfo {
  // SSR safety - return default desktop values
  if (typeof window === 'undefined') {
    return {
      type: 'desktop',
      isMobile: false,
      isTablet: false,
      isDesktop: true,
      width: 1920,
      height: 1080,
    };
  }

  const width = window.innerWidth;
  const height = window.innerHeight;
  const type = getDeviceType(width);

  return {
    type,
    isMobile: type === 'mobile',
    isTablet: type === 'tablet',
    isDesktop: type === 'desktop',
    width,
    height,
  };
}

/**
 * Hook to detect and track device type
 *
 * Features:
 * - Detects mobile, tablet, desktop based on screen width
 * - SSR-safe with default desktop values
 * - Automatically updates on window resize
 * - Debounced for performance
 *
 * @returns {DeviceInfo} Current device information
 */
export function useDeviceType(): DeviceInfo {
  const [deviceInfo, setDeviceInfo] = useState<DeviceInfo>(getDeviceInfo);

  useEffect(() => {
    // Skip if running on server
    if (typeof window === 'undefined') {
      return;
    }

    let timeoutId: NodeJS.Timeout;

    /**
     * Handle window resize with debouncing
     * Debounce to avoid excessive re-renders during resize
     */
    const handleResize = () => {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => {
        setDeviceInfo(getDeviceInfo());
      }, 150); // 150ms debounce
    };

    // Initial check
    setDeviceInfo(getDeviceInfo());

    // Listen for resize events
    window.addEventListener('resize', handleResize);

    // Cleanup
    return () => {
      clearTimeout(timeoutId);
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return deviceInfo;
}
