@injectable()
export class UnocssPlugin implements ILifecyclePlugin {
  public readonly name = 'unocss-plugin';
  public readonly version = '1.0.0';
  public readonly enforce = 'pre';

  // 插件配置
  async initialize(config?: UnocssPluginConfig): Promise<void>;

  // 渲染钩子
  onRender(context: IRenderContext, next: () => ComponentType<any>): ComponentType<any>;

  // 根组件挂载钩子
  onRootMount(context: IRenderContext, next: () => ComponentType<any>): ComponentType<any>;

  // 获取 UnoCSS 生成器实例
  getGenerator(): UnoGenerator | null;

  // 获取收集到的样式类
  getCollectedClasses(): Set<string>;

  // 清理资源
  destroy(): void;
}

interface UnocssPluginConfig {
  config?: UserConfig; // UnoCSS 自定义配置
}

{
  config: {
    // 预设
    presets: [
      presetUno(),
      presetAttributify(),
      presetWind(),
      // ... 其他预设
    ],

    // 自定义规则
    rules: [
      ['btn', { padding: '0.5rem 1rem' }],
      [/^m-(\d+)$/, ([, d]) => ({ margin: `${d}px` })],
    ],

    // 快捷方式
    shortcuts: [
      ['btn', 'px-4 py-2 rounded'],
      ['btn-primary', 'btn bg-blue-500 text-white'],
    ],

    // 主题
    theme: {
      colors: {
        primary: '#3b82f6',
        secondary: '#64748b',
      },
    },

    // 变体
    variants: [
      // 自定义变体
    ],

    // 预检样式
    preflights: [
      // 自定义预检样式
    ],
  }
}

@Initialize()
async initialize(config: UnocssPluginConfig = {}) {
  // 创建 UnoCSS 生成器
  const generator = await createGenerator({
    presets: [
      presetUno({ preflight: false }),
      presetAttributify(),
    ],
    ...config.config,
  });

  // 初始化异步信号
  this.reactiveAsync = asyncSignal(
    () => this.generateCSS(),
    { manual: true, debounceWait: 1 }
  );
}

@Render(5) // 优先级为 5，确保早期执行
onRender(context: IRenderContext, next: () => ComponentType<any>) {
  // 收集 className 中的样式类
  if (context.props.className) {
    this.collectClassNames(context.props.className);
  }

  return next();
}

private async generateCSS(): Promise<string | null> {
  const classArray = Array.from(this.collectedClasses).sort();
  const currentClassHash = classArray.join('|');

  // 检查缓存
  if (this.cssCache.has(currentClassHash)) {
    return this.cssCache.get(currentClassHash);
  }

  // 生成新的 CSS
  const result = await this.generator.generate(classArray.join(' '));
  const css = result.css;

  // 更新缓存
  if (css) {
    this.cssCache.set(currentClassHash, css);
  }

  return css;
}

@RootMount()
onRootMount() {
  // 触发 CSS 生成
  this.reactiveAsync.run();
}

// Unocss 组件负责实际的样式注入
export const Unocss = ({ generateCSS }) => {
  const inlineStyle = useObserver(() => generateCSS.data);

  if (!inlineStyle) {
    return null;
  }

  return <style dangerouslySetInnerHTML={{ __html: inlineStyle }} id="unocss-styles" />;
};

// 定义样式类型
type ButtonVariant = 'primary' | 'secondary' | 'danger';
type ButtonSize = 'sm' | 'md' | 'lg';

interface ButtonProps {
  variant?: ButtonVariant;
  size?: ButtonSize;
  children: React.ReactNode;
}

const Button: React.FC<ButtonProps> = ({ variant = 'primary', size = 'md', children }) => {
  const variantClasses = {
    primary: 'bg-blue-500 text-white hover:bg-blue-600',
    secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300',
    danger: 'bg-red-500 text-white hover:bg-red-600',
  };

  const sizeClasses = {
    sm: 'px-2 py-1 text-sm',
    md: 'px-4 py-2',
    lg: 'px-6 py-3 text-lg',
  };

  return (
    <button className={`rounded transition-colors ${variantClasses[variant]} ${sizeClasses[size]}`}>{children}</button>
  );
};

import { describe, it, expect } from 'vitest';
import { render } from '@testing-library/react';
import { Eficy, EficyProvider } from '@eficy/core-jsx';
import { UnocssPlugin } from '@eficy/plugin-unocss';

describe('UnocssPlugin', () => {
  it('should generate CSS for className attributes', async () => {
    const core = new Eficy();
    await core.install(UnocssPlugin);

    const TestComponent = () => <div className="text-red-500 p-4">Test</div>;

    render(
      <EficyProvider core={core}>
        <TestComponent />
      </EficyProvider>,
    );

    // 检查是否生成了对应的 CSS
    const styleElement = document.getElementById('unocss-styles');
    expect(styleElement).toBeTruthy();
    expect(styleElement?.innerHTML).toContain('.text-red-500');
    expect(styleElement?.innerHTML).toContain('.p-4');
  });
});