<div class="material-share-container">
  <header class="page-header">
    <h1>内部素材共享盘</h1>
    <div class="header-actions">
      <input type="file" (change)="uploadMaterial($event)" class="upload-input" id="file-upload">
      <label for="file-upload" class="upload-btn">上传素材</label>
      <button (click)="toggleAdvancedSearch()" class="search-options-btn">
        {{ showAdvancedSearch ? '收起筛选' : '高级筛选' }}
      </button>
    </div>
  </header>

  <!-- 搜索和筛选区域 -->
  <div class="search-filter-section">
    <div class="search-bar">
      <input 
        type="text" 
        placeholder="搜索素材名称、标签或上传者" 
        [(ngModel)]="searchQuery"
        (input)="searchMaterials()"
        class="search-input"
      >
      <button (click)="searchMaterials()" class="search-btn">搜索</button>
    </div>

    <!-- 高级筛选选项 -->
    <div *ngIf="showAdvancedSearch" class="advanced-search">
      <div class="filter-row">
        <select [(ngModel)]="filterType" (change)="searchMaterials()" class="filter-select">
          <option value="">所有类型</option>
          <option value="模型">3D模型</option>
          <option value="贴图">贴图素材</option>
          <option value="材质">材质库</option>
          <option value="参考图">参考图片</option>
        </select>
        <select [(ngModel)]="filterStyle" (change)="searchMaterials()" class="filter-select">
          <option value="">所有风格</option>
          <option value="现代">现代风格</option>
          <option value="北欧">北欧风格</option>
          <option value="新中式">新中式</option>
          <option value="工业">工业风格</option>
          <option value="美式">美式风格</option>
        </select>
        <select [(ngModel)]="filterPrice" (change)="searchMaterials()" class="filter-select">
          <option value="">所有价格</option>
          <option value="free">免费</option>
          <option value="paid">付费</option>
        </select>
        <button (click)="resetFilters()" class="reset-btn">重置筛选</button>
      </div>
    </div>

    <!-- 以图搜图功能 -->
    <div class="image-search-section">
      <label class="image-search-label">以图搜图:</label>
      <input type="file" (change)="searchByImage($event)" class="image-upload-input" id="image-search-upload">
      <label for="image-search-upload" class="image-upload-btn">选择图片</label>
      <div *ngIf="selectedImageUrl" class="selected-image-preview">
        <img [src]="selectedImageUrl" alt="搜索图片预览">
        <button (click)="clearSelectedImage()" class="clear-image-btn">×</button>
      </div>
    </div>
  </div>

  <!-- 素材展示区域 -->
  <div class="materials-grid">
    <div *ngIf="isLoading" class="loading-state">
      <div class="loading-spinner"></div>
      <span>加载中...</span>
    </div>
    <div *ngIf="!isLoading && materials.length === 0" class="empty-state">
      <div class="empty-icon">📁</div>
      <p>暂无匹配的素材</p>
      <button (click)="resetFilters()" class="reset-btn">查看全部素材</button>
    </div>
    <div *ngFor="let material of materials" class="material-card" (click)="viewMaterialDetail(material.id)">
      <div class="material-thumbnail">
        <img [src]="material.thumbnailUrl" alt="{{ material.name }}">
        <div *ngIf="material.isNew" class="new-badge">新</div>
        <div *ngIf="material.price > 0" class="price-badge">¥{{ material.price }}</div>
      </div>
      <div class="material-info">
        <h3 class="material-name">{{ material.name }}</h3>
        <div class="material-meta">
          <span class="material-type">{{ material.type }}</span>
          <span class="upload-time">{{ formatDate(material.uploadTime) }}</span>
        </div>
        <div class="material-tags">
          <span *ngFor="let tag of material.tags.slice(0, 3)" class="tag">{{ tag }}</span>
          <span *ngIf="material.tags.length > 3" class="more-tags">+{{ material.tags.length - 3 }}</span>
        </div>
        <div class="material-stats">
          <span class="download-count">{{ material.downloadCount }}次下载</span>
          <span class="cost-saving" *ngIf="material.costSaved > 0">节约¥{{ material.costSaved }}</span>
        </div>
      </div>
      <div class="material-actions">
        <button (click)="$event.stopPropagation(); downloadMaterial(material.id)" class="download-btn">
          下载
        </button>
        <button (click)="$event.stopPropagation(); addToFavorites(material.id)" class="favorite-btn" [class.favorited]="isFavorited(material.id)">
          {{ isFavorited(material.id) ? '★' : '☆' }}
        </button>
      </div>
    </div>
  </div>

  <!-- 分页控件 -->
  <div class="pagination" *ngIf="!isLoading && materials.length > 0">
    <button (click)="goToPage(currentPage - 1)" [disabled]="currentPage === 1" class="page-btn">上一页</button>
    <button *ngFor="let page of visiblePages" (click)="goToPage(page)" class="page-btn" [class.active]="page === currentPage">{{ page }}</button>
    <button (click)="goToPage(currentPage + 1)" [disabled]="currentPage === totalPages" class="page-btn">下一页</button>
  </div>

  <!-- 统计信息 -->
  <div class="material-stats-summary">
    <div class="stat-item">
      <span class="stat-label">总素材数量</span>
      <span class="stat-value">{{ totalMaterials }}</span>
    </div>
    <div class="stat-item">
      <span class="stat-label">本月新增</span>
      <span class="stat-value">{{ monthlyAdded }}</span>
    </div>
    <div class="stat-item">
      <span class="stat-label">累计节约成本</span>
      <span class="stat-value highlight">¥{{ totalCostSaved }}</span>
    </div>
    <div class="stat-item">
      <span class="stat-label">个人已下载</span>
      <span class="stat-value">{{ personalDownloads }}</span>
    </div>
  </div>
</div>