import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, OnDestroy } from '@angular/core';
import { CommonModule } from '@angular/common';

type PromptMode = 'fullscreen' | 'corner' | 'modal';
type CornerPosition = 'top-right' | 'bottom-right' | 'top-left' | 'bottom-left';
type PromptType = 'success' | 'info' | 'warning' | 'error';
type PromptSize = 'small' | 'medium' | 'large';

@Component({
  selector: 'app-global-prompt',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './global-prompt.component.html',
  styleUrls: ['./global-prompt.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class GlobalPromptComponent implements OnDestroy {
  @Input() visible = false;
  @Input() title = '上传成功！';
  @Input() message = '';
  @Input() mode: PromptMode = 'fullscreen';
  @Input() position: CornerPosition = 'bottom-right';
  @Input() icon: PromptType = 'success';
  @Input() size: PromptSize = 'medium';
  @Input() autoDismissMs = 0; // 0 表示不自动关闭
  @Input() showCloseButton = true;
  @Input() showActionButton = false;
  @Input() actionButtonText = '确定';
  @Input() backdrop = true; // 是否显示背景遮罩
  @Input() backdropDismiss = true; // 点击背景是否关闭
  @Input() customClass = ''; // 自定义CSS类名

  @Output() closed = new EventEmitter<void>();
  @Output() action = new EventEmitter<void>();
  @Output() backdropClick = new EventEmitter<void>();

  private _dismissTimer?: number;

  ngOnChanges() {
    if (this.visible && this.autoDismissMs > 0) {
      this.clearDismissTimer();
      this._dismissTimer = window.setTimeout(() => {
        this.onClose();
      }, this.autoDismissMs);
    } else if (!this.visible) {
      this.clearDismissTimer();
    }
  }

  ngOnDestroy() {
    this.clearDismissTimer();
  }

  private clearDismissTimer() {
    if (this._dismissTimer) {
      window.clearTimeout(this._dismissTimer);
      this._dismissTimer = undefined;
    }
  }

  onClose() {
    this.clearDismissTimer();
    this.closed.emit();
  }

  onAction() {
    this.action.emit();
  }

  onBackdropClick() {
    this.backdropClick.emit();
    if (this.backdropDismiss) {
      this.onClose();
    }
  }

  // 获取图标类型对应的颜色类
  getIconColorClass(): string {
    const colorMap = {
      success: 'text-green-500',
      info: 'text-blue-500', 
      warning: 'text-orange-500',
      error: 'text-red-500'
    };
    return colorMap[this.icon] || colorMap.success;
  }

  // 获取尺寸对应的CSS类
  getSizeClass(): string {
    const sizeMap = {
      small: 'gp-size-small',
      medium: 'gp-size-medium',
      large: 'gp-size-large'
    };
    return sizeMap[this.size] || sizeMap.medium;
  }

  // 获取位置对应的CSS类
  getPositionClass(): string {
    if (this.mode !== 'corner') return '';
    
    const positionMap = {
      'top-right': 'gp-position-top-right',
      'bottom-right': 'gp-position-bottom-right',
      'top-left': 'gp-position-top-left',
      'bottom-left': 'gp-position-bottom-left'
    };
    return positionMap[this.position] || positionMap['bottom-right'];
  }
}