import { Asr, type AsrRequest, type AsrResponse } from './auc.ts';
import { getConfig, setConfig } from './config.ts';
import { AudioRecorder, RecordingState, type RecorderOptions } from './recorder.ts';

// 创建页面结构
function createPageStructure() {
  const html = `
    <div class="container">
      <div class="header">
        <h1>音频转文字工具</h1>
        <button id="settingsBtn" class="settings-btn" title="设置">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="3"/>
            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
          </svg>
        </button>
      </div>
      <div class="upload-section">
        <div class="input-buttons">
          <div class="file-input-wrapper">
            <input type="file" id="audioFile" accept="audio/*" style="display: none;">
            <button id="uploadBtn" class="upload-btn">选择音频文件</button>
          </div>
          <div class="record-wrapper">
            <button id="recordBtn" class="record-btn" title="录制音频">
              <svg id="recordIcon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="3"/>
              </svg>
              <span id="recordText">录制音频</span>
            </button>
            <div class="record-status" id="recordStatus" style="display: none;">
              <div class="recording-indicator"></div>
              <span id="recordTime">00:00</span>
            </div>
          </div>
        </div>
        <div class="file-info" id="fileInfo"></div>
      </div>
      <div class="action-section">
        <button id="convertBtn" class="convert-btn" disabled>转换为文字</button>
      </div>
      <div class="result-section">
        <div class="loading" id="loading" style="display: none;">
          <div class="spinner"></div>
          <span>正在转换中...</span>
        </div>
        <div class="result" id="result" style="display: none;">
          <h3>转换结果：</h3>
          <div class="result-text" id="resultText"></div>
          <div class="result-details" id="resultDetails"></div>
        </div>
      </div>
    </div>
    
    <!-- 设置弹窗 -->
    <div id="settingsModal" class="modal" style="display: none;">
      <div class="modal-content">
        <div class="modal-header">
          <h2>配置设置: <a href="https://www.volcengine.com/docs/6561/192519" target="_blank">火山:录音文件识别极速版</a></h2>
          <button id="closeModal" class="close-btn">&times;</button>
        </div>
        <div class="modal-body">
          <form id="settingsForm">
            <div class="form-group">
              <label for="appId">APP ID:</label>
              <input type="text" id="appId" name="appId" placeholder="请输入火山引擎ASR的APP ID" required>
            </div>
            <div class="form-group">
              <label for="accessToken">Access Token:</label>
              <input type="password" id="accessToken" name="accessToken" placeholder="请输入火山引擎ASR的Access Token" required>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button id="saveSettings" class="save-btn">保存</button>
          <button id="cancelSettings" class="cancel-btn">取消</button>
        </div>
      </div>
    </div>
  `;
  document.body.innerHTML = html;
}

// 全局变量存储选中的文件
let selectedFile: File | null = null;

// 全局变量存储录制器和录制状态
let audioRecorder: AudioRecorder | null = null;
let recordedAudioBlob: Blob | null = null;
let isUsingRecordedAudio = false;

// 文件上传处理函数
function setupFileUpload() {
  const fileInput = document.getElementById('audioFile') as HTMLInputElement;
  const uploadBtn = document.getElementById('uploadBtn') as HTMLButtonElement;
  const convertBtn = document.getElementById('convertBtn') as HTMLButtonElement;
  const fileInfo = document.getElementById('fileInfo') as HTMLDivElement;

  // 点击上传按钮，触发文件选择
  uploadBtn.addEventListener('click', () => {
    fileInput.click();
  });

  // 文件选择处理
  fileInput.addEventListener('change', (event) => {
    const target = event.target as HTMLInputElement;
    const file = target.files?.[0];

    if (file) {
      // 验证文件类型
      if (!file.type.startsWith('audio/')) {
        alert('请选择音频文件！');
        return;
      }

      // 验证文件大小 (例如限制为100MB)
      const maxSize = 100 * 1024 * 1024; // 100MB
      if (file.size > maxSize) {
        alert('文件大小不能超过100MB！');
        return;
      }

      selectedFile = file;
      
      // 清除录制状态
      recordedAudioBlob = null;
      isUsingRecordedAudio = false;
      
      // 显示文件信息
      const fileSizeMB = (file.size / 1024 / 1024).toFixed(2);
      fileInfo.innerHTML = `
        <div class="file-selected">
          <p><strong>已选择文件:</strong> ${file.name}</p>
          <p><strong>文件大小:</strong> ${fileSizeMB} MB</p>
          <p><strong>文件类型:</strong> ${file.type}</p>
        </div>
      `;
      
      // 启用转换按钮
      convertBtn.disabled = false;
      uploadBtn.textContent = '重新选择文件';
    }
  });
}

// 将文件转换为base64
function fileToBase64(file: File): Promise<string> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => {
      const result = reader.result as string;
      // 移除data:audio/xxx;base64,前缀，只保留base64数据
      const base64Data = result.split(',')[1];
      resolve(base64Data);
    };
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}

// 获取音频格式
function getAudioFormat(file: File): string {
  const mimeType = file.type;
  if (mimeType.includes('wav')) return 'wav';
  if (mimeType.includes('mp3')) return 'mp3';
  if (mimeType.includes('ogg')) return 'ogg';
  if (mimeType.includes('pcm')) return 'pcm';
  if (mimeType.includes('webm')) return 'webm';
  // 默认返回wav
  return 'wav';
}

// 从Blob获取音频格式
function getAudioFormatFromBlob(blob: Blob): string {
  const mimeType = blob.type;
  if (mimeType.includes('wav')) return 'wav';
  if (mimeType.includes('mp3')) return 'mp3';
  if (mimeType.includes('ogg')) return 'ogg';
  if (mimeType.includes('pcm')) return 'pcm';
  if (mimeType.includes('webm')) return 'webm';
  // 默认返回webm (录制的音频通常是webm格式)
  return 'webm';
}

// ASR转换功能
async function convertToText() {
  if (!selectedFile && !recordedAudioBlob) {
    alert('请先选择音频文件或录制音频！');
    return;
  }

  const loadingEl = document.getElementById('loading') as HTMLDivElement;
  const resultEl = document.getElementById('result') as HTMLDivElement;
  const resultText = document.getElementById('resultText') as HTMLDivElement;
  const resultDetails = document.getElementById('resultDetails') as HTMLDivElement;
  const convertBtn = document.getElementById('convertBtn') as HTMLButtonElement;

  try {
    // 显示加载状态
    loadingEl.style.display = 'flex';
    resultEl.style.display = 'none';
    convertBtn.disabled = true;
    convertBtn.textContent = '转换中...';

    // 获取音频数据
    let base64Data: string;
    let audioFormat: string;
    
    if (isUsingRecordedAudio && recordedAudioBlob) {
      // 使用录制的音频
      const recordedFile = AudioRecorder.blobToFile(recordedAudioBlob, 'recording.webm');
      base64Data = await fileToBase64(recordedFile);
      audioFormat = getAudioFormatFromBlob(recordedAudioBlob);
    } else if (selectedFile) {
      // 使用选择的文件
      base64Data = await fileToBase64(selectedFile);
      audioFormat = getAudioFormat(selectedFile);
    } else {
      throw new Error('没有可用的音频数据');
    }
    const config = getConfig();
    const VOLCENGINE_AUC_APPID = config.VOLCENGINE_AUC_APPID;
    const VOLCENGINE_AUC_TOKEN = config.VOLCENGINE_AUC_TOKEN;
    // 配置ASR请求
    // 注意：这里需要提供真实的API密钥
    const asr = new Asr({
      appid: VOLCENGINE_AUC_APPID, // 请替换为真实的APP ID
      token: VOLCENGINE_AUC_TOKEN, // 请替换为真实的ACCESS TOKEN
      type: 'flash' // 使用flash模式进行快速识别
    });

    const asrRequest: AsrRequest = {
      audio: {
        data: base64Data,
        format: audioFormat as any,
        rate: 16000,
        channel: 1
      },
      request: {
        enable_words: true,
        enable_sentence_info: true,
        enable_utterance_info: true,
        enable_punctuation_prediction: true,
        enable_inverse_text_normalization: true
      }
    };

    // 调用ASR API
    const response: AsrResponse = await asr.getText(asrRequest);

    // 隐藏加载状态
    loadingEl.style.display = 'none';
    
    // 显示结果
    if (response.result && response.result.text) {
      resultText.innerHTML = `<p>${response.result.text}</p>`;
      
      // 显示详细信息
      const duration = response.audio_info?.duration ? (response.audio_info.duration / 1000).toFixed(2) + '秒' : '未知';
      let detailsHtml = `
        <div class="audio-info">
          <h4>音频信息：</h4>
          <p><strong>时长:</strong> ${duration}</p>
        </div>
      `;

      // 如果有语句级别的信息，显示时间戳
      if (response.result.utterances && response.result.utterances.length > 0) {
        detailsHtml += `
          <div class="utterances">
            <h4>分句结果：</h4>
            <ul>
        `;
        response.result.utterances.forEach((utterance, index) => {
          const startTime = (utterance.start_time / 1000).toFixed(2);
          const endTime = (utterance.end_time / 1000).toFixed(2);
          detailsHtml += `
            <li>
              <span class="timestamp">${startTime}s - ${endTime}s:</span>
              <span class="text">${utterance.text}</span>
            </li>
          `;
        });
        detailsHtml += `
            </ul>
          </div>
        `;
      }

      resultDetails.innerHTML = detailsHtml;
      resultEl.style.display = 'block';
    } else {
      throw new Error('转换失败：未能获取到文字结果');
    }

  } catch (error) {
    console.error('转换出错:', error);
    loadingEl.style.display = 'none';
    
    let errorMessage = '转换失败，请稍后重试。';
    if (error instanceof Error) {
      if (error.message.includes('VOLCENGINE_Asr_APPID') || error.message.includes('VOLCENGINE_Asr_TOKEN')) {
        errorMessage = '请配置正确的API密钥（APP ID和Access Token）后重试。';
      } else {
        errorMessage = `转换失败: ${error.message}`;
      }
    }
    
    alert(errorMessage);
  } finally {
    convertBtn.disabled = false;
    convertBtn.textContent = '转换为文字';
  }
}

// 设置转换按钮
function setupConvertButton() {
  const convertBtn = document.getElementById('convertBtn') as HTMLButtonElement;
  
  convertBtn.addEventListener('click', convertToText);
}

// 设置弹窗功能
function setupSettingsModal() {
  const settingsBtn = document.getElementById('settingsBtn') as HTMLButtonElement;
  const settingsModal = document.getElementById('settingsModal') as HTMLDivElement;
  const closeModal = document.getElementById('closeModal') as HTMLButtonElement;
  const saveSettings = document.getElementById('saveSettings') as HTMLButtonElement;
  const cancelSettings = document.getElementById('cancelSettings') as HTMLButtonElement;
  const appIdInput = document.getElementById('appId') as HTMLInputElement;
  const accessTokenInput = document.getElementById('accessToken') as HTMLInputElement;

  // 打开设置弹窗
  function openSettingsModal() {
    // 加载当前配置
    const config = getConfig();
    appIdInput.value = config.VOLCENGINE_AUC_APPID;
    accessTokenInput.value = config.VOLCENGINE_AUC_TOKEN;
    
    settingsModal.style.display = 'flex';
    document.body.style.overflow = 'hidden'; // 防止背景滚动
  }

  // 关闭设置弹窗
  function closeSettingsModal() {
    settingsModal.style.display = 'none';
    document.body.style.overflow = 'auto'; // 恢复滚动
  }

  // 保存设置
  function saveSettingsHandler() {
    const appId = appIdInput.value.trim();
    const accessToken = accessTokenInput.value.trim();

    if (!appId || !accessToken) {
      alert('请填写完整的APP ID和Access Token');
      return;
    }

    // 保存到localStorage
    try {
      setConfig({
        VOLCENGINE_AUC_APPID: appId,
        VOLCENGINE_AUC_TOKEN: accessToken
      });
      alert('设置保存成功！');
      closeSettingsModal();
    } catch (error) {
      console.error('保存设置失败:', error);
      alert('保存设置失败，请重试');
    }
  }

  // 绑定事件
  settingsBtn.addEventListener('click', openSettingsModal);
  closeModal.addEventListener('click', closeSettingsModal);
  cancelSettings.addEventListener('click', closeSettingsModal);
  saveSettings.addEventListener('click', saveSettingsHandler);

  // 点击弹窗背景关闭
  settingsModal.addEventListener('click', (e) => {
    if (e.target === settingsModal) {
      closeSettingsModal();
    }
  });

  // ESC键关闭弹窗
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && settingsModal.style.display === 'flex') {
      closeSettingsModal();
    }
  });
}

// 录制功能设置
function setupRecording() {
  const recordBtn = document.getElementById('recordBtn') as HTMLButtonElement;
  const recordIcon = document.getElementById('recordIcon') as HTMLElement;
  const recordText = document.getElementById('recordText') as HTMLSpanElement;
  const recordStatus = document.getElementById('recordStatus') as HTMLDivElement;
  const recordTime = document.getElementById('recordTime') as HTMLSpanElement;
  const fileInfo = document.getElementById('fileInfo') as HTMLDivElement;
  const convertBtn = document.getElementById('convertBtn') as HTMLButtonElement;
  const uploadBtn = document.getElementById('uploadBtn') as HTMLButtonElement;

  // 检查浏览器支持
  if (!AudioRecorder.isSupported()) {
    recordBtn.disabled = true;
    recordBtn.title = '当前浏览器不支持录音功能';
    recordText.textContent = '不支持录音';
    return;
  }

  // 初始化录制器
  function initRecorder() {
    if (audioRecorder) {
      audioRecorder.destroy();
    }

    const options: RecorderOptions = {
      audioBitsPerSecond: 128000,
      mimeType: AudioRecorder.getSupportedMimeTypes()[0] || 'audio/webm'
    };

    audioRecorder = new AudioRecorder(options);

    // 监听状态变化
    audioRecorder.on('stateChange', (state: RecordingState) => {
      updateRecordUI(state);
    });

    // 监听时间更新
    audioRecorder.on('timeUpdate', (time: number) => {
      const minutes = Math.floor(time / 60);
      const seconds = Math.floor(time % 60);
      recordTime.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    });

    // 监听录制完成
    audioRecorder.on('dataAvailable', (blob: Blob) => {
      recordedAudioBlob = blob;
      isUsingRecordedAudio = true;
      
      // 清除选择的文件
      selectedFile = null;
      const fileInput = document.getElementById('audioFile') as HTMLInputElement;
      fileInput.value = '';
      
      // 显示录制信息
      const fileSizeMB = (blob.size / 1024 / 1024).toFixed(2);
      fileInfo.innerHTML = `
        <div class="file-recorded">
          <p><strong>录制完成:</strong> 新录音</p>
          <p><strong>录制时长:</strong> ${recordTime.textContent}</p>
          <p><strong>文件大小:</strong> ${fileSizeMB} MB</p>
          <p><strong>文件类型:</strong> ${blob.type}</p>
        </div>
      `;
      
      // 启用转换按钮
      convertBtn.disabled = false;
      
      // 更新上传按钮文字
      uploadBtn.textContent = '选择音频文件';
    });

    // 监听错误
    audioRecorder.on('error', (error: Error) => {
      console.error('录制错误:', error);
      alert(`录制失败: ${error.message}`);
      updateRecordUI(RecordingState.IDLE);
    });
  }

  // 更新录制UI
  function updateRecordUI(state: RecordingState) {
    switch (state) {
      case RecordingState.IDLE:
        recordBtn.classList.remove('recording', 'stopping');
        recordBtn.disabled = false;
        recordIcon.innerHTML = '<circle cx="12" cy="12" r="3"/>';
        recordText.textContent = '录制音频';
        recordStatus.style.display = 'none';
        recordTime.textContent = '00:00';
        break;
        
      case RecordingState.RECORDING:
        recordBtn.classList.add('recording');
        recordBtn.classList.remove('stopping');
        recordBtn.disabled = false;
        recordIcon.innerHTML = '<rect x="6" y="6" width="12" height="12" rx="2"/>';
        recordText.textContent = '停止录制';
        recordStatus.style.display = 'flex';
        break;
        
      case RecordingState.STOPPED:
        recordBtn.classList.remove('recording');
        recordBtn.classList.add('stopping');
        recordBtn.disabled = true;
        recordText.textContent = '处理中...';
        recordStatus.style.display = 'none';
        break;
    }
  }

  // 录制按钮点击事件
  recordBtn.addEventListener('click', async () => {
    if (!audioRecorder) {
      initRecorder();
    }

    try {
      const currentState = audioRecorder!.getState();
      
      if (currentState === RecordingState.IDLE) {
        // 开始录制
        await audioRecorder!.startRecording();
      } else if (currentState === RecordingState.RECORDING) {
        // 停止录制
        audioRecorder!.stopRecording();
      }
    } catch (error) {
      console.error('录制操作失败:', error);
      alert(`操作失败: ${error instanceof Error ? error.message : '未知错误'}`);
    }
  });

  // 初始化录制器
  initRecorder();
}

// 初始化页面
createPageStructure();
setupFileUpload();
setupConvertButton();
setupSettingsModal();
setupRecording();