import React from 'react';

/**
 * Device detection utilities for handling Android version compatibility
 */

export interface DeviceVersionInfo {
  isAndroid: boolean;
  isIOS: boolean;
  androidVersion: number | null;
  iosVersion: number | null;
  isOldDevice: boolean;
}

/**
 * Detects device version and determines if it's an old version
 * that might have issues with modern dropdown components
 */
export const detectDeviceVersion = (): DeviceVersionInfo => {
  if (typeof window === 'undefined') {
    return { 
      isAndroid: false, 
      isIOS: false, 
      androidVersion: null, 
      iosVersion: null, 
      isOldDevice: false 
    };
  }

  const userAgent = window.navigator.userAgent;
  const isAndroid = /Android/i.test(userAgent);
  const isIOS = /iPad|iPhone|iPod/.test(userAgent);

  let androidVersion: number | null = null;
  let iosVersion: number | null = null;
  let isOldDevice = false;

  if (isAndroid) {
    // Extract Android version from user agent
    const androidVersionMatch = userAgent.match(/Android\s([0-9\.]+)/);
    const versionString = androidVersionMatch ? androidVersionMatch[1] : null;
    androidVersion = versionString ? parseFloat(versionString) : null;
    
    // Consider Android versions below 8.0 (API level 26) as old
    isOldDevice = androidVersion !== null && androidVersion < 8.0;
  } else if (isIOS) {
    // Extract iOS version from user agent
    // iOS user agent examples:
    // iPhone: "iPhone OS 12_0 like Mac OS X"
    // iPad: "iPad; CPU OS 13_0 like Mac OS X"
    const iosVersionMatch = userAgent.match(/OS (\d+)_(\d+)/);
    if (iosVersionMatch) {
      const majorVersion = parseInt(iosVersionMatch[1]);
      const minorVersion = parseInt(iosVersionMatch[2]);
      iosVersion = parseFloat(`${majorVersion}.${minorVersion}`);
      
      // Consider iOS versions below 12.0 as old (might have dropdown issues)
      isOldDevice = iosVersion < 12.0;
    }
  }

  return {
    isAndroid,
    isIOS,
    androidVersion,
    iosVersion,
    isOldDevice
  };
};

/**
 * Hook to get device version info with memoization
 */
export const useDeviceVersion = (): DeviceVersionInfo => {
  const [deviceInfo, setDeviceInfo] = React.useState<DeviceVersionInfo>(() => 
    detectDeviceVersion()
  );

  React.useEffect(() => {
    // Re-detect on mount to ensure accuracy
    setDeviceInfo(detectDeviceVersion());
  }, []);

  return deviceInfo;
};

// Legacy function name for backward compatibility
export const detectAndroidVersion = detectDeviceVersion;