<div class="pattern-visualizer">
  @if (!patternData) {
    <div class="empty-state">
      <p>暂无图案数据</p>
    </div>
  } @else {
    <div class="visualizer-container">
      <!-- 图案预览 -->
      <div class="pattern-preview">
        <div class="preview-image">
          <img [src]="patternData.imageUrl" [alt]="getPatternTypeName(patternData.patternType)">
          
          <!-- 方向指示器 -->
          @if (patternData.direction.primary !== 'random' && patternData.direction.primary !== 'radial') {
            <div class="direction-indicator" [style.transform]="'rotate(' + getDirectionRotation() + 'deg)'">
              <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
                <line x1="12" y1="4" x2="12" y2="20"></line>
                <polyline points="16 16 12 20 8 16"></polyline>
              </svg>
            </div>
          }
          
          <!-- 放射指示器 -->
          @if (patternData.direction.primary === 'radial') {
            <div class="radial-indicator">
              <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
                <circle cx="12" cy="12" r="3"></circle>
                <line x1="12" y1="2" x2="12" y2="6"></line>
                <line x1="12" y1="18" x2="12" y2="22"></line>
                <line x1="2" y1="12" x2="6" y2="12"></line>
                <line x1="18" y1="12" x2="22" y2="12"></line>
                <line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line>
                <line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line>
                <line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line>
                <line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line>
              </svg>
            </div>
          }
        </div>
        
        <!-- 图案类型标签 -->
        <div class="pattern-type-badge">
          {{ getPatternTypeName(patternData.patternType) }}
        </div>
      </div>

      @if (showDetailedAnalysis) {
        <div class="detailed-analysis">
          <!-- 重复性分析 -->
          <div class="analysis-section">
            <h6>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
              </svg>
              重复性
            </h6>
            <div class="section-content">
              @if (patternData.repetition.hasRepetition) {
                <div class="repetition-info">
                  <div class="info-item">
                    <span class="label">频率</span>
                    <div class="progress-bar">
                      <div class="progress-fill" [style.width.%]="patternData.repetition.frequency"></div>
                    </div>
                    <span class="value">{{ patternData.repetition.frequency }}%</span>
                  </div>
                  <div class="info-item">
                    <span class="label">规律性</span>
                    <div class="progress-bar">
                      <div class="progress-fill" [style.width.%]="patternData.repetition.regularity"></div>
                    </div>
                    <span class="value">{{ patternData.repetition.regularity }}%</span>
                  </div>
                  
                  <!-- 重复可视化 -->
                  <div class="repetition-visual">
                    @for (item of getRepetitionVisual(); track $index) {
                      <div class="repeat-unit"></div>
                    }
                  </div>
                </div>
              } @else {
                <p class="no-repetition">无明显重复图案</p>
              }
            </div>
          </div>

          <!-- 方向性分析 -->
          <div class="analysis-section">
            <h6>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polyline points="4 14 10 14 10 20"></polyline>
                <polyline points="20 10 14 10 14 4"></polyline>
                <line x1="14" y1="10" x2="21" y2="3"></line>
                <line x1="3" y1="21" x2="10" y2="14"></line>
              </svg>
              方向性
            </h6>
            <div class="section-content">
              <div class="direction-info">
                <span class="direction-badge">{{ getDirectionName(patternData.direction.primary) }}</span>
                @if (patternData.direction.angle !== undefined) {
                  <span class="angle-value">{{ patternData.direction.angle }}°</span>
                }
              </div>
            </div>
          </div>

          <!-- 密度分析 -->
          <div class="analysis-section">
            <h6>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <rect x="3" y="3" width="7" height="7"></rect>
                <rect x="14" y="3" width="7" height="7"></rect>
                <rect x="14" y="14" width="7" height="7"></rect>
                <rect x="3" y="14" width="7" height="7"></rect>
              </svg>
              密度
            </h6>
            <div class="section-content">
              <div class="density-info">
                <span 
                  class="density-badge" 
                  [style.background-color]="getDensityColor(patternData.density.level) + '20'"
                  [style.color]="getDensityColor(patternData.density.level)">
                  {{ getDensityName(patternData.density.level) }}
                </span>
                <span class="density-percentage">{{ patternData.density.percentage }}%</span>
              </div>
              
              <!-- 密度网格可视化 -->
              <div class="density-grid">
                @for (row of getDensityGrid(); track $index) {
                  <div class="grid-row">
                    @for (cell of row; track $index) {
                      <div class="grid-cell" [class.filled]="cell"></div>
                    }
                  </div>
                }
              </div>
            </div>
          </div>

          <!-- 复杂度分析 -->
          <div class="analysis-section">
            <h6>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
                <polyline points="2 17 12 22 22 17"></polyline>
                <polyline points="2 12 12 17 22 12"></polyline>
              </svg>
              复杂度
            </h6>
            <div class="section-content">
              <div class="complexity-info">
                <span 
                  class="complexity-badge"
                  [style.background-color]="getComplexityColor(patternData.complexity.level) + '20'"
                  [style.color]="getComplexityColor(patternData.complexity.level)">
                  {{ getComplexityName(patternData.complexity.level) }}
                </span>
                <span class="element-count">{{ patternData.complexity.elementCount }} 个元素</span>
              </div>
            </div>
          </div>

          <!-- 颜色多样性 -->
          <div class="analysis-section">
            <h6>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"></path>
              </svg>
              颜色多样性
            </h6>
            <div class="section-content">
              <div class="color-variety-info">
                <span class="variety-count">{{ patternData.colorVariety }} 种颜色</span>
                
                <!-- 主导颜色展示 -->
                <div class="dominant-colors">
                  @for (color of patternData.dominantColors; track color.hex) {
                    <div class="color-item">
                      <div class="color-swatch" [style.background-color]="color.hex"></div>
                      <span class="color-percentage">{{ color.percentage.toFixed(1) }}%</span>
                    </div>
                  }
                </div>
              </div>
            </div>
          </div>
        </div>
      }
    </div>
  }
</div>

