<div class="color-wheel-container">
  <svg 
    [attr.width]="size" 
    [attr.height]="size" 
    [attr.viewBox]="'0 0 200 200'"
    class="color-wheel-svg">
    
    <defs>
      <!-- 色轮圆环渐变（使用多个扇形来模拟圆锥渐变） -->
      <g id="color-wheel-background">
        @for (stop of getConicGradientStops(); track $index) {
          @if ($index < getConicGradientStops().length - 1) {
            <path
              [attr.d]="'M 100 100 L ' + (100 + outerRadius * Math.cos(($index / 60) * 2 * Math.PI - Math.PI/2)) + ' ' + 
                        (100 + outerRadius * Math.sin(($index / 60) * 2 * Math.PI - Math.PI/2)) + ' A ' + outerRadius + ' ' + outerRadius + 
                        ' 0 0 1 ' + (100 + outerRadius * Math.cos((($index + 1) / 60) * 2 * Math.PI - Math.PI/2)) + ' ' + 
                        (100 + outerRadius * Math.sin((($index + 1) / 60) * 2 * Math.PI - Math.PI/2)) + ' Z'"
              [attr.fill]="stop.color"
              opacity="0.9"
            />
          }
        }
      </g>
      
      <!-- 内圈遮罩 -->
      <mask id="ring-mask">
        <circle cx="100" cy="100" [attr.r]="outerRadius" fill="white" />
        <circle cx="100" cy="100" [attr.r]="innerRadius" fill="black" />
      </mask>
    </defs>
    
    <!-- 色轮背景 -->
    <use href="#color-wheel-background" mask="url(#ring-mask)" />
    
    <!-- 色轮边框 -->
    <circle 
      cx="100" 
      cy="100" 
      [attr.r]="outerRadius" 
      fill="none" 
      stroke="#ddd" 
      stroke-width="1" 
    />
    <circle 
      cx="100" 
      cy="100" 
      [attr.r]="innerRadius" 
      fill="white" 
      stroke="#ddd" 
      stroke-width="1" 
    />
    
    <!-- 颜色点标记 -->
    @for (color of colorPoints; track color.hex) {
      <!-- 连接线 -->
      <line
        [attr.x1]="100"
        [attr.y1]="100"
        [attr.x2]="getColorPosition(color).x"
        [attr.y2]="getColorPosition(color).y"
        stroke="#ccc"
        stroke-width="0.5"
        stroke-dasharray="2,2"
      />
      
      <!-- 颜色点 -->
      <circle
        [attr.cx]="getColorPosition(color).x"
        [attr.cy]="getColorPosition(color).y"
        r="6"
        [attr.fill]="color.hex"
        stroke="white"
        stroke-width="2"
        class="color-point"
      />
      
      <!-- 颜色点外圈 -->
      <circle
        [attr.cx]="getColorPosition(color).x"
        [attr.cy]="getColorPosition(color).y"
        r="8"
        fill="none"
        stroke="#333"
        stroke-width="0.5"
        opacity="0.3"
      />
    }
    
    <!-- 颜色标签 -->
    @if (showLabels) {
      @for (color of colorPoints; track color.hex) {
        <g>
          <!-- 标签背景 -->
          <rect
            [attr.x]="getLabelPosition(color).x + (getTextAnchor(color.angle) === 'end' ? -55 : 5)"
            [attr.y]="getLabelPosition(color).y - 10"
            width="50"
            height="18"
            rx="3"
            fill="white"
            stroke="#ddd"
            stroke-width="0.5"
            opacity="0.95"
          />
          
          <!-- 颜色名称 -->
          <text
            [attr.x]="getLabelPosition(color).x + (getTextAnchor(color.angle) === 'end' ? -30 : 30)"
            [attr.y]="getLabelPosition(color).y + 2"
            text-anchor="middle"
            class="color-label"
            [attr.fill]="color.hex"
            font-weight="600"
          >
            {{ color.name || color.hex }}
          </text>
          
          <!-- 百分比 -->
          @if (showPercentages && color.percentage) {
            <text
              [attr.x]="getLabelPosition(color).x + (getTextAnchor(color.angle) === 'end' ? -30 : 30)"
              [attr.y]="getLabelPosition(color).y + 15"
              text-anchor="middle"
              class="color-percentage"
            >
              {{ color.percentage.toFixed(1) }}%
            </text>
          }
        </g>
      }
    }
    
    <!-- 中心标题 -->
    <text
      x="100"
      y="100"
      text-anchor="middle"
      dominant-baseline="middle"
      class="center-title"
    >
      色轮
    </text>
  </svg>
  
  <!-- 图例 -->
  <div class="color-legend">
    @for (color of colorPoints; track color.hex) {
      <div class="legend-item">
        <div class="legend-color" [style.background-color]="color.hex"></div>
        <div class="legend-info">
          <span class="legend-name">{{ color.name || color.hex }}</span>
          @if (showPercentages && color.percentage) {
            <span class="legend-percentage">{{ color.percentage.toFixed(1) }}%</span>
          }
        </div>
      </div>
    }
  </div>
</div>

