// PatternGenerator.ets
import { display } from '@kit.ArkUI';

// 顏色方案定義
const COLOR_SCHEMES = {
  vibrant: [0xFFFF006E, 0xFFFB5607, 0xFFFFBE0B, 0xFF3A86FF, 0xFF8338EC],
  pastel: [0xFFFFADAD, 0xFFFFD6A5, 0xFFFDFFB6, 0xFFCAFFBF, 0xFF9BF6FF],
  monochrome: [0xFF0D1B2A, 0xFF1B263B, 0xFF415A77, 0xFF778DA9, 0xFFE0E1DD],
  ocean: [0xFF03045E, 0xFF0077B6, 0xFF00B4D8, 0xFF90E0EF, 0xFFCAF0F8],
  sunset: [0xFFFF5400, 0xFFFF6D00, 0xFFFF8500, 0xFFFF9100, 0xFFFFB700]
};

// 圖案類型枚舉
enum PatternType {
  FRACTAL = 'fractal',
  WAVE = 'wave',
  PARTICLE = 'particle',
  POLYGON = 'polygon',
  CELLULAR = 'cellular'
}

@Entry
@Component
struct PatternGenerator {
  // 狀態變量
  @State patternType: PatternType = PatternType.FRACTAL;
  @State colorScheme: string = 'vibrant';
  @State complexity: number = 5;
  @State density: number = 5;
  @State canvasWidth: number = 360;
  @State canvasHeight: number = 480;
  @State isAnimating: boolean = false;
  @State animationFrame: number = 0;
  
  // 畫布上下文
  private context2d: CanvasRenderingContext2D = new CanvasRenderingContext2D();
  
  // 生命週期：組件掛載時
  aboutToAppear() {
    // 獲取屏幕信息
    const displayInfo = display.getDefaultDisplaySync();
    this.canvasWidth = displayInfo.width * 0.85;
    this.canvasHeight = displayInfo.height * 0.6;
    
    // 生成初始圖案
    this.generateArt();
  }
  
  // 生成藝術圖案
  generateArt() {
    if (!this.context2d) return;
    
    // 清空畫布
    this.context2d.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
    
    // 獲取顏色
    const colors = COLOR_SCHEMES[this.colorScheme] || COLOR_SCHEMES.vibrant;
    
    // 根據圖案類型調用不同的生成函數
    switch (this.patternType) {
      case PatternType.FRACTAL:
        this.generateFractal(colors);
        break;
      case PatternType.WAVE:
        this.generateWavePattern(colors);
        break;
      case PatternType.PARTICLE:
        this.generateParticleSystem(colors);
        break;
      case PatternType.POLYGON:
        this.generatePolygonArt(colors);
        break;
      case PatternType.CELLULAR:
        this.generateCellularAutomata(colors);
        break;
    }
  }
  
  // 生成分形圖案
  generateFractal(colors: number[]) {
    const centerX = this.canvasWidth / 2;
    const centerY = this.canvasHeight / 2;
    const maxDepth = this.complexity + 2;
    const size = Math.min(this.canvasWidth, this.canvasHeight) * 0.3;
    
    const drawBranch = (x: number, y: number, size: number, angle: number, depth: number) => {
      if (depth > maxDepth) return;
      
      const colorIndex = depth % colors.length;
      this.context2d.strokeStyle = colors[colorIndex].toString();
      this.context2d.lineWidth = 2;
      
      const endX = x + Math.cos(angle) * size;
      const endY = y + Math.sin(angle) * size;
      
      this.context2d.beginPath();
      this.context2d.moveTo(x, y);
      this.context2d.lineTo(endX, endY);
      this.context2d.stroke();
      
      // 遞歸繪製分支
      const branchCount = Math.floor(this.density / 2) + 2;
      const angleStep = Math.PI / (branchCount + 1);
      
      for (let i = 1; i <= branchCount; i++) {
        const newAngle = angle - Math.PI / 2 + i * angleStep;
        const newSize = size * 0.7;
        drawBranch(endX, endY, newSize, newAngle, depth + 1);
      }
    };
    
    drawBranch(centerX, centerY, size, -Math.PI / 2, 0);
  }
  
  // 生成波浪圖案
  generateWavePattern(colors: number[]) {
    const waveCount = this.complexity + 3;
    const amplitude = 30 + this.density * 8;
    
    for (let wave = 0; wave < waveCount; wave++) {
      const colorIndex = wave % colors.length;
      this.context2d.strokeStyle = colors[colorIndex].toString();
      this.context2d.lineWidth = 2;
      
      this.context2d.beginPath();
      
      for (let x = 0; x <= this.canvasWidth; x += 5) {
        // 計算多個正弦波疊加
        let y = this.canvasHeight / 2;
        for (let i = 1; i <= this.complexity; i++) {
          const frequency = 0.01 * i;
          const phase = wave * 0.5;
          y += (Math.sin(x * frequency + phase) * amplitude) / i;
        }
        
        if (x === 0) {
          this.context2d.moveTo(x, y);
        } else {
          this.context2d.lineTo(x, y);
        }
      }
      
      this.context2d.stroke();
    }
  }
  
  // 生成粒子系統
  generateParticleSystem(colors: number[]) {
    const particleCount = 50 + this.density * 30;
    
    for (let i = 0; i < particleCount; i++) {
      const x = Math.random() * this.canvasWidth;
      const y = Math.random() * this.canvasHeight;
      const radius = 2 + Math.random() * 4;
      const colorIndex = i % colors.length;
      
      this.context2d.fillStyle = colors[colorIndex].toString();
      
      // 繪製粒子
      this.context2d.beginPath();
      this.context2d.arc(x, y, radius, 0, Math.PI * 2);
      this.context2d.fill();
      
      // 繪製粒子間的連接線
      if (this.complexity > 3) {
        for (let j = 0; j < i; j++) {
          const distance = Math.sqrt(
            Math.pow(x - Math.random() * this.canvasWidth, 2) +
            Math.pow(y - Math.random() * this.canvasHeight, 2)
          );
          
          if (distance < 100) {
            this.context2d.beginPath();
            this.context2d.moveTo(x, y);
            this.context2d.lineTo(Math.random() * this.canvasWidth, Math.random() * this.canvasHeight);
            this.context2d.strokeStyle = colors[colorIndex].toString();
            this.context2d.lineWidth = 0.5;
            this.context2d.stroke();
          }
        }
      }
    }
  }
  
  // 生成多邊形藝術
  generatePolygonArt(colors: number[]) {
    const sides = 3 + Math.floor(this.complexity / 2);
    const centerX = this.canvasWidth / 2;
    const centerY = this.canvasHeight / 2;
    const maxRadius = Math.min(this.canvasWidth, this.canvasHeight) * 0.4;
    
    for (let layer = 0; layer < this.density + 2; layer++) {
      const radius = maxRadius * (1 - layer / (this.density + 2));
      const colorIndex = layer % colors.length;
      
      this.context2d.fillStyle = colors[colorIndex].toString();
      this.context2d.globalAlpha = 0.7;
      
      this.context2d.beginPath();
      for (let i = 0; i < sides; i++) {
        const angle = (i * 2 * Math.PI) / sides + layer * 0.1;
        const x = centerX + radius * Math.cos(angle);
        const y = centerY + radius * Math.sin(angle);
        
        if (i === 0) {
          this.context2d.moveTo(x, y);
        } else {
          this.context2d.lineTo(x, y);
        }
      }
      this.context2d.closePath();
      this.context2d.fill();
    }
    this.context2d.globalAlpha = 1.0;
  }
  
  // 生成細胞自動機
  generateCellularAutomata(colors: number[]) {
    const cellSize = 10;
    const cols = Math.floor(this.canvasWidth / cellSize);
    const rows = Math.floor(this.canvasHeight / cellSize);
    
    // 初始化網格
    let grid: number[][] = [];
    for (let i = 0; i < cols; i++) {
      grid[i] = [];
      for (let j = 0; j < rows; j++) {
        grid[i][j] = Math.random() > 0.5 ? 1 : 0;
      }
    }
    
    // 應用規則（簡化版生命遊戲）
    for (let i = 0; i < cols; i++) {
      for (let j = 0; j < rows; j++) {
        // 計算鄰居數量
        let neighbors = 0;
        for (let dx = -1; dx <= 1; dx++) {
          for (let dy = -1; dy <= 1; dy++) {
            if (dx === 0 && dy === 0) continue;
            const nx = (i + dx + cols) % cols;
            const ny = (j + dy + rows) % rows;
            neighbors += grid[nx][ny];
          }
        }
        
        // 根據規則確定細胞狀態
        const state = grid[i][j];
        let newState = state;
        
        if (state === 1 && (neighbors < 2 || neighbors > 3)) {
          newState = 0;
        } else if (state === 0 && neighbors === 3) {
          newState = 1;
        }
        
        // 繪製細胞
        if (newState === 1) {
          const colorIndex = (i + j) % colors.length;
          this.context2d.fillStyle = colors[colorIndex].toString();
          this.context2d.fillRect(i * cellSize, j * cellSize, cellSize, cellSize);
        }
      }
    }
  }
  
  // 隨機生成所有參數
  randomizeAll() {
    // 隨機圖案類型
    const patternTypes = Object.values(PatternType);
    this.patternType = patternTypes[Math.floor(Math.random() * patternTypes.length)];
    
    // 隨機顏色方案
    const colorSchemes = Object.keys(COLOR_SCHEMES);
    this.colorScheme = colorSchemes[Math.floor(Math.random() * colorSchemes.length)];
    
    // 隨機複雜度
    this.complexity = Math.floor(Math.random() * 10) + 1;
    
    // 隨機密度
    this.density = Math.floor(Math.random() * 10) + 1;
    
    // 重新生成圖案
    this.generateArt();
  }
  
  // 動畫循環
  startAnimation() {
    if (this.isAnimating) return;
    
    this.isAnimating = true;
    this.animationFrame = 0;
    
    const animate = () => {
      if (!this.isAnimating) return;
      
      this.animationFrame++;
      
      // 在動畫模式下微調參數
      this.complexity = 5 + Math.sin(this.animationFrame * 0.05) * 2;
      this.density = 5 + Math.cos(this.animationFrame * 0.03) * 2;
      
      // 重新生成圖案
      this.generateArt();
      
      // 請求下一幀
      setTimeout(() => {
        animate();
      }, 100);
    };
    
    animate();
  }
  
  // 停止動畫
  stopAnimation() {
    this.isAnimating = false;
  }
  
  build() {
    Column({ space: 20 }) {
      // 標題
      Text('隨機藝術圖案生成器')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .fontColor('#4cc9f0')
      
      Text('使用算法生成獨特的抽象藝術圖案')
        .fontSize(14)
        .fontColor('#b0b0b0')
        .margin({ bottom: 20 })
      
      // 畫布區域
      Stack({ alignContent: Alignment.Center }) {
        // 畫布背景
        Column()
          .width(this.canvasWidth)
          .height(this.canvasHeight)
          .backgroundColor('#0f3460')
          .borderRadius(8)
        
        // Canvas畫布
        Canvas(this.context2d)
          .width(this.canvasWidth)
          .height(this.canvasHeight)
          .backgroundColor('#0f3460')
          .onReady(() => {
            this.generateArt();
          })
      }
      .margin({ bottom: 20 })
      
      // 控制面板
      Column({ space: 15 }) {
        // 圖案類型選擇
        Row({ space: 10 }) {
          Text('圖案類型:')
            .fontSize(16)
            .fontColor('#e6e6e6')
            .width(100)
          
          Select([
            { value: PatternType.FRACTAL, content: '分形幾何' },
            { value: PatternType.WAVE, content: '波浪波紋' },
            { value: PatternType.PARTICLE, content: '粒子系統' },
            { value: PatternType.POLYGON, content: '多邊形藝術' },
            { value: PatternType.CELLULAR, content: '細胞自動機' }
          ])
          .value(this.patternType)
          .onSelect((value: string) => {
            this.patternType = value as PatternType;
            this.generateArt();
          })
          .width(200)
        }
        
        // 顏色方案選擇
        Row({ space: 10 }) {
          Text('顏色方案:')
            .fontSize(16)
            .fontColor('#e6e6e6')
            .width(100)
          
          Select([
            { value: 'vibrant', content: '活力四射' },
            { value: 'pastel', content: '柔和粉彩' },
            { value: 'monochrome', content: '單色漸變' },
            { value: 'ocean', content: '海洋藍調' },
            { value: 'sunset', content: '日落暖色' }
          ])
          .value(this.colorScheme)
          .onSelect((value: string) => {
            this.colorScheme = value;
            this.generateArt();
          })
          .width(200)
        }
        
        // 複雜度控制
        Row({ space: 10 }) {
          Text('複雜度:')
            .fontSize(16)
            .fontColor('#e6e6e6')
            .width(100)
          
          Slider({
            value: this.complexity,
            min: 1,
            max: 10,
            step: 1,
            style: SliderStyle.OutSet
          })
          .width(200)
          .onChange((value: number) => {
            this.complexity = value;
            this.generateArt();
          })
          
          Text(this.complexity.toString())
            .fontSize(16)
            .fontColor('#4cc9f0')
            .width(30)
        }
        
        // 密度控制
        Row({ space: 10 }) {
          Text('密度:')
            .fontSize(16)
            .fontColor('#e6e6e6')
            .width(100)
          
          Slider({
            value: this.density,
            min: 1,
            max: 10,
            step: 1,
            style: SliderStyle.OutSet
          })
          .width(200)
          .onChange((value: number) => {
            this.density = value;
            this.generateArt();
          })
          
          Text(this.density.toString())
            .fontSize(16)
            .fontColor('#4cc9f0')
            .width(30)
        }
      }
      .padding(20)
      .backgroundColor('#16213e')
      .borderRadius(12)
      .width('100%')
      
      // 按鈕區域
      Row({ space: 15 }) {
        Button('生成新圖案')
          .backgroundColor('#4cc9f0')
          .fontColor('#16213e')
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            this.generateArt();
          })
          .width('30%')
        
        Button('完全隨機')
          .backgroundColor('#3a0ca3')
          .fontColor('#ffffff')
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            this.randomizeAll();
          })
          .width('30%')
        
        Button(this.isAnimating ? '停止動畫' : '動畫模式')
          .backgroundColor(this.isAnimating ? '#f72585' : '#7209b7')
          .fontColor('#ffffff')
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            if (this.isAnimating) {
              this.stopAnimation();
            } else {
              this.startAnimation();
            }
          })
          .width('30%')
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceAround)
      .margin({ top: 20 })
      
      // 底部信息
      Text('HarmonyOS 隨機藝術圖案生成器')
        .fontSize(12)
        .fontColor('#888')
        .margin({ top: 30 })
    }
    .width('100%')
    .height('100%')
    .padding(20)
    .backgroundColor('#1a1a2e')
    .alignItems(HorizontalAlign.Center)
  }
}