dating_touchme_app/lib/pages/message/chat_page.dart

import 'package:dating_touchme_app/extension/ex_widget.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:im_flutter_sdk/im_flutter_sdk.dart';

import '../../controller/message/chat_controller.dart';
import '../../controller/message/voice_player_manager.dart';
import '../../generated/assets.dart';
import '../../../widget/message/chat_input_bar.dart';
import '../../../widget/message/message_item.dart';

class ChatPage extends StatefulWidget {
  final String userId;

  const ChatPage({required this.userId, super.key});

  @override
  State<ChatPage> createState() => _ChatPageState();
}

class _ChatPageState extends State<ChatPage> {
  final ScrollController _scrollController = ScrollController();
  bool _isLoadingMore = false;
  late ChatController _controller;

  @override
  void initState() {
    super.initState();
    // 初始化 controller
    _controller = Get.put(ChatController(userId: widget.userId));

    // 监听滚动，当滚动到顶部时加载更多消息
    _scrollController.addListener(() {
      if (_scrollController.hasClients &&
          _scrollController.position.pixels >=
              _scrollController.position.maxScrollExtent - 100 &&
          !_isLoadingMore &&
          _controller.messages.isNotEmpty) {
        _loadMoreMessages();
      }
    });
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return GetBuilder<ChatController>(
      init: _controller,
      builder: (controller) {
        return WillPopScope(
          onWillPop: () async {
            // 退出页面时停止播放并销毁播放器
            await VoicePlayerManager.instance.stop();
            return true;
          },
          child: Scaffold(
            backgroundColor: Color(0xffF5F5F5),
            appBar: AppBar(
              title: Text(controller.userInfo.value?.nickName ?? ''),
              centerTitle: true,
              actions: [
                Container(
                  padding: EdgeInsets.only(right: 16.w),
                  child: Image.asset(Assets.imagesMore, width: 16.w),
                ).onTap(() {}),
              ],
              leading: IconButton(
                icon: Icon(Icons.arrow_back_ios),
                onPressed: () {
                  Get.back();
                },
              ),
            ),
            body: Column(
              children: [
                // 视频发送状态提示
                Obx(() {
                  if (controller.isSendingVideo.value) {
                    return Container(
                      width: double.infinity,
                      padding: EdgeInsets.symmetric(
                        horizontal: 16.w,
                        vertical: 12.h,
                      ),
                      decoration: BoxDecoration(
                        color: Colors.blue.withOpacity(0.1),
                        border: Border(
                          bottom: BorderSide(
                            color: Colors.blue.withOpacity(0.3),
                            width: 1,
                          ),
                        ),
                      ),
                      child: Row(
                        children: [
                          SizedBox(
                            width: 20.w,
                            height: 20.w,
                            child: CircularProgressIndicator(
                              strokeWidth: 2,
                              valueColor: AlwaysStoppedAnimation<Color>(
                                Colors.blue,
                              ),
                            ),
                          ),
                          SizedBox(width: 12.w),
                          Expanded(
                            child: Text(
                              controller.sendingStatus.value,
                              style: TextStyle(
                                fontSize: 14.sp,
                                color: Colors.blue[700],
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                          ),
                        ],
                      ),
                    );
                  }
                  return SizedBox.shrink();
                }),
                // 消息列表区域
                Expanded(
                  child: Container(
                    color: Color(0xffF5F5F5),
                    child: GestureDetector(
                      onTap: () {
                        // 点击消息区域收起键盘
                        FocusManager.instance.primaryFocus?.unfocus();
                      },
                      behavior: HitTestBehavior.opaque,
                      child: ListView.builder(
                        controller: _scrollController,
                        reverse: true,
                        padding: EdgeInsets.all(16.w),
                        itemCount: controller.messages.length,
                        // 🚀 性能优化：添加缓存范围，减少重建
                        cacheExtent: 500, // 缓存屏幕外500像素的内容
                        itemBuilder: (context, index) {
                          final message = controller.messages[index];
                          final isSentByMe =
                              message.direction == MessageDirection.SEND;

                          final previousMessage = index > 0
                              ? controller.messages[index - 1]
                              : null;

                          // 🚀 性能优化：为每个消息项设置唯一的 key
                          return MessageItem(
                            key: ValueKey(message.msgId),
                            message: message,
                            isSentByMe: isSentByMe,
                            previousMessage: previousMessage,
                          );
                        },
                      ),
                    ),
                  ),
                ),
                // 使用抽离的聊天输入栏组件
                ChatInputBar(
                  onSendMessage: (message) async {
                    await controller.sendMessage(message);
                  },
                  onImageSelected: (imagePaths) async {
                    // 为每个图片路径调用控制器的方法发送图片消息
                    for (var imagePath in imagePaths) {
                      await controller.sendImageMessage(imagePath);
                    }
                  },
                  onVoiceRecorded: (filePath, seconds) async {
                    // 处理语音录音完成，回传文件路径和秒数
                    await controller.sendVoiceMessage(filePath, seconds);
                  },
                  onVideoRecorded: (filePath, duration) async {
                    print('🎬 [ChatPage] 收到视频录制/选择回调');
                    print('文件路径: $filePath');
                    print('时长: $duration 秒');
                    
                    // 检查是否正在发送
                    if (controller.isSendingVideo.value) {
                      print('⚠️ [ChatPage] 视频正在发送中，忽略新的发送请求');
                      return;
                    }
                    
                    // 处理视频录制/选择完成，回传文件路径和时长
                    await controller.sendVideoMessage(filePath, duration);
                  },
                ),
              ],
            ),
          ),
        );
      },
    );
  }

  // 加载更多消息
  Future<void> _loadMoreMessages() async {
    if (_isLoadingMore) return;

    setState(() {
      _isLoadingMore = true;
    });

    try {
      await _controller.fetchMessages(loadMore: true);
    } finally {
      if (mounted) {
        setState(() {
          _isLoadingMore = false;
        });
      }
    }
  }
}