import { Component, Input, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';

export interface TextureProperty {
  name: string;
  value: number; // 0-100
  unit?: string;
  description?: string;
  category: 'visual' | 'tactile' | 'reflective';
}

export interface MaterialTextureData {
  materialName: string;
  materialType: string;
  properties: TextureProperty[];
  thumbnailUrl?: string;
  dominantCharacteristic: 'glossy' | 'matte' | 'rough' | 'smooth' | 'mixed';
}

@Component({
  selector: 'app-texture-comparison-visualizer',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './texture-comparison-visualizer.html',
  styleUrls: ['./texture-comparison-visualizer.scss']
})
export class TextureComparisonVisualizerComponent implements OnInit {
  @Input() textures: MaterialTextureData[] = [];
  @Input() showRadarChart: boolean = true; // 是否显示雷达图
  @Input() showPropertyBars: boolean = true; // 是否显示属性条形图

  // 预定义的质感属性
  predefinedProperties: string[] = [
    '光泽度',
    '粗糙度',
    '反射率',
    '触感柔软度',
    '纹理密度',
    '视觉温暖度'
  ];

  ngOnInit(): void {
    this.normalizeTextureData();
  }

  /**
   * 标准化质感数据，确保所有材质都有相同的属性
   */
  private normalizeTextureData(): void {
    this.textures.forEach(texture => {
      this.predefinedProperties.forEach(propName => {
        if (!texture.properties.find(p => p.name === propName)) {
          texture.properties.push({
            name: propName,
            value: 50, // 默认值
            category: this.getCategoryByPropertyName(propName)
          });
        }
      });
    });
  }

  /**
   * 根据属性名获取分类
   */
  private getCategoryByPropertyName(name: string): 'visual' | 'tactile' | 'reflective' {
    if (name.includes('光泽') || name.includes('反射') || name.includes('视觉')) {
      return 'visual';
    }
    if (name.includes('触感') || name.includes('柔软') || name.includes('粗糙')) {
      return 'tactile';
    }
    return 'reflective';
  }

  /**
   * 获取质感主导特征的中文名
   */
  getCharacteristicName(characteristic: string): string {
    const nameMap: { [key: string]: string } = {
      'glossy': '光泽',
      'matte': '哑光',
      'rough': '粗糙',
      'smooth': '光滑',
      'mixed': '混合'
    };
    return nameMap[characteristic] || characteristic;
  }

  /**
   * 获取质感特征的颜色
   */
  getCharacteristicColor(characteristic: string): string {
    const colorMap: { [key: string]: string } = {
      'glossy': '#007AFF',
      'matte': '#8E8E93',
      'rough': '#FF9500',
      'smooth': '#34C759',
      'mixed': '#5856D6'
    };
    return colorMap[characteristic] || '#666';
  }

  /**
   * 生成雷达图SVG路径
   */
  getRadarPath(texture: MaterialTextureData): string {
    const centerX = 60;
    const centerY = 60;
    const maxRadius = 50;
    const angleStep = (2 * Math.PI) / this.predefinedProperties.length;

    const points: string[] = [];

    this.predefinedProperties.forEach((propName, index) => {
      const prop = texture.properties.find(p => p.name === propName);
      const value = prop ? prop.value : 50;
      const radius = (value / 100) * maxRadius;
      const angle = angleStep * index - Math.PI / 2;
      const x = centerX + radius * Math.cos(angle);
      const y = centerY + radius * Math.sin(angle);
      points.push(`${x},${y}`);
    });

    return `M ${points.join(' L ')} Z`;
  }

  /**
   * 生成雷达图网格
   */
  getRadarGridPaths(): string[] {
    const centerX = 60;
    const centerY = 60;
    const maxRadius = 50;
    const angleStep = (2 * Math.PI) / this.predefinedProperties.length;
    const gridLevels = [0.2, 0.4, 0.6, 0.8, 1.0];

    return gridLevels.map(level => {
      const points: string[] = [];
      this.predefinedProperties.forEach((_, index) => {
        const radius = maxRadius * level;
        const angle = angleStep * index - Math.PI / 2;
        const x = centerX + radius * Math.cos(angle);
        const y = centerY + radius * Math.sin(angle);
        points.push(`${x},${y}`);
      });
      return `M ${points.join(' L ')} Z`;
    });
  }

  /**
   * 获取雷达图标签位置
   */
  getRadarLabelPosition(index: number): { x: number; y: number } {
    const centerX = 60;
    const centerY = 60;
    const labelRadius = 58;
    const angleStep = (2 * Math.PI) / this.predefinedProperties.length;
    const angle = angleStep * index - Math.PI / 2;

    return {
      x: centerX + labelRadius * Math.cos(angle),
      y: centerY + labelRadius * Math.sin(angle)
    };
  }

  /**
   * 获取属性值（安全访问）
   */
  getPropertyValue(texture: MaterialTextureData, propertyName: string): number {
    const prop = texture.properties.find(p => p.name === propertyName);
    return prop ? prop.value : 0;
  }

  /**
   * 获取分类图标
   */
  getCategoryIcon(category: string): string {
    const iconMap: { [key: string]: string } = {
      'visual': 'M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z',
      'tactile': 'M9 11.24V7.5C9 6.12 10.12 5 11.5 5S14 6.12 14 7.5v3.74c1.21-.81 2-2.18 2-3.74C16 5.01 13.99 3 11.5 3S7 5.01 7 7.5c0 1.56.79 2.93 2 3.74zm9.84 4.63l-4.54-2.26c-.17-.07-.35-.11-.54-.11H13v-6c0-.83-.67-1.5-1.5-1.5S10 6.67 10 7.5v10.74l-3.43-.72c-.08-.01-.15-.03-.24-.03-.31 0-.59.13-.79.33l-.79.8 4.94 4.94c.27.27.65.44 1.06.44h6.79c.75 0 1.33-.55 1.44-1.28l.75-5.27c.01-.07.02-.14.02-.2 0-.62-.38-1.16-.91-1.38z',
      'reflective': 'M12 2L4.5 20.29l.71.71L12 18l6.79 3 .71-.71z'
    };
    return iconMap[category] || iconMap['visual'];
  }

  /**
   * 获取最光滑的材质
   */
  getSmoothestMaterial(): string {
    if (this.textures.length === 0) return '-';
    
    let smoothest = this.textures[0];
    let maxSmoothness = 0;
    
    this.textures.forEach(texture => {
      const smoothProp = texture.properties.find(p => p.name === '粗糙度');
      if (smoothProp && (100 - smoothProp.value) > maxSmoothness) {
        maxSmoothness = 100 - smoothProp.value;
        smoothest = texture;
      }
    });
    
    return smoothest.materialName;
  }

  /**
   * 获取最粗糙的材质
   */
  getRoughestMaterial(): string {
    if (this.textures.length === 0) return '-';
    
    let roughest = this.textures[0];
    let maxRoughness = 0;
    
    this.textures.forEach(texture => {
      const roughProp = texture.properties.find(p => p.name === '粗糙度');
      if (roughProp && roughProp.value > maxRoughness) {
        maxRoughness = roughProp.value;
        roughest = texture;
      }
    });
    
    return roughest.materialName;
  }

  /**
   * 获取最高光泽的材质
   */
  getGlossiestMaterial(): string {
    if (this.textures.length === 0) return '-';
    
    let glossiest = this.textures[0];
    let maxGloss = 0;
    
    this.textures.forEach(texture => {
      const glossProp = texture.properties.find(p => p.name === '光泽度');
      if (glossProp && glossProp.value > maxGloss) {
        maxGloss = glossProp.value;
        glossiest = texture;
      }
    });
    
    return glossiest.materialName;
  }

  /**
   * 获取最哑光的材质
   */
  getMattestMaterial(): string {
    if (this.textures.length === 0) return '-';
    
    let mattest = this.textures[0];
    let minGloss = 100;
    
    this.textures.forEach(texture => {
      const glossProp = texture.properties.find(p => p.name === '光泽度');
      if (glossProp && glossProp.value < minGloss) {
        minGloss = glossProp.value;
        mattest = texture;
      }
    });
    
    return mattest.materialName;
  }

  /**
   * 暴露Math对象供模板使用
   */
  Math = Math;
}

