@if (visible) {
<div class="gp-container" [class]="customClass">
  <!-- 全屏模式 -->
  @if (mode === 'fullscreen') {
    <div class="gp-backdrop" [class.gp-backdrop-visible]="backdrop" (click)="onBackdropClick()">
      <div class="gp-modal" [ngClass]="getSizeClass()" (click)="$event.stopPropagation()">
        @if (title) {
          <div class="gp-header">
            <h3 class="gp-title">{{ title }}</h3>
            @if (showCloseButton) {
              <button class="gp-close-btn" (click)="onClose()" aria-label="关闭">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                  <path d="M12 4L4 12M4 4L12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                </svg>
              </button>
            }
          </div>
        }
        
        <div class="gp-content">
          <div class="gp-icon" [ngClass]="getIconColorClass()">
            @if (icon === 'success') {
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            }
            @if (icon === 'info') {
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            }
            @if (icon === 'warning') {
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M12 9V13M12 17H12.01M10.29 3.86L1.82 18A2 2 0 003.54 21H20.46A2 2 0 0022.18 18L13.71 3.86A2 2 0 0010.29 3.86Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            }
            @if (icon === 'error') {
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M12 8V12M12 16H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            }
          </div>
          
          @if (message) {
            <div class="gp-message">{{ message }}</div>
          }
        </div>
        
        @if (showActionButton) {
          <div class="gp-actions">
            <button class="gp-action-btn" (click)="onAction()">{{ actionButtonText }}</button>
          </div>
        }
      </div>
    </div>
  }
  
  <!-- 模态框模式 -->
  @if (mode === 'modal') {
    <div class="gp-backdrop gp-modal-backdrop" [class.gp-backdrop-visible]="backdrop" (click)="onBackdropClick()">
      <div class="gp-modal gp-modal-dialog" [ngClass]="getSizeClass()" (click)="$event.stopPropagation()">
        <div class="gp-header">
          @if (title) { <h3 class="gp-title">{{ title }}</h3> }
          @if (showCloseButton) {
            <button class="gp-close-btn" (click)="onClose()" aria-label="关闭">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                <path d="M12 4L4 12M4 4L12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
              </svg>
            </button>
          }
        </div>
        
        <div class="gp-content gp-modal-content">
          @if (message) { <div class="gp-message">{{ message }}</div> }
        </div>
        
        @if (showActionButton || showCloseButton) {
          <div class="gp-actions">
            @if (showActionButton) { <button class="gp-action-btn gp-btn-primary" (click)="onAction()">{{ actionButtonText }}</button> }
            @if (showCloseButton) { <button class="gp-action-btn gp-btn-secondary" (click)="onClose()">取消</button> }
          </div>
        }
      </div>
    </div>
  }

  <!-- 角落提示模式 -->
  @if (mode === 'corner') {
    <div class="gp-toast" [ngClass]="[getSizeClass(), getPositionClass()]">
      <div class="gp-toast-content">
        <div class="gp-icon gp-toast-icon" [ngClass]="getIconColorClass()">
          @if (icon === 'success') {
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
              <path d="M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          }
          @if (icon === 'info') {
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
              <path d="M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          }
          @if (icon === 'warning') {
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
              <path d="M12 9V13M12 17H12.01M10.29 3.86L1.82 18A2 2 0 003.54 21H20.46A2 2 0 0022.18 18L13.71 3.86A2 2 0 0010.29 3.86Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          }
          @if (icon === 'error') {
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
              <path d="M12 8V12M12 16H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          }
        </div>
        
        <div class="gp-toast-text">
          @if (title) { <div class="gp-toast-title">{{ title }}</div> }
          @if (message) { <div class="gp-toast-message">{{ message }}</div> }
        </div>
        
        @if (showCloseButton) {
          <button class="gp-toast-close" (click)="onClose()" aria-label="关闭">
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
              <path d="M12 4L4 12M4 4L12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            </svg>
          </button>
        }
      </div>
    </div>
  }
</div>
}