import { Component, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BackgroundDirective } from '../../../../../ui-backgrounds/src/lib/directives/background.directive';
import { SolidBackgroundComponent } from '../../../../../ui-backgrounds/src/lib/components/backgrounds/solid-background.component';
import { GradientBackgroundComponent } from '../../../../../ui-backgrounds/src/lib/components/backgrounds/gradient-background.component';
import { PatternBackgroundComponent } from '../../../../../ui-backgrounds/src/lib/components/backgrounds/pattern-background.component';
import { ImageBackgroundComponent } from '../../../../../ui-backgrounds/src/lib/components/backgrounds/image-background.component';
import { LinearGradientConfig, PatternConfig, SolidBackgroundConfig } from '../../../../../ui-backgrounds/src/lib/types/background.types';
import { BackgroundService } from '../../../../../ui-backgrounds/src/lib/services/background.service';


@Component({
  selector: 'app-backgrounds-demo',
  standalone: true,
  imports: [
    CommonModule,
    BackgroundDirective,
    SolidBackgroundComponent,
    GradientBackgroundComponent,
    PatternBackgroundComponent,
    ImageBackgroundComponent
  ],
  template: `
    <div class="backgrounds-demo">
      <div class="demo-header">
        <h1>UI Backgrounds Demo</h1>
        <p>Explore different background types and configurations</p>
      </div>

      <!-- Directive Examples -->
      <section class="demo-section">
        <h2>Background Directive Examples</h2>
        
        <div class="example-grid">
          <div class="demo-card" [uiBackground]="solidConfig()">
            <h3>Solid Background</h3>
            <p>Using the background directive with solid color</p>
          </div>

          <div class="demo-card" [uiBackground]="gradientConfig()">
            <h3>Linear Gradient</h3>
            <p>Beautiful gradient backgrounds</p>
          </div>

          <div class="demo-card" [uiBackground]="patternConfig()">
            <h3>Pattern Background</h3>
            <p>Geometric patterns</p>
          </div>
        </div>
      </section>

      <!-- Component Examples -->
      <section class="demo-section">
        <h2>Background Components</h2>
        
        <div class="example-grid">
          <ui-solid-background color="#4ade80" class="demo-card">
            <h3>Solid Component</h3>
            <p>Green background using component</p>
          </ui-solid-background>

          <ui-gradient-background 
            type="linear"
            [colors]="['#8b5cf6', '#06b6d4']"
            direction="45deg"
            class="demo-card">
            <h3>Gradient Component</h3>
            <p>Purple to cyan gradient</p>
          </ui-gradient-background>

          <ui-pattern-background
            pattern="dots"
            primaryColor="#f59e0b"
            secondaryColor="transparent"
            [size]="30"
            [opacity]="0.7"
            class="demo-card">
            <h3>Pattern Component</h3>
            <p>Orange dots pattern</p>
          </ui-pattern-background>
        </div>
      </section>

      <!-- Pattern Showcase -->
      <section class="demo-section">
        <h2>Pattern Showcase</h2>
        
        <div class="pattern-grid">
          <div 
            *ngFor="let pattern of patterns" 
            class="pattern-demo"
            [uiBackground]="getPatternConfig(pattern)">
            <span class="pattern-name">{{ pattern }}</span>
          </div>
        </div>
      </section>

      <!-- Gradient Types -->
      <section class="demo-section">
        <h2>Gradient Types</h2>
        
        <div class="gradient-grid">
          <ui-gradient-background 
            type="linear"
            [colors]="['#ff6b6b', '#4ecdc4', '#45b7d1']"
            direction="to right"
            class="gradient-demo">
            <span>Linear Gradient</span>
          </ui-gradient-background>

          <ui-gradient-background 
            type="radial"
            [colors]="['#667eea', '#764ba2']"
            shape="circle"
            class="gradient-demo">
            <span>Radial Gradient</span>
          </ui-gradient-background>

          <ui-gradient-background 
            type="conic"
            [colors]="['#ff6b6b', '#4ecdc4', '#45b7d1', '#f9ca24', '#ff6b6b']"
            class="gradient-demo">
            <span>Conic Gradient</span>
          </ui-gradient-background>
        </div>
      </section>

      <!-- Interactive Controls -->
      <section class="demo-section">
        <h2>Interactive Background</h2>
        
        <div class="interactive-demo" [uiBackground]="interactiveConfig()">
          <div class="controls">
            <button 
              *ngFor="let config of presetConfigs" 
              (click)="setInteractiveConfig(config)"
              class="preset-btn">
              {{ config.name }}
            </button>
          </div>
          <h3>Interactive Background Demo</h3>
          <p>Click buttons to change the background</p>
        </div>
      </section>

      <!-- Full Screen Examples -->
      <section class="demo-section">
        <h2>Full Screen Backgrounds</h2>
        
        <div class="fullscreen-controls">
          <button (click)="toggleFullScreenBackground()" class="action-btn">
            {{ hasFullScreenBg() ? 'Remove' : 'Add' }} Full Screen Background
          </button>
          <button 
            *ngFor="let bg of fullScreenPresets" 
            (click)="setFullScreenBackground(bg)"
            class="preset-btn">
            {{ bg.name }}
          </button>
        </div>
      </section>
    </div>
  `,
  styleUrl: './backgrounds-demo.component.scss'
})
export class BackgroundsDemoComponent {
  private readonly backgroundService = signal(new BackgroundService());
  private fullScreenBackgroundId = signal<string | null>(null);

  // Configuration signals
  solidConfig = signal<SolidBackgroundConfig>({
    type: 'solid',
    color: '#3b82f6'
  });

  gradientConfig = signal<LinearGradientConfig>({
    type: 'linear-gradient',
    direction: 'to bottom right',
    colors: [
      { color: '#ec4899' },
      { color: '#8b5cf6' }
    ]
  });

  patternConfig = signal<PatternConfig>({
    type: 'pattern',
    pattern: 'grid',
    primaryColor: '#1f2937',
    secondaryColor: 'transparent',
    size: 20,
    opacity: 0.3
  });

  interactiveConfig = signal(this.solidConfig());

  // Pattern list for showcase
  patterns = [
    'dots', 'grid', 'stripes', 'diagonal-stripes', 
    'chevron', 'waves', 'circles', 'checkerboard'
  ];

  // Preset configurations
  presetConfigs = [
    {
      name: 'Ocean',
      config: {
        type: 'linear-gradient' as const,
        direction: 'to bottom',
        colors: [{ color: '#667eea' }, { color: '#764ba2' }]
      }
    },
    {
      name: 'Sunset',
      config: {
        type: 'linear-gradient' as const,
        direction: 'to right',
        colors: [{ color: '#ff6b6b' }, { color: '#feca57' }]
      }
    },
    {
      name: 'Forest',
      config: {
        type: 'solid' as const,
        color: '#10b981'
      }
    },
    {
      name: 'Dots',
      config: {
        type: 'pattern' as const,
        pattern: 'dots' as const,
        primaryColor: '#6366f1',
        secondaryColor: 'transparent',
        size: 25,
        opacity: 0.6
      }
    }
  ];

  // Full screen presets
  fullScreenPresets = [
    {
      name: 'Purple Mesh',
      config: {
        type: 'linear-gradient' as const,
        direction: 'to bottom right',
        colors: [{ color: '#667eea' }, { color: '#764ba2' }, { color: '#f093fb' }]
      }
    },
    {
      name: 'Geometric',
      config: {
        type: 'pattern' as const,
        pattern: 'chevron' as const,
        primaryColor: '#1f2937',
        secondaryColor: 'transparent',
        size: 40,
        opacity: 0.1
      }
    }
  ];

  getPatternConfig(pattern: string): PatternConfig {
    return {
      type: 'pattern',
      pattern: pattern as any,
      primaryColor: '#6366f1',
      secondaryColor: 'transparent',
      size: 25,
      opacity: 0.4
    };
  }

  setInteractiveConfig(preset: any) {
    this.interactiveConfig.set(preset.config);
  }

  toggleFullScreenBackground() {
    const currentId = this.fullScreenBackgroundId();
    if (currentId) {
      this.backgroundService().removeBackground(currentId);
      this.fullScreenBackgroundId.set(null);
    }
  }

  setFullScreenBackground(preset: any) {
    // Remove existing full screen background
    const currentId = this.fullScreenBackgroundId();
    if (currentId) {
      this.backgroundService().removeBackground(currentId);
    }

    // Add new full screen background
    const id = this.backgroundService().applyFullScreenBackground(preset.config, {
      zIndex: -1
    });
    this.fullScreenBackgroundId.set(id);
  }

  hasFullScreenBg() {
    return this.fullScreenBackgroundId() !== null;
  }
}