<div class="texture-comparison-visualizer">
  <div class="visualizer-header">
    <h6>质感对比分析</h6>
    <div class="material-count">{{ textures.length }} 种材质</div>
  </div>

  @if (textures.length === 0) {
    <div class="empty-state">
      <p>暂无质感数据</p>
    </div>
  }

  <!-- 材质卡片网格 -->
  <div class="texture-cards-grid">
    @for (texture of textures; track texture.materialName) {
      <div class="texture-card">
        <!-- 材质缩略图 -->
        @if (texture.thumbnailUrl) {
          <div class="texture-thumbnail">
            <img [src]="texture.thumbnailUrl" [alt]="texture.materialName">
          </div>
        }

        <!-- 材质信息 -->
        <div class="texture-info">
          <h6 class="material-name">{{ texture.materialName }}</h6>
          <span class="material-type">{{ texture.materialType }}</span>
          <span 
            class="characteristic-badge" 
            [style.background-color]="getCharacteristicColor(texture.dominantCharacteristic) + '20'"
            [style.color]="getCharacteristicColor(texture.dominantCharacteristic)">
            {{ getCharacteristicName(texture.dominantCharacteristic) }}
          </span>
        </div>

        <!-- 雷达图 -->
        @if (showRadarChart) {
          <div class="radar-chart-container">
            <svg width="120" height="120" viewBox="0 0 120 120">
              <!-- 网格 -->
              <g class="radar-grid">
                @for (gridPath of getRadarGridPaths(); track $index) {
                  <path
                    [attr.d]="gridPath"
                    fill="none"
                    stroke="#e0e0e0"
                    stroke-width="0.5"
                  />
                }
                
                <!-- 轴线 -->
                @for (prop of predefinedProperties; track $index) {
                  <line
                    x1="60"
                    y1="60"
                    [attr.x2]="getRadarLabelPosition($index).x"
                    [attr.y2]="getRadarLabelPosition($index).y"
                    stroke="#ddd"
                    stroke-width="0.5"
                  />
                }
              </g>

              <!-- 数据区域 -->
              <path
                [attr.d]="getRadarPath(texture)"
                [attr.fill]="getCharacteristicColor(texture.dominantCharacteristic) + '40'"
                [attr.stroke]="getCharacteristicColor(texture.dominantCharacteristic)"
                stroke-width="2"
              />

              <!-- 数据点 -->
              @for (prop of predefinedProperties; track $index) {
                <circle
                  [attr.cx]="60 + (getPropertyValue(texture, prop) / 100 * 50) * Math.cos(2 * Math.PI * $index / predefinedProperties.length - Math.PI / 2)"
                  [attr.cy]="60 + (getPropertyValue(texture, prop) / 100 * 50) * Math.sin(2 * Math.PI * $index / predefinedProperties.length - Math.PI / 2)"
                  r="3"
                  [attr.fill]="getCharacteristicColor(texture.dominantCharacteristic)"
                />
              }

              <!-- 属性标签 -->
              @for (prop of predefinedProperties; track $index) {
                <text
                  [attr.x]="getRadarLabelPosition($index).x"
                  [attr.y]="getRadarLabelPosition($index).y + 12"
                  text-anchor="middle"
                  class="radar-label"
                  font-size="8">
                  {{ prop }}
                </text>
              }
            </svg>
          </div>
        }

        <!-- 属性条形图 -->
        @if (showPropertyBars) {
          <div class="property-bars">
            @for (prop of texture.properties; track prop.name) {
              <div class="property-item">
                <div class="property-header">
                  <span class="property-name">
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <path [attr.d]="getCategoryIcon(prop.category)"></path>
                    </svg>
                    {{ prop.name }}
                  </span>
                  <span class="property-value">{{ prop.value }}{{ prop.unit || '%' }}</span>
                </div>
                <div class="property-bar-container">
                  <div 
                    class="property-bar-fill" 
                    [style.width.%]="prop.value"
                    [style.background-color]="getCharacteristicColor(texture.dominantCharacteristic)">
                  </div>
                </div>
              </div>
            }
          </div>
        }
      </div>
    }
  </div>

  <!-- 对比总结 -->
  @if (textures.length > 1) {
    <div class="comparison-summary">
      <h6>对比总结</h6>
      <div class="summary-grid">
        <div class="summary-item">
          <span class="label">最光滑:</span>
          <span class="value">{{ getSmoothestMaterial() }}</span>
        </div>
        <div class="summary-item">
          <span class="label">最粗糙:</span>
          <span class="value">{{ getRoughestMaterial() }}</span>
        </div>
        <div class="summary-item">
          <span class="label">最高光泽:</span>
          <span class="value">{{ getGlossiestMaterial() }}</span>
        </div>
        <div class="summary-item">
          <span class="label">最哑光:</span>
          <span class="value">{{ getMattestMaterial() }}</span>
        </div>
      </div>
    </div>
  }
</div>

