ui.js

// 狼人杀模拟面板 - UI逻辑

import { WerewolfGame } from './game.js';
import { AIPlayerManager, GameController } from './ai-player.js';
import { GAME_CONFIG } from './config.js';

class WerewolfUI {
  constructor() {
    this.game = new WerewolfGame();
    this.ai = new AIPlayerManager();
    this.controller = new GameController(this.game, this.ai);
    
    this.autoScroll = true;
    this.isInitialized = false;
  }

  init() {
    if (this.isInitialized) return;
    this.isInitialized = true;
    
    this.bindEvents();
    this.renderPlayerSeats();
    this.updateStatus();
    
    // 设置控制器回调
    this.controller.setCallbacks({
      onUpdate: (state) => this.updateState(state),
      onLog: (message) => this.addLog(message),
      onSpeech: (player, content) => this.addSpeech(player, content)
    });
  }

  bindEvents() {
    const startBtn = document.getElementById('btnStart');
    const pauseBtn = document.getElementById('btnPause');
    const resumeBtn = document.getElementById('btnResume');
    const stopBtn = document.getElementById('btnStop');
    const resetBtn = document.getElementById('btnReset');
    const speedBtns = document.querySelectorAll('.btn-speed');
    const apiKeyInput = document.getElementById('apiKeyInput');
    const apiKeyBtn = document.getElementById('apiKeyBtn');

    if (startBtn) startBtn.addEventListener('click', () => this.startGame());
    if (pauseBtn) pauseBtn.addEventListener('click', () => this.pauseGame());
    if (resumeBtn) resumeBtn.addEventListener('click', () => this.resumeGame());
    if (stopBtn) stopBtn.addEventListener('click', () => this.stopGame());
    if (resetBtn) resetBtn.addEventListener('click', () => this.resetGame());
    
    if (speedBtns) {
      speedBtns.forEach(btn => {
        btn.addEventListener('click', () => {
          speedBtns.forEach(b => b.classList.remove('active'));
          btn.classList.add('active');
          const speed = parseInt(btn.dataset.speed);
          this.controller.setSpeed(speed);
        });
      });
    }

    if (apiKeyBtn) {
      apiKeyBtn.addEventListener('click', () => {
        const key = apiKeyInput?.value?.trim();
        if (key) {
          this.ai.setApiKey(key);
          this.addLog('info', '🔑 GLM API密钥已设置，将使用真实API调用');
        } else {
          this.ai.setApiKey(null);
          this.addLog('info', '📝 已切换为Mock模式');
        }
      });
    }
  }

  // 开始游戏
  async startGame() {
    this.game = new WerewolfGame();
    this.ai = new AIPlayerManager(this.ai.apiKey);
    this.controller = new GameController(this.game, this.ai);
    
    this.controller.setCallbacks({
      onUpdate: (state) => this.updateState(state),
      onLog: (message) => this.addLog(message),
      onSpeech: (player, content) => this.addSpeech(player, content)
    });
    
    this.clearLogs();
    this.clearSpeeches();
    this.removeGameOver();
    
    this.updateButtonState('running');
    
    try {
      await this.controller.start();
    } catch (error) {
      console.error('游戏运行错误:', error);
      this.addLog('error', `❌ 游戏运行错误: ${error.message}`);
    }
  }

  pauseGame() {
    this.controller.pause();
    this.updateButtonState('paused');
    this.addLog('info', '⏸️ 游戏已暂停');
  }

  resumeGame() {
    this.controller.resume();
    this.updateButtonState('running');
    this.addLog('info', '▶️ 游戏已继续');
  }

  stopGame() {
    this.controller.pause();
    this.updateButtonState('stopped');
    this.addLog('info', '⏹️ 游戏已停止');
  }

  resetGame() {
    this.controller.pause();
    this.game = new WerewolfGame();
    this.controller = new GameController(this.game, this.ai);
    
    this.controller.setCallbacks({
      onUpdate: (state) => this.updateState(state),
      onLog: (message) => this.addLog(message),
      onSpeech: (player, content) => this.addSpeech(player, content)
    });
    
    this.clearLogs();
    this.clearSpeeches();
    this.removeGameOver();
    this.renderPlayerSeats();
    this.updateStatus();
    this.updateButtonState('idle');
    
    this.addLog('info', '🔄 游戏已重置');
  }

  // 更新按钮状态
  updateButtonState(state) {
    const startBtn = document.getElementById('btnStart');
    const pauseBtn = document.getElementById('btnPause');
    const resumeBtn = document.getElementById('btnResume');
    const stopBtn = document.getElementById('btnStop');

    if (startBtn) startBtn.disabled = (state === 'running' || state === 'paused');
    if (pauseBtn) pauseBtn.disabled = (state !== 'running');
    if (resumeBtn) resumeBtn.disabled = (state !== 'paused');
    if (stopBtn) stopBtn.disabled = (state === 'idle' || state === 'stopped');
  }

  // 渲染玩家座位
  renderPlayerSeats(players = null) {
    const container = document.getElementById('playerSeats');
    if (!container) return;

    if (!players) {
      players = Array.from({ length: 12 }, (_, i) => ({
        seat: i + 1,
        name: '',
        alive: true,
        role: null,
        personality: null
      }));
    }

    container.innerHTML = players.map(p => {
      const roleInfo = p.role ? GAME_CONFIG.roles[p.role] : null;
      return `
        <div class="player-seat ${p.alive ? 'alive' : 'dead'} ${p.role ? this.getRoleClass(p.role) : ''}" 
             data-seat="${p.seat}"
             data-role="${p.role || ''}"
             data-player-id="${p.id || ''}">
          <div class="seat-number">${p.seat}号</div>
          <div class="seat-emoji">${roleInfo ? roleInfo.emoji : '❓'}</div>
          <div class="seat-name">${p.name || '等待中'}</div>
          <div class="seat-role">${roleInfo ? roleInfo.name : ''}</div>
          ${p.personality ? `<div class="seat-personality">${p.personality.name}</div>` : ''}
          ${!p.alive ? '<div class="death-mark">💀</div>' : ''}
        </div>
      `;
    }).join('');
  }

  getRoleClass(role) {
    const classMap = {
      'WEREWOLF': 'wolf',
      'SEER': 'village',
      'WITCH': 'village',
      'HUNTER': 'village',
      'GUARD': 'village',
      'VILLAGER': 'village'
    };
    return classMap[role] || '';
  }

  // 更新游戏状态
  updateState(state) {
    this.renderPlayerSeats(state.players);
    this.updateStatus(state);
    this.updateVoteResults(state);
    
    // 检查游戏结束
    if (state.winner) {
      this.showGameOver(state);
    }
  }

  // 更新状态栏
  updateStatus(state = null) {
    const roundEl = document.getElementById('roundNumber');
    const phaseEl = document.getElementById('phaseText');
    const wolfCountEl = document.getElementById('wolfCount');
    const villageCountEl = document.getElementById('villageCount');
    const aliveCountEl = document.getElementById('aliveCount');

    if (state) {
      if (roundEl) roundEl.textContent = state.round;
      if (phaseEl) {
        const phaseNames = {
          'night': '🌙 夜晚',
          'day_discuss': '☀️ 白天讨论',
          'day_vote': '🗳️ 投票',
          'game_over': '🎮 游戏结束'
        };
        phaseEl.textContent = phaseNames[state.phase] || state.phase;
      }
      if (wolfCountEl) wolfCountEl.textContent = state.aliveCount.wolves;
      if (villageCountEl) villageCountEl.textContent = state.aliveCount.villagers;
      if (aliveCountEl) aliveCountEl.textContent = state.aliveCount.total;
    } else {
      if (roundEl) roundEl.textContent = '0';
      if (phaseEl) phaseEl.textContent = '等待开始';
      if (wolfCountEl) wolfCountEl.textContent = '4';
      if (villageCountEl) villageCountEl.textContent = '8';
      if (aliveCountEl) aliveCountEl.textContent = '12';
    }
  }

  // 更新投票结果
  updateVoteResults(state) {
    const container = document.getElementById('voteResults');
    if (!container) return;

    const currentRoundVotes = this.game.voteResults[state.round] || [];
    if (currentRoundVotes.length === 0) {
      container.innerHTML = '<div style="color: var(--text-muted); text-align: center; padding: 20px;">暂无投票数据</div>';
      return;
    }

    // 统计投票
    const voteCount = {};
    currentRoundVotes.forEach(v => {
      if (!voteCount[v.targetId]) {
        voteCount[v.targetId] = {
          seat: v.targetSeat,
          count: 0,
          voters: []
        };
      }
      voteCount[v.targetId].count++;
      voteCount[v.targetId].voters.push(v.voterSeat);
    });

    const maxVotes = Math.max(...Object.values(voteCount).map(v => v.count), 1);

    container.innerHTML = Object.values(voteCount)
      .sort((a, b) => b.count - a.count)
      .map(v => `
        <div class="vote-bar">
          <div class="vote-target">${v.seat}号</div>
          <div class="vote-count">${v.count}票</div>
          <div class="vote-bar-track">
            <div class="vote-bar-fill" style="width: ${(v.count / maxVotes) * 100}%"></div>
          </div>
          <div style="font-size: 0.75em; color: var(--text-muted);">来自: ${v.voters.join('号、')}号</div>
        </div>
      `).join('');
  }

  // 添加发言
  addSpeech(player, content) {
    const container = document.getElementById('speechList');
    if (!container) return;

    const roleInfo = GAME_CONFIG.roles[player.role];
    const speechItem = document.createElement('div');
    speechItem.className = 'speech-item';
    speechItem.innerHTML = `
      <div class="speech-header">
        <span class="speaker-name">${player.seat}号 ${player.name} ${roleInfo.emoji}</span>
        <span>第${this.game.round}轮</span>
      </div>
      <div class="speech-content">${content}</div>
    `;
    
    container.appendChild(speechItem);
    
    if (this.autoScroll) {
      container.scrollTop = container.scrollHeight;
    }
  }

  // 添加日志
  addLog(message, type = 'info') {
    const container = document.getElementById('logList');
    if (!container) return;

    const logClass = this.getLogClass(message);
    const logItem = document.createElement('div');
    logItem.className = `log-item ${logClass}`;
    
    const time = new Date().toLocaleTimeString('zh-CN', { hour12: false });
    logItem.innerHTML = `<span style="color: var(--text-muted); font-size: 0.8em;">[${time}]</span> ${message}`;
    
    container.appendChild(logItem);
    
    if (this.autoScroll) {
      container.scrollTop = container.scrollHeight;
    }
  }

  getLogClass(message) {
    if (message.includes('🌙') || message.includes('夜晚')) return 'night';
    if (message.includes('☀️') || message.includes('白天')) return 'day';
    if (message.includes('💀') || message.includes('死亡')) return 'death';
    if (message.includes('🗳️') || message.includes('投票')) return 'vote';
    return 'info';
  }

  // 清除日志
  clearLogs() {
    const container = document.getElementById('logList');
    if (container) {
      container.innerHTML = '';
    }
  }

  // 清除发言
  clearSpeeches() {
    const container = document.getElementById('speechList');
    if (container) {
      container.innerHTML = '';
    }
  }

  // 显示游戏结束
  showGameOver(state) {
    this.removeGameOver();
    
    const villageWon = state.winner === 'village';
    const overlay = document.createElement('div');
    overlay.className = 'game-over-overlay';
    overlay.id = 'gameOverOverlay';
    
    overlay.innerHTML = `
      <div class="game-over-card">
        <div class="winner-emoji">${villageWon ? '🏆' : '🐺'}</div>
        <div class="winner-text">${villageWon ? '好人阵营获胜！' : '狼人阵营获胜！'}</div>
        <div class="winner-detail">
          <p>游戏在第${state.round}轮结束</p>
          <p>存活狼人: ${state.aliveCount.wolves} | 存活好人: ${state.aliveCount.villagers}</p>
          <p>GLM能力测试完成！查看发言记录和投票数据评估AI表现</p>
        </div>
        <button onclick="this.closest('.game-over-overlay').remove()">关闭</button>
        <button onclick="window.werewolfUI.resetGame()" style="margin-left: 10px; background: var(--success);">再来一局</button>
      </div>
    `;
    
    document.body.appendChild(overlay);
    this.updateButtonState('stopped');
  }

  removeGameOver() {
    const overlay = document.getElementById('gameOverOverlay');
    if (overlay) {
      overlay.remove();
    }
  }

  // 导出游戏数据
  exportGameData() {
    const data = this.game.exportGame();
    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `werewolf-game-${Date.now()}.json`;
    a.click();
    URL.revokeObjectURL(url);
    this.addLog('info', '📁 游戏数据已导出');
  }
}

// 全局实例
window.werewolfUI = new WerewolfUI();

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', () => {
  window.werewolfUI.init();
});