let GlbGames = null;

const AngerBar = {
  props: ['angerLevel', 'angerName'],
  computed: {
    barColor() {
      if (this.angerLevel < 30) return 'bg-yellow-300';
      if (this.angerLevel < 60) return 'bg-yellow-500';
      return 'bg-red-500';
    }
  },
  template: `
    <div class="flex flex-col items-center">
      <span class="text-xxs text-gray-600">{{angerLevel}}</span>
      <div class="h-10 w-1 bg-gray-200 rounded-full overflow-hidden relative">
        <div 
          :class="['w-full absolute bottom-0', barColor, 'transition-all duration-500 ease-in-out']"
          :style="{ height: angerLevel + '%' }"
        ></div>
      </div>
      <div class="text-xxs text-gray-400">{{ angerName }}</div>
    </div>
  `
};

const ProudBar = {
  props: ['proudLevel', 'proudName'],
  computed: {
    barColor() {
      if (this.proudLevel < 30) return 'bg-blue-200';
      if (this.proudLevel < 60) return 'bg-blue-300';
      return 'bg-blue-500';
    }
  },
  template: `
    <div class="flex flex-col items-center">
      <span class="text-xxs text-gray-600">{{proudLevel}}</span>
      <div class="h-10 w-1 bg-gray-200 rounded-full overflow-hidden relative">
        <div 
          :class="['w-full absolute bottom-0', barColor, 'transition-all duration-500 ease-in-out']"
          :style="{ height: proudLevel + '%' }"
        ></div>
      </div>
      <div class="text-xxs text-gray-400">{{ proudName }}</div>
    </div>
  `
};

const FloatingNumber = {
  props: ['value', 'proud', 'init'],
  data() {
    return {
      isVisible: false
    }
  },
  mounted() {
    if (!this.init) {
      this.animate();
    }
  },
  methods: {
    animate() {
      this.isVisible = true;
      setTimeout(() => {
        this.isVisible = false;
      }, 2000);
    }
  },
  template: `
    <transition name="float">
      <div v-if="isVisible" class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-full text-red-500 text-xxs">
        😎{{proud}}<br>😭{{ value }}
      </div>
    </transition>
  `
};

const CountdownTimer = {
  props: ['duration', 'onTimeout'],
  data() {
    return {
      remainingTime: this.duration,
      intervalId: null,
      isStopped: false
    };
  },
  methods: {
    startTimer() {
      this.remainingTime = this.duration;
      this.intervalId = setInterval(() => {
        if (!this.isStopped) {
          this.remainingTime--;
          if (this.remainingTime <= 0) {
            this.stopTimer();
            this.onTimeout();
          }
        }
      }, 1000);
    },
    stopTimer() {
      clearInterval(this.intervalId);
      this.isStopped = true;
    },
    resetTimer() {
      this.stopTimer();
      this.isStopped = false;
      this.startTimer();
    }
  },
  mounted() {
    this.startTimer();
  },
  beforeUnmount() {
    this.stopTimer();
  },
  template: `
    <div class="text-xs text-gray-500">
      倒计时: {{ Math.floor(remainingTime / 60) }}:{{ (remainingTime % 60).toString().padStart(2, '0') }}
    </div>
  `
};

const ProfilePanel = {
  props: {
    message: Object,
    characterInfo: Object,
    closeProfile: Function,
    showFullSizeImage: Function
  },
  template: `
    <div class="avatar-tooltip absolute z-50 bg-white border rounded-lg p-4 shadow-lg w-72" :class="message.sent ? 'right-0' : 'left-0'">
    <button @click="closeProfile" class="absolute top-2 right-2 text-gray-500 hover:text-gray-700">
      <i class="fas fa-times text-sm"></i>
    </button>
    <div class="flex items-start mb-3">
      <img 
        :src="message.avatar" 
        :alt="message.name" 
        class="w-16 h-16 rounded-full mr-4 cursor-pointer object-cover" 
        @click="showFullSizeImage(message.avatar)"
      />
      <div>
        <h3 class="font-bold text-lg mb-1">{{ message.name }}</h3>
        <p class="text-sm text-gray-600 line-clamp-2">{{ characterInfo.bio }}</p>
      </div>
    </div>
    <div class="space-y-2">
      <div class="bg-gray-100 rounded-md p-2">
        <span class="font-semibold text-sm text-gray-700 block mb-1">{{ characterInfo.YS_key }}</span>
        <p class="text-sm text-gray-600 break-words">{{ characterInfo.YS }}</p>
      </div>
      <div class="bg-gray-100 rounded-md p-2">
        <span class="font-semibold text-sm text-gray-700 block mb-1">{{ characterInfo.ZB_key }}</span>
        <p class="text-sm text-gray-600 break-words">{{ characterInfo.ZB }}</p>
      </div>
    </div>
  </div>
  `
};

const ChatInterface = {
  components: {
    AngerBar,
    ProudBar,
    CountdownTimer,
    FloatingNumber,
    ProfilePanel
  },
  data() {
    return {
      allGamesInfo: null,
      showIntro: true,
      showDirectBTHButton: false,
      isGoalExpanded: false,
      goalText: "自由探索",
      beforeSendMessage : true,
      characterInfo : null,
      myself: null,
      myselfName: null,
      isLoading: false,
      stoppingOldChat: false,
      showOverlay: false,
      overlayImage: '',
      overlayText: '',
      overlayOwner: '',
      overlayOwnerText: '',
      showFullSizeAvatar: false,
      showClearCacheConfirm: false,
      showForceEndConfirm: false,
      dontForceEndConfirmAgain: false,
      endSessionText: "确认结束对话？",
      activeProfileId: null,
      fullSizeAvatarUrl: '',
      longPressTimer: null,
      longPressThreshold: 500,
      // **双击头像 start***
      lastTap: 0,
      tapTimeout: 300,
      // **双击头像 end***
      isTimeout: false,
      isSidebarActive: false,
      isMembersPanelActive: false,
      isHelpPanelActive: false,
      isMobile: false,
      newMessage: '',
      textareaHeight: '35px', // 设置初始高度
      minHeight: '35px',      // 设置最小高度
      maxHeight: '150px',     // 设置最大高度
      showPopup: false,
      popupMessage: '敬请期待！',
      mentionList: [],
      mentionListIndex: -1, // New: Index to track the selected mention in the list
      showMentionList: false,
      selectedMention: null,
      countdownDuration: 5 * 60,
      conversionCount: 0,
      maxGameRound: 0,
      contacts: [],
      currentChat: {
        activeGameType: 0,
        name: '',
        messages: [],
        members: [],
        updatedAt: 0,
        isUpdatingMessage: false,
        isStopped: false,
      },
    }
  },
  methods: {
    async resetData(gameType) {
      Object.assign(this.$data, this.$options.data.call(this));
      this.showIntro = false;
      this.currentChat.activeGameType = gameType;
      await this.fetchAllGames();
      this.getActiveGameInfo(gameType);
      console.log("characterInfo");
      console.log(this.characterInfo);
      window.utils.setActiveGameType(this.currentChat.activeGameType);
      this.resetCountdown();
    },
    getActiveGameInfo(gameType) {
      for (let i = 0; i < this.allGamesInfo.length; i++) {
        const gameInfo = this.allGamesInfo[i];
        if (gameInfo.type === gameType) {
          this.currentChat.name =  gameInfo.name;
          this.characterInfo = gameInfo.roles;
          this.myself = this.characterInfo[gameInfo.myself];
          this.myselfName = gameInfo.myself;
          this.maxGameRound = gameInfo.max_game_round;
        }
      }
    },
    toggleSidebar() {
      this.isSidebarActive = !this.isSidebarActive;
    },
    toggleMembersPanel() {
      this.isMembersPanelActive = !this.isMembersPanelActive;
    },
    toggleHelpPanel() {
      this.isHelpPanelActive = !this.isHelpPanelActive;
    },
    toggleShowIntro() {
      this.showIntro = !this.showIntro;
    },
    backToHome() {
      const dont = window.utils.getDontShowConfirm();
      if (dont) {
        this.showIntro = true;
      } else {
        if (!this.getBeforeSendMessage()) {
          this.showForceEnd('本局仍在进行中，您是否要先结束对话？', true);
        } else {
          this.showIntro = true;
        }
      }
    },
    getCharacterInfo(role) {
      return this.characterInfo[role] || {};
    },
    getBeforeSendMessage() {
      return this.beforeSendMessage;
    },
    toggleGoal() {
      this.isGoalExpanded = true;
      setTimeout(() => {
        this.isGoalExpanded = false;
      }, 5000);
    },
    closeGoal() {
      this.isGoalExpanded = false;
    },
    showFullSizeImage(avatarUrl) {
      this.fullSizeAvatarUrl = avatarUrl;
      this.showFullSizeAvatar = true;
    },
    closeFullSizeImage() {
      this.showFullSizeAvatar = false;
    },
    toggleProfile(messageId) {
      if (this.activeProfileId === messageId) {
        this.activeProfileId = null;
      } else {
        this.activeProfileId = messageId;
      }
    },
    closeProfile() {
      this.activeProfileId = null;
    },
    startLongPress(event, message) {
      event.preventDefault();
      event.stopPropagation();
      this.isLongPress = false;
      this.longPressTimer = setTimeout(() => {
        this.isLongPress = true;
        this.mentionUser(message);
      }, this.longPressThreshold);
    },
    endLongPress(event, message) {
      event.preventDefault();
      event.stopPropagation();
      if (this.longPressTimer) {
        clearTimeout(this.longPressTimer);
      }
      this.isLongPress = false;
    },
    preventDefaultTouch(event) {
      event.stopPropagation();
      event.preventDefault();
    },
    handleAvatarInteraction(event, message) {
      if (event.type === 'dblclick') {
        event.preventDefault();
        event.stopPropagation();
        this.mentionUser(message);
      } else if (event.type === 'touchend') {
        // 移动端快速点击
        const currentTime = new Date().getTime();
        const tapLength = currentTime - this.lastTap;
        if (tapLength < this.tapTimeout && tapLength > 0) {
          this.mentionUser(message);
          event.preventDefault();
          event.stopPropagation();
        }
        this.lastTap = currentTime;
      }
    },
    mentionUser(message) {
      if (message.role !== this.myselfName) {
        const atIndex = this.newMessage.lastIndexOf('@');
        if (atIndex !== -1) {
          this.newMessage = this.newMessage.slice(0, atIndex);
        }
        this.newMessage += `@${message.name} `;
        this.selectedMention = this.currentChat.members.find(member => member.refId === message.role);
        // this.$refs.messageInput.focus();
        this.$nextTick(() => {
          this.$refs.messageInput.focus();
        });
      }
    },
    showFullScreenOverlay(imageUrl, text, owner, ownerText) {
      this.overlayImage = imageUrl;
      this.overlayText = text;
      if (owner) {
        const info = this.characterInfo[owner];
        if (info) {
          this.overlayOwner = info['name'];
        }
      }
      if (ownerText) {
        this.overlayOwnerText = ownerText;
      }
      this.showOverlay = true;
    },
    closeOverlay() {
      this.showOverlay = false;
    },
    showPopMessage(content) {
      this.popupMessage = content;
      this.showPopup = true;
    },
    closePopMessage() {
      this.showPopup = false;
    },
    showAutoPopMessage(content) {
      this.showPopMessage(content);
      setTimeout(() => {
        this.closePopMessage();
      }, 1000);
    },
    toggleClearCacheConfirm() {
      this.showClearCacheConfirm = !this.showClearCacheConfirm;
    },
    clearCache() {
      document.cookie.split(";").forEach((c) => {
        document.cookie = c
          .replace(/^ +/, "")
          .replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/");
      });
      localStorage.clear();
      // 尝试清除浏览器缓存
      if ('caches' in window) {
        caches.keys().then((names) => {
          names.forEach(name => {
            caches.delete(name);
          });
        });
      }
      this.showClearCacheConfirm = false;
      // Show feedback to user
      this.showPopMessage("缓存已清除，页面即将刷新");
      setTimeout(() => {
        this.closePopMessage();
        window.location.href = window.location.pathname + '?t=' + Date.now();
      }, 1000);
    },
    updateAngerLevel(role, scores) {
      const change = scores[1] - this.characterInfo[role].angerLevel;
      const proudChange = scores[0] - this.characterInfo[role].proudLevel;
      this.characterInfo[role].proudLevel = scores[0];
      this.characterInfo[role].angerLevel = scores[1];
      this.characterInfo[role].angerChange = change;
      this.characterInfo[role].proudChange = proudChange;
    },
    async updateMessage(json_res, isStart=true) {
      try {
        this.currentChat.isUpdatingMessage = true;
        if (json_res && json_res.status === 0) {
        const data = json_res.data;
        const allowSpeakers = data.allowed_speaker;
        if (allowSpeakers && allowSpeakers.length > 0) {
          this.currentChat.members = [];
          for (const speaker of allowSpeakers) {
            const member = this.characterInfo[speaker];
            this.currentChat.members.push(member);
          }
        }
        if (data.target && data.target.length > 0) {
          this.goalText = data.target;
          if (isStart) {
            this.toggleGoal();
          }
        }
        this.conversionCount = data.game_round;
        const messages = data.messages;
        const updatedAt = data.timestamp;
        if (messages.length > 0 && updatedAt > this.currentChat.updatedAt) {
          this.currentChat.updatedAt = updatedAt;
          const agentScores = data.agent_scores;
          for (const [role, scoreArr] of Object.entries(agentScores)) {
            this.updateAngerLevel(role, scoreArr);
          }
          if (isStart) { //切换游戏要清空历史
            this.currentChat.messages = [];
          }
          for (let index = this.currentChat.messages.length; index < messages.length; index++) {
            const message = messages[index];
            const id = index + 1;
            const content = message.content;
            const role = message.name;
            const name = this.characterInfo[role].name;
            let sent = false;
            if (role === this.myselfName) {
              sent = true;
            }
            const avatar = this.characterInfo[role].avatar;
            let data = {
              id: id,
              content: content,
              sent: sent,
              name: name,
              avatar: avatar,
              role: role,
              angerLevel: this.characterInfo[role].angerLevel,
              proudLevel: this.characterInfo[role].proudLevel,
              angerChange: this.characterInfo[role].angerChange,
              angerName: this.characterInfo[role].ZB_key,
              proudChange: this.characterInfo[role].proudChange,
              proudName: this.characterInfo[role].YS_key,
            };
            this.currentChat.messages.push(data);
            if (!isStart) {
              await new Promise(resolve => setTimeout(resolve, 500));
            }
          }
          this.$nextTick(() => {
            this.scrollToBottom();
          });
        }
      }
      } finally {
        this.currentChat.isUpdatingMessage = false;
      }

    },
    scrollToBottom() {
      const chatContainer = this.$refs.chatContainer;
      if (chatContainer) {
        chatContainer.scrollTop = chatContainer.scrollHeight;
      }
    },
    async startSession(gameType = 0) {
      try {
        if (gameType === this.currentChat.activeGameType && !this.currentChat.isStopped) {
          this.showIntro = false;
          return;
        }
        // 刚刷新的时候，this.currentChat.activeGameType=0，不会触发stop
        // 切换游戏的时候，this.currentChat.activeGameType > 0，会触发stop
        if (this.currentChat.activeGameType > 0) { //
          try {
            this.stoppingOldChat = true;
            await this.stop(this.currentChat.activeGameType);
          } finally {
            this.stoppingOldChat = false;
          }
        }
        this.showIntro = false;
        await this.resetData(gameType);
        this.showPopMessage("加载中...");
        const json_res = await window.utils.start(gameType);
        if (json_res) {
          await this.updateMessage(json_res);
        } else {
          window.alert("Oops~😭请重新再刷新一次！")
        }
      } finally {
        this.closePopMessage();
      }

    },
    adjustTextareaHeight(isFirstLoad=true) {
      const textarea = this.$refs.messageInput;
      if (!textarea) {
        return;
      }
      textarea.style.height = this.minHeight; // 首先设置为最小高度
      if (isFirstLoad) {
        textarea.style.height = this.minHeight;
        this.textareaHeight = this.minHeight;
      } else {
        textarea.style.height = this.minHeight; // 首先设置为最小高度
        const newHeight = Math.max(
        parseInt(this.minHeight),
        Math.min(textarea.scrollHeight, parseInt(this.maxHeight))
        );
        textarea.style.height = `${newHeight}px`;
        this.textareaHeight = `${newHeight}px`;
      }
    },
    resetTextareaHeight() {
      this.textareaHeight = this.minHeight;
      this.$nextTick(() => {
        this.adjustTextareaHeight();
      });
    },
    handleInput(event) {
      this.adjustTextareaHeight(false);
      const atIndex = this.newMessage.lastIndexOf('@');
      if (atIndex !== -1 && atIndex === this.newMessage.length - 1) {
        this.showMentionList = true;
        this.mentionList = this.currentChat.members.filter(member => member.name !== this.characterInfo[this.myselfName].name);
        this.mentionListIndex = -1; // Reset the index when showing the list
      } else if (atIndex !== -1) {
        const query = this.newMessage.slice(atIndex + 1).toLowerCase();
        this.mentionList = this.currentChat.members.filter(member =>
          member.name !== this.myself.name && member.name.toLowerCase().includes(query)
        );
        this.showMentionList = this.mentionList.length > 0;
        this.mentionListIndex = -1; // Reset the index when filtering the list
      } else {
        this.showMentionList = false;
        this.mentionListIndex = -1; // Reset the index when hiding the list
      }
    },
    async handleKeydown(event) {
      if (this.showMentionList) {
        switch (event.key) {
          case 'Tab':
            event.preventDefault(); // Prevent default tab behavior
            this.mentionListIndex = (this.mentionListIndex + 1) % this.mentionList.length;
            break;
          case 'Enter':
            event.preventDefault(); // Prevent sending the message
            if (this.mentionListIndex !== -1) {
              this.selectMention(this.mentionList[this.mentionListIndex]);
            }
            break;
          case 'Escape':
            this.closeMentionList();
            break;
        }
      } else if (event.key === 'Enter') {
        await this.sendMessage();
      }
    },
    selectMention(member) {
      const atIndex = this.newMessage.lastIndexOf('@');
      this.newMessage = this.newMessage.slice(0, atIndex) + '@' + member.name + ' ';
      this.closeMentionList();
      this.selectedMention = member;
      this.mentionListIndex = -1; // Reset the index after selection
      this.$refs.messageInput.focus();
    },
    closeMentionList() {
      this.showMentionList = false;
      this.selectedMention = null;
      this.mentionListIndex = -1;
    },
    resetCountdown() {
      if (this.$refs.countdownTimer) {
        this.$refs.countdownTimer.resetTimer();
      }
    },
    async handleTimeout() {
      this.isTimeout = true;
      this.showFullScreenOverlay("https://pic1.imgdb.cn/item/677e4b69d0e0a243d4f1f6d1.png", "会话已过期", null, null);
    },
    async sendMessage() {
      if (this.newMessage.trim() && !this.showMentionList) {
        this.beforeSendMessage = false;
        this.resetCountdown();
        const data = {
          id: this.currentChat.messages.length + 1,
          content: this.newMessage,
          sent: true,
          role: this.myselfName,
          name: this.myself.name,
          avatar: this.myself.avatar
        };
        this.currentChat.messages.push(data);
        this.resetTextareaHeight();
        this.$nextTick(() => {
          this.scrollToBottom();
        });
        const messageData = this.newMessage;
        this.newMessage = '';
        const user_tag = this.selectedMention ? this.selectedMention.refId : null;
        this.closeMentionList();
         // Start loading
        this.isLoading = true;
        try{
          await window.utils.send(messageData, user_tag, this.currentChat.activeGameType);
          const his_json_res = await window.utils.history(this.currentChat.activeGameType);
          if (his_json_res) {
            await this.updateMessage(his_json_res, false);
            const data = his_json_res.data;
            if (data && data.is_finished) {
              this.$refs.countdownTimer.stopTimer(); // Stop the timer
              this.showFullScreenOverlay(
                  "https://pic1.imgdb.cn/item/677e4b69d0e0a243d4f1f6cf.png",
                  data.player_finial_title,
                  data.summary_character,
                  data.summary_content);
              await this.stop(this.currentChat.activeGameType);
            }
          }
        }finally {
          this.isLoading = false;
        }
      }
    },
    async restart(gameType){
      try {
        this.showIntro = false;
        await this.resetData(gameType);
        this.showPopMessage("加载中...")
        const json_res = await window.utils.restart(gameType);
        if (json_res) {
          await this.updateMessage(json_res);
        } else {
          window.alert("Oops~😭请重新再刷新一次！")
        }
      } finally {
        this.closePopMessage();
      }
    },
    async stop(gameType) {
      await window.utils.stop(gameType);
      this.currentChat.isStopped = true;
    },
    showForceEnd(content, isDirectBackToHome=false) {
      if (isDirectBackToHome) {
        this.showDirectBTHButton = true;
      }
      this.endSessionText = content;
      this.showForceEndConfirm = true;
    },
    closeForceEndConfirm() {
      this.showForceEndConfirm = false;
    },
    directBackToHome() {
      this.closeForceEndConfirm();
      this.showDirectBTHButton = false;
      this.showIntro = true;
      this.dontForceEndConfirmAgain = true;
      window.utils.setDontShowConfirm(this.dontForceEndConfirmAgain);
    },
    backToHomeFromEnd() {
      this.closeOverlay();
      this.showIntro = true;
    },
    async endSession(gameType) {
      try{
          this.closeForceEndConfirm();
          const json_res = await window.utils.forceEnd(gameType);
          if (json_res && json_res.status === 0) {
            const data = json_res.data;
            if (data && data.is_finished) {
              this.$refs.countdownTimer.stopTimer(); // Stop the timer
              this.showFullScreenOverlay(
                  "https://pic1.imgdb.cn/item/677e4b69d0e0a243d4f1f6cf.png",
                  data.player_finial_title,
                  data.summary_character,
                  data.summary_content);
            }
            await this.stop(gameType);
          }
        } finally {
          this.isLoading = false;
        }
    },
    async refreshPage() {
      this.resetCountdown();
      location.reload();
    },
    checkScreenSize() {
      this.isMobile = window.innerWidth <= 768;
      if (!this.isMobile) {
        this.isSidebarActive = false;
      }
    },
    async fetchAllGames() {
      if (!GlbGames) {
        GlbGames = await window.utils.games();
        console.log("GlbGames");
        console.log(GlbGames);
      }
      this.allGamesInfo = GlbGames;
      console.log("allGamesInfo");
      console.log(this.allGamesInfo);
      this.contacts = [];
      for (let i = 0; i < this.allGamesInfo.length; i++) {
        const gameInfo = this.allGamesInfo[i];
        this.contacts.push(
            {
              type: gameInfo.type,
              name: gameInfo.name,
              lastMessage: '最后一条消息',
              time: '12:00',
              avatar: 'https://www.helloimg.com/i/2024/12/31/677383e08a592.jpg',
              active: (gameInfo.type === this.currentChat.activeGameType),
            }
        );
      }
    },
    async restoreActiveGame() {
      const activeType = window.utils.getActiveGameType();
      if (activeType > 0) {
        await this.startSession(activeType);
      }
    },
  },
  async mounted() {
    this.$nextTick(() => {
      this.adjustTextareaHeight();
    });
    this.checkScreenSize();
    window.addEventListener('resize', this.checkScreenSize);
    await this.fetchAllGames();
    await this.restoreActiveGame();
    window.addEventListener('beforeunload', this.resetCountdown);
  },
  updated() {
    this.scrollToBottom();
  },
  unmounted() {
    window.removeEventListener('resize', this.checkScreenSize);
    window.removeEventListener('beforeunload', this.resetCountdown);
  },
  template: `
    <div class="bg-white w-full h-full md:w-11/12 md:h-5/6 md:max-w-6xl flex shadow-lg rounded-lg overflow-hidden relative">
      <!-- Sidebar -->
      <div id="sidebar" :class="[
        'bg-gray-800 text-white flex flex-col transition-transform duration-300 ease-in-out',
        isMobile ? 'fixed left-0 top-0 bottom-0 w-3/4 max-w-xs z-40' : 'w-1/4',
        { 'translate-x-0': isSidebarActive || !isMobile, '-translate-x-full': !isSidebarActive && isMobile }
      ]" style="display: none">
        <div class="flex items-center p-4 mb-5">
          <img alt="User profile picture" class="rounded-full w-10 h-10" height="40" 
            :src="myself ? myself.avatar : 'https://www.helloimg.com/i/2024/12/31/677383e08a592.jpg'" width="40" />
          <span class="ml-4">{{myself ? myself.name : '小王'}}</span>
        </div>
        <div class="flex-1 overflow-y-auto">
          <div v-for="contact in contacts" :key="contact.type" 
            :class="['p-4 flex items-center cursor-pointer', { 'bg-gray-700': contact.type===currentChat.activeGameType }]"
            @click="startSession(contact.type)">
            <img :alt="contact.name + ' profile picture'" class="rounded-full w-10 h-10" height="40" :src="contact.avatar" width="40" />
            <div class="ml-4 flex-1 min-w-0">
              <div class="text-sm truncate">{{ contact.name }}</div>
              <div class="text-xs text-gray-400 truncate">{{ contact.lastMessage }}</div>
            </div>
            <span class="text-xs text-gray-400 ml-2">{{ contact.time }}</span>
          </div>
        </div>
        <div class="text-center text-xs text-gray-400 p-4">
          © 2023 - 2025 ACT Inc. All Rights Reserved
        </div>
      </div>
      
      <!-- Members Panel -->
      <div :class="['bg-white border-l w-64 h-full absolute top-0 right-0 transform transition-transform duration-300 ease-in-out overflow-y-auto z-40', 
                    isMembersPanelActive ? 'translate-x-0' : 'translate-x-full']">
        <div class="p-4 border-b">
          <h2 class="text-lg font-semibold">群成员</h2>
        </div>
        <div class="p-4">
          <div v-for="member in currentChat.members" :key="member.id" class="flex items-center mb-4">
            <img :src="member.avatar" :alt="member.name" class="w-10 h-10 mr-3">
            <div>
              <div class="font-semibold">{{ member.name }}</div>
              <div class="text-sm text-gray-600 break-words whitespace-normal">{{ member.bio }}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- Help Panel -->
      <div :class="['bg-white border-l w-64 h-full absolute top-0 right-0 transform transition-transform duration-300 ease-in-out overflow-y-auto z-40', 
                    isHelpPanelActive ? 'translate-x-0' : 'translate-x-full']">
        <div class="p-4 border-b">
          <h2 class="text-lg font-semibold">帮助</h2>
        </div>
        <div class="p-4">
            <div>
              <div class="font-semibold my-2"><i class="fas fa-info-circle mr-2 w-4"></i><span class="text-sm text-gray-600 break-words whitespace-normal">帮助手册</span></div>
              <div class="font-semibold my-2"><i class="fas fa-eraser mr-2 w-4"></i><span class="text-sm text-gray-600 break-words whitespace-normal">清除缓存</span></div>
              <div class="font-semibold my-2"><i class="fas fa-home mr-2 w-4"></i><span class="text-sm text-gray-600 break-words whitespace-normal">返回首页</span></div>
              <div class="font-semibold my-2"><i class="fas fa-flag-checkered mr-2 w-4"></i><span class="text-sm text-gray-600 break-words whitespace-normal">查看局内目标</span></div>
              <div class="font-semibold my-2"><i class="fas fa-redo mr-2 w-4"></i><span class="text-sm text-gray-600 break-words whitespace-normal">重新开始</span></div>
              <div class="font-semibold my-2"><i class="fas fa-ban mr-2 w-4"></i><span class="text-sm text-gray-600 break-words whitespace-normal">结算本局</span></div>
              <div class="font-semibold my-2"><i class="fas fa-ellipsis-h mr-2 w-4"></i><span class="text-sm text-gray-600 break-words whitespace-normal">查看群成员</span></div>
              <div class="font-semibold my-2"><i class="fas fa-microphone mr-2 w-4"></i><span class="text-sm text-gray-600 break-words whitespace-normal">输入语音</span></div>
              <div class="font-semibold my-2"><i class="far fa-smile mr-2 w-4"></i><span class="text-sm text-gray-600 break-words whitespace-normal">输入表情</span></div>
            </div>
        </div>
      </div>
      
      <div id="test" :class="['flex-1 flex flex-col relative', showIntro ? 'block' : 'hidden']">
        <!-- 关闭按钮 -->
        <button @click="toggleShowIntro" class="absolute top-0 right-0 m-4 p-2 text-gray-600 hover:text-gray-800">
            <i class="fas fa-times text-2xl"></i>
        </button>
        <!-- 显示一段包含多行的话，包含标题和正文 -->
        <div class="text-center mb-10 mt-20 pt-10">
            <h1 class="text-3xl font-bold text-gray-800 mb-4">🎉🎉过年大作战🎉🎉</h1>
<!--            <p class="text-gray-600">This is a simple example of how to use Tailwind CSS and Font Awesome to design a page. Below you will find some clickable blocks with icons and titles.</p>-->
        </div>
        <!-- 显示包含多个点击块的行，每个点击块包含一个图片加标题 -->
        <div class="flex flex-wrap justify-center gap-4">
            <div v-for="contact in contacts" :key="contact.type" 
                :class="['flex flex-col items-center bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow cursor-pointer', {'pointer-events-none opacity-50': stoppingOldChat}]" 
                @click="startSession(contact.type)">
                <i class="fas fa-gamepad text-4xl text-blue-500 mb-4"></i>
                <h2 class="text-lg font-semibold text-gray-800">{{contact.name}}</h2>
                <h6 v-if="contact.type===currentChat.activeGameType && !currentChat.isStopped" class="text-xxs font-semibold text-gray-400 text-center">进行中</h6>
            </div>
            <div class="flex flex-col items-center bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow cursor-pointer">
                <i class="fas fa-info-circle text-4xl text-yellow-500 mb-4"></i>
                <h2 class="text-lg font-semibold text-gray-800">敬请期待</h2>
            </div>
        </div>
        <div class="flex absolute bottom-0 m-4 p-2 text-gray-600 w-full ">
          <p class="text-gray-600 text-center w-full text-xs">© 2023 - 2025 ACT Inc. All Rights Reserved</p>
        </div>
      </div>
      <!-- Chat Area -->
      <div :class="['flex-1 flex flex-col', showIntro ? 'hidden' : 'block']">
        <!-- 工具栏 start-->
        <div class="border-b px-3 py-1 flex items-center justify-between bg-gray-100">
          <div class="flex items-center">
            <countdown-timer ref="countdownTimer" :duration="countdownDuration" :on-timeout="handleTimeout" class="mr-4"></countdown-timer>
            <div class="text-xs text-gray-500 mr-4"> 对话(轮): {{conversionCount}}/{{maxGameRound}}</div>
          </div>
          <div class="flex items-center space-x-2">
            <button 
              @click="backToHome"
              :disabled="currentChat.isUpdatingMessage"
              class="p-1 rounded-full hover:text-gray-600 transition-colors duration-200"
              title="返回首页">
              <i class="fas fa-home"></i>
            </button>
            <button 
              @click="toggleClearCacheConfirm"
              :disabled="currentChat.isUpdatingMessage"
              class="p-1 rounded-full hover:text-gray-600 transition-colors duration-200"
              title="清除缓存">
              <i class="fas fa-eraser"></i>
            </button>
            <button 
              @click="toggleHelpPanel"
              class="p-1 rounded-full hover:text-gray-600 transition-colors duration-200"
              title="帮助手册">
              <i class="fas fa-info-circle"></i>
            </button>
          </div>
        </div>
        <!-- 工具栏 end-->
        
        <!-- 群名栏 start-->
        <div class="border-b px-3 py-2 flex items-center justify-between">
          <div class="w-1/3 flex justify-start">
            <button v-if="isMobile && false"
              @click="toggleSidebar"
              class="p-1 rounded-full hover:text-gray-600 transition-colors duration-200"
              title="聊天列表">
              <i class="fas fa-comments"></i>
            </button>
            <button @click="toggleGoal" class="p-1 rounded-full hover:text-gray-600 focus:outline-none" title="查看目标">
              <i class="fas fa-flag-checkered fa-sm"></i>
            </button>
          </div>
          <span class="w-1/3 font-semibold text-center text-sm">{{currentChat.name}}</span>
          <div class="w-1/3 flex justify-end items-center space-x-2">
            <button 
              @click="restart(currentChat.activeGameType)"
              :disabled="currentChat.isUpdatingMessage"
              class="p-1 rounded-full hover:text-gray-600 transition-colors duration-200"
              title="重新开始">
              <i class="fas fa-redo fa-sm"></i>
            </button>
            <button 
              @click="showForceEnd('您正在强制结算本局，且此操作无法撤销', false)"
              :disabled="currentChat.isUpdatingMessage"
              class="p-1 rounded-full hover:text-gray-600 transition-colors duration-200"
              title="结算本局">
              <i class="fas fa-ban"></i>
            </button>
            <button 
              @click="toggleMembersPanel"
              class="p-1 rounded-full hover:text-gray-600 transition-colors duration-200"
              title="查看成员">
              <i class="fas fa-ellipsis-h fa-xs"></i>
            </button>
          </div>
        </div>
        <!-- 群名栏 end-->
        <transition
          enter-active-class="transition ease-out duration-300"
          enter-from-class="transform -translate-y-full opacity-0"
          enter-to-class="transform translate-y-0 opacity-100"
          leave-active-class="transition ease-in duration-200"
          leave-from-class="transform translate-y-0 opacity-100"
          leave-to-class="transform -translate-y-full opacity-0"
        >
          <div v-if="isGoalExpanded" class="bg-yellow-100 border-b border-yellow-200 px-4 py-3 shadow-sm">
            <div class="flex justify-between items-center">
              <p class="text-sm text-yellow-700 font-medium">
                <i class="fas fa-flag-checkered mr-2"></i>本局目标：{{ goalText }}
              </p>
              <button @click="closeGoal" class="text-yellow-700 hover:text-yellow-900">
                <i class="fas fa-times"></i>
              </button>
            </div>
          </div>
        </transition>

        <div ref="chatContainer" class="flex-1 py-2 px-1.5 overflow-y-auto">
          <div v-for="message in currentChat.messages" :key="message.id" :class="['flex mb-4', { 'justify-end': message.sent }]">
            <div :class="['flex items-start max-w-[85%] md:max-w-[70%]', message.sent ? 'flex-row-reverse' : '']">
              <div class="flex-shrink-0 relative flex items-center">
                <proud-bar v-if="!message.sent"  :proud-level="message.proudLevel || 0" :proud-name="message.proudName || ''" class="mr-0.5"></proud-bar>
                <anger-bar v-if="!message.sent"  :anger-level="message.angerLevel || 0" :anger-name="message.angerName || ''" class="mr-0.5"></anger-bar>
                <div class="relative">
                  <img :src="message.avatar" :alt="message.name" class="w-12 h-12 ml-1 mr-2 cursor-pointer prevent-save enable-events" 
                    @touchstart="startLongPress($event,message)"
                    @touchend="endLongPress($event,message);handleAvatarInteraction($event, message)"
                    @touchmove="preventDefaultTouch"
                    @touchcancel="endLongPress($event,message)"
                    @mousedown="startLongPress($event,message)"
                    @mouseup="endLongPress($event,message)"
                    @dblclick="handleAvatarInteraction($event, message)"
                    @contextmenu.prevent>
                  <div class="absolute bottom-0 right-0 w-3 h-3 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-full flex items-center justify-center shadow-lg cursor-pointer transform transition-all duration-300 ease-in-out hover:scale-110 hover:rotate-12 group-hover:animate-pulse"
                       @click="toggleProfile(message.id)">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-2 h-2 text-white">
                      <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
                      <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
                    </svg>
                  </div>
                  <floating-number v-if="!message.sent && getCharacterInfo(message.role).angerChange"
                  :value="message.angerChange"
                  :proud="message.proudChange"
                  :init="getBeforeSendMessage()"></floating-number>
                  <!-- 简介面板 start-->
                  <ProfilePanel 
                    v-if="activeProfileId === message.id"
                    :message="message"
                    :characterInfo="getCharacterInfo(message.role)"
                    :closeProfile="closeProfile"
                    :showFullSizeImage="showFullSizeImage"
                  />
                  <!-- 简介面板 end-->
                </div>
              </div>
              <div :class="['flex flex-col', message.sent ? 'items-end' : 'items-start']">
                <span :class="['text-xs mb-1 text-gray-400', message.sent ? 'text-right' : '']">{{ message.name }}</span>
                <div :class="['inline-block text-sm p-2 rounded-lg break-words', message.sent ? 'bg-green-400 text-black' : 'bg-gray-200 text-black', 'max-w-full']">
                  {{ message.content }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="border-t p-4 flex items-center">
          <i class="fas fa-microphone text-gray-500 cursor-pointer mr-2" @click="showAutoPopMessage('敬请期待')"></i>
          <div class="flex-1 relative mr-1">
            <textarea v-model="newMessage" @input="handleInput" @keydown="handleKeydown" 
            ref="messageInput" class="w-full p-2 border rounded text-sm message-input overflow-y-auto resize-none" 
            :style="{ height: textareaHeight, minHeight: minHeight, maxHeight: maxHeight }"
            placeholder="按Enter发送/长按或双击头像@成员" type="text" :disabled="isLoading" rows="1" />
            <div v-if="isLoading" class="absolute right-2 top-1/2 transform -translate-y-1/2">
              <svg class="animate-spin h-5 w-5 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
              </svg>
            </div>
            <div v-if="showMentionList" class="absolute left-0 bottom-full mb-1 w-full bg-white border rounded shadow-lg z-50 mention-list">
              <div v-for="(member, index) in mentionList" :key="member.id" @click="selectMention(member)" 
                :class="['p-2 hover:bg-gray-100 cursor-pointer flex items-center', { 'bg-blue-100': index === mentionListIndex }]">
                <img :src="member.avatar" :alt="member.name" class="w-6 h-6 mr-2 rounded-full">
                <span>{{ member.name }}</span>
                <span class="pl-4 text-xxs text-gray-400">按TAB切换</span>
              </div>
            </div>
          </div>
          <i class="far fa-smile text-gray-500 cursor-pointer mr-2" @click="showAutoPopMessage('敬请期待')"></i>
          <button @click="sendMessage" class="bg-gray-200 p-2 rounded whitespace-nowrap text-sm" :disabled="isLoading">发送</button>
        </div>
      </div>
    </div>
    <!-- Overlay -->
    <div v-if="isMobile && isSidebarActive" class="fixed inset-0 bg-black bg-opacity-50 z-30" @click="toggleSidebar"></div>
    <div v-if="isMembersPanelActive" class="fixed inset-0 bg-black bg-opacity-50 z-30" @click="toggleMembersPanel"></div>
    <div v-if="isHelpPanelActive" class="fixed inset-0 bg-black bg-opacity-50 z-30" @click="toggleHelpPanel"></div>
    <!-- Global Popup -->
    <div v-if="showPopup" class="fixed inset-0 flex items-center justify-center z-50">
      <div class="bg-black bg-opacity-70 text-white px-6 py-3 rounded-lg shadow-lg">
        {{ popupMessage }}
      </div>
    </div>
    <!-- Full Screen Overlay -->
    <transition name="fade">
      <div v-if="showOverlay" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-70 p-4">
        <div class="bg-yellow-500 rounded-lg p-4 max-w-sm w-full text-center relative">
          <button 
            @click="closeOverlay"
            class="absolute top-2 right-2 text-white hover:text-gray-200 transition-colors duration-200 focus:outline-none"
            aria-label="关闭弹窗" >
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
          <img :src="overlayImage" alt="Overlay Image" class="w-50 h-32 mx-auto mb-4 object-cover rounded-full">
          <div v-if="!isTimeout" class="space-y-3">
            <p class="font-bold text-white">恭喜你荣获称号</p>
            <p class="text-xxxl font-bold text-white">🏅{{ overlayText }}🏅</p>
            <p class="font-bold text-white pb-2">{{overlayOwner}}: {{overlayOwnerText}}</p>
            <button 
              @click="restart(currentChat.activeGameType)"
              class="mt-4 px-6 py-2 mr-2 bg-white text-yellow-500 rounded-full font-bold hover:bg-gray-100 transition-colors">
              再玩一次
            </button>
            <button 
              @click="backToHomeFromEnd"
              class="mt-4 px-6 py-2 ml-2 bg-white text-gray-500 rounded-full font-bold hover:bg-gray-100 transition-colors">
              回到首页
            </button>
          </div>
          <div v-if="isTimeout" class="space-y-3">
            <p class="text-xxl font-white-cursive mb-1">😟{{ overlayText }}😟</p>
            <button 
            @click="refreshPage"
            class="mt-4 px-6 py-2 bg-white text-yellow-500 rounded-full font-bold hover:bg-gray-100 transition-colors">
            重新开始
          </button>
          </div>
        </div>
      </div>
    </transition>
    <!-- Full Size Avatar Overlay -->
    <transition name="fade">
      <div v-if="showFullSizeAvatar" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-70" @click="closeFullSizeImage">
        <div class="relative max-w-3xl max-h-[90vh] w-full h-full flex items-center justify-center p-4">
          <img :src="fullSizeAvatarUrl" alt="Full size avatar" class="max-w-full max-h-full object-contain rounded-lg">
          <button @click.stop="closeFullSizeImage" class="absolute top-2 right-2 text-white bg-gray-800 rounded-full p-2 hover:bg-gray-700 focus:outline-none">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
      </div>
    </transition>
    <!-- Clear Cache Confirmation Dialog -->
    <transition name="fade">
        <div v-if="showClearCacheConfirm" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
          <div class="bg-white rounded-lg p-6 m-4 max-w-sm w-full">
            <h3 class="text-lg font-semibold mb-4">确认清除缓存</h3>
            <p class="mb-6">这将清除所有 cookies 和本地存储数据。此操作无法撤消。</p>
            <div class="flex justify-end space-x-4">
              <button @click="toggleClearCacheConfirm" 
                class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-100 transition-colors duration-200">
                取消
              </button>
              <button @click="clearCache" 
                class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 transition-colors duration-200">
                清除缓存
              </button>
            </div>
          </div>
        </div>
      </transition>
      
      <!-- end Session Confirmation Dialog -->
    <transition name="fade">
        <div v-if="showForceEndConfirm" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
          <div class="bg-white rounded-lg p-6 m-4 max-w-sm w-full">
            <h3 class="text-lg font-semibold mb-4">确认结算本局</h3>
            <p class="mb-6">{{endSessionText}}</p>
            <div v-if="showDirectBTHButton" class="flex items-center mb-6">
              <input type="checkbox" id="dontForceEndConfirmAgain" v-model="dontForceEndConfirmAgain" class="form-checkbox h-4 w-4 text-red-600 transition duration-150 ease-in-out" />
              <label for="dontForceEndConfirmAgain" class="ml-2 text-sm text-gray-700">下次直接返回，不再提示</label>
            </div>
            <div class="flex justify-end space-x-4">
              <button v-if="!showDirectBTHButton" @click="closeForceEndConfirm(false)" 
                class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-100 transition-colors duration-200">
                取消
              </button>
              <button v-if="showDirectBTHButton" @click="directBackToHome" 
                class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-100 transition-colors duration-200">
                直接返回
              </button>
              <button @click="endSession(currentChat.activeGameType)" 
                class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 transition-colors duration-200">
                结束对话
              </button>
            </div>
          </div>
        </div>
      </transition>
  `
}