/**
 * 资源加载监控工具
 * 使用 Performance API 监控 JS、CSS、图片、字体等资源的加载情况
 *
 * 功能：
 * - 监控资源加载时间
 * - 统计 bundle 大小
 * - 计算缓存命中率
 * - 监控 API 请求响应时间
 *
 * @module utils/performance/resourceMonitor
 */

import posthog from 'posthog-js';
import type {
  ResourceTiming,
  ResourceStats,
  ResourceType,
  ApiRequestStats,
  ApiRequestTiming,
  ResourceLoadEventProperties,
} from '@/types/metrics';
import {
  calculateRating,
  getRatingIcon,
  getRatingConsoleColor,
  BUNDLE_SIZE_THRESHOLDS,
  RESOURCE_LOAD_TIME_THRESHOLDS,
  CACHE_HIT_RATE_THRESHOLDS,
  API_RESPONSE_TIME_THRESHOLDS,
} from '@constants/performanceThresholds';

// ============================================================
// 类型定义
// ============================================================

interface ResourceMonitorConfig {
  /** 是否启用控制台日志 */
  enableConsoleLog?: boolean;
  /** 是否上报到 PostHog */
  trackToPostHog?: boolean;
  /** 页面类型 */
  pageType?: string;
  /** 自定义事件属性 */
  customProperties?: Record<string, any>;
}

// ============================================================
// 全局状态
// ============================================================

let resourceStatsCache: ResourceStats | null = null;
let apiStatsCache: ApiRequestStats | null = null;

// ============================================================
// 资源类型判断
// ============================================================

/**
 * 根据资源 URL 判断资源类型
 */
const getResourceType = (url: string, initiatorType: string): ResourceType => {
  const extension = url.split('.').pop()?.toLowerCase() || '';

  // 根据文件扩展名判断
  if (['js', 'mjs', 'jsx'].includes(extension)) return 'script';
  if (['css', 'scss', 'sass', 'less'].includes(extension)) return 'stylesheet';
  if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'ico'].includes(extension)) return 'image';
  if (['woff', 'woff2', 'ttf', 'otf', 'eot'].includes(extension)) return 'font';
  if (initiatorType === 'xmlhttprequest' || initiatorType === 'fetch') return 'other'; // API 请求
  if (url.includes('/api/')) return 'other'; // API 请求
  if (extension === 'html' || initiatorType === 'navigation') return 'document';

  return 'other';
};

/**
 * 判断资源是否来自缓存
 */
const isFromCache = (entry: PerformanceResourceTiming): boolean => {
  // transferSize 为 0 表示来自缓存（或 304 Not Modified）
  return entry.transferSize === 0 && entry.decodedBodySize > 0;
};

// ============================================================
// 资源统计
// ============================================================

/**
 * 收集所有资源的加载信息
 */
export const collectResourceStats = (config: ResourceMonitorConfig = {}): ResourceStats => {
  const defaultConfig: ResourceMonitorConfig = {
    enableConsoleLog: process.env.NODE_ENV === 'development',
    trackToPostHog: process.env.NODE_ENV === 'production',
    pageType: 'unknown',
    ...config,
  };

  try {
    // 获取所有资源条目
    const resourceEntries = performance.getEntriesByType('resource') as PerformanceResourceTiming[];

    const resources: ResourceTiming[] = [];
    let totalJsSize = 0;
    let totalCssSize = 0;
    let totalImageSize = 0;
    let totalFontSize = 0;
    let totalLoadTime = 0;
    let cacheHits = 0;

    resourceEntries.forEach((entry) => {
      const type = getResourceType(entry.name, entry.initiatorType);
      const fromCache = isFromCache(entry);
      const size = entry.transferSize || entry.encodedBodySize || 0;
      const duration = entry.duration;

      const resourceTiming: ResourceTiming = {
        name: entry.name,
        type,
        size,
        duration,
        startTime: entry.startTime,
        fromCache,
      };

      resources.push(resourceTiming);

      // 统计各类资源的总大小
      switch (type) {
        case 'script':
          totalJsSize += size;
          break;
        case 'stylesheet':
          totalCssSize += size;
          break;
        case 'image':
          totalImageSize += size;
          break;
        case 'font':
          totalFontSize += size;
          break;
      }

      totalLoadTime += duration;

      if (fromCache) {
        cacheHits++;
      }
    });

    const cacheHitRate = resources.length > 0 ? (cacheHits / resources.length) * 100 : 0;

    const stats: ResourceStats = {
      totalJsSize,
      totalCssSize,
      totalImageSize,
      totalFontSize,
      totalLoadTime,
      cacheHitRate,
      resources,
    };

    // 缓存结果
    resourceStatsCache = stats;

    // 控制台输出
    if (defaultConfig.enableConsoleLog) {
      logResourceStatsToConsole(stats);
    }

    // 上报到 PostHog
    if (defaultConfig.trackToPostHog && process.env.NODE_ENV === 'production') {
      trackResourceStatsToPostHog(stats, defaultConfig);
    }

    return stats;
  } catch (error) {
    console.error('Failed to collect resource stats:', error);
    return {
      totalJsSize: 0,
      totalCssSize: 0,
      totalImageSize: 0,
      totalFontSize: 0,
      totalLoadTime: 0,
      cacheHitRate: 0,
      resources: [],
    };
  }
};

/**
 * 控制台输出资源统计
 */
const logResourceStatsToConsole = (stats: ResourceStats): void => {
  console.group('📦 Resource Loading Statistics');
  console.log('━'.repeat(50));

  // JS Bundle
  const jsRating = calculateRating(stats.totalJsSize / 1024, BUNDLE_SIZE_THRESHOLDS.js);
  const jsColor = getRatingConsoleColor(jsRating);
  const jsIcon = getRatingIcon(jsRating);
  console.log(
    `${jsIcon} ${jsColor}JS Bundle: ${(stats.totalJsSize / 1024).toFixed(2)}KB (${jsRating})\x1b[0m`
  );

  // CSS Bundle
  const cssRating = calculateRating(stats.totalCssSize / 1024, BUNDLE_SIZE_THRESHOLDS.css);
  const cssColor = getRatingConsoleColor(cssRating);
  const cssIcon = getRatingIcon(cssRating);
  console.log(
    `${cssIcon} ${cssColor}CSS Bundle: ${(stats.totalCssSize / 1024).toFixed(2)}KB (${cssRating})\x1b[0m`
  );

  // Images
  const imageRating = calculateRating(stats.totalImageSize / 1024, BUNDLE_SIZE_THRESHOLDS.image);
  const imageColor = getRatingConsoleColor(imageRating);
  const imageIcon = getRatingIcon(imageRating);
  console.log(
    `${imageIcon} ${imageColor}Images: ${(stats.totalImageSize / 1024).toFixed(2)}KB (${imageRating})\x1b[0m`
  );

  // Fonts
  console.log(`📝 Fonts: ${(stats.totalFontSize / 1024).toFixed(2)}KB`);

  // Total Load Time
  const loadTimeRating = calculateRating(stats.totalLoadTime, RESOURCE_LOAD_TIME_THRESHOLDS);
  const loadTimeColor = getRatingConsoleColor(loadTimeRating);
  const loadTimeIcon = getRatingIcon(loadTimeRating);
  console.log(
    `${loadTimeIcon} ${loadTimeColor}Total Load Time: ${(stats.totalLoadTime / 1000).toFixed(2)}s (${loadTimeRating})\x1b[0m`
  );

  // Cache Hit Rate
  const cacheRating = calculateRating(stats.cacheHitRate, CACHE_HIT_RATE_THRESHOLDS, true);
  const cacheColor = getRatingConsoleColor(cacheRating);
  const cacheIcon = getRatingIcon(cacheRating);
  console.log(
    `${cacheIcon} ${cacheColor}Cache Hit Rate: ${stats.cacheHitRate.toFixed(1)}% (${cacheRating})\x1b[0m`
  );

  console.log('━'.repeat(50));
  console.groupEnd();
};

/**
 * 上报资源统计到 PostHog
 */
const trackResourceStatsToPostHog = (
  stats: ResourceStats,
  config: ResourceMonitorConfig
): void => {
  try {
    const eventProperties: ResourceLoadEventProperties = {
      js_size_kb: stats.totalJsSize / 1024,
      css_size_kb: stats.totalCssSize / 1024,
      image_size_kb: stats.totalImageSize / 1024,
      total_load_time_s: stats.totalLoadTime / 1000,
      cache_hit_rate_percent: stats.cacheHitRate,
      resource_count: stats.resources.length,
      page_type: config.pageType || 'unknown',
      measured_at: Date.now(),
      ...config.customProperties,
    };

    posthog.capture('Resource Load Complete', eventProperties);
  } catch (error) {
    console.error('Failed to track resource stats to PostHog:', error);
  }
};

// ============================================================
// API 请求监控
// ============================================================

/**
 * 收集 API 请求统计
 */
export const collectApiStats = (config: ResourceMonitorConfig = {}): ApiRequestStats => {
  try {
    const resourceEntries = performance.getEntriesByType('resource') as PerformanceResourceTiming[];

    // 筛选 API 请求（通过 URL 包含 /api/ 或 initiatorType 为 fetch/xmlhttprequest）
    const apiEntries = resourceEntries.filter(
      (entry) =>
        entry.name.includes('/api/') ||
        entry.initiatorType === 'fetch' ||
        entry.initiatorType === 'xmlhttprequest'
    );

    const requests: ApiRequestTiming[] = apiEntries.map((entry) => ({
      url: entry.name,
      method: 'GET', // Performance API 无法获取方法，默认 GET
      duration: entry.duration,
      status: 200, // Performance API 无法获取状态码，假设成功
      success: true,
      startTime: entry.startTime,
    }));

    const totalRequests = requests.length;
    const avgResponseTime =
      totalRequests > 0
        ? requests.reduce((sum, req) => sum + req.duration, 0) / totalRequests
        : 0;
    const slowestRequest =
      totalRequests > 0 ? Math.max(...requests.map((req) => req.duration)) : 0;
    const failedRequests = 0; // Performance API 无法判断失败

    const stats: ApiRequestStats = {
      totalRequests,
      avgResponseTime,
      slowestRequest,
      failedRequests,
      requests,
    };

    // 缓存结果
    apiStatsCache = stats;

    // 控制台输出
    if (config.enableConsoleLog) {
      logApiStatsToConsole(stats);
    }

    return stats;
  } catch (error) {
    console.error('Failed to collect API stats:', error);
    return {
      totalRequests: 0,
      avgResponseTime: 0,
      slowestRequest: 0,
      failedRequests: 0,
      requests: [],
    };
  }
};

/**
 * 控制台输出 API 统计
 */
const logApiStatsToConsole = (stats: ApiRequestStats): void => {
  console.group('🌐 API Request Statistics');
  console.log('━'.repeat(50));

  console.log(`📊 Total Requests: ${stats.totalRequests}`);

  // Average Response Time
  const avgRating = calculateRating(stats.avgResponseTime, API_RESPONSE_TIME_THRESHOLDS);
  const avgColor = getRatingConsoleColor(avgRating);
  const avgIcon = getRatingIcon(avgRating);
  console.log(
    `${avgIcon} ${avgColor}Avg Response Time: ${stats.avgResponseTime.toFixed(0)}ms (${avgRating})\x1b[0m`
  );

  // Slowest Request
  const slowestRating = calculateRating(stats.slowestRequest, API_RESPONSE_TIME_THRESHOLDS);
  const slowestColor = getRatingConsoleColor(slowestRating);
  const slowestIcon = getRatingIcon(slowestRating);
  console.log(
    `${slowestIcon} ${slowestColor}Slowest Request: ${stats.slowestRequest.toFixed(0)}ms (${slowestRating})\x1b[0m`
  );

  console.log(`❌ Failed Requests: ${stats.failedRequests}`);

  console.log('━'.repeat(50));
  console.groupEnd();
};

// ============================================================
// 导出工具函数
// ============================================================

/**
 * 获取缓存的资源统计
 */
export const getCachedResourceStats = (): ResourceStats | null => {
  return resourceStatsCache;
};

/**
 * 获取缓存的 API 统计
 */
export const getCachedApiStats = (): ApiRequestStats | null => {
  return apiStatsCache;
};

/**
 * 清除缓存
 */
export const clearStatsCache = (): void => {
  resourceStatsCache = null;
  apiStatsCache = null;
};

/**
 * 导出资源统计为 JSON
 */
export const exportResourceStatsAsJSON = (): string => {
  return JSON.stringify(resourceStatsCache, null, 2);
};

/**
 * 导出 API 统计为 JSON
 */
export const exportApiStatsAsJSON = (): string => {
  return JSON.stringify(apiStatsCache, null, 2);
};

/**
 * 在控制台输出完整报告
 */
export const logPerformanceReport = (): void => {
  if (resourceStatsCache) {
    logResourceStatsToConsole(resourceStatsCache);
  }

  if (apiStatsCache) {
    logApiStatsToConsole(apiStatsCache);
  }
};

// ============================================================
// 默认导出
// ============================================================

export default {
  collectResourceStats,
  collectApiStats,
  getCachedResourceStats,
  getCachedApiStats,
  clearStatsCache,
  exportResourceStatsAsJSON,
  exportApiStatsAsJSON,
  logPerformanceReport,
};