import { 
  Directive, 
  Input, 
  OnInit, 
  OnDestroy, 
  OnChanges, 
  SimpleChanges,
  ElementRef,
  inject
} from '@angular/core';
import { BackgroundConfig, BackgroundOptions } from '../types/background.types';
import { BackgroundService } from '../services/background.service';

@Directive({
  selector: '[uiBackground]',
  standalone: true
})
export class BackgroundDirective implements OnInit, OnDestroy, OnChanges {
  private readonly elementRef = inject(ElementRef<HTMLElement>);
  private readonly backgroundService = inject(BackgroundService);
  private backgroundId?: string;

  @Input('uiBackground') config?: BackgroundConfig;
  @Input() backgroundOptions?: Partial<BackgroundOptions>;
  @Input() backgroundDisabled = false;

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

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['config'] || changes['backgroundOptions'] || changes['backgroundDisabled']) {
      if (this.backgroundDisabled) {
        this.removeBackground();
      } else {
        this.applyBackground();
      }
    }
  }

  ngOnDestroy(): void {
    this.removeBackground();
  }

  private applyBackground(): void {
    if (!this.config || this.backgroundDisabled) {
      return;
    }

    // Remove existing background if present
    this.removeBackground();

    // Apply new background
    this.backgroundId = this.backgroundService.applyBackground(
      this.elementRef.nativeElement,
      this.config
    );

    // Add base CSS class for styling
    this.elementRef.nativeElement.classList.add('ui-background');
    
    // Add specific CSS classes based on configuration
    this.addTypeClasses();
  }

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

    // Remove CSS classes
    this.removeTypeClasses();
    this.elementRef.nativeElement.classList.remove('ui-background');
  }

  private addTypeClasses(): void {
    if (!this.config) return;

    const element = this.elementRef.nativeElement;
    element.classList.add(`ui-background--${this.config.type}`);

    // Add additional classes based on type
    switch (this.config.type) {
      case 'linear-gradient':
      case 'radial-gradient':
      case 'conic-gradient':
        element.classList.add('ui-background--gradient');
        break;
      case 'pattern':
        element.classList.add('ui-background--pattern');
        if (this.config.pattern) {
          element.classList.add(`ui-background--pattern-${this.config.pattern}`);
        }
        break;
      case 'image':
        element.classList.add('ui-background--image');
        break;
      case 'animated':
        element.classList.add('ui-background--animated');
        break;
      case 'glass':
        element.classList.add('ui-background--glass');
        break;
    }
  }

  private removeTypeClasses(): void {
    if (!this.config) return;

    const element = this.elementRef.nativeElement;
    const classesToRemove: string[] = [];
    
    element.classList.forEach((cls: string) => {
      if (cls.startsWith('ui-background--')) {
        classesToRemove.push(cls);
      }
    });
    
    classesToRemove.forEach(cls => element.classList.remove(cls));
  }
}