<div class="upload-example-container">
  <h2>NovaStorage 上传组件示例</h2>

  <!-- 配置选择 -->
  <div class="config-selector">
    <h3>选择上传配置:</h3>
    <div class="config-buttons">
      <button
        *ngFor="let config of exampleConfigs"
        class="config-btn"
        [class.active]="selectedConfig === config"
        (click)="selectConfig(config)">
        {{ config.title }}
      </button>
    </div>
  </div>

  <!-- 当前配置信息 -->
  <div class="current-config">
    <h4>当前配置: {{ selectedConfig.title }}</h4>
    <div class="config-details">
      <span class="config-item">接受格式: {{ selectedConfig.accept }}</span>
      <span class="config-item">最大大小: {{ selectedConfig.maxSize }}MB</span>
      <span class="config-item">多文件: {{ selectedConfig.multiple ? '是' : '否' }}</span>
      <span class="config-item" *ngIf="selectedConfig.prefixKey">存储路径: {{ selectedConfig.prefixKey }}</span>
    </div>
  </div>

  <!-- 上传组件 -->
  <div class="upload-section">
    <app-upload-component
      [accept]="selectedConfig.accept"
      [multiple]="selectedConfig.multiple"
      [maxSize]="selectedConfig.maxSize"
      [showPreview]="selectedConfig.showPreview"
      [prefixKey]="selectedConfig.prefixKey"
      (fileSelected)="onFileSelected($event)"
      (uploadStart)="onUploadStart($event)"
      (uploadProgressEvent)="onUploadProgress($event)"
      (uploadComplete)="onUploadComplete($event)"
      (uploadError)="onUploadError($event)">
    </app-upload-component>
  </div>

  <!-- 上传状态 -->
  <div class="upload-status" *ngIf="isUploading">
    <div class="status-indicator uploading">
      <div class="spinner"></div>
      <span>正在上传...</span>
    </div>
  </div>

  <!-- 上传结果 -->
  <div class="upload-results" *ngIf="uploadResults.length > 0">
    <div class="results-header">
      <h3>上传结果</h3>
      <button class="clear-btn" (click)="clearResults()">清空结果</button>
    </div>

    <div class="results-grid">
      <div
        *ngFor="let result of uploadResults; let i = index"
        class="result-item"
        [class]="getStatusClass(result)">

        <!-- 文件信息 -->
        <div class="file-info">
          <div class="file-header">
            <span class="file-status">
              {{ result.success ? '✅ 成功' : '❌ 失败' }}
            </span>
            <span class="file-index">#{{ i + 1 }}</span>
          </div>

          <div class="file-details" *ngIf="result.success && result.file">
            <p class="file-name">{{ result.file.name }}</p>
            <p class="file-meta">
              大小: {{ formatFileSize(result.file.size) }} |
              类型: {{ result.file.type || '未知' }}
            </p>
            <p class="file-url" *ngIf="result.url">
              <a [href]="result.url" target="_blank" rel="noopener noreferrer">
                {{ result.url }}
              </a>
              <button class="copy-btn" (click)="copyUrl(result.url!)">复制</button>
            </p>
          </div>

          <div class="error-details" *ngIf="!result.success">
            <p class="error-message">{{ result.error }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 统计信息 -->
    <div class="results-summary">
      <div class="summary-item">
        <span class="summary-label">总计:</span>
        <span class="summary-value">{{ uploadResults.length }}</span>
      </div>
      <div class="summary-item success">
        <span class="summary-label">成功:</span>
        <span class="summary-value">{{ successfulUploads }}</span>
      </div>
      <div class="summary-item error">
        <span class="summary-label">失败:</span>
        <span class="summary-value">{{ failedUploads }}</span>
      </div>
    </div>
  </div>

  <!-- 使用说明 -->
  <div class="usage-notes">
    <h3>使用说明</h3>
    <ul>
      <li><strong>NovaStorage</strong>: 使用企业账套ID自动初始化存储服务</li>
      <li><strong>prefixKey</strong>: 指定文件存储路径前缀，如 'project/pid/'</li>
      <li><strong>文件路径</strong>: 自动生成格式 storage/company/&lt;cid&gt;/&lt;prefixKey&gt;/&lt;YYYYMMDD&gt;/&lt;HHmmss-rand&gt;-&lt;name&gt;</li>
      <li><strong>进度监控</strong>: 支持单个文件和整体上传进度显示</li>
      <li><strong>错误处理</strong>: 自动处理上传失败，显示详细错误信息</li>
      <li><strong>文件验证</strong>: 支持文件类型和大小验证</li>
    </ul>
  </div>
</div>