<div class="upload-container"
     [class.drag-over]="dragOver"
     [class.disabled]="disabled"
     [class.uploading]="isUploading">

  <!-- 拖拽上传区域 -->
  <div class="upload-area"
       *ngIf="!isUploading"
       (click)="triggerFileSelect()"
       (dragover)="onDragOver($event)"
       (dragleave)="onDragLeave($event)"
       (drop)="onDrop($event)">

    <div class="upload-icon">
      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
        <polyline points="17,8 12,3 7,8"></polyline>
        <line x1="12" y1="3" x2="12" y2="15"></line>
      </svg>
    </div>

    <div class="upload-text">
      <p class="upload-title">
        拖拽文件到此处或 <span class="upload-link">点击选择文件</span>
      </p>
      <p class="upload-hint" *ngIf="accept !== '*/*'">
        支持格式: {{ accept }}
      </p>
      <p class="upload-hint">
        最大文件大小: {{ maxSize }}MB
        <span *ngIf="multiple">，支持多文件上传</span>
      </p>
      <p class="upload-hint" *ngIf="prefixKey">
        存储路径: {{ prefixKey }}
      </p>
    </div>

    <!-- 隐藏的文件输入 -->
    <input #fileInput
           type="file"
           [accept]="accept"
           [multiple]="multiple"
           [disabled]="disabled"
           (change)="onFileSelect($event)"
           class="file-input">
  </div>

  <!-- 上传进度 -->
  <div class="upload-progress" *ngIf="isUploading">
    <div class="progress-icon">
      <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="spin">
        <path d="M21 12a9 9 0 11-6.219-8.56"></path>
      </svg>
    </div>
    <div class="progress-content">
      <p class="progress-title">正在上传...</p>
      <div class="progress-bar">
        <div class="progress-fill" [style.width.%]="uploadProgress"></div>
      </div>
      <p class="progress-text">{{ uploadProgress | number:'1.0-0' }}%</p>
    </div>
  </div>

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

    <div class="file-list">
      <div class="file-item"
           *ngFor="let file of uploadedFiles; let i = index"
           [class.success]="file.success"
           [class.error]="!file.success">

        <!-- 文件图标 -->
        <div class="file-icon">
          <svg *ngIf="file.success" width="24" height="24" 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>
          <svg *ngIf="!file.success" width="24" height="24" 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="file-info">
          <p class="file-name">{{ file.success ? '上传成功' : '上传失败' }}</p>
          <p class="file-error" *ngIf="!file.success && file.error">
            {{ file.error }}
          </p>
          <p class="file-url" *ngIf="file.success && file.url">
            <a [href]="file.url" target="_blank" rel="noopener noreferrer">
              查看文件
            </a>
          </p>
        </div>

        <!-- 操作按钮 -->
        <div class="file-actions">
          <button class="remove-btn"
                  (click)="removeUploadedFile(i)"
                  *ngIf="!isUploading">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <line x1="18" y1="6" x2="6" y2="18"></line>
              <line x1="6" y1="6" x2="18" y2="18"></line>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- 预览区域 -->
  <div class="preview-area" *ngIf="showPreview && uploadedFiles.length > 0">
    <div class="preview-grid">
      <div class="preview-item"
           *ngFor="let file of uploadedFiles; let i = index"
           [class.hidden]="!(file.success && file.url)">
        <img [src]="file.url" [alt]="'预览图片 ' + (i + 1)" class="preview-image">
        <button class="preview-remove"
                (click)="removeUploadedFile(i)"
                *ngIf="!isUploading">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>