import { Injectable, signal, computed } from '@angular/core';

export type CodeTheme = 'github-light' | 'github-dark' | 'one-dark' | 'material' | 'dracula';

export interface ThemeColors {
  background: string;
  surface: string;
  text: string;
  comment: string;
  keyword: string;
  string: string;
  number: string;
  function: string;
  operator: string;
  punctuation: string;
  variable: string;
  lineNumber: string;
  lineHighlight: string;
  border: string;
}

@Injectable({
  providedIn: 'root'
})
export class CodeThemeService {
  
  private currentTheme = signal<CodeTheme>('github-light');
  
  readonly theme = this.currentTheme.asReadonly();
  
  readonly themeColors = computed(() => this.getThemeColors(this.currentTheme()));
  
  private themes: Record<CodeTheme, ThemeColors> = {
    'github-light': {
      background: 'var(--semantic-color-surface-primary, #ffffff)',
      surface: 'var(--semantic-color-surface-secondary, #f6f8fa)',
      text: 'var(--semantic-color-text-primary, #24292f)',
      comment: 'var(--semantic-color-text-tertiary, #6e7781)',
      keyword: 'var(--semantic-color-brand-primary, #cf222e)',
      string: 'var(--semantic-color-success, #0a3069)',
      number: 'var(--semantic-color-warning, #0550ae)',
      function: 'var(--semantic-color-interactive-primary, #8250df)',
      operator: 'var(--semantic-color-text-primary, #24292f)',
      punctuation: 'var(--semantic-color-text-secondary, #656d76)',
      variable: 'var(--semantic-color-text-primary, #24292f)',
      lineNumber: 'var(--semantic-color-text-tertiary, #656d76)',
      lineHighlight: 'var(--semantic-color-container-primary, #fff8c5)',
      border: 'var(--semantic-color-border-secondary, #d0d7de)'
    },
    
    'github-dark': {
      background: 'var(--semantic-color-surface-primary, #0d1117)',
      surface: 'var(--semantic-color-surface-secondary, #161b22)',
      text: 'var(--semantic-color-text-primary, #f0f6fc)',
      comment: 'var(--semantic-color-text-tertiary, #8b949e)',
      keyword: 'var(--semantic-color-brand-primary, #ff7b72)',
      string: 'var(--semantic-color-success, #a5d6ff)',
      number: 'var(--semantic-color-warning, #79c0ff)',
      function: 'var(--semantic-color-interactive-primary, #d2a8ff)',
      operator: 'var(--semantic-color-text-primary, #f0f6fc)',
      punctuation: 'var(--semantic-color-text-secondary, #c9d1d9)',
      variable: 'var(--semantic-color-text-primary, #f0f6fc)',
      lineNumber: 'var(--semantic-color-text-tertiary, #8b949e)',
      lineHighlight: 'var(--semantic-color-container-primary, #ffd33d14)',
      border: 'var(--semantic-color-border-secondary, #30363d)'
    },
    
    'one-dark': {
      background: 'var(--semantic-color-surface-primary, #282c34)',
      surface: 'var(--semantic-color-surface-secondary, #3e4451)',
      text: 'var(--semantic-color-text-primary, #abb2bf)',
      comment: 'var(--semantic-color-text-tertiary, #5c6370)',
      keyword: 'var(--semantic-color-brand-primary, #c678dd)',
      string: 'var(--semantic-color-success, #98c379)',
      number: 'var(--semantic-color-warning, #d19a66)',
      function: 'var(--semantic-color-interactive-primary, #61afef)',
      operator: 'var(--semantic-color-text-primary, #abb2bf)',
      punctuation: 'var(--semantic-color-text-secondary, #abb2bf)',
      variable: 'var(--semantic-color-text-primary, #e06c75)',
      lineNumber: 'var(--semantic-color-text-tertiary, #5c6370)',
      lineHighlight: 'var(--semantic-color-container-primary, #3e4451)',
      border: 'var(--semantic-color-border-secondary, #3e4451)'
    },
    
    'material': {
      background: 'var(--semantic-color-surface-primary, #263238)',
      surface: 'var(--semantic-color-surface-secondary, #37474f)',
      text: 'var(--semantic-color-text-primary, #eeffff)',
      comment: 'var(--semantic-color-text-tertiary, #546e7a)',
      keyword: 'var(--semantic-color-brand-primary, #c792ea)',
      string: 'var(--semantic-color-success, #c3e88d)',
      number: 'var(--semantic-color-warning, #f78c6c)',
      function: 'var(--semantic-color-interactive-primary, #82aaff)',
      operator: 'var(--semantic-color-text-primary, #89ddff)',
      punctuation: 'var(--semantic-color-text-secondary, #89ddff)',
      variable: 'var(--semantic-color-text-primary, #eeffff)',
      lineNumber: 'var(--semantic-color-text-tertiary, #546e7a)',
      lineHighlight: 'var(--semantic-color-container-primary, #37474f)',
      border: 'var(--semantic-color-border-secondary, #37474f)'
    },
    
    'dracula': {
      background: 'var(--semantic-color-surface-primary, #282a36)',
      surface: 'var(--semantic-color-surface-secondary, #44475a)',
      text: 'var(--semantic-color-text-primary, #f8f8f2)',
      comment: 'var(--semantic-color-text-tertiary, #6272a4)',
      keyword: 'var(--semantic-color-brand-primary, #ff79c6)',
      string: 'var(--semantic-color-success, #f1fa8c)',
      number: 'var(--semantic-color-warning, #bd93f9)',
      function: 'var(--semantic-color-interactive-primary, #8be9fd)',
      operator: 'var(--semantic-color-text-primary, #ff79c6)',
      punctuation: 'var(--semantic-color-text-secondary, #f8f8f2)',
      variable: 'var(--semantic-color-text-primary, #f8f8f2)',
      lineNumber: 'var(--semantic-color-text-tertiary, #6272a4)',
      lineHighlight: 'var(--semantic-color-container-primary, #44475a)',
      border: 'var(--semantic-color-border-secondary, #44475a)'
    }
  };

  setTheme(theme: CodeTheme): void {
    this.currentTheme.set(theme);
  }

  getThemeColors(theme: CodeTheme): ThemeColors {
    return this.themes[theme];
  }

  getAvailableThemes(): CodeTheme[] {
    return Object.keys(this.themes) as CodeTheme[];
  }

  generateThemeCSS(theme: CodeTheme): string {
    const colors = this.getThemeColors(theme);
    
    return `
      .code-theme-${theme} {
        --code-bg: ${colors.background};
        --code-surface: ${colors.surface};
        --code-text: ${colors.text};
        --code-comment: ${colors.comment};
        --code-keyword: ${colors.keyword};
        --code-string: ${colors.string};
        --code-number: ${colors.number};
        --code-function: ${colors.function};
        --code-operator: ${colors.operator};
        --code-punctuation: ${colors.punctuation};
        --code-variable: ${colors.variable};
        --code-line-number: ${colors.lineNumber};
        --code-line-highlight: ${colors.lineHighlight};
        --code-border: ${colors.border};
      }
    `;
  }
}