import React from "react";
import { SvgIcon, type SvgIconProps } from "@mui/material";
import logger from "@/utils/logger";

// 按目录分别预加载 SVG 文件，实现按需加载
const llmSvgModules = import.meta.glob('/src/assets/svg/llm/*.svg', { 
  query: '?react',
  import: 'default',
  eager: false
});

const chunkSvgModules = import.meta.glob('/src/assets/svg/chunk-method/*.svg', { 
  query: '?react',
  import: 'default',
  eager: false
});

const fileSvgModules = import.meta.glob('/src/assets/svg/file-icon/*.svg', { 
  query: '?react',
  import: 'default',
  eager: false
});

const commonSvgModules = import.meta.glob('/src/assets/svg/*.svg', { 
  query: '?react',
  import: 'default',
  eager: false
});

interface AppSvgIconProps extends SvgIconProps {
  name: string;
  point?: 'llm' | 'chunk' | 'file' | 'default';
}

const getPointPath = (point: AppSvgIconProps['point']) => {
  if (point != 'default') {
    if (point === 'llm') {
      return '/llm'
    } else if (point === 'chunk') {
      return '/chunk-method'
    } else if (point === 'file') {
      return '/file-icon'
    }
  }
  return ''
}

// 根据类型获取对应的模块映射
const getSvgModules = (point: AppSvgIconProps['point']) => {
  switch (point) {
    case 'llm':
      return llmSvgModules;
    case 'chunk':
      return chunkSvgModules;
    case 'file':
      return fileSvgModules;
    default:
      return commonSvgModules;
  }
}

/**
 * 通用 SVG 图标组件 - 优化版本，支持按需加载
 * <AppSvgIcon name="add" sx={{ color: 'primary.main', fontSize: 30 }} />
 */
export default function AppSvgIcon(props: AppSvgIconProps) {
  const { name, point = 'default', ...rest } = props;

  const pointPath = getPointPath(point);
  
  // 动态导入 SVG 文件
  const [Icon, setIcon] = React.useState<React.FC<React.SVGProps<SVGSVGElement>> | null>(null);
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    const loadIcon = async () => {
      try {
        setLoading(true);
        const iconPath = `/src/assets/svg${pointPath}/${name}.svg`;
        
        // 根据类型获取对应的模块映射
        const svgModules = getSvgModules(point);
        const moduleLoader = svgModules[iconPath];
        
        if (moduleLoader) {
          const iconModule = await moduleLoader();
          setIcon(() => iconModule as React.FC<React.SVGProps<SVGSVGElement>>);
        } else {
          throw new Error(`Icon not found: ${iconPath}`);
        }
      } catch (error) {
        logger.warn(`[AppSvgIcon] 未找到图标: ${name}`, error);
        setIcon(null);
      } finally {
        setLoading(false);
      }
    };

    loadIcon();
  }, [name, pointPath, point]);

  if (loading) {
    // 返回一个简单的占位符，避免布局跳动
    return <SvgIcon {...rest} style={{ opacity: 0 }} />;
  }

  if (!Icon) {
    logger.warn(`[AppSvgIcon] 图标加载失败: ${name}`);
    return null;
  }

  return <SvgIcon component={Icon} inheritViewBox {...rest} />;
}

export function LlmSvgIcon(props: Omit<AppSvgIconProps, 'point'>) {
  return <AppSvgIcon {...props} point="llm" />;
}

export function ChunkSvgIcon(props: Omit<AppSvgIconProps, 'point'>) {
  return <AppSvgIcon {...props} point="chunk" />;
}

export function FileSvgIcon(props: Omit<AppSvgIconProps, 'point'>) {
  return <AppSvgIcon {...props} point="file" />;
}