<!-- 上传成功弹窗 -->
@if (isVisible) {
  <div class="modal-backdrop" 
       [@backdropAnimation]
       (click)="onBackdropClick($event)">
    
    <div class="modal-container" 
         [@modalAnimation]
         [class.mobile]="isMobile"
         [class.tablet]="isTablet"
         (click)="$event.stopPropagation()">
      
      <!-- 弹窗头部 -->
      <div class="modal-header" [@fadeInOut]>
        <div class="header-content">
          <div class="success-icon" [@successIconAnimation]>
            <svg width="32" height="32" viewBox="0 0 24 24" fill="none">
              <circle cx="12" cy="12" r="10" fill="#10B981"/>
              <path d="m9 12 2 2 4-4" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <div class="header-text">
            <h2>上传成功！</h2>
            <p>已成功上传 {{ uploadedFiles.length }} 个文件</p>
          </div>
        </div>
        
        <button class="close-button" 
                (click)="onClose()"
                [@buttonHoverAnimation]="buttonHoverState"
                (mouseenter)="buttonHoverState = 'hover'"
                (mouseleave)="buttonHoverState = 'normal'"
                aria-label="关闭弹窗">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
        </button>
      </div>

      <!-- 弹窗内容 -->
      <div class="modal-content">
        <!-- 已上传文件列表 -->
        <div class="uploaded-files" [@fileListAnimation]="uploadedFiles.length">
          <h3>已上传文件</h3>
          <div class="file-list">
            @for (file of uploadedFiles; track file.id) {
              <div class="file-item" [@slideInOut]>
                <div class="file-icon">
                  @if (file.type?.startsWith('image/')) {
                    <img [src]="file.preview || '/assets/images/file-image.svg'" 
                         [alt]="file.name"
                         class="file-preview">
                  } @else {
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" 
                            fill="#6B7280"/>
                      <polyline points="14,2 14,8 20,8" fill="#9CA3AF"/>
                    </svg>
                  }
                </div>
                <div class="file-info">
                  <span class="file-name">{{ file.name }}</span>
                  <span class="file-size">{{ formatFileSize(file.size || 0) }}</span>
                </div>
                <div class="file-status success">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="10" fill="#10B981"/>
                    <path d="m9 12 2 2 4-4" stroke="white" stroke-width="2" stroke-linecap="round"/>
                  </svg>
                </div>
              </div>
            }
          </div>
        </div>

        <!-- 颜色分析功能区域 -->
        @if (shouldShowColorAnalysis()) {
          <div class="color-analysis-section">
            <div class="section-header">
              <h4>智能颜色分析</h4>
              <p>基于上传的参考图片，自动提取主要色彩和材质信息</p>
            </div>

            <!-- 分析按钮或结果 -->
            @if (!analysisResult && !isAnalyzing) {
              <div class="analysis-action">
                <button class="analyze-btn" 
                        (click)="startColorAnalysis()"
                        [disabled]="isAnalyzing">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <circle cx="12" cy="12" r="3"></circle>
                    <path d="M12 1v6m0 6v6m11-7h-6m-6 0H1m15.5-6.5l-4.24 4.24M7.76 16.24l-4.24 4.24m0-8.48l4.24 4.24m8.48 0l4.24-4.24"></path>
                  </svg>
                  开始颜色分析
                </button>
              </div>
            }

            <!-- 分析进行中 -->
            @if (isAnalyzing) {
              <div class="analysis-loading">
                <div class="loading-spinner"></div>
                <div class="loading-text">
                  <h5>正在分析图片颜色...</h5>
                  <p>请稍候，系统正在提取主要色彩信息</p>
                </div>
              </div>
            }

            <!-- 分析结果 -->
            @if (analysisResult && !isAnalyzing) {
              <div class="analysis-result">
                <div class="result-header">
                  <h5>颜色分析结果</h5>
                  <span class="result-count">提取到 {{ analysisResult.colors.length }} 种主要颜色</span>
                </div>
                
                <div class="color-palette">
                  @for (colorInfo of analysisResult.colors; track colorInfo.hex) {
                    <div class="color-item">
                      <div class="color-swatch" 
                           [style.background-color]="colorInfo.hex"
                           [title]="colorInfo.hex + ' (' + colorInfo.percentage + '%)'">
                      </div>
                      <div class="color-info">
                        <div class="color-value">{{ colorInfo.hex }}</div>
                        <div class="color-percentage">{{ colorInfo.percentage }}%</div>
                      </div>
                    </div>
                  }
                </div>

                <div class="result-actions">
                  <button class="view-report-btn" (click)="onViewReportClick()">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                      <polyline points="14,2 14,8 20,8"></polyline>
                    </svg>
                    查看完整报告
                  </button>
                </div>

                <!-- 颜色描述文字区域 -->
                <div class="color-description-section">
                  <div class="description-header">
                    <h6>颜色描述文字</h6>
                    <p>适用于即梦等AI工具的颜色描述</p>
                  </div>
                  
                  <div class="description-content">
                    <div class="description-text" 
                         [class.has-content]="generateColorDescription()"
                         #descriptionText>
                      {{ generateColorDescription() || '暂无颜色分析结果' }}
                    </div>
                    
                    @if (generateColorDescription()) {
                      <button class="copy-description-btn" 
                              (click)="copyColorDescription()"
                              [class.copied]="copySuccess"
                              title="复制颜色描述">
                        @if (copySuccess) {
                          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <polyline points="20,6 9,17 4,12"></polyline>
                          </svg>
                          已复制
                        } @else {
                          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                          </svg>
                          复制
                        }
                      </button>
                    }
                  </div>
                  
                  <div class="description-tips">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <circle cx="12" cy="12" r="10"></circle>
                      <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                      <line x1="12" y1="17" x2="12.01" y2="17"></line>
                    </svg>
                    <span>复制后可直接粘贴到即梦等AI工具中，用于生成对应颜色风格的室内设计</span>
                  </div>
                </div>
              </div>
            }

            <!-- 分析错误 -->
            @if (analysisError) {
              <div class="analysis-error">
                <div class="error-icon">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <circle cx="12" cy="12" r="10"></circle>
                    <line x1="15" y1="9" x2="9" y2="15"></line>
                    <line x1="9" y1="9" x2="15" y2="15"></line>
                  </svg>
                </div>
                <div class="error-text">
                  <h5>分析失败</h5>
                  <p>{{ analysisError }}</p>
                </div>
                <button class="retry-btn" (click)="startColorAnalysis()">
                  重试
                </button>
              </div>
            }
          </div>
        }
      </div>

      <!-- 弹窗底部 -->
      <div class="modal-footer">
        <div class="footer-actions">
          <button class="secondary-btn" (click)="onClose()">
            关闭
          </button>
          @if (shouldShowColorAnalysis() && !analysisResult) {
            <button class="primary-btn" 
                    (click)="startColorAnalysis()"
                    [disabled]="isAnalyzing">
              @if (isAnalyzing) {
                <div class="btn-spinner"></div>
                分析中...
              } @else {
                开始分析
              }
            </button>
          }
        </div>
      </div>
    </div>
  </div>
}