app.js

/**
 * ============================================
 * WHO ARE YOU? - Browser Fingerprint Demo
 * ============================================
 * Educational demonstration of browser fingerprinting
 * 
 * app.js - Part 1: Core Detection Functions
 * - Navigator API
 * - Screen & Display
 * - Connection (WiFi vs Cellular)
 * - Device Brand Parsing
 * - Timezone & Locale
 * ============================================
 */

'use strict';

// ============================================
// GLOBAL STATE
// ============================================
const AppState = {
  fingerprint: {},
  categorized: {},
  privacyScore: 0,
  dataPointsCount: 0,
  language: 'id',
  startTime: null,
};

// ============================================
// UTILITY FUNCTIONS
// ============================================
const Utils = {
  /**
   * Safely get nested property
   */
  safeGet: (obj, path, fallback = null) => {
    try {
      return path.split('.').reduce((o, k) => (o || {})[k], obj) ?? fallback;
    } catch {
      return fallback;
    }
  },

  /**
   * Hash string using simple djb2 algorithm
   */
  hashString: (str) => {
    let hash = 5381;
    for (let i = 0; i < str.length; i++) {
      hash = ((hash << 5) + hash) ^ str.charCodeAt(i);
    }
    return (hash >>> 0).toString(16).padStart(8, '0');
  },

  /**
   * Detect user's preferred language
   */
  detectLanguage: () => {
    const lang = navigator.language || navigator.userLanguage || 'en';
    return lang.startsWith('id') ? 'id' : 'en';
  },

  /**
   * Format bytes to human readable
   */
  formatBytes: (bytes, decimals = 2) => {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(decimals)) + ' ' + sizes[i];
  },

  /**
   * Delay helper
   */
  delay: (ms) => new Promise(resolve => setTimeout(resolve, ms)),

  /**
   * Count non-null properties in object (recursive)
   */
  countDataPoints: (obj) => {
    let count = 0;
    for (const key in obj) {
      if (obj[key] !== null && obj[key] !== undefined) {
        if (typeof obj[key] === 'object' && !Array.isArray(obj[key])) {
          count += Utils.countDataPoints(obj[key]);
        } else {
          count++;
        }
      }
    }
    return count;
  }
};

// ============================================
// 1. NAVIGATOR INFO
// ============================================
const NavigatorDetector = {
  /**
   * Get all navigator-based information
   */
  getInfo: () => {
    const nav = navigator;
    
    return {
      // Raw User Agent
      userAgent: nav.userAgent || null,
      
      // Platform info
      platform: nav.platform || null,
      vendor: nav.vendor || null,
      product: nav.product || null,
      appName: nav.appName || null,
      appVersion: nav.appVersion || null,
      appCodeName: nav.appCodeName || null,
      
      // Language settings
      language: nav.language || null,
      languages: nav.languages ? Array.from(nav.languages) : null,
      
      // Hardware hints
      hardwareConcurrency: nav.hardwareConcurrency || null, // CPU cores
      deviceMemory: nav.deviceMemory || null, // RAM in GB
      maxTouchPoints: nav.maxTouchPoints || 0,
      
      // Features & Permissions
      cookieEnabled: nav.cookieEnabled,
      doNotTrack: nav.doNotTrack || window.doNotTrack || null,
      pdfViewerEnabled: nav.pdfViewerEnabled ?? null,
      webdriver: nav.webdriver || false, // Automation detection
      
      // Online status
      onLine: nav.onLine,
      
      // Plugins (mostly empty in modern browsers)
      pluginsCount: nav.plugins ? nav.plugins.length : 0,
      
      // Java & ActiveX (legacy)
      javaEnabled: typeof nav.javaEnabled === 'function' ? nav.javaEnabled() : false,
    };
  },

  /**
   * Parse OS from User Agent
   */
  parseOS: (ua) => {
    if (!ua) return { name: 'Unknown', version: null };
    
    const patterns = [
      // Windows
      { regex: /Windows NT 10.0.*Build\/(\d+)/i, name: 'Windows', versionFn: (m) => {
        const build = parseInt(m[1]);
        return build >= 22000 ? '11' : '10';
      }},
      { regex: /Windows NT 10.0/i, name: 'Windows', version: '10/11' },
      { regex: /Windows NT 6.3/i, name: 'Windows', version: '8.1' },
      { regex: /Windows NT 6.2/i, name: 'Windows', version: '8' },
      { regex: /Windows NT 6.1/i, name: 'Windows', version: '7' },
      
      // macOS
      { regex: /Mac OS X (\d+[._]\d+[._]?\d*)/i, name: 'macOS', versionFn: (m) => m[1].replace(/_/g, '.') },
      { regex: /Macintosh/i, name: 'macOS', version: null },
      
      // iOS
      { regex: /iPhone OS (\d+[._]\d+)/i, name: 'iOS', versionFn: (m) => m[1].replace(/_/g, '.') },
      { regex: /iPad.*OS (\d+[._]\d+)/i, name: 'iPadOS', versionFn: (m) => m[1].replace(/_/g, '.') },
      
      // Android
      { regex: /Android (\d+\.?\d*)/i, name: 'Android', versionFn: (m) => m[1] },
      
      // Linux distros
      { regex: /Ubuntu/i, name: 'Ubuntu', version: null },
      { regex: /Fedora/i, name: 'Fedora', version: null },
      { regex: /Linux/i, name: 'Linux', version: null },
      
      // Chrome OS
      { regex: /CrOS/i, name: 'Chrome OS', version: null },
    ];

    for (const pattern of patterns) {
      const match = ua.match(pattern.regex);
      if (match) {
        return {
          name: pattern.name,
          version: pattern.versionFn ? pattern.versionFn(match) : pattern.version
        };
      }
    }

    return { name: 'Unknown', version: null };
  },

  /**
   * Parse Browser from User Agent
   */
  parseBrowser: (ua) => {
    if (!ua) return { name: 'Unknown', version: null };

    const patterns = [
      // Order matters! More specific first
      { regex: /Edg\/(\d+\.?\d*)/i, name: 'Microsoft Edge' },
      { regex: /OPR\/(\d+\.?\d*)/i, name: 'Opera' },
      { regex: /Opera\/(\d+\.?\d*)/i, name: 'Opera' },
      { regex: /Brave\/(\d+\.?\d*)/i, name: 'Brave' },
      { regex: /Vivaldi\/(\d+\.?\d*)/i, name: 'Vivaldi' },
      { regex: /YaBrowser\/(\d+\.?\d*)/i, name: 'Yandex Browser' },
      { regex: /SamsungBrowser\/(\d+\.?\d*)/i, name: 'Samsung Internet' },
      { regex: /UCBrowser\/(\d+\.?\d*)/i, name: 'UC Browser' },
      { regex: /Firefox\/(\d+\.?\d*)/i, name: 'Firefox' },
      { regex: /FxiOS\/(\d+\.?\d*)/i, name: 'Firefox iOS' },
      { regex: /CriOS\/(\d+\.?\d*)/i, name: 'Chrome iOS' },
      { regex: /Chrome\/(\d+\.?\d*)/i, name: 'Chrome' },
      { regex: /Safari\/(\d+\.?\d*)/i, name: 'Safari', versionRegex: /Version\/(\d+\.?\d*)/ },
    ];

    for (const pattern of patterns) {
      const match = ua.match(pattern.regex);
      if (match) {
        let version = match[1];
        
        // Safari uses Version/ for actual version
        if (pattern.versionRegex) {
          const versionMatch = ua.match(pattern.versionRegex);
          if (versionMatch) version = versionMatch[1];
        }
        
        return { name: pattern.name, version };
      }
    }

    return { name: 'Unknown', version: null };
  },

  /**
   * Detect device type
   */
  getDeviceType: (ua, touchPoints) => {
    if (!ua) return 'unknown';
    
    // Tablets
    if (/iPad|tablet|playbook/i.test(ua) || 
        (/Android/i.test(ua) && !/Mobile/i.test(ua))) {
      return 'tablet';
    }
    
    // Mobile
    if (/Mobile|iPhone|iPod|Android.*Mobile|webOS|BlackBerry|IEMobile|Opera Mini/i.test(ua)) {
      return 'mobile';
    }
    
    // Touch-enabled desktop (Surface, etc)
    if (touchPoints > 0 && /Windows/i.test(ua)) {
      return 'desktop-touch';
    }
    
    return 'desktop';
  }
};

// ============================================
// 2. DEVICE BRAND DETECTION
// ============================================
const DeviceDetector = {
  /**
   * Parse device brand and model from User Agent
   */
  parse: (ua) => {
    if (!ua) return { brand: 'Unknown', model: null, series: null };

    // ========== APPLE ==========
    if (/iPhone/.test(ua)) {
      return {
        brand: 'Apple',
        series: 'iPhone',
        model: DeviceDetector.parseAppleDevice(ua, 'iPhone')
      };
    }
    if (/iPad/.test(ua)) {
      return {
        brand: 'Apple',
        series: 'iPad',
        model: DeviceDetector.parseAppleDevice(ua, 'iPad')
      };
    }
    if (/Macintosh/.test(ua)) {
      return {
        brand: 'Apple',
        series: 'Mac',
        model: DeviceDetector.parseMac(ua)
      };
    }

    // ========== SAMSUNG ==========
    const samsungMatch = ua.match(/SM-([A-Z])(\d{3,4})([A-Z]*)/i);
    if (samsungMatch) {
      return DeviceDetector.parseSamsung(samsungMatch);
    }
    if (/Samsung|SAMSUNG|Galaxy/i.test(ua)) {
      return { brand: 'Samsung', series: 'Galaxy', model: null };
    }

    // ========== XIAOMI ECOSYSTEM ==========
    if (/Xiaomi|Redmi|POCO|Mi \d|MIX|Black ?Shark/i.test(ua)) {
      return DeviceDetector.parseXiaomi(ua);
    }

    // ========== BBK ELECTRONICS ==========
    if (/OPPO|CPH\d{4}/i.test(ua)) {
      return DeviceDetector.parseOPPO(ua);
    }
    if (/vivo|V\d{4}/i.test(ua)) {
      return { brand: 'Vivo', series: null, model: DeviceDetector.extractModel(ua, /vivo\s*([^\s;)]+)/i) };
    }
    if (/Realme|RMX\d{4}/i.test(ua)) {
      return { brand: 'Realme', series: null, model: DeviceDetector.extractModel(ua, /RMX(\d{4})/i) };
    }
    if (/OnePlus|ONEPLUS|IN\d{4}/i.test(ua)) {
      return DeviceDetector.parseOnePlus(ua);
    }

    // ========== HUAWEI / HONOR ==========
    if (/HUAWEI|HarmonyOS/i.test(ua)) {
      return { brand: 'Huawei', series: null, model: DeviceDetector.extractModel(ua, /HUAWEI\s*([^\s;)]+)/i) };
    }
    if (/HONOR/i.test(ua)) {
      return { brand: 'Honor', series: null, model: DeviceDetector.extractModel(ua, /HONOR\s*([^\s;)]+)/i) };
    }

    // ========== GOOGLE ==========
    if (/Pixel/i.test(ua)) {
      const pixelMatch = ua.match(/Pixel\s*(\d+\s*(?:Pro|a|XL)?)/i);
      return {
        brand: 'Google',
        series: 'Pixel',
        model: pixelMatch ? `Pixel ${pixelMatch[1]}` : 'Pixel'
      };
    }

    // ========== OTHERS ==========
    if (/ASUS|ROG/i.test(ua)) {
      return { brand: 'ASUS', series: /ROG/i.test(ua) ? 'ROG Phone' : null, model: null };
    }
    if (/Sony|Xperia/i.test(ua)) {
      return { brand: 'Sony', series: 'Xperia', model: null };
    }
    if (/LG/i.test(ua)) {
      return { brand: 'LG', series: null, model: null };
    }
    if (/Nokia/i.test(ua)) {
      return { brand: 'Nokia', series: null, model: null };
    }
    if (/Motorola|moto/i.test(ua)) {
      return { brand: 'Motorola', series: null, model: null };
    }
    if (/HTC/i.test(ua)) {
      return { brand: 'HTC', series: null, model: null };
    }
    if (/Lenovo|Tab/i.test(ua)) {
      return { brand: 'Lenovo', series: null, model: null };
    }
    if (/Nothing/i.test(ua)) {
      return { brand: 'Nothing', series: 'Phone', model: null };
    }
    if (/Infinix/i.test(ua)) {
      return { brand: 'Infinix', series: null, model: null };
    }
    if (/Tecno/i.test(ua)) {
      return { brand: 'Tecno', series: null, model: null };
    }

    // ========== DESKTOP FALLBACK ==========
    if (/Windows/i.test(ua)) {
      return { brand: 'Windows PC', series: null, model: null };
    }
    if (/Linux/i.test(ua) && !/Android/i.test(ua)) {
      return { brand: 'Linux PC', series: null, model: null };
    }
    if (/CrOS/i.test(ua)) {
      return { brand: 'Chromebook', series: null, model: null };
    }

    return { brand: 'Unknown', model: null, series: null };
  },

  /**
   * Parse Apple device details
   */
  parseAppleDevice: (ua, type) => {
    // Apple devices don't expose model in UA
    // We can only detect via screen size + pixel ratio (done elsewhere)
    return type;
  },

  /**
   * Parse Mac details
   */
  parseMac: (ua) => {
    if (/Intel/.test(ua)) return 'Mac (Intel)';
    // Apple Silicon doesn't explicitly show, but newer Safari versions imply it
    return 'Mac';
  },

  /**
   * Parse Samsung model code
   * SM-G = Galaxy S, SM-A = Galaxy A, SM-F = Galaxy Fold, SM-Z = Galaxy Z, SM-N = Note
   */
  parseSamsung: (match) => {
    const prefix = match[1].toUpperCase();
    const number = match[2];
    
    const seriesMap = {
      'S': 'Galaxy S',    // Flagship
      'G': 'Galaxy S',    // Older flagship
      'A': 'Galaxy A',    // Mid-range
      'M': 'Galaxy M',    // Budget
      'F': 'Galaxy F/Fold',
      'Z': 'Galaxy Z',    // Foldables
      'N': 'Galaxy Note',
      'T': 'Galaxy Tab',
    };
    
    const series = seriesMap[prefix] || 'Galaxy';
    
    // Try to determine specific model
    let model = null;
    if (prefix === 'S' || prefix === 'G') {
      // Galaxy S series - SM-S9xx = S2x, SM-G99x = S21, etc
      if (number.startsWith('9')) {
        const gen = parseInt(number.charAt(1));
        if (gen >= 0) model = `Galaxy S2${gen + 1}`;
      }
    }
    
    return {
      brand: 'Samsung',
      series,
      model: model || `${series} (${match[0]})`
    };
  },

  /**
   * Parse Xiaomi ecosystem devices
   */
  parseXiaomi: (ua) => {
    if (/POCO/i.test(ua)) {
      const model = DeviceDetector.extractModel(ua, /POCO\s*([^\s;)]+)/i);
      return { brand: 'POCO', series: null, model };
    }
    if (/Redmi/i.test(ua)) {
      const model = DeviceDetector.extractModel(ua, /Redmi\s*([^\s;)]+)/i);
      return { brand: 'Redmi', series: null, model };
    }
    if (/Black\s*Shark/i.test(ua)) {
      return { brand: 'Black Shark', series: 'Gaming', model: null };
    }
    
    const model = DeviceDetector.extractModel(ua, /Mi\s*([^\s;)]+)|Xiaomi\s*([^\s;)]+)/i);
    return { brand: 'Xiaomi', series: 'Mi', model };
  },

  /**
   * Parse OPPO devices
   */
  parseOPPO: (ua) => {
    // Check for Find series (flagship)
    if (/Find/i.test(ua)) {
      return { brand: 'OPPO', series: 'Find', model: null };
    }
    // Check for Reno series
    if (/Reno/i.test(ua)) {
      return { brand: 'OPPO', series: 'Reno', model: null };
    }
    
    const cphMatch = ua.match(/CPH(\d{4})/i);
    if (cphMatch) {
      return { brand: 'OPPO', series: null, model: `CPH${cphMatch[1]}` };
    }
    
    return { brand: 'OPPO', series: null, model: null };
  },

  /**
   * Parse OnePlus devices
   */
  parseOnePlus: (ua) => {
    const match = ua.match(/OnePlus\s*([^\s;)]+)|ONEPLUS\s+([^\s;)]+)/i);
    if (match) {
      const model = match[1] || match[2];
      return { brand: 'OnePlus', series: null, model };
    }
    return { brand: 'OnePlus', series: null, model: null };
  },

  /**
   * Helper to extract model from pattern
   */
  extractModel: (ua, regex) => {
    const match = ua.match(regex);
    return match ? (match[1] || match[2] || null) : null;
  }
};

// ============================================
// 3. SCREEN & DISPLAY INFO
// ============================================
const ScreenDetector = {
  /**
   * Get all screen-related information
   */
  getInfo: () => {
    const screen = window.screen;
    
    return {
      // Physical screen
      width: screen.width,
      height: screen.height,
      availWidth: screen.availWidth,
      availHeight: screen.availHeight,
      
      // Color
      colorDepth: screen.colorDepth,
      pixelDepth: screen.pixelDepth,
      
      // Viewport
      innerWidth: window.innerWidth,
      innerHeight: window.innerHeight,
      outerWidth: window.outerWidth,
      outerHeight: window.outerHeight,
      
      // Pixel ratio (retina detection)
      devicePixelRatio: window.devicePixelRatio || 1,
      
      // Orientation
      orientation: ScreenDetector.getOrientation(),
      
      // Calculated
      isRetina: window.devicePixelRatio > 1,
      aspectRatio: ScreenDetector.calculateAspectRatio(screen.width, screen.height),
      
      // Screen type estimation
      screenType: ScreenDetector.estimateScreenType(screen.width, screen.height, window.devicePixelRatio),
    };
  },

  /**
   * Get screen orientation
   */
  getOrientation: () => {
    if (screen.orientation) {
      return screen.orientation.type; // portrait-primary, landscape-primary, etc
    }
    // Fallback
    return window.innerWidth > window.innerHeight ? 'landscape' : 'portrait';
  },

  /**
   * Calculate aspect ratio
   */
  calculateAspectRatio: (width, height) => {
    const gcd = (a, b) => b === 0 ? a : gcd(b, a % b);
    const divisor = gcd(width, height);
    return `${width / divisor}:${height / divisor}`;
  },

  /**
   * Estimate screen type based on dimensions
   */
  estimateScreenType: (width, height, dpr) => {
    const maxDim = Math.max(width, height);
    const minDim = Math.min(width, height);
    const physicalWidth = maxDim / dpr;
    
    // Mobile phones
    if (minDim <= 480 || (minDim <= 600 && dpr >= 2)) {
      if (maxDim >= 2400) return 'flagship-phone';
      if (maxDim >= 1920) return 'mid-range-phone';
      return 'budget-phone';
    }
    
    // Tablets
    if (minDim <= 1024 && minDim > 600) {
      return 'tablet';
    }
    
    // Monitors
    if (maxDim >= 3840) return '4k-display';
    if (maxDim >= 2560) return 'qhd-display';
    if (maxDim >= 1920) return 'fhd-display';
    if (maxDim >= 1366) return 'hd-display';
    
    return 'standard-display';
  }
};

// ============================================
// 4. CONNECTION INFO (WiFi vs Cellular)
// ============================================
const ConnectionDetector = {
  /**
   * Get network connection information
   */
  getInfo: () => {
    const connection = navigator.connection || 
                       navigator.mozConnection || 
                       navigator.webkitConnection;
    
    if (!connection) {
      return {
        supported: false,
        type: null,
        effectiveType: null,
        downlink: null,
        rtt: null,
        saveData: null,
        isWifi: null,
        isCellular: null,
        networkQuality: 'unknown'
      };
    }

    const type = connection.type || null;
    const effectiveType = connection.effectiveType || null;
    const downlink = connection.downlink || null;
    const rtt = connection.rtt || null;
    const saveData = connection.saveData || false;

    // Determine if WiFi or Cellular
    const isWifi = type === 'wifi' || type === 'ethernet';
    const isCellular = type === 'cellular' || 
                       ['2g', '3g', '4g', '5g'].includes(type);

    // Estimate network quality
    let networkQuality = 'unknown';
    if (effectiveType === '4g' && downlink >= 10) {
      networkQuality = 'excellent';
    } else if (effectiveType === '4g' || (effectiveType === '3g' && downlink >= 1.5)) {
      networkQuality = 'good';
    } else if (effectiveType === '3g') {
      networkQuality = 'moderate';
    } else if (effectiveType === '2g' || effectiveType === 'slow-2g') {
      networkQuality = 'poor';
    }

    return {
      supported: true,
      type,
      effectiveType,
      downlink,           // Mbps
      downlinkFormatted: downlink ? `${downlink} Mbps` : null,
      rtt,                // ms round-trip time
      saveData,           // Data saver mode
      isWifi,
      isCellular,
      isMetered: isCellular, // Cellular usually metered
      networkQuality,
      
      // Human readable description
      description: ConnectionDetector.getDescription(type, effectiveType, downlink, isWifi, isCellular)
    };
  },

  /**
   * Generate human-readable description
   */
  getDescription: (type, effectiveType, downlink, isWifi, isCellular) => {
    if (isWifi) {
      if (downlink >= 50) return 'WiFi berkecepatan tinggi (mungkin fiber)';
      if (downlink >= 20) return 'WiFi standar';
      if (downlink >= 5) return 'WiFi lambat';
      return 'WiFi';
    }
    
    if (isCellular || type === 'cellular') {
      if (effectiveType === '4g' && downlink >= 10) return 'Data seluler 4G/LTE (sinyal kuat)';
      if (effectiveType === '4g') return 'Data seluler 4G/LTE';
      if (effectiveType === '3g') return 'Data seluler 3G';
      if (effectiveType === '2g') return 'Data seluler 2G (sinyal lemah)';
      return 'Data seluler';
    }
    
    if (type === 'ethernet') return 'Koneksi kabel (Ethernet)';
    if (type === 'none') return 'Tidak ada koneksi';
    
    // Fallback estimation based on effective type
    if (effectiveType === '4g') return 'Koneksi cepat (WiFi/4G)';
    if (effectiveType === '3g') return 'Koneksi menengah';
    if (effectiveType === '2g') return 'Koneksi lambat';
    
    return 'Tipe koneksi tidak terdeteksi';
  },

  /**
   * Monitor connection changes (optional)
   */
  onChange: (callback) => {
    const connection = navigator.connection || 
                       navigator.mozConnection || 
                       navigator.webkitConnection;
    
    if (connection) {
      connection.addEventListener('change', callback);
      return () => connection.removeEventListener('change', callback);
    }
    return () => {};
  }
};

// ============================================
// 5. TIMEZONE & LOCALE INFO
// ============================================
const TimezoneDetector = {
  /**
   * Get timezone and locale information
   */
  getInfo: () => {
    const dateTimeFormat = Intl.DateTimeFormat().resolvedOptions();
    const now = new Date();
    
    return {
      // Timezone
      timezone: dateTimeFormat.timeZone || null,
      timezoneOffset: now.getTimezoneOffset(), // minutes from UTC
      timezoneOffsetFormatted: TimezoneDetector.formatOffset(now.getTimezoneOffset()),
      
      // Locale
      locale: dateTimeFormat.locale || navigator.language,
      calendar: dateTimeFormat.calendar || 'gregory',
      numberingSystem: dateTimeFormat.numberingSystem || 'latn',
      
      // Regional hints
      hourCycle: dateTimeFormat.hourCycle || null, // h11, h12, h23, h24
      firstDayOfWeek: TimezoneDetector.getFirstDayOfWeek(),
      
      // Formats
      dateFormat: TimezoneDetector.detectDateFormat(),
      numberFormat: TimezoneDetector.detectNumberFormat(),
      currencyHint: TimezoneDetector.guessCurrency(dateTimeFormat.locale),
      
      // Current time info
      isDST: TimezoneDetector.isDaylightSaving(),
    };
  },

  /**
   * Format timezone offset
   */
  formatOffset: (minutes) => {
    const hours = Math.abs(Math.floor(minutes / 60));
    const mins = Math.abs(minutes % 60);
    const sign = minutes <= 0 ? '+' : '-';
    return `UTC${sign}${hours.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}`;
  },

  /**
   * Detect first day of week (0 = Sunday, 1 = Monday)
   */
  getFirstDayOfWeek: () => {
    // Most of the world uses Monday, US/Canada use Sunday
    const locale = navigator.language || 'en';
    const sundayLocales = ['en-US', 'en-CA', 'pt-BR', 'ja-JP', 'ko-KR', 'zh-CN'];
    
    for (const l of sundayLocales) {
      if (locale.startsWith(l.split('-')[0]) || locale === l) {
        if (sundayLocales.includes(locale)) return 0;
      }
    }
    return 1;
  },

  /**
   * Detect date format preference
   */
  detectDateFormat: () => {
    const locale = navigator.language || 'en';
    
    // US uses MM/DD/YYYY
    if (locale === 'en-US') return 'MM/DD/YYYY';
    
    // Most of Asia uses YYYY-MM-DD
    if (['ja', 'ko', 'zh', 'hu'].some(l => locale.startsWith(l))) {
      return 'YYYY-MM-DD';
    }
    
    // Most of Europe/Indonesia uses DD/MM/YYYY or DD.MM.YYYY
    return 'DD/MM/YYYY';
  },

  /**
   * Detect number format (decimal separator)
   */
  detectNumberFormat: () => {
    const formatted = (1234.5).toLocaleString();
    
    if (formatted.includes(',') && formatted.includes('.')) {
      // 1,234.5 = English style
      if (formatted.indexOf(',') < formatted.indexOf('.')) {
        return { decimal: '.', thousand: ',' };
      }
      // 1.234,5 = European/Indonesian style
      return { decimal: ',', thousand: '.' };
    }
    
    if (formatted.includes(',')) {
      return { decimal: ',', thousand: ' ' };
    }
    
    return { decimal: '.', thousand: ',' };
  },

  /**
   * Guess currency based on locale
   */
  guessCurrency: (locale) => {
    const currencyMap = {
      'id': 'IDR',
      'en-US': 'USD',
      'en-GB': 'GBP',
      'en-AU': 'AUD',
      'de': 'EUR',
      'fr': 'EUR',
      'ja': 'JPY',
      'ko': 'KRW',
      'zh-CN': 'CNY',
      'zh-TW': 'TWD',
      'th': 'THB',
      'vi': 'VND',
      'ms': 'MYR',
      'hi': 'INR',
    };
    
    // Check exact match first
    if (currencyMap[locale]) return currencyMap[locale];
    
    // Check prefix match
    const prefix = locale.split('-')[0];
    if (currencyMap[prefix]) return currencyMap[prefix];
    
    return 'USD'; // Default fallback
  },

  /**
   * Check if currently in Daylight Saving Time
   */
  isDaylightSaving: () => {
    const now = new Date();
    const jan = new Date(now.getFullYear(), 0, 1);
    const jul = new Date(now.getFullYear(), 6, 1);
    const stdOffset = Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset());
    
    return now.getTimezoneOffset() < stdOffset;
  }
};

// ============================================
// COMBINED BASIC FINGERPRINT COLLECTOR
// ============================================
const BasicFingerprint = {
  /**
   * Collect all basic fingerprint data
   */
  collect: () => {
    const navigatorInfo = NavigatorDetector.getInfo();
    const os = NavigatorDetector.parseOS(navigatorInfo.userAgent);
    const browser = NavigatorDetector.parseBrowser(navigatorInfo.userAgent);
    const deviceType = NavigatorDetector.getDeviceType(navigatorInfo.userAgent, navigatorInfo.maxTouchPoints);
    const device = DeviceDetector.parse(navigatorInfo.userAgent);
    const screenInfo = ScreenDetector.getInfo();
    const connectionInfo = ConnectionDetector.getInfo();
    const timezoneInfo = TimezoneDetector.getInfo();

    return {
      // Navigator
      navigator: navigatorInfo,
      
      // Parsed info
      os,
      browser,
      deviceType,
      device,
      
      // Screen
      screen: screenInfo,
      
      // Connection
      connection: connectionInfo,
      
      // Timezone
      timezone: timezoneInfo,
      
      // Meta
      collectedAt: new Date().toISOString(),
      userLanguage: Utils.detectLanguage(),
    };
  }
};

// ============================================
// EXPORT / ATTACH TO WINDOW (for next parts)
// ============================================
window.FingerprintApp = window.FingerprintApp || {};
window.FingerprintApp.Utils = Utils;
window.FingerprintApp.AppState = AppState;
window.FingerprintApp.NavigatorDetector = NavigatorDetector;
window.FingerprintApp.DeviceDetector = DeviceDetector;
window.FingerprintApp.ScreenDetector = ScreenDetector;
window.FingerprintApp.ConnectionDetector = ConnectionDetector;
window.FingerprintApp.TimezoneDetector = TimezoneDetector;
window.FingerprintApp.BasicFingerprint = BasicFingerprint;

console.log('📍 Fingerprint App - Part 1 Loaded (Navigator, Screen, Connection, Device)');


/**
 * ============================================
 * WHO ARE YOU? - Browser Fingerprint Demo
 * ============================================
 * 
 * app.js - Part 2: Advanced Fingerprinting
 * - WebGL & GPU Detection
 * - Canvas Fingerprint
 * - Audio Fingerprint
 * - Font Detection
 * - WebRTC IP Leak
 * - Media Devices
 * ============================================
 */

// Get references from Part 1
// Gunakan window.FingerprintApp.Utils langsung, tidak perlu destructure

// ============================================
// 6. WEBGL & GPU DETECTION
// ============================================
const WebGLDetector = {
  /**
   * Get WebGL and GPU information
   */
  getInfo: () => {
    const canvas = document.createElement('canvas');
    let gl = null;
    let version = null;

    // Try WebGL2 first, then WebGL1
    try {
      gl = canvas.getContext('webgl2');
      if (gl) version = 'WebGL 2.0';
    } catch (e) {}

    if (!gl) {
      try {
        gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
        if (gl) version = 'WebGL 1.0';
      } catch (e) {}
    }

    if (!gl) {
      return {
        supported: false,
        version: null,
        vendor: null,
        renderer: null,
        gpuBrand: null,
        gpuModel: null,
        extensions: [],
        parameters: {}
      };
    }

    // Get debug info extension for real GPU info
    const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
    
    let vendor = gl.getParameter(gl.VENDOR);
    let renderer = gl.getParameter(gl.RENDERER);
    
    // Get unmasked (real) values if available
    if (debugInfo) {
      vendor = gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL) || vendor;
      renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL) || renderer;
    }

    // Parse GPU brand and model
    const gpuInfo = WebGLDetector.parseGPU(vendor, renderer);

    // Get extensions
    const extensions = gl.getSupportedExtensions() || [];

    // Get important parameters
    const parameters = {
      maxTextureSize: gl.getParameter(gl.MAX_TEXTURE_SIZE),
      maxViewportDims: gl.getParameter(gl.MAX_VIEWPORT_DIMS),
      maxRenderbufferSize: gl.getParameter(gl.MAX_RENDERBUFFER_SIZE),
      maxVertexAttribs: gl.getParameter(gl.MAX_VERTEX_ATTRIBS),
      maxVertexUniformVectors: gl.getParameter(gl.MAX_VERTEX_UNIFORM_VECTORS),
      maxFragmentUniformVectors: gl.getParameter(gl.MAX_FRAGMENT_UNIFORM_VECTORS),
      maxVaryingVectors: gl.getParameter(gl.MAX_VARYING_VECTORS),
      aliasedLineWidthRange: Array.from(gl.getParameter(gl.ALIASED_LINE_WIDTH_RANGE) || []),
      aliasedPointSizeRange: Array.from(gl.getParameter(gl.ALIASED_POINT_SIZE_RANGE) || []),
      maxCombinedTextureImageUnits: gl.getParameter(gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS),
      redBits: gl.getParameter(gl.RED_BITS),
      greenBits: gl.getParameter(gl.GREEN_BITS),
      blueBits: gl.getParameter(gl.BLUE_BITS),
      alphaBits: gl.getParameter(gl.ALPHA_BITS),
      depthBits: gl.getParameter(gl.DEPTH_BITS),
      stencilBits: gl.getParameter(gl.STENCIL_BITS),
    };

    // Create WebGL hash for fingerprinting
    const webglHash = Utils.hashString(
      JSON.stringify({ vendor, renderer, parameters, extCount: extensions.length })
    );

    return {
      supported: true,
      version,
      vendor,
      renderer,
      gpuBrand: gpuInfo.brand,
      gpuModel: gpuInfo.model,
      gpuTier: gpuInfo.tier,
      extensions,
      extensionsCount: extensions.length,
      parameters,
      webglHash,
    };
  },

  /**
   * Parse GPU brand and model from renderer string
   */
  parseGPU: (vendor, renderer) => {
    if (!renderer) return { brand: 'Unknown', model: null, tier: 'unknown' };
    const r = renderer.toLowerCase();
    const v = (vendor || '').toLowerCase();

    // ========== AMD (Cek dulu sebelum yang lain!) ==========
    if (r.includes('amd') || r.includes('radeon') || r.includes('ati ')) {
      let model = 'Radeon', tier = 'dedicated';
      
      // RX 7000 series
      if (/rx\s*7[0-9]{3}/i.test(renderer)) {
        const m = renderer.match(/rx\s*(7[0-9]{3})/i);
        model = m ? `RX ${m[1]}` : 'RX 7000';
        tier = 'high-end';
      }
      // RX 6000 series
      else if (/rx\s*6[0-9]{3}/i.test(renderer)) {
        const m = renderer.match(/rx\s*(6[0-9]{3})/i);
        model = m ? `RX ${m[1]}` : 'RX 6000';
        tier = 'high-end';
      }
      // RX 5000 series
      else if (/rx\s*5[0-9]{3}/i.test(renderer)) {
        const m = renderer.match(/rx\s*(5[0-9]{3})/i);
        model = m ? `RX ${m[1]}` : 'RX 5000';
        tier = 'mid-range';
      }
      // RX 500/400 series
      else if (/rx\s*[45][0-9]{2}/i.test(renderer)) {
        const m = renderer.match(/rx\s*([45][0-9]{2})/i);
        model = m ? `RX ${m[1]}` : 'RX 500';
        tier = 'mid-range';
      }
      // Vega (integrated or dedicated)
      else if (/vega/i.test(renderer)) {
        const m = renderer.match(/vega\s*(\d+)?/i);
        model = m && m[1] ? `Vega ${m[1]}` : 'Vega';
        tier = r.includes('graphics') ? 'integrated' : 'mid-range';
      }
      // Radeon Graphics (APU - Ryzen integrated)
      else if (/radeon.*graphics/i.test(renderer) || /radeon\(tm\)/i.test(renderer)) {
        // Extract model number if exists (e.g., "Radeon 780M Graphics")
        const m = renderer.match(/radeon(?:\(tm\))?\s*(\d{3}[mM]?)?\s*graphics/i);
        if (m && m[1]) {
          model = `Radeon ${m[1].toUpperCase()} (iGPU)`;
          // 700M series = RDNA3 iGPU (very good)
          tier = parseInt(m[1]) >= 700 ? 'integrated-plus' : 'integrated';
        } else {
          model = 'Radeon Graphics (iGPU)';
          tier = 'integrated';
        }
      }
      // R5/R7/R9 series (older)
      else if (/r[579]\s/i.test(renderer)) {
        const m = renderer.match(/(r[579])\s*(\d{3})?/i);
        model = m ? `${m[1].toUpperCase()} ${m[2] || ''}`.trim() : 'Radeon';
        tier = 'low-end';
      }
      // Generic AMD/ATI
      else {
        model = 'Radeon';
        tier = 'dedicated';
      }

      return { brand: 'AMD', model, tier };
    }

    // ========== NVIDIA ==========
    if (r.includes('nvidia') || r.includes('geforce') || r.includes('rtx') || r.includes('gtx') || r.includes('quadro')) {
      let model = 'GeForce', tier = 'dedicated';
      
      // RTX 40 series
      if (/rtx\s*40[0-9]{2}/i.test(renderer)) {
        const m = renderer.match(/rtx\s*(40[0-9]{2})/i);
        model = m ? `RTX ${m[1]}` : 'RTX 40';
        tier = 'high-end';
      }
      // RTX 30 series
      else if (/rtx\s*30[0-9]{2}/i.test(renderer)) {
        const m = renderer.match(/rtx\s*(30[0-9]{2})/i);
        model = m ? `RTX ${m[1]}` : 'RTX 30';
        tier = 'high-end';
      }
      // RTX 20 series
      else if (/rtx\s*20[0-9]{2}/i.test(renderer)) {
        const m = renderer.match(/rtx\s*(20[0-9]{2})/i);
        model = m ? `RTX ${m[1]}` : 'RTX 20';
        tier = 'mid-range';
      }
      // GTX 16 series
      else if (/gtx\s*16[0-9]{2}/i.test(renderer)) {
        const m = renderer.match(/gtx\s*(16[0-9]{2})/i);
        model = m ? `GTX ${m[1]}` : 'GTX 16';
        tier = 'mid-range';
      }
      // GTX 10 series
      else if (/gtx\s*10[0-9]{2}/i.test(renderer)) {
        const m = renderer.match(/gtx\s*(10[0-9]{2})/i);
        model = m ? `GTX ${m[1]}` : 'GTX 10';
        tier = 'mid-range';
      }
      // Older GTX
      else if (/gtx\s*[0-9]{3}/i.test(renderer)) {
        const m = renderer.match(/gtx\s*([0-9]{3})/i);
        model = m ? `GTX ${m[1]}` : 'GTX';
        tier = 'low-end';
      }
      // Quadro (workstation)
      else if (/quadro/i.test(renderer)) {
        const m = renderer.match(/quadro\s*([^\s,]+)?/i);
        model = m && m[1] ? `Quadro ${m[1]}` : 'Quadro';
        tier = 'workstation';
      }

      return { brand: 'NVIDIA', model, tier };
    }

    // ========== INTEL ==========
    if (r.includes('intel') || v.includes('intel')) {
      let model = 'Integrated', tier = 'integrated';
      
      // Intel Arc (dedicated)
      if (/arc\s*a[0-9]{3}/i.test(renderer)) {
        const m = renderer.match(/arc\s*(a[0-9]{3})/i);
        model = m ? `Arc ${m[1].toUpperCase()}` : 'Arc';
        tier = 'dedicated';
      }
      // Intel Iris Xe
      else if (/iris\s*xe/i.test(renderer)) {
        model = 'Iris Xe';
        tier = 'integrated-plus';
      }
      // Intel Iris Plus
      else if (/iris\s*plus/i.test(renderer)) {
        model = 'Iris Plus';
        tier = 'integrated';
      }
      // Intel Iris
      else if (/iris/i.test(renderer)) {
        model = 'Iris';
        tier = 'integrated';
      }
      // Intel UHD
      else if (/uhd\s*([0-9]{3})?/i.test(renderer)) {
        const m = renderer.match(/uhd\s*([0-9]{3})?/i);
        model = m && m[1] ? `UHD ${m[1]}` : 'UHD Graphics';
        tier = 'integrated';
      }
      // Intel HD
      else if (/hd\s*graphics?\s*([0-9]*)/i.test(renderer)) {
        const m = renderer.match(/hd\s*graphics?\s*([0-9]*)/i);
        model = m && m[1] ? `HD ${m[1]}` : 'HD Graphics';
        tier = 'integrated';
      }

      return { brand: 'Intel', model, tier };
    }

    // ========== APPLE (Cek setelah AMD/NVIDIA/Intel) ==========
    if (r.includes('apple') || v.includes('apple')) {
      let model = 'Apple GPU', tier = 'integrated';
      
      // M3 series
      if (/m3\s*(pro|max|ultra)?/i.test(renderer)) {
        const m = renderer.match(/m3\s*(pro|max|ultra)?/i);
        model = m && m[1] ? `M3 ${m[1].charAt(0).toUpperCase() + m[1].slice(1)}` : 'M3';
        tier = m && m[1] ? 'high-end' : 'mid-range';
      }
      // M2 series
      else if (/m2\s*(pro|max|ultra)?/i.test(renderer)) {
        const m = renderer.match(/m2\s*(pro|max|ultra)?/i);
        model = m && m[1] ? `M2 ${m[1].charAt(0).toUpperCase() + m[1].slice(1)}` : 'M2';
        tier = m && m[1] ? 'high-end' : 'mid-range';
      }
      // M1 series
      else if (/m1\s*(pro|max|ultra)?/i.test(renderer)) {
        const m = renderer.match(/m1\s*(pro|max|ultra)?/i);
        model = m && m[1] ? `M1 ${m[1].charAt(0).toUpperCase() + m[1].slice(1)}` : 'M1';
        tier = m && m[1] ? 'high-end' : 'mid-range';
      }
      // A-series (iPhone/iPad)
      else if (/a(\d{1,2})\s*(x|z)?/i.test(renderer)) {
        const m = renderer.match(/a(\d{1,2})\s*(x|z)?/i);
        model = m ? `A${m[1]}${m[2] ? m[2].toUpperCase() : ''}` : 'A-series';
        tier = 'mobile';
      }

      return { brand: 'Apple', model, tier };
    }

    // ========== QUALCOMM (Mobile) ==========
    if (r.includes('adreno') || r.includes('qualcomm')) {
      let model = 'Adreno', tier = 'mobile';
      const m = renderer.match(/adreno\s*\(?([0-9]{3})\)?/i);
      if (m) {
        const num = parseInt(m[1]);
        model = `Adreno ${m[1]}`;
        tier = num >= 700 ? 'flagship-mobile' : (num >= 600 ? 'mid-range-mobile' : 'budget-mobile');
      }
      return { brand: 'Qualcomm', model, tier };
    }

    // ========== ARM MALI (Mobile) ==========
    if (r.includes('mali')) {
      const m = renderer.match(/mali[- ]?([a-z]?[0-9]+)/i);
      const model = m ? `Mali-${m[1].toUpperCase()}` : 'Mali';
      const tier = /g[0-9]{2}/i.test(m?.[1] || '') ? 'mid-range-mobile' : 'mobile';
      return { brand: 'ARM', model, tier };
    }

    // ========== POWERVR ==========
    if (r.includes('powervr')) {
      return { brand: 'PowerVR', model: 'PowerVR', tier: 'mobile' };
    }

    // ========== SOFTWARE RENDERING ==========
    if (r.includes('swiftshader') || r.includes('llvmpipe') || r.includes('software')) {
      return { brand: 'Software', model: 'Software Renderer', tier: 'software' };
    }

    // ========== VIRTUAL MACHINE ==========
    if (r.includes('vmware') || r.includes('virtualbox') || r.includes('hyper-v') || r.includes('parallels')) {
      return { brand: 'Virtual', model: 'VM Graphics', tier: 'virtual' };
    }

    // ========== UNKNOWN ==========
    return { brand: 'Unknown', model: renderer.substring(0, 50), tier: 'unknown' };
  }
};

// ============================================
// 7. CANVAS FINGERPRINT
// ============================================
const CanvasDetector = {
  /**
   * Generate canvas fingerprint
   */
  getFingerprint: () => {
    try {
      const canvas = document.createElement('canvas');
      canvas.width = 280;
      canvas.height = 60;
      
      const ctx = canvas.getContext('2d');
      if (!ctx) {
        return { supported: false, hash: null, dataURL: null };
      }

      // Background
      ctx.fillStyle = '#f0f0f0';
      ctx.fillRect(0, 0, 280, 60);

      // Text with specific font
      ctx.textBaseline = 'alphabetic';
      ctx.fillStyle = '#069';
      ctx.font = '14px "Arial"';
      ctx.fillText('Browser Fingerprint! 🔍', 4, 20);
      
      // Different font
      ctx.font = '18px "Times New Roman"';
      ctx.fillStyle = '#c00';
      ctx.fillText('WhoAreYou? 你好 مرحبا', 4, 45);

      // Colored shapes
      ctx.fillStyle = 'rgba(102, 204, 0, 0.7)';
      ctx.beginPath();
      ctx.arc(200, 30, 20, 0, Math.PI * 2);
      ctx.fill();

      ctx.fillStyle = 'rgba(255, 0, 102, 0.5)';
      ctx.beginPath();
      ctx.arc(220, 30, 15, 0, Math.PI * 2);
      ctx.fill();

      // Line with blend
      ctx.strokeStyle = 'rgba(0, 0, 255, 0.5)';
      ctx.lineWidth = 3;
      ctx.beginPath();
      ctx.moveTo(170, 10);
      ctx.lineTo(250, 50);
      ctx.stroke();

      // Get data URL and hash
      const dataURL = canvas.toDataURL('image/png');
      const hash = Utils.hashString(dataURL);

      return {
        supported: true,
        hash,
        dataURL: dataURL.substring(0, 100) + '...', // Truncated for display
        fullDataURL: dataURL, // Full for internal use
        width: canvas.width,
        height: canvas.height,
      };
    } catch (e) {
      return { supported: false, hash: null, dataURL: null, error: e.message };
    }
  },

  /**
   * Detect if canvas is blocked or modified (e.g., by privacy extensions)
   */
  detectBlocking: () => {
    try {
      const canvas = document.createElement('canvas');
      canvas.width = 16;
      canvas.height = 16;
      const ctx = canvas.getContext('2d');
      
      if (!ctx) return { blocked: true, reason: 'no-context' };
      
      // Draw something
      ctx.fillStyle = '#ff0000';
      ctx.fillRect(0, 0, 8, 8);
      ctx.fillStyle = '#00ff00';
      ctx.fillRect(8, 0, 8, 8);
      
      // Read pixels
      const imageData = ctx.getImageData(0, 0, 16, 16);
      const data = imageData.data;
      
      // Check if red pixel is actually red
      if (data[0] !== 255 || data[1] !== 0 || data[2] !== 0) {
        return { blocked: true, reason: 'data-modified' };
      }
      
      return { blocked: false, reason: null };
    } catch (e) {
      return { blocked: true, reason: 'exception' };
    }
  }
};

// ============================================
// 8. AUDIO FINGERPRINT
// ============================================
const AudioDetector = {
  /**
   * Generate audio fingerprint using AudioContext
   */
  getFingerprint: async () => {
    try {
      // Check if AudioContext is available
      const AudioContext = window.AudioContext || window.webkitAudioContext;
      if (!AudioContext) {
        return { supported: false, hash: null };
      }

      const context = new AudioContext();
      const oscillator = context.createOscillator();
      const analyser = context.createAnalyser();
      const gain = context.createGain();
      const compressor = context.createDynamicsCompressor();

      // Configure oscillator
      oscillator.type = 'triangle';
      oscillator.frequency.setValueAtTime(10000, context.currentTime);

      // Configure compressor (adds unique characteristics)
      compressor.threshold.setValueAtTime(-50, context.currentTime);
      compressor.knee.setValueAtTime(40, context.currentTime);
      compressor.ratio.setValueAtTime(12, context.currentTime);
      compressor.attack.setValueAtTime(0, context.currentTime);
      compressor.release.setValueAtTime(0.25, context.currentTime);

      // Connect nodes
      oscillator.connect(compressor);
      compressor.connect(analyser);
      analyser.connect(gain);
      gain.connect(context.destination);

      // Mute output
      gain.gain.setValueAtTime(0, context.currentTime);

      // Start oscillator
      oscillator.start(0);

      // Wait a bit for processing
      await Utils.delay(100);

      // Get frequency data
      analyser.fftSize = 2048;
      const bufferLength = analyser.frequencyBinCount;
      const dataArray = new Float32Array(bufferLength);
      analyser.getFloatFrequencyData(dataArray);

      // Stop and cleanup
      oscillator.stop();
      await context.close();

      // Create hash from audio data
      const sum = dataArray.reduce((acc, val) => acc + Math.abs(val), 0);
      const hash = Utils.hashString(sum.toString() + dataArray.slice(0, 10).join(','));

      return {
        supported: true,
        hash,
        sampleRate: context.sampleRate,
        channelCount: context.destination.channelCount,
        maxChannelCount: context.destination.maxChannelCount,
        state: 'completed',
      };
    } catch (e) {
      return { 
        supported: false, 
        hash: null, 
        error: e.message,
        state: 'error' 
      };
    }
  },

  /**
   * Get audio context info without generating fingerprint
   */
  getBasicInfo: () => {
    try {
      const AudioContext = window.AudioContext || window.webkitAudioContext;
      if (!AudioContext) {
        return { supported: false };
      }

      const context = new AudioContext();
      const info = {
        supported: true,
        sampleRate: context.sampleRate,
        baseLatency: context.baseLatency || null,
        outputLatency: context.outputLatency || null,
        state: context.state,
      };
      
      context.close();
      return info;
    } catch (e) {
      return { supported: false, error: e.message };
    }
  }
};

// ============================================
// 9. FONT DETECTION
// ============================================
const FontDetector = {
  /**
   * List of fonts to detect
   */
  fontList: [
    // Windows
    'Arial', 'Arial Black', 'Calibri', 'Cambria', 'Consolas', 'Courier New',
    'Georgia', 'Impact', 'Lucida Console', 'Lucida Sans Unicode', 'Microsoft Sans Serif',
    'Palatino Linotype', 'Segoe UI', 'Segoe UI Symbol', 'Tahoma', 'Times New Roman',
    'Trebuchet MS', 'Verdana', 'Wingdings', 'Comic Sans MS',
    
    // macOS
    'American Typewriter', 'Andale Mono', 'Apple Chancery', 'Apple Color Emoji',
    'Apple SD Gothic Neo', 'Avenir', 'Baskerville', 'Big Caslon', 'Brush Script MT',
    'Chalkboard', 'Copperplate', 'Didot', 'Futura', 'Geneva', 'Gill Sans',
    'Helvetica', 'Helvetica Neue', 'Herculanum', 'Hoefler Text', 'Lucida Grande',
    'Luminari', 'Marker Felt', 'Menlo', 'Monaco', 'Noteworthy', 'Optima',
    'Papyrus', 'Phosphate', 'Rockwell', 'San Francisco', 'SF Pro', 'Skia',
    'Snell Roundhand', 'Zapfino',
    
    // Linux
    'Ubuntu', 'Ubuntu Mono', 'DejaVu Sans', 'DejaVu Serif', 'DejaVu Sans Mono',
    'Liberation Sans', 'Liberation Serif', 'Liberation Mono', 'Noto Sans', 'Noto Serif',
    'Droid Sans', 'Droid Serif', 'Roboto', 'Open Sans', 'Cantarell', 'FreeSans',
    
    // Android
    'Roboto', 'Roboto Condensed', 'Roboto Mono', 'Roboto Slab', 'Droid Sans',
    'Noto Color Emoji',
    
    // Common Web Fonts (might be cached)
    'Lato', 'Montserrat', 'Oswald', 'Poppins', 'Raleway', 'Source Sans Pro',
    'PT Sans', 'Merriweather', 'Playfair Display', 'Nunito', 'Fira Code', 'JetBrains Mono',
    
    // Programming fonts (indicates developer)
    'Fira Mono', 'Source Code Pro', 'Inconsolata', 'Hack', 'Anonymous Pro',
    
    // Asian fonts
    'Noto Sans CJK', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans TC',
    'Microsoft YaHei', 'Microsoft JhengHei', 'SimSun', 'SimHei', 'KaiTi',
    'Malgun Gothic', 'Meiryo', 'Yu Gothic', 'Hiragino Sans',
    
    // Arabic
    'Arabic Typesetting', 'Traditional Arabic', 'Simplified Arabic', 'Sakkal Majalla',
    
    // Other
    'Webdings', 'Symbol', 'Marlett', 'MS Gothic', 'MS Mincho',
  ],

  /**
   * Detect installed fonts
   */
  detect: () => {
    const baseFonts = ['monospace', 'sans-serif', 'serif'];
    const testString = 'mmmmmmmmmmlli'; // Mix of wide and narrow chars
    const testSize = '72px';
    
    // Create test elements
    const container = document.createElement('div');
    container.style.cssText = 'position:absolute;left:-9999px;top:-9999px;visibility:hidden;';
    document.body.appendChild(container);

    // Get base widths
    const baseWidths = {};
    for (const baseFont of baseFonts) {
      const span = document.createElement('span');
      span.style.cssText = `font-family:${baseFont};font-size:${testSize};`;
      span.textContent = testString;
      container.appendChild(span);
      baseWidths[baseFont] = span.offsetWidth;
    }

    // Test each font
    const detectedFonts = [];
    const fontDetails = {};

    for (const font of FontDetector.fontList) {
      let detected = false;
      
      for (const baseFont of baseFonts) {
        const span = document.createElement('span');
        span.style.cssText = `font-family:'${font}',${baseFont};font-size:${testSize};`;
        span.textContent = testString;
        container.appendChild(span);
        
        if (span.offsetWidth !== baseWidths[baseFont]) {
          detected = true;
          break;
        }
      }
      
      if (detected) {
        detectedFonts.push(font);
        fontDetails[font] = FontDetector.categorizeFont(font);
      }
    }

    // Cleanup
    document.body.removeChild(container);

    // Create hash
    const fontsHash = Utils.hashString(detectedFonts.sort().join(','));

    // Analyze fonts for insights
    const insights = FontDetector.analyzeInsights(detectedFonts);

    return {
      detected: detectedFonts,
      count: detectedFonts.length,
      totalChecked: FontDetector.fontList.length,
      hash: fontsHash,
      details: fontDetails,
      insights,
    };
  },

  /**
   * Categorize font
   */
  categorizeFont: (font) => {
    const categories = {
      windows: ['Segoe UI', 'Calibri', 'Consolas', 'Cambria', 'Lucida Console', 'Comic Sans MS'],
      macos: ['SF Pro', 'San Francisco', 'Helvetica Neue', 'Menlo', 'Monaco', 'Lucida Grande', 'Avenir'],
      linux: ['Ubuntu', 'DejaVu', 'Liberation', 'Noto Sans', 'Cantarell', 'FreeSans'],
      android: ['Roboto', 'Droid Sans', 'Noto Color Emoji'],
      programming: ['Fira Code', 'JetBrains Mono', 'Source Code Pro', 'Consolas', 'Monaco', 'Fira Mono', 'Hack'],
      design: ['Helvetica', 'Futura', 'Gill Sans', 'Avenir', 'Optima', 'Didot'],
      asian: ['Microsoft YaHei', 'SimSun', 'Malgun Gothic', 'Meiryo', 'Noto Sans CJK'],
    };

    for (const [category, fonts] of Object.entries(categories)) {
      if (fonts.some(f => font.includes(f) || f.includes(font))) {
        return category;
      }
    }
    return 'general';
  },

  /**
   * Analyze fonts for user insights
   */
  analyzeInsights: (fonts) => {
    const insights = {
      likelyOS: null,
      isDeveloper: false,
      isDesigner: false,
      hasAsianFonts: false,
      hasArabicFonts: false,
    };

    const fontStr = fonts.join(',').toLowerCase();

    // OS detection
    if (fontStr.includes('segoe') || fontStr.includes('calibri')) {
      insights.likelyOS = 'Windows';
    } else if (fontStr.includes('sf pro') || fontStr.includes('helvetica neue') || fontStr.includes('menlo')) {
      insights.likelyOS = 'macOS';
    } else if (fontStr.includes('ubuntu') || fontStr.includes('dejavu') || fontStr.includes('cantarell')) {
      insights.likelyOS = 'Linux';
    } else if (fontStr.includes('roboto') && !fontStr.includes('segoe')) {
      insights.likelyOS = 'Android';
    }

    // Developer detection
    const devFonts = ['fira code', 'jetbrains', 'source code', 'hack', 'inconsolata', 'consolas'];
    insights.isDeveloper = devFonts.some(f => fontStr.includes(f));

    // Designer detection
    const designFonts = ['helvetica', 'futura', 'avenir', 'gill sans', 'optima', 'didot', 'garamond'];
    const designCount = designFonts.filter(f => fontStr.includes(f)).length;
    insights.isDesigner = designCount >= 3;

    // Asian fonts
    const asianFonts = ['yaHei', 'simsun', 'malgun', 'meiryo', 'noto sans cjk', 'hiragino'];
    insights.hasAsianFonts = asianFonts.some(f => fontStr.toLowerCase().includes(f.toLowerCase()));

    // Arabic fonts
    const arabicFonts = ['arabic', 'sakkal'];
    insights.hasArabicFonts = arabicFonts.some(f => fontStr.includes(f));

    return insights;
  }
};

// ============================================
// 10. WEBRTC IP LEAK
// ============================================
const WebRTCDetector = {
  /**
   * Detect local IPs via WebRTC (privacy leak)
   */
  getLocalIPs: () => {
    return new Promise((resolve) => {
      const ips = {
        ipv4: [],
        ipv6: [],
        private: [],
        public: [],
        supported: true,
      };

      // Timeout after 3 seconds
      const timeout = setTimeout(() => {
        resolve(ips);
      }, 3000);

      try {
        const RTCPeerConnection = window.RTCPeerConnection || 
                                   window.mozRTCPeerConnection || 
                                   window.webkitRTCPeerConnection;

        if (!RTCPeerConnection) {
          clearTimeout(timeout);
          resolve({ ...ips, supported: false });
          return;
        }

        const pc = new RTCPeerConnection({
          iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
        });

        pc.createDataChannel('');

        pc.onicecandidate = (event) => {
          if (!event || !event.candidate) {
            // Gathering complete
            pc.close();
            clearTimeout(timeout);
            resolve(ips);
            return;
          }

          const candidate = event.candidate.candidate;
          const ipMatch = candidate.match(/([0-9]{1,3}\.){3}[0-9]{1,3}|([a-f0-9]{1,4}:){7}[a-f0-9]{1,4}/gi);

          if (ipMatch) {
            ipMatch.forEach(ip => {
              // Check if IPv4 or IPv6
              if (ip.includes(':')) {
                if (!ips.ipv6.includes(ip)) ips.ipv6.push(ip);
              } else {
                if (!ips.ipv4.includes(ip)) ips.ipv4.push(ip);
                
                // Check if private IP
                if (WebRTCDetector.isPrivateIP(ip)) {
                  if (!ips.private.includes(ip)) ips.private.push(ip);
                } else {
                  if (!ips.public.includes(ip)) ips.public.push(ip);
                }
              }
            });
          }
        };

        pc.createOffer()
          .then(offer => pc.setLocalDescription(offer))
          .catch(() => {
            clearTimeout(timeout);
            resolve(ips);
          });

      } catch (e) {
        clearTimeout(timeout);
        resolve({ ...ips, supported: false, error: e.message });
      }
    });
  },

  /**
   * Check if IP is private
   */
  isPrivateIP: (ip) => {
    const parts = ip.split('.').map(Number);
    if (parts.length !== 4) return false;
    
    // 10.x.x.x
    if (parts[0] === 10) return true;
    // 172.16.x.x - 172.31.x.x
    if (parts[0] === 172 && parts[1] >= 16 && parts[1] <= 31) return true;
    // 192.168.x.x
    if (parts[0] === 192 && parts[1] === 168) return true;
    // 127.x.x.x (localhost)
    if (parts[0] === 127) return true;
    // 169.254.x.x (link-local)
    if (parts[0] === 169 && parts[1] === 254) return true;
    
    return false;
  },

  /**
   * Check if WebRTC is potentially leaking
   */
  checkLeak: async () => {
    const result = await WebRTCDetector.getLocalIPs();
    
    return {
      ...result,
      isLeaking: result.private.length > 0 || result.public.length > 0,
      leakCount: result.private.length + result.public.length,
      riskLevel: result.public.length > 0 ? 'high' : (result.private.length > 0 ? 'medium' : 'low'),
    };
  }
};

// ============================================
// 11. MEDIA DEVICES
// ============================================
const MediaDevicesDetector = {
  /**
   * Enumerate media devices (without permission)
   */
  getDevices: async () => {
    try {
      if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
        return {
          supported: false,
          cameras: 0,
          microphones: 0,
          speakers: 0,
          devices: []
        };
      }

      const devices = await navigator.mediaDevices.enumerateDevices();
      
      const cameras = devices.filter(d => d.kind === 'videoinput');
      const microphones = devices.filter(d => d.kind === 'audioinput');
      const speakers = devices.filter(d => d.kind === 'audiooutput');

      // Without permission, labels are empty but we can count
      return {
        supported: true,
        cameras: cameras.length,
        microphones: microphones.length,
        speakers: speakers.length,
        totalDevices: devices.length,
        hasCamera: cameras.length > 0,
        hasMicrophone: microphones.length > 0,
        hasSpeaker: speakers.length > 0,
        // Labels are only available after permission granted
        hasLabels: devices.some(d => d.label && d.label.length > 0),
        deviceDetails: devices.map(d => ({
          kind: d.kind,
          hasLabel: !!d.label,
          deviceId: d.deviceId ? Utils.hashString(d.deviceId).substring(0, 8) : null,
        }))
      };
    } catch (e) {
      return {
        supported: false,
        error: e.message,
        cameras: 0,
        microphones: 0,
        speakers: 0,
      };
    }
  }
};

// ============================================
// COMBINED ADVANCED FINGERPRINT COLLECTOR
// ============================================
const AdvancedFingerprint = {
  /**
   * Collect all advanced fingerprint data
   */
  collect: async (updateProgress) => {
    const results = {};

    // WebGL (sync)
    if (updateProgress) updateProgress('graphics', 'active');
    results.webgl = WebGLDetector.getInfo();
    if (updateProgress) updateProgress('graphics', 'done');

    // Canvas (sync)
    if (updateProgress) updateProgress('canvas', 'active');
    results.canvas = CanvasDetector.getFingerprint();
    results.canvasBlocking = CanvasDetector.detectBlocking();
    if (updateProgress) updateProgress('canvas', 'done');

    // Audio (async)
    results.audioBasic = AudioDetector.getBasicInfo();
    results.audio = await AudioDetector.getFingerprint();

    // Fonts (sync but slow)
    if (updateProgress) updateProgress('fonts', 'active');
    results.fonts = FontDetector.detect();
    if (updateProgress) updateProgress('fonts', 'done');

    // WebRTC (async)
    results.webrtc = await WebRTCDetector.checkLeak();

    // Media Devices (async)
    results.mediaDevices = await MediaDevicesDetector.getDevices();

    return results;
  }
};

// ============================================
// EXPORT / ATTACH TO WINDOW
// ============================================
window.FingerprintApp.WebGLDetector = WebGLDetector;
window.FingerprintApp.CanvasDetector = CanvasDetector;
window.FingerprintApp.AudioDetector = AudioDetector;
window.FingerprintApp.FontDetector = FontDetector;
window.FingerprintApp.WebRTCDetector = WebRTCDetector;
window.FingerprintApp.MediaDevicesDetector = MediaDevicesDetector;
window.FingerprintApp.AdvancedFingerprint = AdvancedFingerprint;

console.log('🎨 Fingerprint App - Part 2 Loaded (WebGL, Canvas, Audio, Fonts, WebRTC)');


/**
 * ============================================
 * WHO ARE YOU? - Browser Fingerprint Demo
 * ============================================
 * 
 * app.js - Part 3: External APIs & Detection
 * - IP & Geolocation API
 * - VPN/Proxy Detection
 * - Incognito Mode Detection
 * - AdBlocker Detection
 * - Browser Permissions
 * - Battery API
 * - Storage APIs
 * - Feature Detection
 * ============================================
 */

// Get references from Part 1
// Part 3 - akses langsung
const FP3 = window.FingerprintApp;

// ============================================
// 12. IP & GEOLOCATION API
// ============================================
const IPDetector = {
  /**
   * Fetch IP info from multiple sources for reliability
   */
  getInfo: async () => {
    const apis = [
      {
        name: 'ipapi',
        url: 'https://ipapi.co/json/',
        parse: (data) => ({
          ip: data.ip,
          version: data.version,
          city: data.city,
          region: data.region,
          regionCode: data.region_code,
          country: data.country_name,
          countryCode: data.country_code,
          continent: data.continent_code,
          latitude: data.latitude,
          longitude: data.longitude,
          timezone: data.timezone,
          utcOffset: data.utc_offset,
          currency: data.currency,
          isp: data.org,
          asn: data.asn,
          asnOrg: data.org,
          isEU: data.in_eu,
          callingCode: data.country_calling_code,
          languages: data.languages,
        })
      },
      {
        name: 'ipinfo',
        url: 'https://ipinfo.io/json',
        parse: (data) => {
          const [lat, lon] = (data.loc || ',').split(',');
          return {
            ip: data.ip,
            city: data.city,
            region: data.region,
            country: data.country,
            countryCode: data.country,
            latitude: parseFloat(lat) || null,
            longitude: parseFloat(lon) || null,
            timezone: data.timezone,
            isp: data.org,
            postal: data.postal,
          };
        }
      },
      {
        name: 'ip-api',
        url: 'http://ip-api.com/json/?fields=66846719',
        parse: (data) => ({
          ip: data.query,
          city: data.city,
          region: data.regionName,
          regionCode: data.region,
          country: data.country,
          countryCode: data.countryCode,
          continent: data.continent,
          latitude: data.lat,
          longitude: data.lon,
          timezone: data.timezone,
          currency: data.currency,
          isp: data.isp,
          org: data.org,
          as: data.as,
          asn: data.asname,
          isProxy: data.proxy,
          isHosting: data.hosting,
          isMobile: data.mobile,
        })
      }
    ];

    // Try each API until one works
    for (const api of apis) {
      try {
        const controller = new AbortController();
        const timeoutId = setTimeout(() => controller.abort(), 5000);

        const response = await fetch(api.url, {
          signal: controller.signal,
          headers: { 'Accept': 'application/json' }
        });

        clearTimeout(timeoutId);

        if (!response.ok) continue;

        const data = await response.json();
        const parsed = api.parse(data);

        return {
          success: true,
          source: api.name,
          ...parsed,
          // Additional analysis
          analysis: IPDetector.analyzeIP(parsed)
        };
      } catch (e) {
        console.warn(`IP API ${api.name} failed:`, e.message);
        continue;
      }
    }

    return {
      success: false,
      error: 'All IP APIs failed',
      ip: null
    };
  },

  /**
   * Analyze IP data for insights
   */
  analyzeIP: (data) => {
    const analysis = {
      connectionType: 'unknown',
      providerType: 'unknown',
      riskIndicators: [],
    };

    if (!data.isp) return analysis;

    const isp = data.isp.toLowerCase();

    // ISP type detection
    if (/telkom|indihome|speedy/i.test(isp)) {
      analysis.providerType = 'telco-indonesia';
      analysis.connectionType = 'home-broadband';
    } else if (/xl|axiata/i.test(isp)) {
      analysis.providerType = 'telco-indonesia';
      analysis.connectionType = 'mobile-data';
    } else if (/indosat|ooredoo|im3/i.test(isp)) {
      analysis.providerType = 'telco-indonesia';
      analysis.connectionType = 'mobile-data';
    } else if (/tri|three|3/i.test(isp) && /indonesia/i.test(data.country || '')) {
      analysis.providerType = 'telco-indonesia';
      analysis.connectionType = 'mobile-data';
    } else if (/smartfren/i.test(isp)) {
      analysis.providerType = 'telco-indonesia';
      analysis.connectionType = 'mobile-data';
    } else if (/biznet|firstmedia|mncplay|myrepublic|cbn/i.test(isp)) {
      analysis.providerType = 'isp-indonesia';
      analysis.connectionType = 'fiber-broadband';
    } else if (/university|universitas|kampus|education|\.edu|\.ac\./i.test(isp)) {
      analysis.providerType = 'educational';
      analysis.connectionType = 'institutional';
    } else if (/office|corporate|business|enterprise/i.test(isp)) {
      analysis.providerType = 'corporate';
      analysis.connectionType = 'business';
    } else if (/verizon|at&t|t-mobile|comcast|spectrum/i.test(isp)) {
      analysis.providerType = 'telco-us';
      analysis.connectionType = 'broadband';
    } else if (/vodafone|orange|telefonica|deutsche telekom/i.test(isp)) {
      analysis.providerType = 'telco-europe';
      analysis.connectionType = 'broadband';
    } else if (/aws|amazon|google|microsoft|azure|digitalocean|linode|vultr|cloudflare/i.test(isp)) {
      analysis.providerType = 'cloud-hosting';
      analysis.connectionType = 'datacenter';
      analysis.riskIndicators.push('datacenter-ip');
    }

    // VPN/Proxy indicators
    if (data.isProxy === true) {
      analysis.riskIndicators.push('proxy-detected');
    }
    if (data.isHosting === true) {
      analysis.riskIndicators.push('hosting-provider');
    }
    if (data.isMobile === true) {
      analysis.connectionType = 'mobile-data';
    }

    return analysis;
  },

  /**
   * Get approximate location description
   */
  getLocationDescription: (data) => {
    if (!data.city && !data.country) return 'Lokasi tidak terdeteksi';
    
    const parts = [];
    if (data.city) parts.push(data.city);
    if (data.region && data.region !== data.city) parts.push(data.region);
    if (data.country) parts.push(data.country);
    
    return parts.join(', ');
  }
};

// ============================================
// 13. VPN / PROXY DETECTION
// ============================================
const VPNDetector = {
  /**
   * Detect potential VPN/Proxy usage
   */
  detect: async (ipData, timezoneData, connectionData) => {
    const indicators = {
      isLikelyVPN: false,
      isLikelyProxy: false,
      confidence: 0,
      reasons: [],
    };

    // Check 1: Timezone mismatch
    if (ipData && ipData.timezone && timezoneData && timezoneData.timezone) {
      if (ipData.timezone !== timezoneData.timezone) {
        indicators.reasons.push({
          type: 'timezone-mismatch',
          detail: `IP timezone: ${ipData.timezone}, Browser timezone: ${timezoneData.timezone}`,
          weight: 30
        });
      }
    }

    // Check 2: Hosting/Datacenter IP
    if (ipData && ipData.analysis) {
      if (ipData.analysis.riskIndicators.includes('datacenter-ip')) {
        indicators.reasons.push({
          type: 'datacenter-ip',
          detail: 'IP belongs to cloud/hosting provider',
          weight: 40
        });
      }
      if (ipData.analysis.riskIndicators.includes('hosting-provider')) {
        indicators.reasons.push({
          type: 'hosting-provider',
          detail: 'IP flagged as hosting provider',
          weight: 35
        });
      }
      if (ipData.analysis.riskIndicators.includes('proxy-detected')) {
        indicators.reasons.push({
          type: 'proxy-api-flag',
          detail: 'IP flagged as proxy by API',
          weight: 50
        });
        indicators.isLikelyProxy = true;
      }
    }

    // Check 3: WebRTC leak comparison (if public IP detected via WebRTC)
    // This is done in the main collector

    // Check 4: Known VPN port patterns (limited detection)
    // Most VPNs use standard HTTPS port now, so this is less reliable

    // Check 5: Language/Country mismatch
    if (ipData && ipData.countryCode) {
      const browserLang = (navigator.language || 'en').toLowerCase();
      const countryLangMap = {
        'ID': ['id'],
        'US': ['en'],
        'GB': ['en'],
        'DE': ['de'],
        'FR': ['fr'],
        'JP': ['ja'],
        'KR': ['ko'],
        'CN': ['zh'],
        'TW': ['zh'],
        'TH': ['th'],
        'VN': ['vi'],
      };
      
      const expectedLangs = countryLangMap[ipData.countryCode] || [];
      if (expectedLangs.length > 0 && !expectedLangs.some(l => browserLang.startsWith(l))) {
        indicators.reasons.push({
          type: 'language-mismatch',
          detail: `Browser language: ${browserLang}, IP country: ${ipData.countryCode}`,
          weight: 20
        });
      }
    }

    // Calculate confidence
    const totalWeight = indicators.reasons.reduce((sum, r) => sum + r.weight, 0);
    indicators.confidence = Math.min(totalWeight, 100);
    indicators.isLikelyVPN = indicators.confidence >= 40;

    return indicators;
  }
};

// ============================================
// 14. INCOGNITO / PRIVATE MODE DETECTION
// ============================================
const IncognitoDetector = {
  /**
   * Detect private browsing mode
   */
  detect: async () => {
    const results = {
      isIncognito: false,
      confidence: 'low',
      method: null,
      checks: {}
    };

    // Method 1: Storage quota (Chrome/Edge)
    try {
      if (navigator.storage && navigator.storage.estimate) {
        const { quota } = await navigator.storage.estimate();
        // In incognito, quota is typically very limited (~120MB)
        results.checks.storageQuota = quota;
        if (quota && quota < 130000000) { // Less than ~130MB
          results.isIncognito = true;
          results.confidence = 'high';
          results.method = 'storage-quota';
        }
      }
    } catch (e) {
      results.checks.storageQuotaError = e.message;
    }

    // Method 2: FileSystem API (Chrome - deprecated but still works)
    try {
      if (window.webkitRequestFileSystem) {
        await new Promise((resolve, reject) => {
          window.webkitRequestFileSystem(
            window.TEMPORARY,
            100,
            () => resolve(false),
            () => {
              results.isIncognito = true;
              results.confidence = 'high';
              results.method = 'filesystem-api';
              resolve(true);
            }
          );
        });
      }
    } catch (e) {
      // FileSystem denied = likely incognito
      results.checks.fileSystemError = e.message;
    }

    // Method 3: IndexedDB behavior (Firefox)
    try {
      const db = indexedDB.open('incognito-test');
      db.onerror = () => {
        results.isIncognito = true;
        results.confidence = 'medium';
        results.method = 'indexeddb-error';
      };
      results.checks.indexedDB = 'available';
    } catch (e) {
      results.isIncognito = true;
      results.confidence = 'medium';
      results.method = 'indexeddb-exception';
      results.checks.indexedDBError = e.message;
    }

    // Method 4: Safari specific
    try {
      if (typeof safari !== 'undefined' && safari.pushNotification) {
        // Safari private mode check
        const permissionData = safari.pushNotification.permission('web.com.example');
        if (permissionData.permission === 'denied') {
          // Could be incognito or just denied
          results.checks.safariPush = 'denied';
        }
      }
    } catch (e) {
      results.checks.safariPushError = e.message;
    }

    // Method 5: Performance memory (Chrome)
    try {
      if (performance.memory) {
        const { jsHeapSizeLimit } = performance.memory;
        results.checks.jsHeapSizeLimit = jsHeapSizeLimit;
        // Incognito typically has lower limits
        if (jsHeapSizeLimit && jsHeapSizeLimit < 500000000) {
          results.checks.lowMemoryLimit = true;
        }
      }
    } catch (e) {}

    // Method 6: Service Worker registration attempt
    try {
      if ('serviceWorker' in navigator) {
        const registrations = await navigator.serviceWorker.getRegistrations();
        results.checks.serviceWorkerCount = registrations.length;
        // Can't register new SW in incognito in some browsers
      }
    } catch (e) {
      results.checks.serviceWorkerError = e.message;
    }

    return results;
  }
};

// ============================================
// 15. ADBLOCKER DETECTION
// ============================================
const AdBlockDetector = {
  /**
   * Detect if ad blocker is active
   */
  detect: async () => {
    const results = {
      hasAdBlocker: false,
      confidence: 0,
      methods: [],
    };

    // Method 1: Bait element
    try {
      const bait = document.createElement('div');
      bait.innerHTML = '&nbsp;';
      bait.className = 'adsbox ad-banner ad_banner textAd text-ad pub_300x250';
      bait.style.cssText = 'position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;';
      document.body.appendChild(bait);
      
      await Utils3.delay(100);
      
      const isHidden = bait.offsetParent === null || 
                       bait.offsetHeight === 0 || 
                       bait.offsetWidth === 0 ||
                       window.getComputedStyle(bait).display === 'none' ||
                       window.getComputedStyle(bait).visibility === 'hidden';
      
      if (isHidden) {
        results.hasAdBlocker = true;
        results.confidence += 40;
        results.methods.push('bait-element-hidden');
      }
      
      document.body.removeChild(bait);
    } catch (e) {
      results.methods.push('bait-error');
    }

    // Method 2: Blocked request to ad domain
    try {
      const controller = new AbortController();
      const timeoutId = setTimeout(() => controller.abort(), 2000);
      
      // Try to fetch a known ad script
      const response = await fetch('https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js', {
        method: 'HEAD',
        mode: 'no-cors',
        signal: controller.signal
      });
      
      clearTimeout(timeoutId);
      // If we get here, request wasn't blocked
    } catch (e) {
      if (e.name === 'AbortError') {
        // Timeout, might be blocked
        results.confidence += 20;
        results.methods.push('ad-request-timeout');
      } else {
        // Blocked
        results.hasAdBlocker = true;
        results.confidence += 30;
        results.methods.push('ad-request-blocked');
      }
    }

    // Method 3: Check for common ad blocker artifacts
    try {
      // uBlock Origin injects some identifiable elements
      const hasUBlock = !!document.querySelector('[data-ublock]') ||
                        typeof window.uBlock !== 'undefined';
      
      if (hasUBlock) {
        results.hasAdBlocker = true;
        results.confidence += 50;
        results.methods.push('ublock-detected');
      }
    } catch (e) {}

    // Method 4: AdSense check
    try {
      if (typeof window.adsbygoogle === 'undefined' && document.querySelector('script[src*="adsbygoogle"]')) {
        results.hasAdBlocker = true;
        results.confidence += 25;
        results.methods.push('adsense-blocked');
      }
    } catch (e) {}

    // Normalize confidence
    results.confidence = Math.min(results.confidence, 100);
    
    return results;
  }
};

// ============================================
// 16. BROWSER PERMISSIONS
// ============================================
const PermissionsDetector = {
  /**
   * Check all browser permissions
   */
  check: async () => {
    const permissions = {};

    // Permissions to check
    const permissionNames = [
      'geolocation',
      'notifications',
      'push',
      'midi',
      'camera',
      'microphone',
      'speaker-selection',
      'device-info',
      'background-fetch',
      'background-sync',
      'bluetooth',
      'persistent-storage',
      'ambient-light-sensor',
      'accelerometer',
      'gyroscope',
      'magnetometer',
      'clipboard-read',
      'clipboard-write',
      'payment-handler',
      'idle-detection',
      'screen-wake-lock',
      'nfc',
      'display-capture',
      'window-placement',
    ];

    // Check via Permissions API
    if (navigator.permissions && navigator.permissions.query) {
      for (const name of permissionNames) {
        try {
          const result = await navigator.permissions.query({ name });
          permissions[name] = {
            state: result.state, // 'granted', 'denied', 'prompt'
            supported: true
          };
        } catch (e) {
          permissions[name] = {
            state: 'unsupported',
            supported: false
          };
        }
      }
    }

    // Additional checks that don't use Permissions API

    // Notification permission
    if ('Notification' in window) {
      permissions.notifications = {
        state: Notification.permission,
        supported: true
      };
    }

    // Geolocation available
    permissions.geolocationAvailable = {
      state: 'geolocation' in navigator ? 'available' : 'unavailable',
      supported: 'geolocation' in navigator
    };

    // Clipboard
    permissions.clipboardAPIAvailable = {
      state: navigator.clipboard ? 'available' : 'unavailable',
      supported: !!navigator.clipboard
    };

    // Summarize
    const summary = {
      granted: Object.values(permissions).filter(p => p.state === 'granted').length,
      denied: Object.values(permissions).filter(p => p.state === 'denied').length,
      prompt: Object.values(permissions).filter(p => p.state === 'prompt').length,
      unsupported: Object.values(permissions).filter(p => p.state === 'unsupported' || !p.supported).length,
    };

    return {
      permissions,
      summary,
      privacyScore: PermissionsDetector.calculatePrivacyScore(permissions)
    };
  },

  /**
   * Calculate privacy score based on permissions
   */
  calculatePrivacyScore: (permissions) => {
    let score = 100;
    
    // Deduct for granted sensitive permissions
    const sensitivePermissions = {
      'geolocation': 15,
      'camera': 15,
      'microphone': 15,
      'notifications': 5,
      'clipboard-read': 10,
      'bluetooth': 10,
      'display-capture': 15,
    };

    for (const [perm, deduction] of Object.entries(sensitivePermissions)) {
      if (permissions[perm] && permissions[perm].state === 'granted') {
        score -= deduction;
      }
    }

    return Math.max(0, score);
  }
};

// ============================================
// 17. BATTERY API
// ============================================
const BatteryDetector = {
  /**
   * Get battery information (deprecated but still works in some browsers)
   */
  getInfo: async () => {
    try {
      if (!navigator.getBattery) {
        return { supported: false };
      }

      const battery = await navigator.getBattery();

      return {
        supported: true,
        level: battery.level, // 0.0 to 1.0
        levelPercent: Math.round(battery.level * 100),
        charging: battery.charging,
        chargingTime: battery.chargingTime, // seconds until full
        dischargingTime: battery.dischargingTime, // seconds until empty
        // Human readable
        chargingTimeFormatted: BatteryDetector.formatTime(battery.chargingTime),
        dischargingTimeFormatted: BatteryDetector.formatTime(battery.dischargingTime),
        // Analysis
        status: BatteryDetector.getStatus(battery.level, battery.charging),
      };
    } catch (e) {
      return { supported: false, error: e.message };
    }
  },

  /**
   * Format seconds to human readable
   */
  formatTime: (seconds) => {
    if (!seconds || seconds === Infinity) return null;
    
    const hours = Math.floor(seconds / 3600);
    const minutes = Math.floor((seconds % 3600) / 60);
    
    if (hours > 0) {
      return `${hours}h ${minutes}m`;
    }
    return `${minutes}m`;
  },

  /**
   * Get battery status description
   */
  getStatus: (level, charging) => {
    if (charging) {
      return level >= 0.95 ? 'fully-charged' : 'charging';
    }
    if (level >= 0.8) return 'good';
    if (level >= 0.5) return 'moderate';
    if (level >= 0.2) return 'low';
    return 'critical';
  }
};

// ============================================
// 18. STORAGE DETECTION
// ============================================
const StorageDetector = {
  /**
   * Check all storage capabilities
   */
  check: async () => {
    const storage = {};

    // LocalStorage
    try {
      localStorage.setItem('fp_test', '1');
      localStorage.removeItem('fp_test');
      storage.localStorage = {
        enabled: true,
        // Estimate size
        used: StorageDetector.getLocalStorageSize(),
      };
    } catch (e) {
      storage.localStorage = { enabled: false, error: e.message };
    }

    // SessionStorage
    try {
      sessionStorage.setItem('fp_test', '1');
      sessionStorage.removeItem('fp_test');
      storage.sessionStorage = { enabled: true };
    } catch (e) {
      storage.sessionStorage = { enabled: false };
    }

    // IndexedDB
    try {
      const db = indexedDB.open('fp_test');
      storage.indexedDB = { enabled: true };
      db.onsuccess = () => {
        db.result.close();
        indexedDB.deleteDatabase('fp_test');
      };
    } catch (e) {
      storage.indexedDB = { enabled: false };
    }

    // Cookies
    try {
      document.cookie = 'fp_test=1';
      storage.cookies = {
        enabled: document.cookie.includes('fp_test'),
      };
      document.cookie = 'fp_test=; expires=Thu, 01 Jan 1970 00:00:00 GMT';
    } catch (e) {
      storage.cookies = { enabled: false };
    }

    // Storage estimate
    try {
      if (navigator.storage && navigator.storage.estimate) {
        const estimate = await navigator.storage.estimate();
        storage.estimate = {
          quota: estimate.quota,
          usage: estimate.usage,
          quotaFormatted: Utils3.formatBytes(estimate.quota),
          usageFormatted: Utils3.formatBytes(estimate.usage),
          percentUsed: ((estimate.usage / estimate.quota) * 100).toFixed(2) + '%'
        };
      }
    } catch (e) {
      storage.estimate = { error: e.message };
    }

    // Cache API
    try {
      storage.cacheAPI = {
        enabled: 'caches' in window
      };
    } catch (e) {
      storage.cacheAPI = { enabled: false };
    }

    return storage;
  },

  /**
   * Get localStorage size
   */
  getLocalStorageSize: () => {
    try {
      let total = 0;
      for (const key in localStorage) {
        if (localStorage.hasOwnProperty(key)) {
          total += localStorage[key].length * 2; // UTF-16
        }
      }
      return Utils3.formatBytes(total);
    } catch (e) {
      return 'unknown';
    }
  }
};

// ============================================
// 19. FEATURE DETECTION
// ============================================
const FeatureDetector = {
  /**
   * Detect browser features and APIs
   */
  detect: () => {
    return {
      // Core Web APIs
      serviceWorker: 'serviceWorker' in navigator,
      webWorker: typeof Worker !== 'undefined',
      sharedWorker: typeof SharedWorker !== 'undefined',
      webSocket: typeof WebSocket !== 'undefined',
      webRTC: typeof RTCPeerConnection !== 'undefined',
      
      // Modern APIs
      webGL: !!document.createElement('canvas').getContext('webgl'),
      webGL2: !!document.createElement('canvas').getContext('webgl2'),
      webGPU: 'gpu' in navigator,
      webXR: 'xr' in navigator,
      webNFC: 'NDEFReader' in window,
      webBluetooth: 'bluetooth' in navigator,
      webUSB: 'usb' in navigator,
      webSerial: 'serial' in navigator,
      webHID: 'hid' in navigator,
      webMIDI: 'requestMIDIAccess' in navigator,
      
      // Media
      mediaRecorder: typeof MediaRecorder !== 'undefined',
      mediaDevices: 'mediaDevices' in navigator,
      mediaSession: 'mediaSession' in navigator,
      pictureInPicture: 'pictureInPictureEnabled' in document,
      
      // Payment & Credentials
      paymentRequest: typeof PaymentRequest !== 'undefined',
      credentials: 'credentials' in navigator,
      
      // Performance
      performanceObserver: typeof PerformanceObserver !== 'undefined',
      reportingObserver: typeof ReportingObserver !== 'undefined',
      
      // Sensors
      accelerometer: typeof Accelerometer !== 'undefined',
      gyroscope: typeof Gyroscope !== 'undefined',
      magnetometer: typeof Magnetometer !== 'undefined',
      ambientLightSensor: typeof AmbientLightSensor !== 'undefined',
      
      // Other
      geolocation: 'geolocation' in navigator,
      notifications: 'Notification' in window,
      pushManager: 'PushManager' in window,
      speechRecognition: 'SpeechRecognition' in window || 'webkitSpeechRecognition' in window,
      speechSynthesis: 'speechSynthesis' in window,
      vibration: 'vibrate' in navigator,
      share: 'share' in navigator,
      clipboard: 'clipboard' in navigator,
      wakeLock: 'wakeLock' in navigator,
      
      // Canvas
      canvas2D: !!document.createElement('canvas').getContext('2d'),
      offscreenCanvas: typeof OffscreenCanvas !== 'undefined',
      
      // Intersection/Resize
      intersectionObserver: typeof IntersectionObserver !== 'undefined',
      resizeObserver: typeof ResizeObserver !== 'undefined',
      mutationObserver: typeof MutationObserver !== 'undefined',
      
      // File
      fileReader: typeof FileReader !== 'undefined',
      fileSystem: 'showOpenFilePicker' in window,
      
      // Misc
      indexedDB: typeof indexedDB !== 'undefined',
      crypto: typeof crypto !== 'undefined',
      subtleCrypto: crypto && 'subtle' in crypto,
      broadcastChannel: typeof BroadcastChannel !== 'undefined',
    };
  },

  /**
   * Count supported features
   */
  getSummary: (features) => {
    const total = Object.keys(features).length;
    const supported = Object.values(features).filter(Boolean).length;
    return {
      total,
      supported,
      percentage: ((supported / total) * 100).toFixed(1) + '%'
    };
  }
};

// ============================================
// 20. HISTORY & BEHAVIOR
// ============================================
const BehaviorDetector = {
  /**
   * Get behavioral signals
   */
  getInfo: () => {
    return {
      // History
      historyLength: window.history.length,
      
      // Referrer
      referrer: document.referrer || null,
      hasReferrer: !!document.referrer,
      
      // Page visibility
      visibilityState: document.visibilityState,
      hidden: document.hidden,
      
      // Focus
      hasFocus: document.hasFocus(),
      
      // Fullscreen
      fullscreenEnabled: document.fullscreenEnabled || false,
      isFullscreen: !!document.fullscreenElement,
      
      // Document
      documentTitle: document.title,
      characterSet: document.characterSet,
      compatMode: document.compatMode,
      designMode: document.designMode,
      
      // Window
      isSecureContext: window.isSecureContext,
      crossOriginIsolated: window.crossOriginIsolated || false,
      
      // Performance timing
      pageLoadTime: BehaviorDetector.getPageLoadTime(),
      
      // Input method hints
      onTouchStart: 'ontouchstart' in window,
      pointerEnabled: 'PointerEvent' in window,
      maxTouchPoints: navigator.maxTouchPoints || 0,
    };
  },

  /**
   * Get page load time
   */
  getPageLoadTime: () => {
    try {
      const timing = performance.timing || {};
      if (timing.loadEventEnd && timing.navigationStart) {
        return timing.loadEventEnd - timing.navigationStart;
      }
      
      // Use Navigation Timing API Level 2
      const [entry] = performance.getEntriesByType('navigation');
      if (entry) {
        return Math.round(entry.loadEventEnd);
      }
    } catch (e) {}
    return null;
  }
};

// ============================================
// 21. DO NOT TRACK & GPC
// ============================================
const PrivacySignalsDetector = {
  /**
   * Get privacy-related browser signals
   */
  detect: () => {
    return {
      // Do Not Track
      doNotTrack: navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack || null,
      doNotTrackEnabled: ['1', 'yes'].includes((navigator.doNotTrack || '').toLowerCase()),
      
      // Global Privacy Control
      globalPrivacyControl: navigator.globalPrivacyControl || null,
      gpcEnabled: navigator.globalPrivacyControl === true,
      
      // Cookies
      cookieEnabled: navigator.cookieEnabled,
      
      // Third-party cookies (indirect detection)
      // Note: Direct detection requires actual cross-origin request
      
      // Tracking protection (indirect signals)
      hasStrictPrivacy: PrivacySignalsDetector.detectStrictPrivacy(),
    };
  },

  /**
   * Detect strict privacy mode
   */
  detectStrictPrivacy: () => {
    // Check for signs of privacy-focused setup
    const signals = [];
    
    if (navigator.doNotTrack === '1') signals.push('dnt');
    if (navigator.globalPrivacyControl) signals.push('gpc');
    
    // Firefox tracking protection
    try {
      if (typeof InstallTrigger !== 'undefined') {
        // Firefox
        signals.push('firefox');
      }
    } catch (e) {}
    
    // Brave browser
    if (navigator.brave && navigator.brave.isBrave) {
      signals.push('brave');
    }
    
    // Tor browser (very limited detection)
    if (navigator.plugins && navigator.plugins.length === 0 && 
        navigator.languages && navigator.languages.length <= 1) {
      signals.push('possible-tor');
    }
    
    return signals;
  }
};

// ============================================
// COMBINED EXTERNAL & DETECTION COLLECTOR
// ============================================
const ExternalDetection = {
  /**
   * Collect all external and detection data
   */
  collect: async (updateProgress) => {
    const results = {};

    // IP & Geolocation
    if (updateProgress) updateProgress('network', 'active');
    results.ip = await IPDetector.getInfo();
    if (updateProgress) updateProgress('network', 'done');

    // Get timezone data from Part 1 for VPN detection
    const basicFingerprint = window.FingerprintApp.BasicFingerprint.collect();
    
    // VPN Detection
    results.vpn = await VPNDetector.detect(
      results.ip, 
      basicFingerprint.timezone,
      basicFingerprint.connection
    );

    // Incognito Detection
    results.incognito = await IncognitoDetector.detect();

    // AdBlocker Detection
    results.adBlocker = await AdBlockDetector.detect();

    // Permissions
    results.permissions = await PermissionsDetector.check();

    // Battery
    results.battery = await BatteryDetector.getInfo();

    // Storage
    results.storage = await StorageDetector.check();

    // Features
    results.features = FeatureDetector.detect();
    results.featuresSummary = FeatureDetector.getSummary(results.features);

    // Behavior
    results.behavior = BehaviorDetector.getInfo();

    // Privacy Signals
    results.privacySignals = PrivacySignalsDetector.detect();

    return results;
  }
};

// ============================================
// EXPORT / ATTACH TO WINDOW
// ============================================
window.FingerprintApp.IPDetector = IPDetector;
window.FingerprintApp.VPNDetector = VPNDetector;
window.FingerprintApp.IncognitoDetector = IncognitoDetector;
window.FingerprintApp.AdBlockDetector = AdBlockDetector;
window.FingerprintApp.PermissionsDetector = PermissionsDetector;
window.FingerprintApp.BatteryDetector = BatteryDetector;
window.FingerprintApp.StorageDetector = StorageDetector;
window.FingerprintApp.FeatureDetector = FeatureDetector;
window.FingerprintApp.BehaviorDetector = BehaviorDetector;
window.FingerprintApp.PrivacySignalsDetector = PrivacySignalsDetector;
window.FingerprintApp.ExternalDetection = ExternalDetection;

console.log('🌐 Fingerprint App - Part 3 Loaded (External APIs, VPN, Incognito, Permissions)');


/**
 * ============================================
 * WHO ARE YOU? - Browser Fingerprint Demo
 * ============================================
 * 
 * app.js - Part 4: AI & UI
 * - Data Categorization (privacy-safe for AI)
 * - AI API Integration
 * - Privacy Score Calculation
 * - UI Rendering & Animations
 * - Typing Effect
 * - Auto-Download Demo
 * - Recommendations Engine
 * ============================================
 */

// Get references from previous parts
// Part 4 - akses langsung  
const FP4 = window.FingerprintApp;

// ============================================
// 22. DATA CATEGORIZER (Privacy-Safe for AI)
// ============================================
const DataCategorizer = {
  /**
   * Convert raw fingerprint data to categorized format
   * This ensures no sensitive data is sent to AI
   */
  categorize: (rawData) => {
    const categorized = {
      // Device Category
      device: window.FingerprintApp.DataCategorizer.categorizeDevice(rawData),
      
      // Network Category
      network: window.FingerprintApp.DataCategorizer.categorizeNetwork(rawData),
      
      // Browser Category
      browser: window.FingerprintApp.DataCategorizer.categorizeBrowser(rawData),
      
      // Hardware Category
      hardware: window.FingerprintApp.DataCategorizer.categorizeHardware(rawData),
      
      // Privacy Category
      privacy: window.FingerprintApp.DataCategorizer.categorizePrivacy(rawData),
      
      // Behavior Category
      behavior: window.FingerprintApp.DataCategorizer.categorizeBehavior(rawData),
      
      // User Profile Estimation
      profile: window.FingerprintApp.DataCategorizer.estimateProfile(rawData),
      
      // Language for AI response
      language: rawData.basic?.userLanguage || 'id',
      
      // Timestamp
      analyzedAt: new Date().toISOString(),
    };

    return categorized;
  },

  /**
   * Categorize device information
   */
  categorizeDevice: (data) => {
    const basic = data.basic || {};
    const device = basic.device || {};
    const screen = basic.screen || {};
    
    let deviceClass = 'unknown';
    let priceRange = 'unknown';
    
    // Determine device class based on screen and DPR
    if (basic.deviceType === 'mobile') {
      const dpr = screen.devicePixelRatio || 1;
      const height = Math.max(screen.width || 0, screen.height || 0);
      
      if (dpr >= 3 && height >= 2400) {
        deviceClass = 'flagship-smartphone';
        priceRange = 'premium';
      } else if (dpr >= 2.5 && height >= 2000) {
        deviceClass = 'mid-range-smartphone';
        priceRange = 'mid-range';
      } else if (dpr >= 2) {
        deviceClass = 'budget-smartphone';
        priceRange = 'budget';
      } else {
        deviceClass = 'entry-smartphone';
        priceRange = 'entry';
      }
    } else if (basic.deviceType === 'tablet') {
      deviceClass = 'tablet';
      priceRange = screen.devicePixelRatio >= 2 ? 'premium' : 'standard';
    } else {
      deviceClass = 'desktop';
      priceRange = 'varies';
    }

    return {
      type: basic.deviceType || 'unknown',
      class: deviceClass,
      brand: device.brand || 'unknown',
      series: device.series || null,
      priceRange,
      os: basic.os?.name || 'unknown',
      osVersion: basic.os?.version || null,
      isRetina: screen.isRetina || false,
      screenCategory: screen.screenType || 'unknown',
      orientation: screen.orientation?.split('-')[0] || 'unknown',
      touchCapable: (basic.navigator?.maxTouchPoints || 0) > 0,
    };
  },

  /**
   * Categorize network information
   */
  categorizeNetwork: (data) => {
    const connection = data.basic?.connection || {};
    const ip = data.external?.ip || {};
    const vpn = data.external?.vpn || {};

    // Connection type category
    let connectionCategory = 'unknown';
    if (connection.isWifi) {
      connectionCategory = 'wifi';
      if (connection.downlink >= 50) connectionCategory = 'wifi-fast';
      else if (connection.downlink >= 10) connectionCategory = 'wifi-standard';
      else connectionCategory = 'wifi-slow';
    } else if (connection.isCellular) {
      connectionCategory = 'cellular';
      if (connection.effectiveType === '4g') connectionCategory = 'cellular-4g';
      else if (connection.effectiveType === '3g') connectionCategory = 'cellular-3g';
      else connectionCategory = 'cellular-slow';
    } else if (connection.type === 'ethernet') {
      connectionCategory = 'wired';
    }

    // ISP category (not actual name)
    let ispCategory = 'unknown';
    if (ip.analysis) {
      ispCategory = ip.analysis.providerType || 'unknown';
    }

    // Location category (region only, not city)
    let locationCategory = 'unknown';
    if (ip.countryCode) {
      if (ip.countryCode === 'ID') locationCategory = 'indonesia';
      else if (['SG', 'MY', 'TH', 'VN', 'PH'].includes(ip.countryCode)) locationCategory = 'southeast-asia';
      else if (['US', 'CA'].includes(ip.countryCode)) locationCategory = 'north-america';
      else if (['GB', 'DE', 'FR', 'NL'].includes(ip.countryCode)) locationCategory = 'europe';
      else if (['JP', 'KR', 'CN', 'TW', 'HK'].includes(ip.countryCode)) locationCategory = 'east-asia';
      else if (['AU', 'NZ'].includes(ip.countryCode)) locationCategory = 'oceania';
      else locationCategory = 'other';
    }

    return {
      connectionType: connectionCategory,
      connectionQuality: connection.networkQuality || 'unknown',
      speedCategory: connection.downlink >= 50 ? 'fast' : (connection.downlink >= 10 ? 'moderate' : 'slow'),
      ispCategory,
      locationCategory,
      countryCode: ip.countryCode || null,
      timezone: data.basic?.timezone?.timezone || null,
      isVPN: vpn.isLikelyVPN || false,
      isProxy: vpn.isLikelyProxy || false,
      vpnConfidence: vpn.confidence || 0,
      dataSaver: connection.saveData || false,
    };
  },

  /**
   * Categorize browser information
   */
  categorizeBrowser: (data) => {
    const browser = data.basic?.browser || {};
    const navigator = data.basic?.navigator || {};
    const features = data.external?.features || {};
    const featuresSummary = data.external?.featuresSummary || {};

    // Browser age/update status
    let browserAge = 'unknown';
    if (browser.version) {
      const majorVersion = parseInt(browser.version);
      // This is simplified - in production you'd check against current versions
      if (browser.name === 'Chrome' && majorVersion >= 120) browserAge = 'latest';
      else if (browser.name === 'Chrome' && majorVersion >= 110) browserAge = 'recent';
      else if (browser.name === 'Chrome' && majorVersion >= 100) browserAge = 'outdated';
      else browserAge = 'very-outdated';
    }

    return {
      name: browser.name || 'unknown',
      isChromium: ['Chrome', 'Edge', 'Opera', 'Brave', 'Vivaldi'].includes(browser.name),
      isFirefox: browser.name === 'Firefox',
      isSafari: browser.name === 'Safari',
      isMobile: ['Chrome iOS', 'Firefox iOS', 'Samsung Internet'].includes(browser.name),
      updateStatus: browserAge,
      pluginsCount: navigator.pluginsCount || 0,
      cookiesEnabled: navigator.cookieEnabled !== false,
      featuresSupported: parseInt(featuresSummary.percentage) || 0,
      hasModernAPIs: features.webGL2 && features.serviceWorker && features.webRTC,
      isAutomated: navigator.webdriver === true,
    };
  },

  /**
   * Categorize hardware information
   */
  categorizeHardware: (data) => {
    const navigator = data.basic?.navigator || {};
    const webgl = data.advanced?.webgl || {};
    const screen = data.basic?.screen || {};
    const fonts = data.advanced?.fonts || {};

    // CPU category
    let cpuCategory = 'unknown';
    const cores = navigator.hardwareConcurrency;
    if (cores >= 16) cpuCategory = 'high-end';
    else if (cores >= 8) cpuCategory = 'mid-range';
    else if (cores >= 4) cpuCategory = 'standard';
    else if (cores >= 2) cpuCategory = 'low-end';
    else cpuCategory = 'minimal';

    // RAM category
    let ramCategory = 'unknown';
    const ram = navigator.deviceMemory;
    if (ram >= 16) ramCategory = 'high';
    else if (ram >= 8) ramCategory = 'good';
    else if (ram >= 4) ramCategory = 'standard';
    else if (ram >= 2) ramCategory = 'low';
    else ramCategory = 'minimal';

    // GPU category
    let gpuCategory = 'unknown';
    if (webgl.gpuTier) {
      gpuCategory = webgl.gpuTier;
    }

    return {
      cpuCategory,
      cpuCores: cores || null,
      ramCategory,
      ramGB: ram || null,
      gpuBrand: webgl.gpuBrand || 'unknown',
      gpuCategory,
      gpuTier: webgl.gpuTier || 'unknown',
      screenResolution: screen.width && screen.height ? `${screen.width}x${screen.height}` : null,
      colorDepth: screen.colorDepth || null,
      pixelRatio: screen.devicePixelRatio || 1,
      fontsCount: fonts.count || 0,
      isDeveloper: fonts.insights?.isDeveloper || false,
      isDesigner: fonts.insights?.isDesigner || false,
    };
  },

  /**
   * Categorize privacy status
   */
  categorizePrivacy: (data) => {
    const incognito = data.external?.incognito || {};
    const adBlocker = data.external?.adBlocker || {};
    const privacySignals = data.external?.privacySignals || {};
    const permissions = data.external?.permissions || {};
    const webrtc = data.advanced?.webrtc || {};
    const canvas = data.advanced?.canvas || {};
    const canvasBlocking = data.advanced?.canvasBlocking || {};

    // Calculate privacy measures
    const privacyMeasures = [];
    if (incognito.isIncognito) privacyMeasures.push('incognito');
    if (adBlocker.hasAdBlocker) privacyMeasures.push('adblock');
    if (privacySignals.doNotTrackEnabled) privacyMeasures.push('dnt');
    if (privacySignals.gpcEnabled) privacyMeasures.push('gpc');
    if (canvasBlocking.blocked) privacyMeasures.push('canvas-blocking');
    if (privacySignals.hasStrictPrivacy?.includes('brave')) privacyMeasures.push('brave');
    if (privacySignals.hasStrictPrivacy?.includes('firefox')) privacyMeasures.push('firefox-etp');

    // Vulnerabilities
    const vulnerabilities = [];
    if (webrtc.isLeaking) vulnerabilities.push('webrtc-leak');
    if (!privacySignals.doNotTrackEnabled) vulnerabilities.push('no-dnt');
    if (!adBlocker.hasAdBlocker) vulnerabilities.push('no-adblock');
    if (!incognito.isIncognito) vulnerabilities.push('normal-mode');
    if (permissions.summary?.granted > 3) vulnerabilities.push('many-permissions');

    return {
      isIncognito: incognito.isIncognito || false,
      hasAdBlocker: adBlocker.hasAdBlocker || false,
      dntEnabled: privacySignals.doNotTrackEnabled || false,
      gpcEnabled: privacySignals.gpcEnabled || false,
      webrtcLeaking: webrtc.isLeaking || false,
      webrtcLeakCount: webrtc.leakCount || 0,
      canvasBlocked: canvasBlocking.blocked || false,
      privacyMeasures,
      privacyMeasuresCount: privacyMeasures.length,
      vulnerabilities,
      vulnerabilitiesCount: vulnerabilities.length,
      permissionsGranted: permissions.summary?.granted || 0,
      privacyBrowser: privacySignals.hasStrictPrivacy || [],
    };
  },

  /**
   * Categorize behavior patterns
   */
  categorizeBehavior: (data) => {
    const behavior = data.external?.behavior || {};
    const battery = data.external?.battery || {};
    const storage = data.external?.storage || {};

    // Session intensity
    let sessionIntensity = 'light';
    if (behavior.historyLength >= 20) sessionIntensity = 'heavy';
    else if (behavior.historyLength >= 10) sessionIntensity = 'moderate';
    else if (behavior.historyLength >= 5) sessionIntensity = 'light';
    else sessionIntensity = 'minimal';

    return {
      sessionIntensity,
      historyDepth: behavior.historyLength || 0,
      hasReferrer: behavior.hasReferrer || false,
      referrerType: behavior.referrer ? (behavior.referrer.includes('google') ? 'search' : 'other') : 'direct',
      isSecure: behavior.isSecureContext || false,
      batteryLevel: battery.levelPercent || null,
      isCharging: battery.charging || null,
      storageUsed: storage.estimate?.percentUsed || 'unknown',
      touchUser: behavior.onTouchStart || false,
    };
  },

  /**
   * Estimate user profile from all data
   */
  estimateProfile: (data) => {
    const traits = [];
    const demographics = {};

    const hardware = window.FingerprintApp.DataCategorizer.categorizeHardware(data);
    const device = window.FingerprintApp.DataCategorizer.categorizeDevice(data);
    const privacy = window.FingerprintApp.DataCategorizer.categorizePrivacy(data);
    const browser = window.FingerprintApp.DataCategorizer.categorizeBrowser(data);
    const network = window.FingerprintApp.DataCategorizer.categorizeNetwork(data);

    // Tech savviness
    if (hardware.isDeveloper) traits.push('developer');
    if (hardware.isDesigner) traits.push('designer');
    if (privacy.privacyMeasuresCount >= 3) traits.push('privacy-conscious');
    if (privacy.hasAdBlocker) traits.push('ad-averse');
    if (browser.hasModernAPIs) traits.push('modern-browser-user');
    if (hardware.gpuCategory === 'high-end' || hardware.gpuCategory === 'flagship-mobile') traits.push('gamer');

    // Device preference
    if (device.type === 'mobile') traits.push('mobile-first');
    else if (device.type === 'desktop') traits.push('desktop-user');
    
    // Economic indicators (from device)
    if (device.priceRange === 'premium') {
      demographics.economicBracket = 'high';
    } else if (device.priceRange === 'mid-range') {
      demographics.economicBracket = 'middle';
    } else {
      demographics.economicBracket = 'budget-conscious';
    }

    // Age estimation (very rough, based on browser/device choices)
    if (browser.name === 'Firefox' || privacy.privacyMeasuresCount >= 2) {
      demographics.ageRange = '25-40';
    } else if (device.brand === 'Apple') {
      demographics.ageRange = '20-35';
    } else if (browser.name === 'Samsung Internet') {
      demographics.ageRange = '30-50';
    } else {
      demographics.ageRange = '18-45';
    }

    // Tech level
    let techLevel = 'average';
    if (hardware.isDeveloper || privacy.privacyMeasuresCount >= 3) {
      techLevel = 'advanced';
    } else if (privacy.vulnerabilitiesCount >= 4) {
      techLevel = 'basic';
    }

    return {
      traits,
      demographics,
      techLevel,
      riskProfile: privacy.vulnerabilitiesCount >= 3 ? 'high-risk' : (privacy.vulnerabilitiesCount >= 1 ? 'moderate-risk' : 'low-risk'),
    };
  }
};

// ============================================
// 23. PRIVACY SCORE CALCULATOR
// ============================================
const PrivacyScoreCalculator = {
  /**
   * Calculate overall privacy score (0-100)
   */
  calculate: (rawData, categorized) => {
    let score = 100;
    const deductions = [];
    const bonuses = [];

    // ===== DEDUCTIONS =====

    // WebRTC Leak (-15)
    if (categorized.privacy.webrtcLeaking) {
      score -= 15;
      deductions.push({ reason: 'WebRTC IP leak detected', points: 15 });
    }

    // No Ad Blocker (-10)
    if (!categorized.privacy.hasAdBlocker) {
      score -= 10;
      deductions.push({ reason: 'No ad blocker detected', points: 10 });
    }

    // No Do Not Track (-5)
    if (!categorized.privacy.dntEnabled) {
      score -= 5;
      deductions.push({ reason: 'Do Not Track not enabled', points: 5 });
    }

    // Canvas fingerprinting possible (-10)
    if (!categorized.privacy.canvasBlocked) {
      score -= 10;
      deductions.push({ reason: 'Canvas fingerprinting possible', points: 10 });
    }

    // Many fonts detected (-5)
    if (categorized.hardware.fontsCount > 50) {
      score -= 5;
      deductions.push({ reason: 'Many fonts detected (unique fingerprint)', points: 5 });
    }

    // Not in incognito (-5)
    if (!categorized.privacy.isIncognito) {
      score -= 5;
      deductions.push({ reason: 'Not using private browsing', points: 5 });
    }

    // Multiple permissions granted (-2 each, max -10)
    const permDeduction = Math.min(categorized.privacy.permissionsGranted * 2, 10);
    if (permDeduction > 0) {
      score -= permDeduction;
      deductions.push({ reason: `${categorized.privacy.permissionsGranted} permissions granted`, points: permDeduction });
    }

    // Browser outdated (-10)
    if (categorized.browser.updateStatus === 'very-outdated') {
      score -= 10;
      deductions.push({ reason: 'Browser severely outdated', points: 10 });
    } else if (categorized.browser.updateStatus === 'outdated') {
      score -= 5;
      deductions.push({ reason: 'Browser outdated', points: 5 });
    }

    // High resolution screen (more unique) (-3)
    if (categorized.hardware.pixelRatio >= 3) {
      score -= 3;
      deductions.push({ reason: 'High-res screen (more unique)', points: 3 });
    }

    // Cookies enabled (-5)
    if (categorized.browser.cookiesEnabled) {
      score -= 5;
      deductions.push({ reason: 'Cookies enabled', points: 5 });
    }

    // ===== BONUSES =====

    // VPN detected (+15)
    if (categorized.network.isVPN) {
      score += 15;
      bonuses.push({ reason: 'VPN/Proxy detected', points: 15 });
    }

    // Incognito mode (+10)
    if (categorized.privacy.isIncognito) {
      score += 10;
      bonuses.push({ reason: 'Private browsing mode', points: 10 });
    }

    // Privacy browser (+10)
    if (categorized.privacy.privacyBrowser.includes('brave')) {
      score += 10;
      bonuses.push({ reason: 'Using Brave browser', points: 10 });
    }
    if (categorized.privacy.privacyBrowser.includes('firefox')) {
      score += 5;
      bonuses.push({ reason: 'Firefox with ETP', points: 5 });
    }

    // GPC enabled (+5)
    if (categorized.privacy.gpcEnabled) {
      score += 5;
      bonuses.push({ reason: 'Global Privacy Control enabled', points: 5 });
    }

    // Normalize score
    score = Math.max(0, Math.min(100, score));

    // Determine status
    let status, statusKey;
    if (score >= 80) {
      status = 'Terlindungi dengan baik';
      statusKey = 'good';
    } else if (score >= 60) {
      status = 'Cukup terlindungi';
      statusKey = 'moderate';
    } else if (score >= 40) {
      status = 'Rentan';
      statusKey = 'vulnerable';
    } else {
      status = 'Sangat rentan';
      statusKey = 'critical';
    }

    return {
      score,
      status,
      statusKey,
      deductions,
      bonuses,
      totalDeductions: deductions.reduce((sum, d) => sum + d.points, 0),
      totalBonuses: bonuses.reduce((sum, b) => sum + b.points, 0),
    };
  }
};

// ============================================
// 24. AI API INTEGRATION
// ============================================
const AIAnalyzer = {
  /**
   * Call AI API via Cloudflare Worker
   */
  analyze: async (categorizedData, privacyScore, rawDataSummary) => {
    try {
      const payload = {
        categorized: categorizedData,
        privacyScore: privacyScore,
        summary: rawDataSummary,
        requestedLanguage: categorizedData.language || 'id',
      };

      const response = await fetch('/api/analyze', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(payload),
      });

      if (!response.ok) {
        throw new Error(`API error: ${response.status}`);
      }

      const result = await response.json();
      return {
        success: true,
        narrative: result.narrative || result.content || result.message,
        recommendations: result.recommendations || [],
      };
    } catch (error) {
      console.error('AI API Error:', error);
      
      // Fallback to local narrative generation
      return {
        success: false,
        narrative: window.FingerprintApp.AIAnalyzer.generateFallbackNarrative(categorizedData, privacyScore),
        recommendations: window.FingerprintApp.AIAnalyzer.generateRecommendations(categorizedData, privacyScore),
        error: error.message,
      };
    }
  },

  /**
   * Generate fallback narrative if API fails
   */
  generateFallbackNarrative: (data, score) => {
    const lang = data.language || 'id';
    const device = data.device || {};
    const network = data.network || {};
    const hardware = data.hardware || {};
    const privacy = data.privacy || {};
    const profile = data.profile || {};

    if (lang === 'id') {
      return window.FingerprintApp.AIAnalyzer.generateIndonesianNarrative(device, network, hardware, privacy, profile, score);
    } else {
      return window.FingerprintApp.AIAnalyzer.generateEnglishNarrative(device, network, hardware, privacy, profile, score);
    }
  },

  /**
   * Generate Indonesian narrative
   */
  generateIndonesianNarrative: (device, network, hardware, privacy, profile, score) => {
    let narrative = '';

    // Opening - Device
    if (device.brand && device.brand !== 'unknown') {
      narrative += `Hai, pengguna ${device.brand}${device.series ? ' ' + device.series : ''}! `;
    } else {
      narrative += `Hai, pengguna ${device.type === 'mobile' ? 'smartphone' : device.type}! `;
    }

    // OS
    if (device.os && device.os !== 'unknown') {
      narrative += `Aku tahu kamu menggunakan ${device.os}${device.osVersion ? ' versi ' + device.osVersion : ''}. `;
    }

    // Connection type
    narrative += '\n\n';
    if (network.connectionType.includes('wifi')) {
      narrative += `Kamu sedang terhubung via WiFi`;
      if (network.speedCategory === 'fast') {
        narrative += ` dengan kecepatan tinggi — sepertinya koneksi fiber atau WiFi premium. `;
      } else if (network.speedCategory === 'moderate') {
        narrative += ` dengan kecepatan standar. `;
      } else {
        narrative += `, tapi koneksinya agak lambat. `;
      }
    } else if (network.connectionType.includes('cellular')) {
      narrative += `Kamu sedang menggunakan data seluler${network.connectionType.includes('4g') ? ' 4G/LTE' : ''}. `;
      if (network.dataSaver) {
        narrative += `Mode hemat data aktif — mungkin kuota terbatas? `;
      }
    }

    // Location hint
    if (network.locationCategory === 'indonesia') {
      narrative += `Dari Indonesia ya? `;
    }

    // Hardware
    narrative += '\n\n';
    if (hardware.gpuBrand && hardware.gpuBrand !== 'unknown') {
      narrative += `GPU ${hardware.gpuBrand}${hardware.gpuCategory === 'high-end' || hardware.gpuCategory === 'flagship-mobile' ? ' kelas atas' : ''} terdeteksi. `;
      if (hardware.gpuCategory === 'high-end') {
        narrative += `Sering main game berat atau editing video? `;
      }
    }

    if (hardware.cpuCores) {
      narrative += `Processormu punya ${hardware.cpuCores} core`;
      if (hardware.ramGB) {
        narrative += ` dengan RAM ${hardware.ramGB}GB`;
      }
      narrative += `. `;
    }

    // Screen
    if (hardware.screenResolution) {
      narrative += `Layar ${hardware.screenResolution}`;
      if (hardware.pixelRatio >= 2) {
        narrative += ` dengan kepadatan piksel tinggi (${hardware.pixelRatio}x)`;
      }
      narrative += `. `;
    }

    // Developer/Designer detection
    narrative += '\n\n';
    if (hardware.isDeveloper) {
      narrative += `Oh, kamu developer ya? Font coding seperti Fira Code atau JetBrains Mono terdeteksi di sistemmu. `;
    }
    if (hardware.isDesigner) {
      narrative += `Sepertinya kamu berkecimpung di dunia desain — banyak font profesional terinstall. `;
    }

    // Privacy concerns
    narrative += '\n\n';
    if (privacy.webrtcLeaking) {
      narrative += `⚠️ PERINGATAN: WebRTC-mu membocorkan IP lokal! Website bisa mengetahui alamat jaringan internalmu. `;
    }

    if (!privacy.hasAdBlocker) {
      narrative += `Kamu tidak menggunakan ad blocker — setiap website bisa melacakmu dengan mudah. `;
    }

    if (!privacy.dntEnabled) {
      narrative += `"Do Not Track" tidak aktif di browsermu. `;
    }

    if (privacy.isIncognito) {
      narrative += `Bagus, kamu menggunakan mode incognito! Tapi itu tidak cukup untuk privasi penuh. `;
    }

    // Profile traits
    if (profile.traits && profile.traits.length > 0) {
      narrative += '\n\n';
      narrative += `Dari analisis fingerprint, kamu terlihat seperti: `;
      
      const traitDescriptions = {
        'developer': 'seorang developer/programmer',
        'designer': 'profesional kreatif',
        'gamer': 'gamer',
        'privacy-conscious': 'peduli privasi',
        'mobile-first': 'pengguna mobile-first',
        'desktop-user': 'pengguna desktop tradisional',
      };
      
      const traits = profile.traits
        .filter(t => traitDescriptions[t])
        .map(t => traitDescriptions[t]);
      
      if (traits.length > 0) {
        narrative += traits.join(', ') + '. ';
      }
    }

    // Score conclusion
    narrative += '\n\n';
    narrative += `📊 Skor Privasi: ${score.score}/100 — ${score.status}. `;
    
    if (score.score < 40) {
      narrative += `\n\nJejak digitalmu sangat mudah dilacak. Hampir setiap website yang kamu kunjungi bisa mengidentifikasi perangkat dan kebiasaanmu dengan akurat. `;
    } else if (score.score < 60) {
      narrative += `\n\nKamu masih cukup rentan terhadap pelacakan. Beberapa langkah sederhana bisa meningkatkan privasimu secara signifikan. `;
    } else if (score.score < 80) {
      narrative += `\n\nNot bad! Kamu sudah mengambil beberapa langkah untuk melindungi privasi, tapi masih ada ruang untuk improvement. `;
    } else {
      narrative += `\n\nImpressive! Kamu cukup serius tentang privasi digital. Keep it up! `;
    }

    return narrative;
  },

  /**
   * Generate English narrative
   */
  generateEnglishNarrative: (device, network, hardware, privacy, profile, score) => {
    let narrative = '';

    // Opening
    if (device.brand && device.brand !== 'unknown') {
      narrative += `Hey there, ${device.brand}${device.series ? ' ' + device.series : ''} user! `;
    } else {
      narrative += `Hey there, ${device.type} user! `;
    }

    // OS
    if (device.os && device.os !== 'unknown') {
      narrative += `I can see you're running ${device.os}${device.osVersion ? ' ' + device.osVersion : ''}. `;
    }

    // Connection
    narrative += '\n\n';
    if (network.connectionType.includes('wifi')) {
      narrative += `You're connected via WiFi`;
      if (network.speedCategory === 'fast') {
        narrative += ` with blazing fast speeds — fiber connection perhaps? `;
      } else {
        narrative += `. `;
      }
    } else if (network.connectionType.includes('cellular')) {
      narrative += `You're using mobile data${network.connectionType.includes('4g') ? ' (4G/LTE)' : ''}. `;
    }

    // Hardware
    narrative += '\n\n';
    if (hardware.gpuBrand && hardware.gpuBrand !== 'unknown') {
      narrative += `I detected a ${hardware.gpuBrand} GPU. `;
      if (hardware.gpuCategory === 'high-end') {
        narrative += `Quite a powerful setup — gamer or creative professional? `;
      }
    }

    // Privacy
    narrative += '\n\n';
    if (privacy.webrtcLeaking) {
      narrative += `⚠️ WARNING: Your WebRTC is leaking local IP addresses! `;
    }
    if (!privacy.hasAdBlocker) {
      narrative += `No ad blocker detected — you're easily trackable. `;
    }

    // Score
    narrative += '\n\n';
    narrative += `📊 Privacy Score: ${score.score}/100 — ${score.status === 'Terlindungi dengan baik' ? 'Well Protected' : score.status === 'Rentan' ? 'Vulnerable' : 'Critical'}. `;

    return narrative;
  },

  /**
   * Generate recommendations based on findings
   */
  generateRecommendations: (data, score) => {
    const recommendations = [];
    const privacy = data.privacy || {};
    const browser = data.browser || {};

    // WebRTC
    if (privacy.webrtcLeaking) {
      recommendations.push({
        priority: 'high',
        title: 'Disable WebRTC Leak',
        description: 'Install a WebRTC blocker extension or disable it in browser settings',
        icon: '🔴'
      });
    }

    // Ad Blocker
    if (!privacy.hasAdBlocker) {
      recommendations.push({
        priority: 'high',
        title: 'Install Ad Blocker',
        description: 'Use uBlock Origin or similar extension to block trackers',
        icon: '🛡️'
      });
    }

    // Do Not Track
    if (!privacy.dntEnabled) {
      recommendations.push({
        priority: 'medium',
        title: 'Enable Do Not Track',
        description: 'Turn on DNT in your browser privacy settings',
        icon: '🚫'
      });
    }

    // Canvas protection
    if (!privacy.canvasBlocked) {
      recommendations.push({
        priority: 'medium',
        title: 'Block Canvas Fingerprinting',
        description: 'Use CanvasBlocker or similar extension',
        icon: '🎨'
      });
    }

    // VPN suggestion
    if (!data.network?.isVPN) {
      recommendations.push({
        priority: 'medium',
        title: 'Consider Using VPN',
        description: 'A VPN helps hide your real IP and location',
        icon: '🌐'
      });
    }

    // Browser update
    if (browser.updateStatus === 'outdated' || browser.updateStatus === 'very-outdated') {
      recommendations.push({
        priority: 'high',
        title: 'Update Your Browser',
        description: 'Outdated browsers have security vulnerabilities',
        icon: '⚠️'
      });
    }

    // Privacy browser
    if (!privacy.privacyBrowser?.length) {
      recommendations.push({
        priority: 'low',
        title: 'Try a Privacy-Focused Browser',
        description: 'Consider Firefox, Brave, or Tor Browser',
        icon: '🦊'
      });
    }

    return recommendations;
  }
};

// ============================================
// 25. RAW DATA SUMMARY GENERATOR
// ============================================
const DataSummarizer = {
  /**
   * Create summary for AI without sensitive data
   */
  createSummary: (rawData) => {
    const advanced = rawData.advanced || {};
    const external = rawData.external || {};
    const basic = rawData.basic || {};

    return {
      // Counts only, no actual values
      fontsDetected: advanced.fonts?.count || 0,
      extensionsCount: advanced.webgl?.extensionsCount || 0,
      webrtcIpsFound: (advanced.webrtc?.private?.length || 0) + (advanced.webrtc?.public?.length || 0),
      camerasDetected: advanced.mediaDevices?.cameras || 0,
      microphonesDetected: advanced.mediaDevices?.microphones || 0,
      featuresSupported: external.featuresSummary?.supported || 0,
      featuresTotal: external.featuresSummary?.total || 0,
      permissionsGranted: external.permissions?.summary?.granted || 0,
      
      // Hashes (unique but anonymized)
      canvasHash: advanced.canvas?.hash || null,
      audioHash: advanced.audio?.hash || null,
      webglHash: advanced.webgl?.webglHash || null,
      fontsHash: advanced.fonts?.hash || null,
      
      // Calculated uniqueness score
      estimatedUniqueness: window.FingerprintApp.DataSummarizer.calculateUniqueness(rawData),
    };
  },

  /**
   * Estimate how unique this fingerprint is
   */
  calculateUniqueness: (rawData) => {
    let uniquenessScore = 0;
    
    // Screen resolution uniqueness
    const screen = rawData.basic?.screen || {};
    if (screen.width && screen.height) {
      const commonResolutions = [
        '1920x1080', '1366x768', '1536x864', '1440x900',
        '390x844', '414x896', '375x812', '412x915'
      ];
      const resolution = `${screen.width}x${screen.height}`;
      if (!commonResolutions.includes(resolution)) {
        uniquenessScore += 10;
      }
    }

    // Font count uniqueness
    const fontsCount = rawData.advanced?.fonts?.count || 0;
    if (fontsCount > 100) uniquenessScore += 20;
    else if (fontsCount > 50) uniquenessScore += 10;

    // WebGL extensions uniqueness  
    const extCount = rawData.advanced?.webgl?.extensionsCount || 0;
    if (extCount > 30) uniquenessScore += 15;

    // Timezone offset uniqueness
    const offset = rawData.basic?.timezone?.timezoneOffset;
    if (offset && ![0, -300, -360, -420, -480].includes(offset)) {
      uniquenessScore += 5;
    }

    // Language combination
    const languages = rawData.basic?.navigator?.languages || [];
    if (languages.length > 3) uniquenessScore += 10;

    return Math.min(uniquenessScore, 100);
  }
};

// ============================================
// EXPORT / ATTACH TO WINDOW
// ============================================
window.FingerprintApp.DataCategorizer = DataCategorizer;
window.FingerprintApp.PrivacyScoreCalculator = PrivacyScoreCalculator;
window.FingerprintApp.AIAnalyzer = AIAnalyzer;
window.FingerprintApp.DataSummarizer = DataSummarizer;

console.log('🤖 Fingerprint App - Part 4 Loaded (AI Integration, Categorization, Scoring)');


/**
 * ============================================
 * WHO ARE YOU? - Browser Fingerprint Demo
 * ============================================
 * 
 * app.js - Part 5: UI & Main Controller
 * - DOM Elements & UI Controller
 * - Progress Manager
 * - Typing Effect Animation
 * - Auto-Download Demo (Educational)
 * - Main Initialization
 * - Event Handlers
 * - Result Renderer
 * ============================================
 */

// Get references from previous parts
// Akses langsung via window.FingerprintApp tanpa destructure
const FP = window.FingerprintApp;
FP.state = FP.AppState || {}; 

// ============================================
// 26. DOM ELEMENTS
// ============================================
const DOM = {
  // Views
  initialView: document.getElementById('initial-view'),
  loadingView: document.getElementById('loading-view'),
  resultView: document.getElementById('result-view'),
  
  // Buttons
  trackButton: document.getElementById('track-button'),
  retryButton: document.getElementById('retry-button'),
  
  // Loading elements
  loadingText: document.getElementById('loading-text'),
  progressFill: document.getElementById('progress-fill'),
  progressPercent: document.getElementById('progress-percent'),
  checklist: document.getElementById('checklist'),
  
  // Result elements
  scoreValue: document.getElementById('score-value'),
  scoreStatus: document.getElementById('score-status'),
  scoreBarFill: document.getElementById('score-bar-fill'),
  dataPointsCount: document.getElementById('data-points-count'),
  narrative: document.getElementById('narrative'),
  downloadNotice: document.getElementById('download-notice'),
  recommendationsList: document.getElementById('recommendations-list'),
  recommendations: document.getElementById('recommendations'),
  
  // Error
  errorMessage: document.getElementById('error-message'),
};

// ============================================
// 27. UI CONTROLLER
// ============================================
const UIController = {
  /**
   * Current view state
   */
  currentView: 'initial',

  /**
   * Switch between views
   */
  showView: (viewName) => {
    // Hide all views
    DOM.initialView.style.display = 'none';
    DOM.loadingView.style.display = 'none';
    DOM.resultView.style.display = 'none';
    DOM.errorMessage.style.display = 'none';

    // Show requested view
    switch (viewName) {
      case 'initial':
        DOM.initialView.style.display = 'flex';
        break;
      case 'loading':
        DOM.loadingView.style.display = 'flex';
        break;
      case 'result':
        DOM.resultView.style.display = 'flex';
        break;
      case 'error':
        DOM.errorMessage.style.display = 'block';
        DOM.initialView.style.display = 'flex';
        break;
    }

    UIController.currentView = viewName;
  },

  /**
   * Show error message
   */
  showError: (message) => {
    DOM.errorMessage.innerHTML = `<strong>Oops!</strong> ${message}`;
    DOM.errorMessage.style.display = 'block';
  },

  /**
   * Hide error message
   */
  hideError: () => {
    DOM.errorMessage.style.display = 'none';
  },

  /**
   * Disable/enable track button
   */
  setButtonLoading: (isLoading) => {
    DOM.trackButton.disabled = isLoading;
    DOM.trackButton.style.opacity = isLoading ? '0.6' : '1';
    DOM.trackButton.style.cursor = isLoading ? 'not-allowed' : 'pointer';
  },

  /**
   * Reset UI to initial state
   */
  reset: () => {
    // Reset progress
    DOM.progressFill.style.width = '0%';
    DOM.progressPercent.textContent = '0%';
    
    // Reset checklist
    const checklistItems = DOM.checklist.querySelectorAll('.checklist__item');
    checklistItems.forEach(item => {
      item.classList.remove('checklist__item--done', 'checklist__item--active');
      item.querySelector('.checklist__icon').textContent = '◌';
    });

    // Reset narrative
    DOM.narrative.innerHTML = '<span class="cursor"></span>';
    
    // Reset score
    DOM.scoreValue.textContent = '--';
    DOM.scoreValue.className = 'score-card__value';
    DOM.scoreStatus.textContent = 'Menganalisis...';
    DOM.scoreBarFill.style.width = '0%';
    
    // Reset recommendations
    DOM.recommendationsList.innerHTML = '';
    
    // Hide download notice
    DOM.downloadNotice.style.display = 'none';
    
    // Hide error
    UIController.hideError();
    
    // Show initial view
    UIController.showView('initial');
  }
};

// ============================================
// 28. PROGRESS MANAGER
// ============================================
const ProgressManager = {
  /**
   * Current progress
   */
  progress: 0,
  steps: ['hardware', 'network', 'graphics', 'fonts', 'canvas', 'ai'],
  completedSteps: new Set(),

  /**
   * Reset progress
   */
  reset: () => {
    ProgressManager.progress = 0;
    ProgressManager.completedSteps.clear();
    DOM.progressFill.style.width = '0%';
    DOM.progressPercent.textContent = '0%';
  },

  /**
   * Update progress bar
   */
  setProgress: (percent) => {
    ProgressManager.progress = Math.min(100, Math.max(0, percent));
    DOM.progressFill.style.width = `${ProgressManager.progress}%`;
    DOM.progressPercent.textContent = `${Math.round(ProgressManager.progress)}%`;
  },

  /**
   * Increment progress
   */
  increment: (amount = 10) => {
    ProgressManager.setProgress(ProgressManager.progress + amount);
  },

  /**
   * Update checklist item
   */
  updateStep: (stepName, status) => {
    const item = DOM.checklist.querySelector(`[data-step="${stepName}"]`);
    if (!item) return;

    const icon = item.querySelector('.checklist__icon');

    switch (status) {
      case 'active':
        item.classList.add('checklist__item--active');
        item.classList.remove('checklist__item--done');
        icon.textContent = '◐';
        break;
      case 'done':
        item.classList.remove('checklist__item--active');
        item.classList.add('checklist__item--done');
        icon.textContent = '✓';
        ProgressManager.completedSteps.add(stepName);
        // Auto increment progress
        const stepProgress = (ProgressManager.completedSteps.size / ProgressManager.steps.length) * 100;
        ProgressManager.setProgress(stepProgress);
        break;
      case 'pending':
      default:
        item.classList.remove('checklist__item--active', 'checklist__item--done');
        icon.textContent = '◌';
        break;
    }
  },

  /**
   * Update loading text
   */
  setText: (text) => {
    DOM.loadingText.textContent = text;
  }
};

// ============================================
// 29. TYPING EFFECT
// ============================================
const TypingEffect = {
  /**
   * Configuration
   */
  config: {
    baseSpeed: 20,      // ms per character
    punctuationDelay: 150,  // Extra delay after punctuation
    paragraphDelay: 300,    // Delay for new paragraphs
    cursorClass: 'cursor',
  },

  /**
   * Current state
   */
  isTyping: false,
  abortController: null,

  /**
   * Type text with animation
   */
  type: async (text, container) => {
    TypingEffect.isTyping = true;
    TypingEffect.abortController = new AbortController();

    // Clear container but keep cursor
    container.innerHTML = '';
    const cursor = document.createElement('span');
    cursor.className = TypingEffect.config.cursorClass;
    
    // Create text container
    const textContainer = document.createElement('span');
    container.appendChild(textContainer);
    container.appendChild(cursor);

    const chars = text.split('');
    let currentParagraph = document.createElement('p');
    textContainer.appendChild(currentParagraph);

    try {
      for (let i = 0; i < chars.length; i++) {
        if (TypingEffect.abortController.signal.aborted) {
          break;
        }

        const char = chars[i];
        
        // Handle newlines
        if (char === '\n') {
          // Check for double newline (paragraph break)
          if (chars[i + 1] === '\n') {
            currentParagraph = document.createElement('p');
            textContainer.appendChild(currentParagraph);
            i++; // Skip next newline
            await TypingEffect.delay(TypingEffect.config.paragraphDelay);
            continue;
          }
          currentParagraph.appendChild(document.createElement('br'));
          continue;
        }

        // Add character
        currentParagraph.appendChild(document.createTextNode(char));

        // Calculate delay
        let delay = TypingEffect.config.baseSpeed;
        
        // Slower for punctuation
        if (['.', '!', '?'].includes(char)) {
          delay += TypingEffect.config.punctuationDelay;
        } else if ([',', ';', ':'].includes(char)) {
          delay += TypingEffect.config.punctuationDelay / 2;
        }

        // Randomize slightly for natural feel
        delay += Math.random() * 10 - 5;

        await TypingEffect.delay(delay);
        
        // Scroll to keep cursor visible
        if (i % 50 === 0) {
          cursor.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
        }
      }
    } catch (e) {
      console.error('Typing effect error:', e);
    }

    // Remove cursor after typing complete
    TypingEffect.isTyping = false;
    await TypingEffect.delay(1000);
    cursor.style.display = 'none';
    
    return true;
  },

  /**
   * Instantly show text (skip animation)
   */
  showInstant: (text, container) => {
    TypingEffect.abort();
    
    const paragraphs = text.split('\n\n');
    container.innerHTML = paragraphs
      .map(p => `<p>${p.replace(/\n/g, '<br>')}</p>`)
      .join('');
  },

  /**
   * Abort current typing
   */
  abort: () => {
    if (TypingEffect.abortController) {
      TypingEffect.abortController.abort();
    }
    TypingEffect.isTyping = false;
  },

  /**
   * Delay helper
   */
  delay: (ms) => {
    return new Promise((resolve, reject) => {
      const timeout = setTimeout(resolve, ms);
      
      if (TypingEffect.abortController) {
        TypingEffect.abortController.signal.addEventListener('abort', () => {
          clearTimeout(timeout);
          reject(new Error('Aborted'));
        });
      }
    });
  }
};

// ============================================
// 30. AUTO-DOWNLOAD DEMO (Educational)
// ============================================
const DownloadDemo = {
  /**
   * Generate and trigger download of security report
   */
  triggerDownload: (fingerprintData, categorizedData, privacyScore) => {
    try {
      const report = DownloadDemo.generateReport(fingerprintData, categorizedData, privacyScore);
      
      const blob = new Blob([report], { type: 'text/plain;charset=utf-8' });
      const url = URL.createObjectURL(blob);
      
      const link = document.createElement('a');
      link.href = url;
      link.download = 'BACA_INI_security_report.txt';
      link.style.display = 'none';
      
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      
      URL.revokeObjectURL(url);
      
      // Show notice
      DOM.downloadNotice.style.display = 'block';
      
      return true;
    } catch (e) {
      console.warn('Auto-download blocked or failed:', e);
      return false;
    }
  },

  /**
   * Generate report content
   */
  generateReport: (raw, categorized, score) => {
    const line = '═'.repeat(60);
    const thinLine = '─'.repeat(60);
    const timestamp = new Date().toLocaleString('id-ID', {
      dateStyle: 'full',
      timeStyle: 'long'
    });

    const basic = raw.basic || {};
    const advanced = raw.advanced || {};
    const external = raw.external || {};

    return `
${line}
  🔍 BROWSER FINGERPRINT SECURITY REPORT
  Demonstrasi Edukasi Keamanan Digital
${line}

  ⚠️  JIKA FILE INI TERDOWNLOAD OTOMATIS,
      BROWSER KAMU MENGIZINKAN AUTO-DOWNLOAD!
      
      Bayangkan jika ini adalah malware...
      Website jahat bisa melakukan hal serupa.

${line}
  Generated: ${timestamp}
${line}

📊 PRIVACY SCORE: ${score.score}/100 - ${score.status.toUpperCase()}

${thinLine}
RINGKASAN KEAMANAN
${thinLine}

${score.deductions.map(d => `  ❌ -${d.points} pts: ${d.reason}`).join('\n')}
${score.bonuses.length > 0 ? '\n' + score.bonuses.map(b => `  ✅ +${b.points} pts: ${b.reason}`).join('\n') : ''}

${thinLine}
DEVICE & SISTEM
${thinLine}

  • Device: ${categorized.device?.brand || 'Unknown'} ${categorized.device?.series || ''}
  • OS: ${categorized.device?.os || 'Unknown'} ${categorized.device?.osVersion || ''}
  • Device Type: ${categorized.device?.type || 'Unknown'}
  • Screen: ${categorized.hardware?.screenResolution || 'Unknown'}
  • Pixel Ratio: ${categorized.hardware?.pixelRatio || 'Unknown'}x

${thinLine}
BROWSER
${thinLine}

  • Browser: ${basic.browser?.name || 'Unknown'} ${basic.browser?.version || ''}
  • User Agent: ${basic.navigator?.userAgent?.substring(0, 80)}...
  • Cookies Enabled: ${basic.navigator?.cookieEnabled ? 'Ya' : 'Tidak'}
  • Do Not Track: ${basic.navigator?.doNotTrack || 'Tidak aktif'}
  • Language: ${basic.navigator?.language || 'Unknown'}

${thinLine}
HARDWARE
${thinLine}

  • CPU Cores: ${basic.navigator?.hardwareConcurrency || 'Unknown'}
  • RAM: ${basic.navigator?.deviceMemory ? basic.navigator.deviceMemory + ' GB' : 'Unknown'}
  • GPU: ${advanced.webgl?.gpuBrand || 'Unknown'} ${advanced.webgl?.gpuModel || ''}
  • GPU Tier: ${advanced.webgl?.gpuTier || 'Unknown'}
  • Touch Points: ${basic.navigator?.maxTouchPoints || 0}

${thinLine}
NETWORK
${thinLine}

  • Connection Type: ${basic.connection?.type || 'Unknown'}
  • Effective Type: ${basic.connection?.effectiveType || 'Unknown'}
  • Downlink Speed: ${basic.connection?.downlink ? basic.connection.downlink + ' Mbps' : 'Unknown'}
  • RTT: ${basic.connection?.rtt ? basic.connection.rtt + ' ms' : 'Unknown'}
  • Location Category: ${categorized.network?.locationCategory || 'Unknown'}
  • ISP Category: ${categorized.network?.ispCategory || 'Unknown'}
  • VPN Detected: ${categorized.network?.isVPN ? 'Ya' : 'Tidak'}

${thinLine}
FINGERPRINTS (UNIQUE IDENTIFIERS)
${thinLine}

  • Canvas Hash: ${advanced.canvas?.hash || 'N/A'}
  • Audio Hash: ${advanced.audio?.hash || 'N/A'}
  • WebGL Hash: ${advanced.webgl?.webglHash || 'N/A'}
  • Fonts Hash: ${advanced.fonts?.hash || 'N/A'}
  • Fonts Detected: ${advanced.fonts?.count || 0} fonts

${thinLine}
PRIVACY STATUS
${thinLine}

  • Incognito Mode: ${external.incognito?.isIncognito ? 'Ya' : 'Tidak'}
  • Ad Blocker: ${external.adBlocker?.hasAdBlocker ? 'Terdeteksi' : 'Tidak ada'}
  • WebRTC Leaking: ${advanced.webrtc?.isLeaking ? '⚠️ YA!' : 'Tidak'}
  ${advanced.webrtc?.isLeaking ? `  • Leaked IPs: ${[...(advanced.webrtc?.private || []), ...(advanced.webrtc?.public || [])].join(', ')}` : ''}
  • Canvas Blocked: ${advanced.canvasBlocking?.blocked ? 'Ya' : 'Tidak'}
  • DNT Enabled: ${external.privacySignals?.doNotTrackEnabled ? 'Ya' : 'Tidak'}
  • GPC Enabled: ${external.privacySignals?.gpcEnabled ? 'Ya' : 'Tidak'}

${thinLine}
PERMISSIONS GRANTED
${thinLine}

  • Total Granted: ${external.permissions?.summary?.granted || 0} permissions
  • Cameras Accessible: ${advanced.mediaDevices?.cameras || 0}
  • Microphones Accessible: ${advanced.mediaDevices?.microphones || 0}

${thinLine}
BEHAVIORAL DATA
${thinLine}

  • History Length: ${external.behavior?.historyLength || 0} entries
  • Referrer: ${external.behavior?.hasReferrer ? 'Ada' : 'Tidak ada'}
  • Battery: ${external.battery?.levelPercent !== undefined ? external.battery.levelPercent + '%' : 'N/A'}
  • Charging: ${external.battery?.charging !== undefined ? (external.battery.charging ? 'Ya' : 'Tidak') : 'N/A'}

${line}
REKOMENDASI KEAMANAN
${line}

1. 🛡️ Install Ad Blocker
   Gunakan uBlock Origin untuk memblokir tracker.

2. 🔴 Disable WebRTC
   Install WebRTC Control extension atau disable di browser.

3. 🎨 Block Canvas Fingerprinting
   Gunakan CanvasBlocker extension.

4. 🌐 Gunakan VPN
   VPN menyembunyikan IP asli dan lokasi.

5. 🦊 Gunakan Privacy Browser
   Pertimbangkan Firefox, Brave, atau Tor Browser.

6. 🔒 Enable Do Not Track
   Aktifkan di pengaturan privasi browser.

7. 🔄 Update Browser
   Pastikan browser selalu versi terbaru.

${line}
CATATAN PENTING
${line}

  File ini adalah bagian dari demonstrasi edukasi tentang
  browser fingerprinting dan privasi digital.
  
  Data di atas menunjukkan informasi yang DAPAT DIKUMPULKAN
  oleh website TANPA IZIN EKSPLISIT dari Anda.
  
  Tujuan demonstrasi ini adalah meningkatkan kesadaran
  tentang pentingnya privasi digital.

  ✅ Data tidak disimpan di server kami
  ✅ Tidak ada yang dijual ke pihak ketiga
  ✅ Ini murni untuk tujuan edukasi

${line}
  © Browser Fingerprint Demo - Educational Purpose Only
${line}
`;
  }
};

// ============================================
// 31. RESULT RENDERER
// ============================================
const ResultRenderer = {
  /**
   * Render privacy score with animation
   */
  renderScore: async (score) => {
    // Set score value
    DOM.scoreValue.textContent = `${score.score}/100`;
    
    // Set color class based on score
    DOM.scoreValue.classList.remove('score-card__value--low', 'score-card__value--medium', 'score-card__value--high');
    
    if (score.score >= 70) {
      DOM.scoreValue.classList.add('score-card__value--high');
      DOM.scoreBarFill.style.background = 'linear-gradient(90deg, #10b981, #059669)';
    } else if (score.score >= 40) {
      DOM.scoreValue.classList.add('score-card__value--medium');
      DOM.scoreBarFill.style.background = 'linear-gradient(90deg, #f59e0b, #d97706)';
    } else {
      DOM.scoreValue.classList.add('score-card__value--low');
      DOM.scoreBarFill.style.background = 'linear-gradient(90deg, #ef4444, #dc2626)';
    }
    
    // Set status
    DOM.scoreStatus.textContent = score.status;
    
    // Animate score bar
    await window.FingerprintApp.Utils.delay(100);
    DOM.scoreBarFill.style.width = `${score.score}%`;
  },

  /**
   * Render data points count
   */
  renderDataPoints: (count) => {
    DOM.dataPointsCount.textContent = count;
  },

  /**
   * Render recommendations
   */
  renderRecommendations: (recommendations) => {
    if (!recommendations || recommendations.length === 0) {
      DOM.recommendations.style.display = 'none';
      return;
    }

    // Sort by priority
    const priorityOrder = { high: 0, medium: 1, low: 2 };
    recommendations.sort((a, b) => 
      (priorityOrder[a.priority] || 2) - (priorityOrder[b.priority] || 2)
    );

    // Render list
    DOM.recommendationsList.innerHTML = recommendations
      .slice(0, 6) // Max 6 recommendations
      .map(rec => `
        <li class="recommendations__item">
          <span class="recommendations__bullet">${rec.icon || '•'}</span>
          <div>
            <strong>${rec.title}</strong><br>
            <span style="opacity: 0.8; font-size: 0.875rem;">${rec.description}</span>
          </div>
        </li>
      `)
      .join('');

    DOM.recommendations.style.display = 'block';
  },

  /**
   * Render AI narrative with typing effect
   */
  renderNarrative: async (narrative) => {
    await TypingEffect.type(narrative, DOM.narrative);
  },

  /**
   * Render all results
   */
  renderAll: async (data) => {
    const { privacyScore, narrative, recommendations, dataPointsCount } = data;

    // Render score first
    await ResultRenderer.renderScore(privacyScore);
    
    // Render data points
    ResultRenderer.renderDataPoints(dataPointsCount);

    // Small delay before narrative
    await window.FingerprintApp.Utils.delay(500);
    
    // Render narrative with typing
    await ResultRenderer.renderNarrative(narrative);
    
    // Render recommendations after typing
    await window.FingerprintApp.Utils.delay(300);
    ResultRenderer.renderRecommendations(recommendations);
  }
};

// ============================================
// 32. MAIN FINGERPRINT COLLECTOR
// ============================================
const FingerprintCollector = {
  /**
   * Collect all fingerprint data
   */
  collectAll: async () => {
    const results = {
      basic: null,
      advanced: null,
      external: null,
    };

    // Progress callback
    const updateProgress = (step, status) => {
      ProgressManager.updateStep(step, status);
    };

    // Step 1: Basic fingerprint (Navigator, Screen, Connection, Device)
    ProgressManager.setText('Scanning hardware...');
    updateProgress('hardware', 'active');
    await window.FingerprintApp.Utils.delay(300); // Small delay for UX
    results.basic = window.FingerprintApp.BasicFingerprint.collect();
    updateProgress('hardware', 'done');

    // Step 2: Advanced fingerprint (WebGL, Canvas, Audio, Fonts, WebRTC)
    ProgressManager.setText('Analyzing graphics & fonts...');
    results.advanced = await window.FingerprintApp.AdvancedFingerprint.collect(updateProgress);

    // Step 3: External detection (IP, VPN, Incognito, AdBlock, Permissions)
    ProgressManager.setText('Checking network & permissions...');
    results.external = await window.FingerprintApp.ExternalDetection.collect(updateProgress);

    return results;
  }
};

// ============================================
// 33. MAIN APPLICATION CONTROLLER
// ============================================
const App = {
  /**
   * Application state
   */
  state: {
    isProcessing: false,
    rawData: null,
    categorizedData: null,
    privacyScore: null,
    narrative: null,
  },

  /**
   * Initialize application
   */
  init: () => {
    console.log('🚀 Initializing Fingerprint App...');
    
    // Detect language
    window.FingerprintApp.state.language = window.FingerprintApp.Utils.detectLanguage();
    console.log(`📍 Detected language: ${window.FingerprintApp.state.language}`);

    // Bind event listeners
    App.bindEvents();

    // Check for prefers-reduced-motion
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
      TypingEffect.config.baseSpeed = 5;
      TypingEffect.config.punctuationDelay = 20;
    }

    // Ready
    console.log('✅ Fingerprint App Ready!');
  },

  /**
   * Bind event listeners
   */
  bindEvents: () => {
    // Track button
    DOM.trackButton.addEventListener('click', App.handleTrackClick);

    // Retry button
    DOM.retryButton.addEventListener('click', App.handleRetryClick);

    // Handle visibility change (pause typing when tab hidden)
    document.addEventListener('visibilitychange', () => {
      if (document.hidden && TypingEffect.isTyping) {
        // Could pause here if needed
      }
    });

    // Click on narrative to skip typing
    DOM.narrative.addEventListener('click', () => {
      if (TypingEffect.isTyping && App.state.narrative) {
        TypingEffect.showInstant(App.state.narrative, DOM.narrative);
      }
    });

    // Keyboard shortcut to skip typing
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape' && TypingEffect.isTyping && App.state.narrative) {
        TypingEffect.showInstant(App.state.narrative, DOM.narrative);
      }
    });
  },

  /**
   * Handle Track button click
   */
  handleTrackClick: async () => {
    if (App.state.isProcessing) return;
    
    App.state.isProcessing = true;
    window.FingerprintApp.state.startTime = Date.now();
    
    try {
      UIController.hideError();
      UIController.setButtonLoading(true);
      
      // Switch to loading view
      UIController.showView('loading');
      ProgressManager.reset();

      // Collect all fingerprint data
      ProgressManager.setText('Mengumpulkan jejak digitalmu...');
      const rawData = await FingerprintCollector.collectAll();
      App.state.rawData = rawData;

      // Count data points
      const dataPointsCount = window.FingerprintApp.Utils.countDataPoints(rawData);
      window.FingerprintApp.state.dataPointsCount = dataPointsCount;
      console.log(`📊 Collected ${dataPointsCount} data points`);

      // Categorize data (privacy-safe for AI)
      ProgressManager.setText('Mengkategorikan data...');
      ProgressManager.updateStep('ai', 'active');
      const categorizedData = window.FingerprintApp.DataCategorizer.categorize(rawData);
      App.state.categorizedData = categorizedData;

      // Calculate privacy score
      const privacyScore = window.FingerprintApp.PrivacyScoreCalculator.calculate(rawData, categorizedData);
      App.state.privacyScore = privacyScore;
      window.FingerprintApp.state.privacyScore = privacyScore.score;
      console.log(`🔒 Privacy Score: ${privacyScore.score}/100`);

      // Create summary for AI
      const summary = window.FingerprintApp.DataSummarizer.createSummary(rawData);

      // Get AI analysis
      ProgressManager.setText('AI sedang menganalisis...');
      const aiResult = await window.FingerprintApp.AIAnalyzer.analyze(categorizedData, privacyScore, summary);
      ProgressManager.updateStep('ai', 'done');

      App.state.narrative = aiResult.narrative;
      const recommendations = aiResult.recommendations;

      // Complete progress
      ProgressManager.setProgress(100);
      await window.FingerprintApp.Utils.delay(500);

      // Switch to result view
      UIController.showView('result');

      // Trigger auto-download demo
      setTimeout(() => {
        DownloadDemo.triggerDownload(rawData, categorizedData, privacyScore);
      }, 1000);

      // Render results with animations
      await ResultRenderer.renderAll({
        privacyScore,
        narrative: App.state.narrative,
        recommendations,
        dataPointsCount,
      });

      // Log completion time
      const duration = ((Date.now() - window.FingerprintApp.state.startTime) / 1000).toFixed(2);
      console.log(`⏱️ Analysis completed in ${duration}s`);

    } catch (error) {
      console.error('❌ Error during fingerprinting:', error);
      UIController.showError('Terjadi kesalahan saat menganalisis. Silakan coba lagi.');
      UIController.showView('error');
    } finally {
      App.state.isProcessing = false;
      UIController.setButtonLoading(false);
    }
  },

  /**
   * Handle Retry button click
   */
  handleRetryClick: () => {
    // Abort any ongoing typing
    TypingEffect.abort();
    
    // Reset state
    App.state = {
      isProcessing: false,
      rawData: null,
      categorizedData: null,
      privacyScore: null,
      narrative: null,
    };

    // Reset UI
    UIController.reset();
  }
};

// ============================================
// 34. AUTO-INITIALIZATION
// ============================================
// Wait for DOM to be ready
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', App.init);
} else {
  App.init();
}

// ============================================
// EXPORT / ATTACH TO WINDOW
// ============================================
window.FingerprintApp.DOM = DOM;
window.FingerprintApp.UIController = UIController;
window.FingerprintApp.ProgressManager = ProgressManager;
window.FingerprintApp.TypingEffect = TypingEffect;
window.FingerprintApp.DownloadDemo = DownloadDemo;
window.FingerprintApp.ResultRenderer = ResultRenderer;
window.FingerprintApp.FingerprintCollector = FingerprintCollector;
window.FingerprintApp.App = App;

console.log('🎯 Fingerprint App - Part 5 Loaded (UI Controller, Main Init)');
console.log('✨ All modules loaded! App is ready.');