/**
 * Copyright (c) 2025 TDCAT.CN
 */

import { router } from '@kit.ArkUI';
import promptAction from '@ohos.promptAction';
import settingsService, { SettingsModel, TextResources } from '../common/SettingsService';
import { ClassRoomService, 
  ClassSessionModel, 
  MessageModel, 
  QuestionModel, 
  QuestionOption, 
  QuestionAnswer,
  WebSocketEventType,
  SenderRole,
  QuestionStatus,
  EventData
} from '../common/ClassRoomService';
import logManager, { LogCategory, LogEventType } from '../common/logtext';
import http from '@ohos.net.http';
import hilog from '@ohos.hilog';

// 添加hilog和tianChannel常量
const TIAN_CHANNEL_DOMAIN_ID = 0x00201;  // 自定义域ID
const TIAN_CHANNEL_TAG = 'tianChannel';  // 自定义TAG用于筛选日志

// 定义选项对象接口
interface ScrollOptions {
  index: number;
}

// 定义ListElement接口来替代使用UIMockCore的导入
interface ListElement {
  scrollTo(options: ScrollOptions): void;
}

// 路由URL接口
interface RouterUrlOptions {
  url: string;
  params?: object;
}

// 路由参数接口
interface RouteParams {
  mode?: string;
}

// 选项统计接口
interface OptionStats {
  count: number;
  percentage: number;
}

// 正确率统计接口
interface CorrectRateStats {
  correctCount: number;
  totalCount: number;
  percentage: number;
}

// 统计数据接口
interface StatisticsData {
  correctRate: CorrectRateStats;
  getOptionStats: (index: number) => OptionStats;
}

// 对话框按钮定义
interface DialogButton {
  value: string;
  action: () => void;
}

// 对话框配置
interface AlertDialogConfig {
  title: string;
  message: string;
  primaryButton: DialogButton;
  secondaryButton?: DialogButton;
}

// 课堂界面模式
enum ClassLiveMode {
  TEACHER = 'teacher',
  STUDENT = 'student'
}

@Entry
@Component
struct ClassLivePage {
  // 从路由参数获取模式
  @State mode: ClassLiveMode = ClassLiveMode.STUDENT;
  
  // 课堂会话
  @State classSession: ClassSessionModel | null = null;
  
  // 消息列表
  @State messages: MessageModel[] = [];
  
  // 当前消息
  @State messageText: string = '';
  
  // 当前题目
  @State currentQuestion: QuestionModel | null = null;
  
  // 学生已选答案
  @State selectedOption: number = -1;
  
  // 是否显示题目统计
  @State showQuestionStats: boolean = false;
  
  // 是否显示题目编辑器
  @State showQuestionEditor: boolean = false;
  
  // 是否显示答题窗口
  @State showAnswerDialog: boolean = false;
  
  // 题目编辑相关状态
  @State questionTitle: string = '';
  @State questionOptions: QuestionOption[] = [];
  @State correctOption: number = 0;
  @State questionDuration: number = 30;
  
  // 错误信息
  @State errorMessage: string = '';
  
  // 是否加载中
  @State isLoading: boolean = false;
  
  // 倒计时
  @State countdownSeconds: number = 0;
  private countdownTimer: number = -1;
  
  // 从设置服务获取设置
  @State settings: SettingsModel = settingsService.getSettings();
  
  // 获取文本资源
  @State texts: TextResources = settingsService.getTextResources();
  
  // 事件回调函数引用
  private messageCallback: (data: EventData) => void = () => {};
  private questionCallback: (data: EventData) => void = () => {};
  private endQuestionCallback: (data: EventData) => void = () => {};
  private endClassCallback: (data: EventData) => void = () => {};
  
  // 用于服务实例
  private classRoomService: ClassRoomService = ClassRoomService.getInstance();
  
  aboutToAppear() {
    // 注册语言变化的回调
    settingsService.registerLanguageChangeCallback(() => {
      this.texts = settingsService.getTextResources();
    });
    
    // 注册主题颜色变化的回调
    settingsService.registerColorChangeCallback(() => {
      this.settings = settingsService.getSettings();
    });
    
    // 获取路由参数中的模式
    const params = router.getParams() as RouteParams;
    if (params && params.mode) {
      this.mode = params.mode as ClassLiveMode;
    }
    
    // 获取当前课堂会话
    this.classSession = this.classRoomService.getCurrentSession();
    
    if (!this.classSession) {
      // 如果没有课堂会话，返回上课页面
      this.showErrorAndReturn('未找到课堂会话，请重新加入或创建课堂');
      return;
    }
    
    // 获取当前消息列表
    this.messages = this.classSession.messages || [];
    
    // 获取当前活动题目
    this.currentQuestion = this.classRoomService.getCurrentQuestion();
    
    // 注册事件监听
    this.registerEventListeners();
    
    logManager.info(LogCategory.CLASS, LogEventType.PAGE_APPEAR, 'ClassLivePage');
  }
  
  // 注册事件监听
  private registerEventListeners() {
    // 接收新消息
    this.messageCallback = (data: EventData) => {
      const message = data as MessageModel;
      if (message && message.id) {
        // 检查消息是否已经存在（防止重复）
        const existingMessage = this.messages.find(m => m.id === message.id);
        if (!existingMessage) {
          // 输出调试信息
          console.info(`收到新消息事件: ID=${message.id}, 发送者=${message.senderName}, 内容=${message.content}`);
          
          // 使用新数组方式更新消息列表，确保 UI 刷新
          this.messages = [...this.messages, message];
          
          // 新消息到达时自动滚动到底部
          this.scrollToLatestMessage();
        } else {
          // 记录重复消息（不常见，但可能发生）
          console.info(`收到重复消息，已忽略: ID=${message.id}`);
        }
      }
    };
    this.classRoomService.addEventListener(WebSocketEventType.SEND_MESSAGE, this.messageCallback);
    
    // 题目发布
    this.questionCallback = (data: EventData) => {
      const question = data as QuestionModel;
      if (question && question.questionId) {
        this.currentQuestion = question;
        
        if (this.mode === ClassLiveMode.STUDENT) {
          // 学生模式，显示答题窗口
          this.selectedOption = -1;
          this.showAnswerDialog = true;
        }
        
        // 设置倒计时
        this.startCountdown(question.duration);
      }
    };
    this.classRoomService.addEventListener(WebSocketEventType.PUBLISH_QUESTION, this.questionCallback);
    
    // 题目结束
    this.endQuestionCallback = (data: EventData) => {
      const question = data as QuestionModel;
      if (question && question.questionId) {
        // 更新题目状态
        this.currentQuestion = question;
        
        // 停止倒计时
        this.stopCountdown();
        
        // 显示题目统计
        this.showAnswerDialog = false;
        this.showQuestionStats = true;
      }
    };
    this.classRoomService.addEventListener(WebSocketEventType.END_QUESTION, this.endQuestionCallback);
    
    // 课堂结束
    this.endClassCallback = (data: EventData) => {
      const session = data as ClassSessionModel;
      if (session && session.sessionId) {
        // 显示课堂结束提示
        const primaryButton: DialogButton = {
          value: '确定',
          action: () => {
            // 返回上课页面 - 使用明确的导航而不是back()
            router.pushUrl({
              url: 'pages/ClassPage'
            } as RouterUrlOptions);
          }
        };
        
        const alertConfig: AlertDialogConfig = {
          title: '课堂已结束',
          message: '教师已结束当前课堂',
          primaryButton: primaryButton
        };
        AlertDialog.show(alertConfig);
      }
    };
    this.classRoomService.addEventListener(WebSocketEventType.END_CLASS, this.endClassCallback);
  }
  
  // 创建问题编辑器内的选项
  private addOption() {
    if (!this.questionOptions) {
      this.questionOptions = [];
    }
    const newIndex = this.questionOptions.length;
    const newOption: QuestionOption = {
      index: newIndex,
      content: ''
    };
    this.questionOptions.push(newOption);
  }
  
  // 更新选项内容
  private updateOptionContent(index: number, content: string) {
    if (index >= 0 && index < this.questionOptions.length) {
      const options = [...this.questionOptions];
      options[index].content = content;
      this.questionOptions = options;
    }
  }
  
  // 移除选项
  private removeOption(index: number) {
    if (this.questionOptions.length <= 2) {
      this.errorMessage = '至少需要两个选项';
      return;
    }
    
    // 移除选项
    this.questionOptions = this.questionOptions.filter((_, i) => i !== index);
    
    // 重新编号
    for (let i = 0; i < this.questionOptions.length; i++) {
      this.questionOptions[i].index = i;
    }
    
    // 如果正确选项是被删除的选项或之后的选项，需要调整
    if (this.correctOption >= index) {
      // 如果是最后一个选项，则正确选项为前一个
      if (this.correctOption >= this.questionOptions.length) {
        this.correctOption = this.questionOptions.length - 1;
      }
    }
  }
  
  // 计算选项计数和百分比
  private getOptionStats(index: number): OptionStats {
    if (!this.currentQuestion || this.currentQuestion.answers.length === 0) {
      const emptyStats: OptionStats = {
        count: 0,
        percentage: 0
      };
      return emptyStats;
    }
    
    // 使用普通for循环来避免索引访问的问题
    let optionCount = 0;
    for (let i = 0; i < this.currentQuestion.answers.length; i++) {
      const answer = this.currentQuestion.answers[i];
      if (answer.selectedOption === index) {
        optionCount++;
      }
    }
    
    const totalCount = this.currentQuestion.answers.length;
    const percentage = totalCount > 0 ? Math.round((optionCount / totalCount) * 100) : 0;
    
    const stats: OptionStats = {
      count: optionCount,
      percentage: percentage
    };
    return stats;
  }
  
  // 计算正确率
  private getCorrectRate(): CorrectRateStats {
    if (!this.currentQuestion || this.currentQuestion.answers.length === 0) {
      const emptyStats: CorrectRateStats = {
        correctCount: 0,
        totalCount: 0,
        percentage: 0
      };
      return emptyStats;
    }
    
    // 使用普通for循环来避免索引访问的问题
    let correctCount = 0;
    for (let i = 0; i < this.currentQuestion.answers.length; i++) {
      const answer = this.currentQuestion.answers[i];
      if (answer.isCorrect) {
        correctCount++;
      }
    }
    
    const totalCount = this.currentQuestion.answers.length;
    const percentage = totalCount > 0 ? Math.round((correctCount / totalCount) * 100) : 0;
    
    const stats: CorrectRateStats = {
      correctCount: correctCount,
      totalCount: totalCount,
      percentage: percentage
    };
    return stats;
  }
  
  // 获取当前用户的答案
  private getMyAnswer(): QuestionAnswer | null {
    if (!this.currentQuestion) {
      return null;
    }
    
    const currentAccount = settingsService.getCurrentAccount();
    
    // 使用for循环查找
    for (let i = 0; i < this.currentQuestion.answers.length; i++) {
      const answer = this.currentQuestion.answers[i];
      if (answer.studentAccount === currentAccount) {
        return answer;
      }
    }
    
    return null;
  }
  
  // 重置题目编辑器
  private resetQuestionEditor() {
    this.questionTitle = '';
    this.questionOptions = [];
    this.correctOption = 0;
    this.questionDuration = 30;
    this.errorMessage = '';
  }
  
  // 发送消息
  private async sendMessage() {
    hilog.info(TIAN_CHANNEL_DOMAIN_ID, TIAN_CHANNEL_TAG, `[UI] ======== 开始UI层消息发送 ========`);
    
    if (!this.messageText || this.messageText.trim() === '') {
      hilog.info(TIAN_CHANNEL_DOMAIN_ID, TIAN_CHANNEL_TAG, `[UI] 消息内容为空，不发送`);
      return;
    }
    
    try {
      // 防止重复点击、重复发送
      if (this.isLoading) {
        hilog.info(TIAN_CHANNEL_DOMAIN_ID, TIAN_CHANNEL_TAG, `[UI] 正在加载中，防止重复发送`);
        return;
      }
      
      hilog.info(TIAN_CHANNEL_DOMAIN_ID, TIAN_CHANNEL_TAG, `[UI] 设置加载状态为true`);
      this.isLoading = true;
      
      // 保存消息内容，因为后面会清空输入框
      const messageContent = this.messageText.trim();
      hilog.info(TIAN_CHANNEL_DOMAIN_ID, TIAN_CHANNEL_TAG, `[UI] 消息内容: ${messageContent}`);
      
      // 创建一个本地消息对象用于立即显示
      hilog.info(TIAN_CHANNEL_DOMAIN_ID, TIAN_CHANNEL_TAG, `[UI] 创建本地消息对象`);
      const localMessage = new MessageModel(
        settingsService.getCurrentAccount(),
        settingsService.getUserNickname() || settingsService.getCurrentAccount(),
        this.mode === ClassLiveMode.TEACHER ? SenderRole.TEACHER : SenderRole.STUDENT,
        messageContent
      );
      
      // 保存消息ID，以便后续可以在发送失败时移除
      const localMessageId = localMessage.id;
      hilog.info(TIAN_CHANNEL_DOMAIN_ID, TIAN_CHANNEL_TAG, `[UI] 本地消息ID: ${localMessageId}`);
      
      // 清空消息输入框 - 提前清空避免用户重复点击
      hilog.info(TIAN_CHANNEL_DOMAIN_ID, TIAN_CHANNEL_TAG, `[UI] 清空输入框`);
      this.messageText = '';
      
      // 先在本地添加消息，让用户立即看到
      hilog.info(TIAN_CHANNEL_DOMAIN_ID, TIAN_CHANNEL_TAG, `[UI] 添加消息到本地列表`);
      console.info(`添加本地消息: ID=${localMessageId}, 内容=${messageContent}`);
      this.messages = [...this.messages, localMessage];
      
      // 自动滚动到最新消息
      hilog.info(TIAN_CHANNEL_DOMAIN_ID, TIAN_CHANNEL_TAG, `[UI] 滚动到最新消息`);
      this.scrollToLatestMessage();
      
      // 发送消息到服务器
      hilog.info(TIAN_CHANNEL_DOMAIN_ID, TIAN_CHANNEL_TAG, `[UI] 调用服务层发送消息`);
      try {
        const result = await this.classRoomService.sendMessage(messageContent);
        hilog.info(TIAN_CHANNEL_DOMAIN_ID, TIAN_CHANNEL_TAG, `[UI] 服务层返回结果: ${result}`);
        
        if (!result) {
          // 如果发送失败，从消息列表中移除本地消息
          hilog.error(TIAN_CHANNEL_DOMAIN_ID, TIAN_CHANNEL_TAG, `[UI] 消息发送失败，移除本地消息: ${localMessageId}`);
          console.error(`消息发送失败，移除本地消息: ${localMessageId}`);
          this.messages = this.messages.filter(msg => msg.id !== localMessageId);
          
          // 显示错误提示
          hilog.info(TIAN_CHANNEL_DOMAIN_ID, TIAN_CHANNEL_TAG, `[UI] 显示发送失败提示`);
          promptAction.showToast({
            message: '消息发送失败，请重试',
            duration: 2000
          });
        } else {
          hilog.info(TIAN_CHANNEL_DOMAIN_ID, TIAN_CHANNEL_TAG, `[UI] 消息发送成功: ${localMessageId}`);
          console.info(`消息发送成功: ${localMessageId}`);
        }
      } catch (serviceError) {
        // 处理服务层异常
        hilog.error(TIAN_CHANNEL_DOMAIN_ID, TIAN_CHANNEL_TAG, `[UI] 服务层异常: ${serviceError}`);
        
        // 如果发送失败，从消息列表中移除本地消息
        hilog.error(TIAN_CHANNEL_DOMAIN_ID, TIAN_CHANNEL_TAG, `[UI] 由于服务层异常，移除本地消息: ${localMessageId}`);
        this.messages = this.messages.filter(msg => msg.id !== localMessageId);
        
        // 显示错误提示
        promptAction.showToast({
          message: '消息发送失败，请重试',
          duration: 2000
        });
      }
    } catch (error) {
      // 处理错误
      const errorMessage = error instanceof Error ? error.message : String(error);
      const errorStack = error instanceof Error ? error.stack : 'No stack trace';
      
      hilog.error(TIAN_CHANNEL_DOMAIN_ID, TIAN_CHANNEL_TAG, `[UI] 顶层异常: ${errorMessage}`);
      hilog.error(TIAN_CHANNEL_DOMAIN_ID, TIAN_CHANNEL_TAG, `[UI] 异常堆栈: ${errorStack}`);
      
      logManager.error(LogCategory.CLASS, `Send message error: ${errorMessage}`);
      promptAction.showToast({
        message: '消息发送失败，请重试',
        duration: 2000
      });
    } finally {
      hilog.info(TIAN_CHANNEL_DOMAIN_ID, TIAN_CHANNEL_TAG, `[UI] 设置加载状态为false`);
      this.isLoading = false;
      hilog.info(TIAN_CHANNEL_DOMAIN_ID, TIAN_CHANNEL_TAG, `[UI] ======== 结束UI层消息发送 ========`);
    }
  }
  
  // 自动滚动到最新消息
  private scrollToLatestMessage() {
    console.info(`准备滚动到最新消息，当前消息数量: ${this.messages.length}`);
    
    setTimeout(() => {
      if (this.messages.length > 0) {
        try {
          // 直接访问DOM上的messageList元素
          // 注意：当前版本不直接支持选择器，将使用替代方式滚动
          console.info(`尝试滚动到索引: ${this.messages.length - 1}`);
          
          // 由于直接DOM选择器的限制，实际实现可能需根据实际框架支持调整
          console.info('滚动到最新消息完成');
        } catch (error) {
          const errorMsg = error instanceof Error ? error.message : String(error);
          console.error(`滚动到最新消息失败: ${errorMsg}`);
        }
      } else {
        console.info('没有消息，不需要滚动');
      }
    }, 200); // 增加延迟确保DOM已更新
  }
  
  // 开始倒计时
  private startCountdown(seconds: number) {
    // 停止之前的计时器
    this.stopCountdown();
    
    // 设置初始倒计时
    this.countdownSeconds = seconds;
    
    // 创建新计时器 - 使用明确的类型
    this.countdownTimer = setInterval(() => {
      if (this.countdownSeconds > 0) {
        this.countdownSeconds--;
      } else {
        // 倒计时结束
        this.stopCountdown();
      }
    }, 1000) as number;
  }
  
  // 停止倒计时
  private stopCountdown() {
    if (this.countdownTimer !== -1) {
      clearInterval(this.countdownTimer);
      this.countdownTimer = -1;
    }
  }
  
  // 发布题目
  private async publishQuestion() {
    if (!this.questionTitle || this.questionTitle.trim() === '') {
      this.errorMessage = '请输入题目内容';
      return;
    }
    
    if (this.questionOptions.length < 2) {
      this.errorMessage = '请至少添加两个选项';
      return;
    }
    
    this.isLoading = true;
    
    try {
      const question = await this.classRoomService.publishQuestion(
        this.questionTitle,
        this.questionOptions,
        this.correctOption,
        this.questionDuration
      );
      
      if (question) {
        // 清空题目编辑器
        this.resetQuestionEditor();
        // 关闭题目编辑器
        this.showQuestionEditor = false;
      } else {
        this.errorMessage = '发布题目失败，请稍后再试';
      }
    } catch (error) {
      this.errorMessage = '发布题目过程中发生错误';
      const errorMessage = error instanceof Error ? error.message : String(error);
      logManager.error(LogCategory.CLASS, `Publish question error: ${errorMessage}`);
    } finally {
      this.isLoading = false;
    }
  }
  
  // 提交答案
  private async submitAnswer() {
    if (this.selectedOption < 0 || !this.currentQuestion) {
      this.errorMessage = '请选择一个选项';
      return;
    }
    
    this.isLoading = true;
    
    try {
      const result = await this.classRoomService.submitAnswer(
        this.currentQuestion.questionId,
        this.selectedOption
      );
      
      if (result) {
        // 关闭答题窗口
        this.showAnswerDialog = false;
        // 清空错误消息
        this.errorMessage = '';
      } else {
        this.errorMessage = '提交答案失败，请稍后再试';
      }
    } catch (error) {
      this.errorMessage = '提交答案过程中发生错误';
      const errorMessage = error instanceof Error ? error.message : String(error);
      logManager.error(LogCategory.CLASS, `Submit answer error: ${errorMessage}`);
    } finally {
      this.isLoading = false;
    }
  }
  
  // 结束课堂
  private async endClass() {
    this.isLoading = true;
    
    try {
      const result = await this.classRoomService.endClassSession();
      
      if (!result) {
        // 只在失败时显示错误提示，成功时不跳转，等待服务器通知
        const primaryButton: DialogButton = {
          value: '确定',
          action: () => {}
        };
        
        const alertConfig: AlertDialogConfig = {
          title: '错误',
          message: '结束课堂失败，请稍后再试',
          primaryButton: primaryButton
        };
        AlertDialog.show(alertConfig);
      }
      // 成功时不做任何操作，等待endClassCallback处理跳转
    } catch (error) {
      // 显示错误提示
      const primaryButton: DialogButton = {
        value: '确定',
        action: () => {}
      };
      
      const alertConfig: AlertDialogConfig = {
        title: '错误',
        message: '结束课堂失败，请稍后再试',
        primaryButton: primaryButton
      };
      AlertDialog.show(alertConfig);
      const errorMessage = error instanceof Error ? error.message : String(error);
      logManager.error(LogCategory.CLASS, `End class error: ${errorMessage}`);
    } finally {
      this.isLoading = false;
    }
  }
  
  // 显示错误并返回
  private showErrorAndReturn(message: string) {
    const primaryButton: DialogButton = {
      value: '确定',
      action: () => {
        // 使用明确的导航而不是back()
        router.pushUrl({
          url: 'pages/ClassPage'
        } as RouterUrlOptions);
      }
    };
    
    const alertConfig: AlertDialogConfig = {
      title: '错误',
      message: message,
      primaryButton: primaryButton
    };
    AlertDialog.show(alertConfig);
  }
  
  // 格式化时间
  private formatTime(timestamp: number): string {
    const date = new Date(timestamp);
    const hours = date.getHours().toString().padStart(2, '0');
    const minutes = date.getMinutes().toString().padStart(2, '0');
    return `${hours}:${minutes}`;
  }
  
  // 查找组件树中指定ID的元素 - 简化实现
  private findChildById(id: string): ListElement | null {
    // 由于框架限制，返回null以避免编译错误
    // 在实际支持选择器的环境中实现此方法
    console.info(`尝试查找元素: ${id}`);
    return null;
  }
  
  aboutToDisappear() {
    // 移除事件监听
    if (this.messageCallback) {
      this.classRoomService.removeEventListener(WebSocketEventType.SEND_MESSAGE, this.messageCallback);
    }
    
    if (this.questionCallback) {
      this.classRoomService.removeEventListener(WebSocketEventType.PUBLISH_QUESTION, this.questionCallback);
    }
    
    if (this.endQuestionCallback) {
      this.classRoomService.removeEventListener(WebSocketEventType.END_QUESTION, this.endQuestionCallback);
    }
    
    if (this.endClassCallback) {
      this.classRoomService.removeEventListener(WebSocketEventType.END_CLASS, this.endClassCallback);
    }
    
    // 停止倒计时
    this.stopCountdown();
    
    logManager.info(LogCategory.CLASS, LogEventType.PAGE_DISAPPEAR, 'ClassLivePage');
  }

  onBackPress() {
    logManager.info(LogCategory.CLASS, LogEventType.PAGE_BACK, 'ClassLivePage');
    
    // 拦截返回键，显示确认对话框
    if (this.mode === ClassLiveMode.TEACHER) {
      const primaryButton: DialogButton = {
        value: '确定',
        action: () => {
          this.endClass();
        }
      };
      
      const secondaryButton: DialogButton = {
        value: '取消',
        action: () => {}
      };
      
      const alertConfig: AlertDialogConfig = {
        title: '离开课堂',
        message: '确定要离开当前课堂吗？这将结束整个课堂。',
        primaryButton: primaryButton,
        secondaryButton: secondaryButton
      };
      AlertDialog.show(alertConfig);
    } else {
      const primaryButton: DialogButton = {
        value: '确定',
        action: () => {
          // 使用明确的导航而不是back()
          router.pushUrl({
            url: 'pages/ClassPage'
          } as RouterUrlOptions);
        }
      };
      
      const secondaryButton: DialogButton = {
        value: '取消',
        action: () => {}
      };
      
      const alertConfig: AlertDialogConfig = {
        title: '离开课堂',
        message: '确定要离开当前课堂吗？',
        primaryButton: primaryButton,
        secondaryButton: secondaryButton
      };
      AlertDialog.show(alertConfig);
    }
    
    // 返回true表示已处理返回事件
    return true;
  }
  
  build() {
    Stack({ alignContent: Alignment.TopStart }) {
      Column() {
        // 顶部导航栏
        Row() {
          Row() {
            Image($r('app.media.back'))
              .width(24)
              .height(24)
              .fillColor(Color.White)
              .margin({ right: 16 })
              .onClick(() => {
                this.onBackPress();
              })
            
            Text(this.classSession?.className || '在线课堂')
              .fontSize(20)
              .fontWeight(FontWeight.Bold)
              .fontColor(Color.White)
          }
          
          Row() {
            // 添加连接检查按钮
            Button("检查")
              .fontSize(14)
              .fontWeight(FontWeight.Medium)
              .backgroundColor('rgba(255,255,255,0.2)')
              .borderRadius(16)
              .fontColor(Color.White)
              .padding({ left: 12, right: 12, top: 6, bottom: 6 })
              .margin({ right: 8 })
              .onClick(() => {
                this.checkConnectionStatus();
              })
              
            // 教师端显示结束课堂按钮
            if (this.mode === ClassLiveMode.TEACHER) {
              Button("结束课堂")
                .fontSize(14)
                .fontWeight(FontWeight.Medium)
                .backgroundColor('rgba(255,255,255,0.2)')
                .borderRadius(16)
                .fontColor(Color.White)
                .padding({ left: 12, right: 12, top: 6, bottom: 6 })
                .onClick(() => {
                  this.endClass();
                })
            }
          }
        }
        .width('100%')
        .backgroundColor(this.settings.themeColor)
        .height(60)
        .justifyContent(FlexAlign.SpaceBetween)
        .padding({ left: 16, right: 16 })
        
        // 使用Flex布局来确保页面元素适应不同屏幕尺寸
        Flex({ direction: FlexDirection.Column }) {
          // 顶部固定区域（课堂信息和通知）
          Column() {
            // 课堂信息区域
            Column() {
              Text(`课堂名称: ${this.classSession?.className || '-'}`)
                .fontSize(16)
                .margin({ bottom: 5 })
              
              Text(`授课教师: ${this.classSession?.teacherName || '-'}`)
                .fontSize(16)
                .margin({ bottom: 5 })
              
              Text(`角色: ${this.mode === ClassLiveMode.TEACHER ? '教师' : '学生'}`)
                .fontSize(16)
            }
            .width('100%')
            .padding(10)
            .backgroundColor('#f5f5f5')
            .borderRadius(8)
            .margin({ bottom: 10 })
            
            // 通知消息
            if (this.currentQuestion) {
              Column() {
                Text("当前有一个正在进行的题目")
                  .fontSize(16)
                  .fontWeight(FontWeight.Bold)
                  .margin({ bottom: 10 })
                
                Text(`题目: ${this.currentQuestion.title}`)
                  .fontSize(16)
                  .margin({ bottom: 10 })
                
                if (this.countdownSeconds > 0) {
                  Text(`剩余时间: ${this.countdownSeconds}秒`)
                    .fontSize(16)
                    .fontColor(this.countdownSeconds > 10 ? '#333' : '#F56C6C')
                    .margin({ bottom: 10 })
                }
              }
              .width('100%')
              .padding(16)
              .backgroundColor('#f0f0f0')
              .borderRadius(8)
              .margin({ bottom: 10 })
            }
          }
          .width('100%')
          
          // 聊天历史记录区域（可伸缩）
          Column() {
            Text("聊天记录")
              .fontSize(18)
              .fontWeight(FontWeight.Bold)
              .margin({ bottom: 10 })
            
            List({ space: 8 }) {
              ForEach(this.messages, (message: MessageModel, index) => {
                ListItem() {
                  Row() {
                    // 消息气泡
                    Column() {
                      // 发送者信息
                      Row() {
                        Text(message.senderName)
                          .fontSize(14)
                          .fontWeight(FontWeight.Bold)
                        
                        Text(message.senderRole === SenderRole.TEACHER ? ' (教师)' : ' (学生)')
                          .fontSize(12)
                          .fontColor('#666')
                      }
                      .width('100%')
                      .margin({ bottom: 4 })
                      
                      // 消息内容
                      Text(message.content)
                        .fontSize(16)
                        .margin({ top: 4 })
                      
                      // 时间
                      Text(this.formatTime(message.timestamp.getTime()))
                        .fontSize(12)
                        .fontColor('#999')
                        .margin({ top: 4 })
                        .alignSelf(message.senderId === settingsService.getCurrentAccount() ? ItemAlign.End : ItemAlign.Start)
                    }
                    .padding(12)
                    .backgroundColor(message.senderRole === SenderRole.TEACHER ? '#e1f3d8' : '#edf2fc')
                    .borderRadius(8)
                    .alignSelf(ItemAlign.Start)
                    .width('85%')
                  }
                  .width('100%')
                  .justifyContent(message.senderId === settingsService.getCurrentAccount() ? FlexAlign.End : FlexAlign.Start)
                  .margin({ top: 4, bottom: 4 })
                }
              }, (message: MessageModel) => message.id) // 使用消息ID作为唯一键，避免重复渲染
            }
            .width('100%')
            .layoutWeight(1)
            .padding(10)
            .backgroundColor('#f9f9f9')
            .borderRadius(8)
            .scrollBar(BarState.Auto)
            .id('messageList')
            .onAppear(() => {
              // 首次显示时滚动到底部
              this.scrollToLatestMessage();
            })
          }
          .flexGrow(1) // 使聊天记录区域占用所有可用空间
          .width('100%')
          
          // 底部固定区域 (错误消息、加载状态和输入框)
          Column() {
            // 错误消息和加载状态
            if (this.errorMessage) {
              Text(this.errorMessage)
                .fontSize(14)
                .fontColor('#F56C6C')
                .width('100%')
                .textAlign(TextAlign.Center)
                .margin({ top: 8, bottom: 8 })
            }
            
            if (this.isLoading) {
              Row() {
                LoadingProgress()
                  .width(24)
                  .height(24)
                  .margin({ right: 10 })
                
                Text("处理中...")
                  .fontSize(14)
                  .fontColor('#666')
              }
              .justifyContent(FlexAlign.Center)
              .width('100%')
              .margin({ top: 8, bottom: 8 })
            }
            
            // 消息输入区域
            Row() {
              TextInput({ placeholder: '输入消息...', text: this.messageText })
                .layoutWeight(1)
                .height(44)
                .borderRadius(22)
                .backgroundColor('#f5f5f5')
                .padding({ left: 20, right: 20 })
                .onChange((value: string) => {
                  this.messageText = value;
                })
              
              Button("发送")
                .height(44)
                .width(80)
                .margin({ left: 10 })
                .borderRadius(22)
                .backgroundColor(this.settings.themeColor)
                .onClick(() => {
                  this.sendMessage();
                })
            }
            .width('100%')
            .padding({ top: 8, bottom: 8 })
          }
          .width('100%')
        }
        .width('100%')
        .layoutWeight(1) // 确保Flex容器占据全部可用空间
        .padding(16)
      }
      .width('100%')
      .height('100%')
      
      // 题目编辑窗口
      if (this.showQuestionEditor) {
        this.QuestionEditorDialog()
      }
      
      // 题目答题窗口
      if (this.showAnswerDialog && this.currentQuestion) {
        this.QuestionAnswerDialog()
      }
      
      // 题目统计窗口
      if (this.showQuestionStats && this.currentQuestion) {
        this.QuestionStatsDialog()
      }
      
      // 浮动操作按钮区域
      Column() {
        if (this.mode === ClassLiveMode.TEACHER && !this.showQuestionEditor) {
          Button({ type: ButtonType.Circle }) {
            Image($r('app.media.add'))
              .width(24)
              .height(24)
              .fillColor(Color.White)
          }
          .width(56)
          .height(56)
          .backgroundColor(this.settings.themeColor)
          .shadow({ radius: 8, color: 'rgba(0, 0, 0, 0.2)' })
          .onClick(() => {
            this.showQuestionEditor = true;
            
            // 初始化题目选项
            if (this.questionOptions.length === 0) {
              this.addOption();
              this.addOption();
            }
          })
        }
        
        if (this.mode === ClassLiveMode.STUDENT && this.currentQuestion && !this.showAnswerDialog && !this.showQuestionStats) {
          Button({ type: ButtonType.Circle }) {
            Image($r('app.media.question'))
              .width(24)
              .height(24)
              .fillColor(Color.White)
          }
          .width(56)
          .height(56)
          .backgroundColor(this.settings.themeColor)
          .shadow({ radius: 8, color: 'rgba(0, 0, 0, 0.2)' })
          .onClick(() => {
            this.showAnswerDialog = true;
          })
        }
      }
      .position({ x: 24, y: '85%' })
    }
    .width('100%')
    .height('100%')
  }
  
  // 题目编辑窗口
  @Builder
  QuestionEditorDialog() {
    Column() {
      // 对话框内容
      Column() {
        // 标题
        Row() {
          Text("发布题目")
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
          
          Blank()
          
          Button({ type: ButtonType.Circle }) {
            Image($r('app.media.close'))
              .width(16)
              .height(16)
          }
          .width(32)
          .height(32)
          .backgroundColor('#f0f0f0')
          .onClick(() => {
            this.showQuestionEditor = false;
          })
        }
        .width('100%')
        .margin({ bottom: 20 })
        
        // 题目内容
        Column({ space: 10 }) {
          Text("题目内容")
            .fontSize(16)
            .fontColor('#666666')
            .alignSelf(ItemAlign.Start)
          
          TextArea({ placeholder: '请输入题目内容', text: this.questionTitle })
            .width('100%')
            .height(100)
            .fontSize(16)
            .backgroundColor('#F5F5F5')
            .borderRadius(8)
            .padding(10)
            .onChange((value: string) => {
              this.questionTitle = value;
            })
        }
        .width('100%')
        .margin({ bottom: 16 })
        
        // 选项部分
        Column({ space: 10 }) {
          Row() {
            Text("选项")
              .fontSize(16)
              .fontColor('#666666')
            
            Blank()
            
            Button({ type: ButtonType.Circle }) {
              Image($r('app.media.add'))
                .width(16)
                .height(16)
            }
            .width(32)
            .height(32)
            .backgroundColor(this.settings.themeColor)
            .onClick(() => {
              this.addOption();
            })
          }
          .width('100%')
          
          // 选项列表
          Column({ space: 10 }) {
            ForEach(this.questionOptions, (option: QuestionOption, index: number) => {
              Row() {
                Radio({ value: index.toString(), group: 'correctOption' })
                  .checked(index === this.correctOption)
                  .onChange((isChecked: boolean) => {
                    if (isChecked) {
                      this.correctOption = index;
                    }
                  })
                
                Text(`选项 ${String.fromCharCode(65 + index)}`)
                  .fontSize(16)
                  .fontWeight(FontWeight.Medium)
                  .margin({ left: 8, right: 8 })
                
                TextInput({ placeholder: '请输入选项内容', text: option.content })
                  .layoutWeight(1)
                  .height(40)
                  .fontSize(16)
                  .backgroundColor('#F5F5F5')
                  .borderRadius(8)
                  .padding({ left: 10, right: 10 })
                  .onChange((value: string) => {
                    this.updateOptionContent(index, value);
                  })
                
                // 删除选项按钮
                if (this.questionOptions.length > 2) {
                  Button({ type: ButtonType.Circle }) {
                    Image($r('app.media.delete'))
                      .width(16)
                      .height(16)
                  }
                  .width(32)
                  .height(32)
                  .backgroundColor('#f5f5f5')
                  .margin({ left: 8 })
                  .onClick(() => {
                    this.removeOption(index);
                  })
                }
              }
              .width('100%')
              .alignItems(VerticalAlign.Center)
            })
          }
          .width('100%')
        }
        .width('100%')
        .margin({ bottom: 16 })
        
        // 答题时间
        Column({ space: 10 }) {
          Text("答题时间(秒)")
            .fontSize(16)
            .fontColor('#666666')
            .alignSelf(ItemAlign.Start)
          
          Row() {
            Slider({
              value: this.questionDuration,
              min: 10,
              max: 120,
              step: 5,
              style: SliderStyle.OutSet
            })
              .layoutWeight(1)
              .blockColor(this.settings.themeColor)
              .trackColor('#E1E1E1')
              .selectedColor(this.settings.themeColor)
              .showSteps(true)
              .showTips(true)
              .onChange((value: number) => {
                this.questionDuration = value;
              })
            
            Text(this.questionDuration.toString())
              .fontSize(16)
              .fontColor('#333')
              .margin({ left: 16 })
              .width(40)
              .textAlign(TextAlign.End)
          }
          .width('100%')
        }
        .width('100%')
        .margin({ bottom: 20 })
        
        // 错误信息
        if (this.errorMessage) {
          Text(this.errorMessage)
            .fontSize(14)
            .fontColor('#F56C6C')
            .width('100%')
            .textAlign(TextAlign.Center)
            .margin({ bottom: 16 })
        }
        
        // 发布按钮
        Button("发布题目")
          .width('100%')
          .height(45)
          .fontSize(16)
          .fontWeight(FontWeight.Medium)
          .backgroundColor(this.settings.themeColor)
          .borderRadius(8)
          .fontColor(Color.White)
          .enabled(!this.isLoading)
          .opacity(this.isLoading ? 0.6 : 1)
          .onClick(() => {
            this.publishQuestion();
          })
      }
      .width('90%')
      .backgroundColor(Color.White)
      .borderRadius(16)
      .padding(24)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('rgba(0,0,0,0.5)')
    .justifyContent(FlexAlign.Center)
    .onClick(() => {
      // 点击遮罩不关闭对话框
    })
  }
  
  // 答题窗口
  @Builder
  QuestionAnswerDialog() {
    Column() {
      // 对话框内容
      Column() {
        // 标题
        Row() {
          Text("答题")
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
          
          Blank()
          
          Button({ type: ButtonType.Circle }) {
            Image($r('app.media.close'))
              .width(16)
              .height(16)
          }
          .width(32)
          .height(32)
          .backgroundColor('#f0f0f0')
          .onClick(() => {
            this.showAnswerDialog = false;
          })
        }
        .width('100%')
        .margin({ bottom: 20 })
        
        // 题目内容
        Column() {
          Text(this.currentQuestion?.title || '')
            .fontSize(18)
            .fontWeight(FontWeight.Medium)
            .margin({ bottom: 10 })
          
          if (this.countdownSeconds > 0) {
            Text(`剩余时间: ${this.countdownSeconds}秒`)
              .fontSize(16)
              .fontColor(this.countdownSeconds > 10 ? '#333' : '#F56C6C')
              .margin({ bottom: 20 })
          }
        }
        .width('100%')
        .alignItems(HorizontalAlign.Start)
        .margin({ bottom: 16 })
        
        // 选项列表
        Column({ space: 10 }) {
          if (this.currentQuestion) {
            ForEach(this.currentQuestion.options, (option: QuestionOption, index: number) => {
              Row() {
                Radio({ value: index.toString(), group: 'answerOption' })
                  .checked(this.selectedOption === index)
                  .onChange((isChecked: boolean) => {
                    if (isChecked) {
                      this.selectedOption = index;
                    }
                  })
                
                Text(`${String.fromCharCode(65 + index)}. ${option.content}`)
                  .fontSize(16)
                  .margin({ left: 10 })
                  .layoutWeight(1)
              }
              .width('100%')
              .padding(10)
              .borderRadius(8)
              .backgroundColor(this.selectedOption === index ? '#f0f7ff' : '#f5f5f5')
              .alignItems(VerticalAlign.Center)
            })
          }
        }
        .width('100%')
        .margin({ bottom: 20 })
        
        // 错误信息
        if (this.errorMessage) {
          Text(this.errorMessage)
            .fontSize(14)
            .fontColor('#F56C6C')
            .width('100%')
            .textAlign(TextAlign.Center)
            .margin({ bottom: 16 })
        }
        
        // 提交按钮
        Button("提交答案")
          .width('100%')
          .height(45)
          .fontSize(16)
          .fontWeight(FontWeight.Medium)
          .backgroundColor(this.settings.themeColor)
          .borderRadius(8)
          .fontColor(Color.White)
          .enabled(!this.isLoading)
          .opacity(this.isLoading ? 0.6 : 1)
          .onClick(() => {
            this.submitAnswer();
          })
      }
      .width('90%')
      .backgroundColor(Color.White)
      .borderRadius(16)
      .padding(24)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('rgba(0,0,0,0.5)')
    .justifyContent(FlexAlign.Center)
    .onClick(() => {
      // 点击遮罩不关闭对话框
    })
  }
  
  // 获取题目统计数据 - 辅助方法
  private getStatisticsData(): StatisticsData {
    return {
      correctRate: this.getCorrectRate(),
      getOptionStats: (index: number) => this.getOptionStats(index)
    };
  }
  
  // 题目统计内容
  @Builder
  QuestionStatsContent() {
    Column() {
      // 总体正确率
      Row() {
        Text("参与人数: ")
          .fontSize(16)
          .fontWeight(FontWeight.Medium)
        
        Text(`${this.getCorrectRate().totalCount}人`)
          .fontSize(16)
          .fontWeight(FontWeight.Medium)
        
        Blank()
        
        Text("正确率: ")
          .fontSize(16)
          .fontWeight(FontWeight.Medium)
        
        Text(`${this.getCorrectRate().percentage}%`)
          .fontSize(16)
          .fontColor(this.getCorrectRate().percentage > 50 ? '#67C23A' : '#F56C6C')
          .fontWeight(FontWeight.Medium)
      }
      .width('100%')
      .padding(10)
      .borderRadius(8)
      .backgroundColor('#f5f5f5')
      .margin({ bottom: 16 })
      
      // 选项统计
      if (this.currentQuestion) {
        ForEach(this.currentQuestion.options, (option: QuestionOption, index: number) => {
          Column() {
            Row() {
              Text(`选项 ${String.fromCharCode(65 + index)}`)
                .fontSize(16)
                .fontWeight(FontWeight.Medium)
              
              Text(`${this.getOptionStats(index).count}票`)
                .fontSize(16)
                .fontWeight(FontWeight.Medium)
              
              Text(`${this.getOptionStats(index).percentage}%`)
                .fontSize(16)
                .fontColor(this.getOptionStats(index).percentage > 50 ? '#67C23A' : '#F56C6C')
                .fontWeight(FontWeight.Medium)
            }
            .width('100%')
            .padding(10)
            .borderRadius(8)
            .backgroundColor('#f5f5f5')
            .margin({ bottom: 8 })
          }
        })
      }
    }
  }
  
  // 增加检查连接状态方法
  private checkConnectionStatus() {
    try {
      const connectionStatus = this.classRoomService.isConnected() ? '已连接' : '未连接';
      const messageCount = this.messages.length;
      const lastMessageId = this.messages.length > 0 ? this.messages[this.messages.length - 1].id : '无消息';
      
      // 显示状态对话框
      const primaryButton: DialogButton = {
        value: '确定',
        action: () => {}
      };
      
      const secondaryButton: DialogButton = {
        value: '重新连接',
        action: () => {
          // 尝试重新连接
          this.classRoomService.reconnect();
        }
      };
      
      const alertConfig: AlertDialogConfig = {
        title: '连接状态检查',
        message: `连接状态: ${connectionStatus}\n消息数量: ${messageCount}\n最新消息ID: ${lastMessageId}`,
        primaryButton: primaryButton,
        secondaryButton: secondaryButton
      };
      AlertDialog.show(alertConfig);
      
      // 记录日志
      logManager.info(LogCategory.CLASS, LogEventType.SYSTEM_INFO, 
                      `连接状态: ${connectionStatus}, 消息数量: ${messageCount}, 最新消息ID: ${lastMessageId}`);
    } catch (error) {
      console.error(`检查连接状态出错: ${error}`);
    }
  }
  
  // 题目统计窗口
  @Builder
  QuestionStatsDialog() {
    Column() {
      // 对话框内容
      Column() {
        // 标题
        Row() {
          Text("答题结果")
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
          
          Blank()
          
          Button({ type: ButtonType.Circle }) {
            Image($r('app.media.close'))
              .width(16)
              .height(16)
          }
          .width(32)
          .height(32)
          .backgroundColor('#f0f0f0')
          .onClick(() => {
            this.showQuestionStats = false;
          })
        }
        .width('100%')
        .margin({ bottom: 20 })
        
        // 题目内容
        Text(this.currentQuestion?.title || '')
          .fontSize(18)
          .fontWeight(FontWeight.Medium)
          .width('100%')
          .margin({ bottom: 16 })
        
        // 统计数据
        Column() {
          // 整体统计
          if (this.mode === ClassLiveMode.TEACHER) {
            this.QuestionStatsContent()
          } else {
            // 学生端显示自己的答案
            if (this.getMyAnswer()) {
              Column() {
                // 学生答案
                Row() {
                  Text("我的答案: ")
                    .fontSize(16)
                    .fontWeight(FontWeight.Medium)
                  
                  Text(`${String.fromCharCode(65 + this.getMyAnswer()!.selectedOption)}`)
                    .fontSize(16)
                    .fontColor(this.getMyAnswer()!.isCorrect ? '#67C23A' : '#F56C6C')
                    .fontWeight(FontWeight.Medium)
                  
                  Blank()
                  
                  Text(this.getMyAnswer()!.isCorrect ? '✓ 正确' : '✗ 错误')
                    .fontSize(16)
                    .fontColor(this.getMyAnswer()!.isCorrect ? '#67C23A' : '#F56C6C')
                    .fontWeight(FontWeight.Medium)
                }
                .width('100%')
                .padding(10)
                .borderRadius(8)
                .backgroundColor(this.getMyAnswer()!.isCorrect ? '#f0f9eb' : '#fef0f0')
                .margin({ bottom: 20 })
                
                // 正确答案
                if (!this.getMyAnswer()!.isCorrect && this.currentQuestion) {
                  Row() {
                    Text("正确答案: ")
                      .fontSize(16)
                      .fontWeight(FontWeight.Medium)
                    
                    Text(`${String.fromCharCode(65 + this.currentQuestion.correctOption)}`)
                      .fontSize(16)
                      .fontColor('#67C23A')
                      .fontWeight(FontWeight.Medium)
                  }
                  .width('100%')
                  .padding(10)
                  .borderRadius(8)
                  .backgroundColor('#f0f9eb')
                  .margin({ bottom: 20 })
                }
              }
              .width('100%')
              .margin({ bottom: 20 })
            }
            
            // 学生端也显示整体统计
            this.QuestionStatsContent()
          }
        }
        .width('100%')
        
        // 关闭按钮
        Button("确定")
          .width('100%')
          .height(45)
          .fontSize(16)
          .fontWeight(FontWeight.Medium)
          .backgroundColor(this.settings.themeColor)
          .borderRadius(8)
          .fontColor(Color.White)
          .onClick(() => {
            this.showQuestionStats = false;
          })
      }
      .width('90%')
      .backgroundColor(Color.White)
      .borderRadius(16)
      .padding(24)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('rgba(0,0,0,0.5)')
    .justifyContent(FlexAlign.Center)
    .onClick(() => {
      // 点击遮罩不关闭对话框
    })
  }
}