import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CodeSnippetComponent } from '../../../../../ui-code-display/src/lib/components/code-snippet/code-snippet.component';
import { InlineCodeComponent } from '../../../../../ui-code-display/src/lib/components/inline-code/inline-code.component';
import { CodeBlockComponent } from '../../../../../ui-code-display/src/lib/components/code-block/code-block.component';
import { CodeTheme, CodeThemeService } from '../../../../../ui-code-display/src/lib/services/theme.service';

@Component({
  selector: 'app-code-display-demo',
  standalone: true,
  imports: [
    CommonModule, 
    CodeSnippetComponent, 
    InlineCodeComponent, 
    CodeBlockComponent
  ],
  template: `
    <div class="demo-container">
      <h1>Code Display Components Demo</h1>
      
      <section class="demo-section">
        <h2>Theme Selector</h2>
        <div class="theme-controls">
          @for (theme of themes; track theme) {
            <button 
              (click)="setTheme(theme)"
              [class.active]="currentTheme() === theme"
              class="theme-btn">
              {{ theme }}
            </button>
          }
        </div>
      </section>

      <section class="demo-section">
        <h2>Inline Code</h2>
        <p>
          Use <ui-inline-code code="console.log('hello')" language="javascript"></ui-inline-code> 
          to output to the console.
        </p>
        <p>
          Install dependencies with <ui-inline-code code="npm install" language="bash" [copyable]="true"></ui-inline-code>
        </p>
      </section>

      <section class="demo-section">
        <h2>Code Snippet</h2>
        <ui-code-snippet
          [code]="typescriptCode"
          language="typescript"
          title="Component Example"
          size="md"
          [showLineNumbers]="true"
          [copyable]="true"
          [highlightLines]="[3, 5, '7-9']">
        </ui-code-snippet>
      </section>

      <section class="demo-section">
        <h2>Code Block</h2>
        <ui-code-block
          [code]="cssCode"
          language="css"
          variant="bordered"
          [showLineNumbers]="true"
          [copyable]="true">
        </ui-code-block>
      </section>

      <section class="demo-section">
        <h2>Different Sizes</h2>
        <h3>Small</h3>
        <ui-code-snippet
          [code]="shortCode"
          language="javascript"
          size="sm"
          title="Small Size">
        </ui-code-snippet>

        <h3>Medium (Default)</h3>
        <ui-code-snippet
          [code]="shortCode"
          language="javascript"
          size="md"
          title="Medium Size">
        </ui-code-snippet>

        <h3>Large</h3>
        <ui-code-snippet
          [code]="shortCode"
          language="javascript"
          size="lg"
          title="Large Size">
        </ui-code-snippet>
      </section>

      <section class="demo-section">
        <h2>Different Languages</h2>
        
        <h3>Python</h3>
        <ui-code-snippet
          [code]="pythonCode"
          language="python"
          title="Python Example">
        </ui-code-snippet>

        <h3>JSON</h3>
        <ui-code-snippet
          [code]="jsonCode"
          language="json"
          title="Configuration">
        </ui-code-snippet>

        <h3>HTML</h3>
        <ui-code-snippet
          [code]="htmlCode"
          language="html"
          title="Template">
        </ui-code-snippet>
      </section>
    </div>
  `,
  styleUrl: './code-display-demo.component.scss'
})
export class CodeDisplayDemoComponent {
  
  constructor(private themeService: CodeThemeService) {
    this.themes = this.themeService.getAvailableThemes();
    this.currentTheme = this.themeService.theme;
  }
  
  readonly themes: any[];
  readonly currentTheme: any;

  readonly typescriptCode = `import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: \`
    <div class="container">
      <h1>{{ title }}</h1>
      <p>{{ description }}</p>
    </div>
  \`
})
export class ExampleComponent {
  title = 'Hello World';
  description = 'This is a demo component';
}`;

  readonly cssCode = `.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  
  h1 {
    color: var(--primary-color);
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  
  p {
    line-height: 1.6;
    color: var(--text-color);
  }
}`;

  readonly shortCode = `const greeting = 'Hello, World!';
console.log(greeting);`;

  readonly pythonCode = `def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

# Generate first 10 Fibonacci numbers
for i in range(10):
    print(f"F({i}) = {fibonacci(i)}")`;

  readonly jsonCode = `{
  "name": "ui-code-display",
  "version": "1.0.0",
  "description": "Code display components for Angular",
  "dependencies": {
    "@angular/core": "^19.0.0",
    "prismjs": "^1.30.0"
  },
  "keywords": [
    "angular",
    "code",
    "syntax-highlighting",
    "prism"
  ]
}`;

  readonly htmlCode = `<div class="card">
  <header class="card-header">
    <h2>Card Title</h2>
    <button class="close-btn">&times;</button>
  </header>
  
  <div class="card-body">
    <p>This is the card content.</p>
    <a href="#" class="btn btn-primary">Action</a>
  </div>
</div>`;

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