import { Component, Input, OnInit, OnDestroy, OnChanges, SimpleChanges, ElementRef, inject, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
import { LinearGradientConfig, RadialGradientConfig, ConicGradientConfig, ColorStop, GradientDirection } from '../../types/background.types';
import { BackgroundService } from '../../services/background.service';

@Component({
  selector: 'ui-gradient-background',
  standalone: true,
  template: '<ng-content></ng-content>',
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  host: {
    'class': 'ui-background ui-background--gradient'
  }
})
export class GradientBackgroundComponent implements OnInit, OnDestroy, OnChanges {
  private readonly elementRef = inject(ElementRef<HTMLElement>);
  private readonly backgroundService = inject(BackgroundService);
  private backgroundId?: string;

  @Input() type: 'linear' | 'radial' | 'conic' = 'linear';
  @Input() colors: string[] = ['#000000', '#ffffff'];
  @Input() direction?: GradientDirection | string;
  @Input() shape?: 'circle' | 'ellipse';
  @Input() size?: 'closest-side' | 'closest-corner' | 'farthest-side' | 'farthest-corner';
  @Input() position?: string;
  @Input() angle?: string | number;
  @Input() colorStops?: ColorStop[];
  @Input() fullScreen = false;
  @Input() zIndex?: number;

  ngOnInit(): void {
    this.applyBackground();
  }

  ngOnChanges(changes: SimpleChanges): void {
    const relevantChanges = ['type', 'colors', 'direction', 'shape', 'size', 'position', 'angle', 'colorStops', 'fullScreen', 'zIndex'];
    if (relevantChanges.some(key => changes[key])) {
      this.applyBackground();
    }
  }

  ngOnDestroy(): void {
    if (this.backgroundId) {
      this.backgroundService.removeBackground(this.backgroundId);
    }
  }

  private applyBackground(): void {
    if (this.backgroundId) {
      this.backgroundService.removeBackground(this.backgroundId);
    }

    const colorStops = this.colorStops || this.colors.map(color => ({ color }));
    let config: LinearGradientConfig | RadialGradientConfig | ConicGradientConfig;

    switch (this.type) {
      case 'linear':
        config = {
          type: 'linear-gradient',
          direction: this.direction,
          colors: colorStops
        };
        break;
      case 'radial':
        config = {
          type: 'radial-gradient',
          shape: this.shape,
          size: this.size,
          position: this.position,
          colors: colorStops
        };
        break;
      case 'conic':
        config = {
          type: 'conic-gradient',
          angle: this.angle,
          position: this.position,
          colors: colorStops
        };
        break;
    }

    if (this.fullScreen) {
      this.backgroundId = this.backgroundService.applyFullScreenBackground(config, {
        zIndex: this.zIndex || -1
      });
    } else {
      this.backgroundId = this.backgroundService.applyBackground(
        this.elementRef.nativeElement,
        config
      );
    }

    // Update host class
    this.elementRef.nativeElement.classList.add(`ui-background--${this.type}-gradient`);
  }
}