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

export interface PatternAnalysisData {
  imageUrl: string;
  patternType: 'geometric' | 'organic' | 'abstract' | 'floral' | 'striped' | 'none';
  repetition: {
    hasRepetition: boolean;
    frequency: number; // 0-100
    regularity: number; // 0-100
  };
  direction: {
    primary: 'horizontal' | 'vertical' | 'diagonal' | 'radial' | 'random';
    angle?: number; // 0-360度
  };
  density: {
    level: 'sparse' | 'moderate' | 'dense';
    percentage: number; // 0-100
  };
  complexity: {
    level: 'simple' | 'moderate' | 'complex';
    elementCount: number;
  };
  colorVariety: number; // 颜色种类数量
  dominantColors: Array<{ hex: string; percentage: number }>;
}

@Component({
  selector: 'app-pattern-visualizer',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './pattern-visualizer.html',
  styleUrls: ['./pattern-visualizer.scss']
})
export class PatternVisualizerComponent implements OnInit {
  @Input() patternData: PatternAnalysisData | null = null;
  @Input() showDetailedAnalysis: boolean = true;

  ngOnInit(): void {
    // 初始化逻辑
  }

  /**
   * 获取图案类型的中文名称
   */
  getPatternTypeName(type: string): string {
    const nameMap: { [key: string]: string } = {
      'geometric': '几何图案',
      'organic': '有机图案',
      'abstract': '抽象图案',
      'floral': '花卉图案',
      'striped': '条纹图案',
      'none': '无图案'
    };
    return nameMap[type] || type;
  }

  /**
   * 获取方向的中文名称
   */
  getDirectionName(direction: string): string {
    const nameMap: { [key: string]: string } = {
      'horizontal': '水平',
      'vertical': '垂直',
      'diagonal': '对角',
      'radial': '放射',
      'random': '随机'
    };
    return nameMap[direction] || direction;
  }

  /**
   * 获取密度的中文名称
   */
  getDensityName(density: string): string {
    const nameMap: { [key: string]: string } = {
      'sparse': '稀疏',
      'moderate': '适中',
      'dense': '密集'
    };
    return nameMap[density] || density;
  }

  /**
   * 获取复杂度的中文名称
   */
  getComplexityName(complexity: string): string {
    const nameMap: { [key: string]: string } = {
      'simple': '简单',
      'moderate': '中等',
      'complex': '复杂'
    };
    return nameMap[complexity] || complexity;
  }

  /**
   * 获取方向指示器的旋转角度
   */
  getDirectionRotation(): number {
    if (!this.patternData) return 0;
    
    const directionMap: { [key: string]: number } = {
      'horizontal': 0,
      'vertical': 90,
      'diagonal': 45,
      'radial': 0,
      'random': 0
    };
    
    return this.patternData.direction.angle || directionMap[this.patternData.direction.primary] || 0;
  }

  /**
   * 获取重复频率的视觉表示
   */
  getRepetitionVisual(): number[] {
    if (!this.patternData || !this.patternData.repetition.hasRepetition) {
      return [];
    }
    
    const count = Math.ceil(this.patternData.repetition.frequency / 20);
    return Array(Math.min(count, 5)).fill(0);
  }

  /**
   * 获取密度级别对应的颜色
   */
  getDensityColor(density: string): string {
    const colorMap: { [key: string]: string } = {
      'sparse': '#34C759',
      'moderate': '#FF9500',
      'dense': '#FF3B30'
    };
    return colorMap[density] || '#8E8E93';
  }

  /**
   * 获取复杂度级别对应的颜色
   */
  getComplexityColor(complexity: string): string {
    const colorMap: { [key: string]: string } = {
      'simple': '#34C759',
      'moderate': '#007AFF',
      'complex': '#5856D6'
    };
    return colorMap[complexity] || '#8E8E93';
  }

  /**
   * 生成密度可视化网格
   */
  getDensityGrid(): boolean[][] {
    if (!this.patternData) return [];
    
    const gridSize = 10;
    const grid: boolean[][] = [];
    const fillPercentage = this.patternData.density.percentage;
    
    for (let i = 0; i < gridSize; i++) {
      grid[i] = [];
      for (let j = 0; j < gridSize; j++) {
        grid[i][j] = Math.random() * 100 < fillPercentage;
      }
    }
    
    return grid;
  }
}

