class AlgorithmVisualizer {
  constructor(canvasId, options = {}) {
    this.canvas = document.getElementById(canvasId);
    this.ctx = this.canvas.getContext('2d');
    this.array = [];
    this.comparisons = [];
    this.accesses = [];
    this.options = {
      barColor: '#4CAF50',
      compareColor: '#FF5722',
      sortedColor: '#4CAF50',
      sortedRangeColor: '#81C784',
      defaultColor: '#757575',
      ...options
    };
    
    this.animationSpeed = options.speed || 50;
    this.isAnimating = false;
    this.animationId = null;
    
    this.init();
  }

  init() {
    this.resizeCanvas();
    this.addEventListeners();
  }

  resizeCanvas() {
    const rect = this.canvas.parentElement.getBoundingClientRect();
    this.canvas.width = rect.width;
    this.canvas.height = rect.height;
  }

  addEventListeners() {
    window.addEventListener('resize', () => this.resizeCanvas());
  }

  randomArray(size, min = 1, max = 100) {
    return Array.from({ length: size }, () => 
      Math.floor(Math.random() * (max - min + 1)) + min
    );
  }

  shuffleArray() {
    for (let i = this.array.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [this.array[i], this.array[j]] = [this.array[j], this.array[i]];
    }
  }

  // 各种排序算法
  async bubbleSort() {
    const n = this.array.length;
    for (let i = 0; i < n - 1; i++) {
      for (let j = 0; j < n - i - 1; j++) {
        this.comparisons.push({ i, j });
        if (this.array[j] > this.array[j + 1]) {
          [this.array[j], this.array[j + 1]] = [this.array[j + 1], this.array[j]];
          this.accesses.push({ i: j, j: j + 1 });
        }
        await this.delay();
        this.draw();
      }
    }
  }

  async quickSort(low = 0, high = null) {
    if (high === null) high = this.array.length - 1;
    
    if (low < high) {
      const pivotIndex = await this.partition(low, high);
      await this.quickSort(low, pivotIndex - 1);
      await this.quickSort(pivotIndex + 1, high);
    }
  }

  async partition(low, high) {
    const pivot = this.array[high];
    let i = low - 1;
    
    for (let j = low; j < high; j++) {
      this.comparisons.push({ i: j, j: high });
      if (this.array[j] < pivot) {
        i++;
        [this.array[i], this.array[j]] = [this.array[j], this.array[i]];
        this.accesses.push({ i: i, j: j });
      }
      await this.delay();
      this.draw();
    }
    
    [this.array[i + 1], this.array[high]] = [this.array[high], this.array[i + 1]];
    return i + 1;
  }

  async mergeSort(left = 0, right = null) {
    if (right === null) right = this.array.length - 1;
    
    if (left < right) {
      const mid = Math.floor((left + right) / 2);
      await this.mergeSort(left, mid);
      await this.mergeSort(mid + 1, right);
      await this.merge(left, mid, right);
    }
  }

  async merge(left, mid, right) {
    const leftArray = this.array.slice(left, mid + 1);
    const rightArray = this.array.slice(mid + 1, right + 1);
    
    let i = 0, j = 0, k = left;
    
    while (i < leftArray.length && j < rightArray.length) {
      this.comparisons.push({ i: left + i, j: mid + 1 + j });
      if (leftArray[i] <= rightArray[j]) {
        this.array[k] = leftArray[i];
        i++;
      } else {
        this.array[k] = rightArray[j];
        j++;
      }
      this.accesses.push({ i: k });
      k++;
      await this.delay();
      this.draw();
    }
    
    while (i < leftArray.length) {
      this.array[k] = leftArray[i];
      i++;
      k++;
      await this.delay();
      this.draw();
    }
    
    while (j < rightArray.length) {
      this.array[k] = rightArray[j];
      j++;
      k++;
      await this.delay();
      this.draw();
    }
  }

  async heapSort() {
    const n = this.array.length;
    
    // 建立最大堆
    for (let i = Math.floor(n / 2) - 1; i >= 0; i--) {
      await this.heapify(n, i);
    }
    
    // 提取元素
    for (let i = n - 1; i > 0; i--) {
      [this.array[0], this.array[i]] = [this.array[i], this.array[0]];
      this.accesses.push({ i: 0, j: i });
      await this.heapify(n, 0);
      await this.delay();
      this.draw();
    }
  }

  async heapify(n, i) {
    let largest = i;
    const left = 2 * i + 1;
    const right = 2 * i + 2;
    
    if (left < n && this.array[left] > this.array[largest]) {
      this.comparisons.push({ i: largest, j: left });
      largest = left;
    }
    
    if (right < n && this.array[right] > this.array[largest]) {
      this.comparisons.push({ i: largest, j: right });
      largest = right;
    }
    
    if (largest !== i) {
      [this.array[i], this.array[largest]] = [this.array[largest], this.array[i]];
      this.accesses.push({ i: i, j: largest });
      await this.delay();
      this.draw();
    }
  }

  // 搜索算法
  async binarySearch(target) {
    const sorted = [...this.array].sort((a, b) => a - b);
    let low = 0;
    let high = sorted.length - 1;
    
    while (low <= high) {
      const mid = Math.floor((low + high) / 2);
      this.comparisons.push({ i: mid, j: -1, target });
      
      if (sorted[mid] === target) {
        this.draw();
        return mid;
      } else if (sorted[mid] < target) {
        low = mid + 1;
      } else {
        high = mid - 1;
      }
      
      await this.delay();
      this.draw();
    }
    
    return -1;
  }

  async linearSearch(target) {
    for (let i = 0; i < this.array.length; i++) {
      this.comparisons.push({ i: i, j: -1, target });
      this.draw();
      
      if (this.array[i] === target) {
        return i;
      }
      
      await this.delay();
    }
    
    return -1;
  }

  // 图算法
  async dfsTraversal(startNode = 0, adjacencyList = null) {
    if (!adjacencyList) {
      // 使用数组索引创建邻接表
      const size = Math.sqrt(this.array.length);
      adjacencyList = Array.from({ length: this.array.length }, (_, i) => []);
      
      for (let i = 0; i < this.array.length; i++) {
        for (let j = i + 1; j < this.array.length; j++) {
          if (this.array[i] < this.array[j]) {
            adjacencyList[i].push(j);
          }
        }
      }
    }
    
    const visited = new Set();
    const traversalOrder = [];
    const stack = [startNode];
    
    while (stack.length > 0) {
      const node = stack.pop();
      
      if (!visited.has(node)) {
        visited.add(node);
        traversalOrder.push(node);
        this.accesses.push({ i: node });
        
        for (const neighbor of adjacencyList[node]) {
          if (!visited.has(neighbor)) {
            stack.push(neighbor);
          }
        }
        
        await this.delay();
        this.draw();
      }
    }
    
    return traversalOrder;
  }

  async bfsTraversal(startNode = 0, adjacencyList = null) {
    if (!adjacencyList) {
      // 创建简单的邻接表
      const size = Math.sqrt(this.array.length);
      adjacencyList = Array.from({ length: this.array.length }, (_, i) => []);
      
      for (let i = 0; i < this.array.length; i++) {
        const neighbors = Math.floor(Math.random() * 3);
        for (let j = 0; j < neighbors; j++) {
          const randomNode = Math.floor(Math.random() * this.array.length);
          if (randomNode !== i) {
            adjacencyList[i].push(randomNode);
          }
        }
      }
    }
    
    const visited = new Set();
    const traversalOrder = [];
    const queue = [startNode];
    
    while (queue.length > 0) {
      const node = queue.shift();
      
      if (!visited.has(node)) {
        visited.add(node);
        traversalOrder.push(node);
        
        for (const neighbor of adjacencyList[node]) {
          if (!visited.has(neighbor)) {
            queue.push(neighbor);
          }
        }
        
        this.accesses.push({ i: node });
        await this.delay();
        this.draw();
      }
    }
    
    return traversalOrder;
  }

  // 绘制方法
  draw() {
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    
    if (this.array.length === 0) return;
    
    const barWidth = (this.canvas.width - 40) / this.array.length;
    const barHeight = (this.canvas.height - 40) / Math.max(...this.array);
    const gap = 2;
    
    this.array.forEach((value, index) => {
      let color = this.options.defaultColor;
      
      // 检查是否在比较中
      const isComparing = this.comparisons.some(c => c.i === index || c.j === index);
      const isAccessing = this.accesses.some(a => a.i === index || a.j === index);
      
      if (isComparing) {
        color = this.options.compareColor;
      } else if (isAccessing) {
        color = this.options.sortedColor;
      }
      
      // 检查是否已排序
      if (index > 0 && value >= this.array[index - 1] && 
          index < this.array.length - 1 && value <= this.array[index + 1]) {
        // 可能已排序（简单检查）
      }
      
      const x = 20 + index * (barWidth + gap);
      const y = this.canvas.height - 20 - value * barHeight;
      
      this.ctx.fillStyle = color;
      this.ctx.fillRect(x, y, barWidth, value * barHeight);
      
      // 绘制数值
      this.ctx.fillStyle = '#333';
      this.ctx.font = '12px Arial';
      this.ctx.fillText(value, x, y - 15);
    });
    
    // 绘制统计信息
    this.drawStats();
  }

  drawStats() {
    this.ctx.fillStyle = '#333';
    this.ctx.font = '14px Arial';
    
    const stats = [
      `数组大小: ${this.array.length}`,
      `比较次数: ${this.comparisons.length}`,
      `访问次数: ${this.accesses.length}`,
      `算法: ${this.currentAlgorithm || '无'}`
    ];
    
    stats.forEach((stat, index) => {
      this.ctx.fillText(stat, 20, 20 + index * 20);
    });
  }

  // 控制方法
  async start(algorithm) {
    this.currentAlgorithm = algorithm;
    this.comparisons = [];
    this.accesses = [];
    this.isAnimating = true;
    
    switch(algorithm) {
      case 'bubble':
        await this.bubbleSort();
        break;
      case 'quick':
        await this.quickSort();
        break;
      case 'merge':
        await this.mergeSort();
        break;
      case 'heap':
        await this.heapSort();
        break;
      case 'binarySearch':
        const target = this.array[Math.floor(Math.random() * this.array.length)];
        await this.binarySearch(target);
        break;
      case 'linearSearch':
        const target2 = this.array[Math.floor(Math.random() * this.array.length)];
        await this.linearSearch(target2);
        break;
      case 'dfs':
        await this.dfsTraversal();
        break;
      case 'bfs':
        await this.bfsTraversal();
        break;
    }
    
    this.isAnimating = false;
    this.currentAlgorithm = null;
  }

  async reset() {
    this.shuffleArray();
    this.comparisons = [];
    this.accesses = [];
    this.draw();
  }

  setSpeed(speed) {
    this.animationSpeed = speed;
  }

  setArraySize(size) {
    this.array = this.randomArray(size);
    this.draw();
  }

  delay() {
    return new Promise(resolve => {
      setTimeout(resolve, 100 - this.animationSpeed);
    });
  }
}

// 使用示例
document.addEventListener('DOMContentLoaded', () => {
  const visualizer = new AlgorithmVisualizer('algorithmCanvas', {
    speed: 50
  });
  
  // 设置控制
  document.getElementById('startBtn').addEventListener('click', async () => {
    const algorithm = document.getElementById('algorithmSelect').value;
    await visualizer.start(algorithm);
  });
  
  document.getElementById('resetBtn').addEventListener('click', async () => {
    await visualizer.reset();
  });
  
  document.getElementById('speedSlider').addEventListener('input', (e) => {
    visualizer.setSpeed(parseInt(e.target.value));
  });
  
  document.getElementById('sizeSlider').addEventListener('input', (e) => {
    visualizer.setArraySize(parseInt(e.target.value));
  });
});

class OneDimensionalCA {
  constructor(canvasId, options = {}) {
    this.canvas = document.getElementById(canvasId);
    this.ctx = this.canvas.getContext('2d');
    this.cells = [];
    this.rule = options.rule || 90;
    this.generation = 0;
    this.isRunning = false;
    this.history = [];
    this.maxHistory = 100;
    
    this.options = {
      cellSize: options.cellSize || 4,
      deadColor: '#f0f0f0',
      liveColor: '#4CAF50',
      bgColor: '#000000',
      showHistory: options.showHistory || true
    };
    
    this.init();
  }

  init() {
    this.resizeCanvas();
    this.initializeCells();
    this.addEventListeners();
    this.draw();
  }

  resizeCanvas() {
    const rect = this.canvas.parentElement.getBoundingClientRect();
    this.canvas.width = rect.width;
    this.canvas.height = rect.height;
    this.numCells = Math.floor(this.canvas.width / this.options.cellSize);
    
    // 重新初始化网格
    if (this.cells.length !== this.numCells) {
      this.initializeCells();
    }
  }

  initializeCells() {
    this.cells = new Array(this.numCells).fill(false);
    // 随机初始化一些活细胞
    for (let i = 0; i < this.numCells; i++) {
      this.cells[i] = Math.random() > 0.85;
    }
    this.generation = 0;
    this.history = [];
  }

  setRandom() {
    for (let i = 0; i < this.numCells; i++) {
      this.cells[i] = Math.random() > 0.8;
    }
    this.generation = 0;
    this.history = [];
    this.draw();
  }

  clear() {
    this.cells.fill(false);
    this.generation = 0;
    this.history = [];
    this.draw();
  }

  applyRule() {
    const newCells = new Array(this.numCells).fill(false);
    const ruleNum = this.rule;
    
    for (let i = 0; i < this.numCells; i++) {
      const left = this.cells[(i - 1 + this.numCells) % this.numCells];
      const center = this.cells[i];
      const right = this.cells[(i + 1) % this.numCells];
      
      // 将8位规则转换为条件
      // 规则编号转换为二进制
      const condition = ((ruleNum >> 4) & left << 2) | 
                     ((ruleNum >> 2) & center << 1) | 
                     (ruleNum & right);
      
      newCells[i] = condition !== 0;
    }
    
    this.cells = newCells;
    this.generation++;
    
    // 保存历史
    if (this.options.showHistory) {
      this.saveHistory();
    }
  }

  saveHistory() {
    this.history.push([...this.cells]);
    if (this.history.length > this.maxHistory) {
      this.history.shift();
    }
  }

  step() {
    this.applyRule();
    this.draw();
  }

  async run(steps = null) {
    this.isRunning = true;
    
    if (steps !== null) {
      for (let i = 0; i < steps && this.isRunning; i++) {
        this.step();
        await new Promise(resolve => setTimeout(resolve, 50));
      }
    } else {
      const animate = () => {
        if (this.isRunning) {
          this.step();
          requestAnimationFrame(animate);
        }
      };
      requestAnimationFrame(animate);
    }
  }

  stop() {
    this.isRunning = false;
  }

  setRule(rule) {
    this.rule = rule;
    this.generation = 0;
    this.history = [];
    this.draw();
  }

  draw() {
    // 清空画布
    this.ctx.fillStyle = this.options.bgColor;
    this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
    
    const cellSize = this.options.cellSize;
    
    // 绘制历史（时空图）
    if (this.options.showHistory && this.history.length > 1) {
      const historyHeight = this.canvas.height - 20;
      const historyRowHeight = historyHeight / this.history.length;
      
      this.history.forEach((row, rowIndex) => {
        row.forEach((cell, colIndex) => {
          const x = colIndex * cellSize;
          const y = 20 + rowIndex * historyRowHeight;
          
          if (cell) {
            this.ctx.fillStyle = 'rgba(76, 175, 80, 0.3)';
          } else {
            this.ctx.fillStyle = 'rgba(76, 175, 80, 0.05)';
          }
          
          this.ctx.fillRect(x, y, cellSize - 1, historyRowHeight - 1);
        });
      });
    }
    
    // 绘制当前行
    const yPos = this.canvas.height - cellSize - 2;
    
    this.cells.forEach((cell, index) => {
      const x = index * cellSize;
      
      if (cell) {
        this.ctx.fillStyle = this.options.liveColor;
      } else {
        this.ctx.fillStyle = this.options.deadColor;
      }
      
      this.ctx.fillRect(x, yPos, cellSize - 1, cellSize - 1);
    });
    
    // 绘制生成信息和规则
    this.ctx.fillStyle = '#fff';
    this.ctx.font = '14px Arial';
    this.ctx.fillText(`Generation: ${this.generation} | Rule: ${this.rule}`, 10, 10);
  }

  addEventListeners() {
    window.addEventListener('resize', () => this.resizeCanvas());
  }

  // 规则探索
  exploreRules() {
    const interestingRules = [
      30,   // 生命游戏
      90,   // 复杂模式
      110,  // 裋齿模式
      184,  // 混沌边缘
      250   // 空间填充
    ];
    
    return interestingRules;
  }

  analyzeComplexity() {
    // 计算熵（复杂度）
    const liveCount = this.cells.filter(c => c).length;
    const deadCount = this.numCells - liveCount;
    
    if (deadCount === 0) return 0;
    
    const p = liveCount / this.numCells;
    const entropy = -p * Math.log2(p) - (1 - p) * Math.log2(1 - p);
    
    return entropy;
  }

  // 模式识别
  identifyPattern() {
    // 检查周期性
    const recentGenerations = [];
    const windowSize = Math.min(20, Math.floor(this.generation / 10));
    
    for (let i = 0; i < windowSize && this.history.length > i; i++) {
      const hash = this.history[i].join('');
      recentGenerations.push(hash);
    }
    
    // 检查周期
    const period = this.findPeriod(recentGenerations);
    return period;
  }

  findPeriod(sequence) {
    for (let period = 2; period <= sequence.length / 2; period++) {
      if (this.hasPeriod(sequence, period)) {
        return period;
      }
    }
    return 1;
  }

  hasPeriod(sequence, period) {
    for (let i = 0; i < sequence.length - period; i++) {
      let match = true;
      for (let j = 0; j < period; j++) {
        if (sequence[i + j] !== sequence[i]) {
          match = false;
          break;
        }
      }
      if (match) return true;
    }
    return false;
  }
}

// 集成示例
document.addEventListener('DOMContentLoaded', () => {
  const ca = new OneDimensionalCA('caCanvas', {
    rule: 90,
    showHistory: true
  });
  
  // 规则选择
  document.getElementById('rule30').addEventListener('click', () => ca.setRule(30));
  document.getElementById('rule90').addEventListener('click', () => ca.setRule(90));
  document.getElementById('rule110').addEventListener('click', () => ca.setRule(110));
  document.getElementById('rule184').addEventListener('click', () => ca.setRule(184));
  
  // 控制
  document.getElementById('startBtn').addEventListener('click', () => ca.run());
  document.getElementById('stopBtn').addEventListener('click', () => ca.stop());
  document.getElementById('stepBtn').addEventListener('click', () => ca.step());
  document.getElementById('randomBtn').addEventListener('click', () => ca.setRandom());
  document.getElementById('clearBtn').addEventListener('click', () => ca.clear());
  
  // 模式分析
  document.getElementById('analyzeBtn').addEventListener('click', () => {
    const complexity = ca.analyzeComplexity();
    const pattern = ca.identifyPattern();
    
    alert(`复杂度: ${complexity.toFixed(4)}\n周期长度: ${pattern}`);
  });
});

class AudioVisualizer {
  constructor(canvasId, audioElementId, options = {}) {
    this.canvas = document.getElementById(canvasId);
    this.ctx = this.canvas.getContext('2d');
    this.audioElement = document.getElementById(audioElementId);
    this.audioContext = null;
    this.analyser = null;
    this.source = null;
    this.dataArray = null;
    this.bufferLength = null;
    
    this.mode = options.mode || 'bars'; // bars, wave, spectrum, circle
    this.theme = options.theme || 'default'; // default, dark, neon, pastel
    this.isRunning = false;
    this.animationId = null;
    
    this.themes = {
      default: {
        background: '#1a1a2e',
        bars: '#4CAF50',
        wave: '#2196F3',
        accent: '#FF5722'
      },
      dark: {
        background: '#000000',
        bars: '#00ff00',
        wave: '#00ffff',
        accent: '#ff00ff'
      },
      neon: {
        background: '#0d0d0d',
        bars: '#ff00ff',
        wave: '#00ffff',
        accent: '#ff0080'
      },
      pastel: {
        background: '#f5f5dc',
        bars: '#f9a825',
        wave: '#f1c40f',
        accent: '#e74c3c'
      }
    };
  }

  async init() {
    try {
      this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
      
      this.analyser = this.audioContext.createAnalyser();
      this.analyser.fftSize = 256;
      this.bufferLength = this.analyser.frequencyBinCount;
      
      this.source = this.audioContext.createMediaElementSource(this.audioElement);
      this.source.connect(this.analyser);
      this.analyser.connect(this.audioContext.destination);
      
      this.dataArray = new Uint8Array(this.bufferLength);
      this.analyser.getByteFrequencyData(this.dataArray);
      
      this.resizeCanvas();
      this.addEventListeners();
      this.draw();
      
    } catch (error) {
      console.error('Audio initialization failed:', error);
      alert('无法初始化音频上下文。请确保浏览器支持Web Audio API。');
    }
  }

  resizeCanvas() {
    const rect = this.canvas.parentElement.getBoundingClientRect();
    this.canvas.width = rect.width;
    this.canvas.height = rect.height;
  }

  addEventListeners() {
    window.addEventListener('resize', () => this.resizeCanvas());
    
    this.audioElement.addEventListener('play', () => {
      this.isRunning = true;
      this.animate();
    });
    
    this.audioElement.addEventListener('pause', () => {
      this.isRunning = false;
      if (this.animationId) {
        cancelAnimationFrame(this.animationId);
      }
    });
    
    this.audioElement.addEventListener('ended', () => {
      this.isRunning = false;
      if (this.animationId) {
        cancelAnimationFrame(this.animationId);
      }
    });
  }

  loadAudio(file) {
    const url = URL.createObjectURL(file);
    this.audioElement.src = url;
    this.audioElement.load();
    
    this.audioElement.addEventListener('canplay', () => {
      URL.revokeObjectURL(url);
    }, { once: true });
  }

  setMode(mode) {
    this.mode = mode;
  }

  setTheme(theme) {
    this.theme = theme;
  }

  draw() {
    if (!this.isRunning) return;
    
    const theme = this.themes[this.theme];
    const width = this.canvas.width;
    const height = this.canvas.height;
    
    this.ctx.fillStyle = theme.background;
    this.ctx.fillRect(0, 0, width, height);
    
    switch(this.mode) {
      case 'bars':
        this.drawBars(theme, width, height);
        break;
      case 'wave':
        this.drawWave(theme, width, height);
        break;
      case 'spectrum':
        this.drawSpectrum(theme, width, height);
        break;
      case 'circle':
        this.drawCircle(theme, width, height);
        break;
    }
  }

  drawBars(theme, width, height) {
    const barCount = 64;
    const barWidth = (width - 40) / barCount;
    const gap = 2;
    const step = Math.floor(this.dataArray.length / barCount);
    
    for (let i = 0; i < barCount; i++) {
      let dataIndex = i * step;
      let value = 0;
      
      // 求取频率范围内的最大值
      for (let j = 0; j < step && dataIndex + j < this.dataArray.length; j++) {
        value = Math.max(value, this.dataArray[dataIndex + j]);
      }
      
      const barHeight = (value / 255) * (height - 40);
      const x = 20 + i * (barWidth + gap);
      const y = height - 20 - barHeight;
      
      // 创建渐变
      const gradient = this.ctx.createLinearGradient(x, y, x + barWidth, y + barHeight);
      gradient.addColorStop(0, theme.bars);
      gradient.addColorStop(1, theme.accent);
      
      this.ctx.fillStyle = gradient;
      this.ctx.fillRect(x, y, barWidth, barHeight);
      
      // 添加反射效果
      this.ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
      this.ctx.fillRect(x, y, barWidth / 2, barHeight);
    }
  }

  drawWave(theme, width, height) {
    const sliceWidth = width / this.dataArray.length;
    const sliceHeight = (height - 40) / 2;
    const centerY = height / 2;
    
    this.ctx.beginPath();
    this.ctx.moveTo(0, centerY);
    
    for (let i = 0; i < this.dataArray.length; i++) {
      const v = this.dataArray[i] / 128.0;
      const y = centerY + v * sliceHeight;
      
      this.ctx.lineTo(i * sliceWidth, y);
    }
    
    this.ctx.lineTo(width, centerY);
    this.ctx.strokeStyle = theme.wave;
    this.ctx.lineWidth = 2;
    this.ctx.stroke();
    
    // 填充下半部分
    this.ctx.lineTo(width, height - 20);
    this.ctx.lineTo(0, height - 20);
    this.ctx.fillStyle = theme.wave;
    this.ctx.fill();
    
    this.ctx.globalAlpha = 0.5;
    this.ctx.strokeStyle = theme.accent;
    this.ctx.stroke();
    this.ctx.globalAlpha = 1;
  }

  drawSpectrum(theme, width, height) {
    const barCount = this.dataArray.length;
    const barWidth = width / barCount;
    
    for (let i = 0; i < barCount; i++) {
      const value = this.dataArray[i];
      const barHeight = (value / 255) * (height - 40);
      const x = i * barWidth;
      const y = height - 20 - barHeight;
      
      const hue = (i / barCount) * 360;
      this.ctx.fillStyle = `hsla(${hue}, 70%, 50%)`;
      this.ctx.fillRect(x, y, barWidth - 1, barHeight);
    }
  }

  drawCircle(theme, width, height) {
    const centerX = width / 2;
    const centerY = height / 2;
    const radius = Math.min(width, height) / 2 - 40;
    const bars = 32;
    
    for (let i = 0; i < bars; i++) {
      const value = this.dataArray[i];
      const barHeight = (value / 255) * radius;
      const angle = (i / bars) * 2 * Math.PI - Math.PI / 2;
      
      this.ctx.save();
      this.ctx.translate(centerX, centerY);
      this.ctx.rotate(angle);
      
      const gradient = this.ctx.createRadialGradient(0, 0, radius, 0, 0);
      gradient.addColorStop(0, theme.bars);
      gradient.addColorStop(1, theme.accent);
      
      this.ctx.fillStyle = gradient;
      this.ctx.fillRect(0, -barHeight / 2, 4, barHeight);
      
      this.ctx.restore();
    }
  }

  animate() {
    const draw = () => {
      this.analyser.getByteFrequencyData(this.dataArray);
      this.draw();
      
      if (this.isRunning) {
        this.animationId = requestAnimationFrame(draw);
      }
    };
    
    this.animationId = requestAnimationFrame(draw);
  }

  stop() {
    this.isRunning = false;
    if (this.animationId) {
      cancelAnimationFrame(this.animationId);
    }
  }

  play() {
    this.audioElement.play();
  }

  pause() {
    this.audioElement.pause();
  }
}

// 使用示例
document.addEventListener('DOMContentLoaded', () => {
  const visualizer = new AudioVisualizer('audioCanvas', 'audioElement', {
    mode: 'bars',
    theme: 'neon'
  });
  
  // 文件上传
  document.getElementById('audioFile').addEventListener('change', (e) => {
    const file = e.target.files[0];
    if (file) {
      visualizer.loadAudio(file);
    }
  });
  
  // 模式切换
  document.getElementById('modeBars').addEventListener('click', () => visualizer.setMode('bars'));
  document.getElementById('modeWave').addEventListener('click', () => visualizer.setMode('wave'));
  document.getElementById('modeSpectrum').addEventListener('click', () => visualizer.setMode('spectrum'));
  document.getElementById('modeCircle').addEventListener('click', () => visualizer.setMode('circle'));
  
  // 主题切换
  document.getElementById('themeDefault').addEventListener('click', () => visualizer.setTheme('default'));
  document.getElementById('themeDark').addEventListener('click', () => visualizer.setTheme('dark'));
  document.getElementById('themeNeon').addEventListener('click', () => visualizer.setTheme('neon'));
  document.getElementById('themePastel').addEventListener('click', () => visualizer.setTheme('pastel'));
  
  // 控制
  document.getElementById('playBtn').addEventListener('click', () => visualizer.play());
  document.getElementById('pauseBtn').addEventListener('click', () => visualizer.pause());
  document.getElementById('stopBtn').addEventListener('click', () => visualizer.stop());
});