import type { Core, ServiceContainer } from '@esengine/ecs-framework';
import { createLogger } from '@esengine/ecs-framework';
import { IEditorPlugin, EditorPluginCategory, SettingsRegistry } from '@esengine/editor-core';
import { SettingsService } from '../services/SettingsService';

const logger = createLogger('EditorAppearancePlugin');

/**
 * Editor Appearance Plugin
 *
 * Manages editor appearance settings like font size
 */
export class EditorAppearancePlugin implements IEditorPlugin {
  readonly name = '@esengine/editor-appearance';
  readonly version = '1.0.0';
  readonly displayName = 'Editor Appearance';
  readonly category = EditorPluginCategory.System;
  readonly description = 'Configure editor appearance settings';
  readonly icon = '🎨';

  async install(_core: Core, services: ServiceContainer): Promise<void> {
    const settingsRegistry = services.resolve(SettingsRegistry);

    settingsRegistry.registerCategory({
      id: 'appearance',
      title: '外观',
      description: '配置编辑器的外观设置',
      sections: [
        {
          id: 'font',
          title: '字体设置',
          description: '配置编辑器字体样式',
          settings: [
            {
              key: 'editor.fontSize',
              label: '字体大小 (px)',
              type: 'range',
              defaultValue: 13,
              description: '编辑器界面的字体大小',
              min: 11,
              max: 18,
              step: 1
            }
          ]
        }
      ]
    });

    this.applyFontSettings();
    this.setupSettingsListener();

    logger.info('Installed');
  }

  async uninstall(): Promise<void> {
    logger.info('Uninstalled');
  }

  async onEditorReady(): Promise<void> {
    logger.info('Editor is ready');
  }

  /**
   * Apply font settings from settings
   */
  private applyFontSettings(): void {
    const settings = SettingsService.getInstance();
    const baseFontSize = settings.get<number>('editor.fontSize', 13);

    logger.info(`Applying font size: ${baseFontSize}px`);

    const root = document.documentElement;

    // Apply font sizes
    root.style.setProperty('--font-size-xs', `${baseFontSize - 2}px`);
    root.style.setProperty('--font-size-sm', `${baseFontSize - 1}px`);
    root.style.setProperty('--font-size-base', `${baseFontSize}px`);
    root.style.setProperty('--font-size-md', `${baseFontSize + 1}px`);
    root.style.setProperty('--font-size-lg', `${baseFontSize + 3}px`);
    root.style.setProperty('--font-size-xl', `${baseFontSize + 5}px`);
  }

  /**
   * Listen for settings changes
   */
  private setupSettingsListener(): void {
    window.addEventListener('settings:changed', ((event: CustomEvent) => {
      const changedSettings = event.detail;
      logger.info('Settings changed event received', changedSettings);

      if ('editor.fontSize' in changedSettings) {
        logger.info('Font size changed, applying...');
        this.applyFontSettings();
      }
    }) as EventListener);
  }
}