/**
 * StreamingTTSPlayer.ts
 * 
 * 一個用于播放「流式 Base64 MP3」音頻的播放器。
 * 使用 MediaSource + SourceBuffer 實現(xiàn)邊接收邊播放，不卡頓無雜音。
 */

export interface StreamingTTSPlayerOptions {
  /** 用于監(jiān)聽播放器狀態(tài)（ready、error 等）的回調(diào) */
  onEvent?: (event: string, data?: any) => void;
}

export class StreamingTTSPlayer {
  private audio: HTMLAudioElement;           // 播放用的 <audio> 元素
  private mediaSource: MediaSource;           // 媒體源（支持流式拼接）
  private sourceBuffer: SourceBuffer | null = null; // 用于接收音頻塊的緩沖區(qū)
  private queue: ArrayBuffer[] = [];          // 等待寫入 SourceBuffer 的音頻塊隊列
  private isBufferUpdating = false;            // 是否正在寫入數(shù)據(jù)（避免并發(fā)）
  private onEvent?: (event: string, data?: any) => void; // 事件回調(diào)

  constructor(options?: StreamingTTSPlayerOptions) {
    this.onEvent = options?.onEvent;

    // 1. 創(chuàng)建 HTMLAudioElement
    this.audio = new Audio();

    // 2. 創(chuàng)建 MediaSource 并掛載到 audio 元素
    this.mediaSource = new MediaSource();
    this.audio.src = URL.createObjectURL(this.mediaSource);

    // 3. 等待 mediaSource 初始化完成
    this.mediaSource.addEventListener("sourceopen", () => {
      try {
        // 4. 創(chuàng)建一個 MP3 類型的 SourceBuffer，用于接收音頻塊
        this.sourceBuffer = this.mediaSource.addSourceBuffer('audio/mpeg');

        // 5. 設置拼接模式為 sequence（自動按順序拼接）
        this.sourceBuffer.mode = 'sequence';

        // 6. 每次 appendBuffer 完成后觸發(fā) updateend，繼續(xù)處理隊列
        this.sourceBuffer.addEventListener('updateend', () => this.feedQueue());

        this.emit("ready");
      } catch (err) {
        console.error("Failed to add sourceBuffer:", err);
        this.emit("error", err);
      }
    });

    // 監(jiān)聽 audio 元素播放錯誤
    this.audio.addEventListener("error", (e) => {
      this.emit("error", e);
    });
  }

  /**
   * 接收一段 base64 MP3 數(shù)據(jù)塊并放入播放隊列
   * @param base64 base64 編碼的 MP3 數(shù)據(jù)塊
   * @param autoPlay 是否自動開始播放（默認 true）
   */
  receiveBase64(base64: string, autoPlay = true) {
    try {
      const buffer = this.base64ToArrayBuffer(base64);
      this.queue.push(buffer);
      this.feedQueue(); // 立即嘗試送入 SourceBuffer
      if (autoPlay) this.play();
    } catch (err) {
      console.error("TTS decode error:", err);
      this.emit("error", err);
    }
  }

  /** 播放（如果已暫停） */
  play() {
    if (this.audio.paused) {
      this.audio.play().catch(() => {});
    }
  }

  /** 暫停播放 */
  pause() {
    if (!this.audio.paused) {
      this.audio.pause();
    }
  }

  /**
   * 停止播放并清空緩沖
   * （會丟棄所有未播放的數(shù)據(jù)）
   */
  stop() {
    this.pause();
    this.queue = [];
    if (this.mediaSource.readyState === "open" && this.sourceBuffer && !this.sourceBuffer.updating) {
      try {
        this.sourceBuffer.abort(); // 終止當前的緩沖區(qū)寫入
      } catch {}
    }
    this.audio.currentTime = 0;
  }

  /**
   * 內(nèi)部方法：嘗試把隊列中的數(shù)據(jù) append 到 SourceBuffer
   */
  private feedQueue() {
    // 沒有 SourceBuffer 或正在寫入時不處理
    if (!this.sourceBuffer || this.isBufferUpdating) return;
    if (this.queue.length === 0) return;

    if (!this.sourceBuffer.updating) {
      const chunk = this.queue.shift()!;
      try {
        this.isBufferUpdating = true;
        this.sourceBuffer.appendBuffer(chunk); // 核心：追加 MP3 數(shù)據(jù)到播放流
        this.isBufferUpdating = false;
      } catch (err) {
        console.error("Failed to append buffer:", err);
        this.emit("error", err);
      }
    }
  }

  /**
   * Base64 -> ArrayBuffer 轉(zhuǎn)換工具
   */
  private base64ToArrayBuffer(base64: string): ArrayBuffer {
    const binary = atob(base64.replace(/^data:audio\/\w+;base64,/, ""));
    const len = binary.length;
    const buffer = new Uint8Array(len);
    for (let i = 0; i < len; i++) {
      buffer[i] = binary.charCodeAt(i);
    }
    return buffer.buffer;
  }

  /** 觸發(fā)事件回調(diào) */
  private emit(event: string, data?: any) {
    this.onEvent?.(event, data);
  }
}

const player = new StreamingTTSPlayer();

// 每收到一塊 TTS 音頻數(shù)據(jù)就塞進去
ws.onmessage = (e) => {
  const data = JSON.parse(e.data);
  if (data.audio) player.receiveBase64(data.audio);
};