import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:provider/provider.dart';
import 'package:sales_chat/providers/chat_provider.dart';
import 'package:sales_chat/providers/auth_provider.dart';
import 'package:sales_chat/models/group.dart';
import 'package:sales_chat/models/message.dart';
import 'package:sales_chat/widgets/user_avatar.dart' as custom;
import 'package:sales_chat/theme/app_theme.dart';

/// 聊天页面 —— 微信风格
class ChatPage extends StatefulWidget {
  const ChatPage({super.key});

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

class _ChatPageState extends State<ChatPage> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        AppBar(
          title: const Text('聊天'),
        ),
        Expanded(
          child: Consumer<ChatProvider>(
        builder: (context, chatProvider, _) {
          if (chatProvider.isLoading && chatProvider.groups.isEmpty) {
            return const Center(child: CircularProgressIndicator());
          }

          if (chatProvider.groups.isEmpty) {
            return _buildEmptyState();
          }

          if (chatProvider.currentGroup != null) {
            return _buildChatView(chatProvider);
          }

          return _buildGroupList(chatProvider);
        },
      ),
        ),
      ],
    );
  }

  /// 空状态占位
  Widget _buildEmptyState() {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(
            Icons.chat_bubble_outline,
            size: 64,
            color: AppTheme.textHint,
          ),
          const SizedBox(height: 16),
          Text(
            '暂无群聊',
            style: TextStyle(
              fontSize: 16,
              color: AppTheme.textSecondary,
            ),
          ),
          const SizedBox(height: 8),
          Text(
            '请联系管理员将您加入群聊',
            style: TextStyle(
              fontSize: 14,
              color: AppTheme.textHint,
            ),
          ),
        ],
      ),
    );
  }

  /// 群组列表 —— 微信会话列表风格
  /// 白底行 + 细分割线，无卡片阴影
  Widget _buildGroupList(ChatProvider chatProvider) {
    return Container(
      color: AppTheme.cardBackground,
      child: ListView.separated(
        // 去掉顶部和底部多余间距
        padding: EdgeInsets.zero,
        itemCount: chatProvider.groups.length,
        // 每行之间用细分割线
        separatorBuilder: (_, __) => const Divider(
          height: 0.5,
          thickness: 0.5,
          indent: 76, // 头像右侧开始
          color: AppTheme.dividerColor,
        ),
        itemBuilder: (context, index) {
          final group = chatProvider.groups[index];
          return _WeChatGroupRow(
            group: group,
            onTap: () => chatProvider.selectGroup(group),
          );
        },
      ),
    );
  }

  /// 聊天视图 —— 聊天界面
  Widget _buildChatView(ChatProvider chatProvider) {
    final group = chatProvider.currentGroup!;
    final authProvider = context.read<AuthProvider>();

    return Column(
      children: [
        // 聊天顶栏
        Container(
          color: AppTheme.cardBackground,
          padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 8),
          child: Row(
            children: [
              IconButton(
                icon: const Icon(Icons.arrow_back_ios, size: 20),
                onPressed: () => chatProvider.deselectGroup(),
              ),
              Expanded(
                child: GestureDetector(
                  onTap: () => _showGroupInfo(context, group),
                  child: Column(
                    children: [
                      Text(
                        group.name,
                        style: const TextStyle(
                          fontSize: 17,
                          fontWeight: FontWeight.w600,
                          color: AppTheme.textPrimary,
                        ),
                      ),
                      Text(
                        '${group.memberCount}位成员',
                        style: const TextStyle(
                          fontSize: 11,
                          color: AppTheme.textHint,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              IconButton(
                icon: const Icon(Icons.more_horiz, size: 22),
                onPressed: () => _showGroupInfo(context, group),
              ),
            ],
          ),
        ),
        const Divider(height: 0.5, thickness: 0.5),
        Expanded(
          child: _ChatMessagesList(
            messages: chatProvider.currentMessages,
            currentUserId: authProvider.user?.id ?? '',
            onLoadMore: () {
              // 加载更多历史消息
            },
          ),
        ),
        _ChatInput(
          onSend: (text) {
            chatProvider.sendMessage(text);
          },
        ),
      ],
    );
  }

  /// 显示群信息底部弹窗
  void _showGroupInfo(BuildContext context, Group group) {
    showModalBottomSheet(
      context: context,
      backgroundColor: AppTheme.cardBackground,
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(12)),
      ),
      builder: (context) => _GroupInfoSheet(group: group),
    );
  }
}

// ================================================================
// 群组列表行 —— 微信会话列表风格
// ================================================================
class _WeChatGroupRow extends StatelessWidget {
  final Group group;
  final VoidCallback onTap;

  const _WeChatGroupRow({
    required this.group,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: onTap,
      // 点击水波纹颜色
      splashColor: AppTheme.dividerColor,
      highlightColor: AppTheme.timestampBg,
      child: Container(
        color: AppTheme.cardBackground,
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
        child: Row(
          children: [
            // 左侧群头像
            custom.GroupAvatar(
              groupName: group.name,
              radius: 24,
            ),
            const SizedBox(width: 12),
            // 右侧群名 + 成员数
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    group.name,
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: const TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.w500,
                      color: AppTheme.textPrimary,
                    ),
                  ),
                  const SizedBox(height: 4),
                  Text(
                    '${group.memberCount}位成员',
                    style: const TextStyle(
                      fontSize: 13,
                      color: AppTheme.textHint,
                    ),
                  ),
                ],
              ),
            ),
            // 右侧箭头图标
            Icon(
              Icons.chevron_right,
              color: AppTheme.textHint,
              size: 20,
            ),
          ],
        ),
      ),
    );
  }
}

// ================================================================
// 消息列表
// ================================================================
class _ChatMessagesList extends StatelessWidget {
  final List<Message> messages;
  final String currentUserId;
  final VoidCallback? onLoadMore;

  const _ChatMessagesList({
    required this.messages,
    required this.currentUserId,
    this.onLoadMore,
  });

  @override
  Widget build(BuildContext context) {
    if (messages.isEmpty) {
      return Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(
              Icons.chat_bubble_outline,
              size: 48,
              color: AppTheme.textHint,
            ),
            const SizedBox(height: 12),
            Text(
              '暂无消息',
              style: TextStyle(color: AppTheme.textSecondary),
            ),
            const SizedBox(height: 8),
            Text(
              '发送第一条消息开始聊天吧',
              style: TextStyle(color: AppTheme.textHint, fontSize: 12),
            ),
          ],
        ),
      );
    }

    return Container(
      color: AppTheme.scaffoldBackground,
      child: ListView.builder(
        reverse: true,
        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
        itemCount: messages.length,
        itemBuilder: (context, index) {
          final message = messages[index];
          final isMe = message.senderId == currentUserId;

          // 滚动到顶部时加载更多
          if (index == messages.length - 1 && onLoadMore != null) {
            onLoadMore!();
          }

          // 判断是否需要显示时间戳（与下一条消息间隔超过5分钟）
          final bool showTimestamp;
          if (index == messages.length - 1) {
            // 最旧的消息，始终显示时间
            showTimestamp = true;
          } else {
            final nextMessage = messages[index + 1];
            if (message.createdAt != null && nextMessage.createdAt != null) {
              final diff = message.createdAt!
                  .difference(nextMessage.createdAt!)
                  .inMinutes;
              showTimestamp = diff.abs() >= 5;
            } else {
              showTimestamp = false;
            }
          }

          return _MessageBubble(
            message: message,
            isMe: isMe,
            showTimestamp: showTimestamp,
          );
        },
      ),
    );
  }
}

// ================================================================
// 消息气泡 —— 微信风格
// ================================================================
class _MessageBubble extends StatelessWidget {
  final Message message;
  final bool isMe;
  final bool showTimestamp;

  const _MessageBubble({
    required this.message,
    required this.isMe,
    this.showTimestamp = false,
  });

  @override
  Widget build(BuildContext context) {
    // 撤回消息：居中灰色斜体
    if (message.hasRecall) {
      return Padding(
        padding: const EdgeInsets.symmetric(vertical: 8),
        child: Column(
          children: [
            if (showTimestamp && message.createdAt != null)
              _buildTimestamp(),
            const SizedBox(height: 4),
            Center(
              child: Text(
                '消息已撤回',
                style: TextStyle(
                  color: AppTheme.textHint,
                  fontSize: 12,
                  fontStyle: FontStyle.italic,
                ),
              ),
            ),
          ],
        ),
      );
    }

    return Padding(
      padding: const EdgeInsets.only(bottom: 10),
      child: Column(
        children: [
          // 时间戳居中显示在消息上方
          if (showTimestamp && message.createdAt != null)
            _buildTimestamp(),
          const SizedBox(height: 4),
          // 消息行
          GestureDetector(
            onLongPress: () => _showMessageOptions(context),
            child: Row(
              mainAxisAlignment:
                  isMe ? MainAxisAlignment.end : MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // 对方消息：左侧头像
                if (!isMe) ...[
                  custom.UserAvatar(
                    displayName:
                        message.senderName.isNotEmpty ? message.senderName : 'U',
                    radius: 16,
                  ),
                  const SizedBox(width: 8),
                ],
                // 气泡内容
                Flexible(
                  child: Column(
                    crossAxisAlignment:
                        isMe ? CrossAxisAlignment.end : CrossAxisAlignment.start,
                    children: [
                      // 对方消息：发送者名称（群聊显示）
                      if (!isMe && message.senderName.isNotEmpty)
                        Padding(
                          padding: const EdgeInsets.only(bottom: 2, left: 2),
                          child: Text(
                            message.senderName,
                            style: const TextStyle(
                              fontSize: 11,
                              color: AppTheme.textHint,
                              fontWeight: FontWeight.w400,
                            ),
                          ),
                        ),
                      // 气泡
                      Container(
                        padding: const EdgeInsets.symmetric(
                            horizontal: 12, vertical: 9),
                        decoration: BoxDecoration(
                          // 自己：微信绿气泡；对方：白色气泡
                          color: isMe
                              ? AppTheme.bubbleSelf
                              : AppTheme.bubbleOther,
                          borderRadius: BorderRadius.only(
                            topLeft: const Radius.circular(12),
                            topRight: const Radius.circular(12),
                            // 微信风格：外角小圆角，内角大圆角
                            bottomLeft:
                                Radius.circular(isMe ? 12 : 4),
                            bottomRight:
                                Radius.circular(isMe ? 4 : 12),
                          ),
                          // 无阴影，干净清爽
                        ),
                        child: Text(
                          message.content,
                          style: TextStyle(
                            // 己方蓝色气泡用白字，对方灰色气泡用深色字
                            color: isMe ? Colors.white : AppTheme.textPrimary,
                            fontSize: 15,
                            height: 1.4,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                // 自己消息：右侧留出间距（对称对方头像）
                if (isMe) const SizedBox(width: 8),
              ],
            ),
          ),
        ],
      ),
    );
  }

  /// 居中时间戳
  Widget _buildTimestamp() {
    return Padding(
      padding: const EdgeInsets.only(top: 4, bottom: 2),
      child: Center(
        child: Container(
          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
          decoration: BoxDecoration(
            color: AppTheme.timestampBg,
            borderRadius: BorderRadius.circular(4),
          ),
          child: Text(
            _formatTime(message.createdAt!),
            style: const TextStyle(
              fontSize: 11,
              color: AppTheme.timestampText,
            ),
          ),
        ),
      ),
    );
  }

  /// 长按消息菜单
  void _showMessageOptions(BuildContext context) {
    final authProvider = context.read<AuthProvider>();
    final chatProvider = context.read<ChatProvider>();
    final isAdmin = authProvider.user?.isAdmin ?? false;
    final canRecall = isMe && _isRecallable(message.createdAt);

    showModalBottomSheet(
      context: context,
      backgroundColor: AppTheme.cardBackground,
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(12)),
      ),
      builder: (context) => SafeArea(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            // 顶部拖拽指示条
            Container(
              margin: const EdgeInsets.only(top: 8, bottom: 4),
              width: 36,
              height: 4,
              decoration: BoxDecoration(
                color: AppTheme.dragHandleColor,
                borderRadius: BorderRadius.circular(2),
              ),
            ),
            if (canRecall)
              ListTile(
                leading: Icon(Icons.undo, color: AppTheme.primaryColor),
                title: const Text('撤回消息'),
                subtitle: const Text('其他人将不再看到此消息'),
                onTap: () {
                  Navigator.pop(context);
                  _handleRecall(context, chatProvider);
                },
              ),
            if (isAdmin && !canRecall)
              ListTile(
                leading: const Icon(Icons.delete, color: Colors.red),
                title:
                    const Text('删除消息', style: TextStyle(color: Colors.red)),
                subtitle: const Text('管理员删除消息'),
                onTap: () {
                  Navigator.pop(context);
                  _handleDelete(context, chatProvider);
                },
              ),
            ListTile(
              leading: Icon(Icons.copy, color: AppTheme.textSecondary),
              title: const Text('复制'),
              onTap: () {
                Clipboard.setData(ClipboardData(text: message.content));
                Navigator.pop(context);
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('已复制到剪贴板')),
                );
              },
            ),
            ListTile(
              leading:
                  Icon(Icons.cancel_outlined, color: AppTheme.textHint),
              title: const Text('取消'),
              onTap: () => Navigator.pop(context),
            ),
          ],
        ),
      ),
    );
  }

  /// 判断消息是否可撤回（2分钟内）
  bool _isRecallable(DateTime? createdAt) {
    if (createdAt == null) return false;
    final now = DateTime.now();
    final diff = now.difference(createdAt);
    return diff.inMinutes < 2;
  }

  /// 撤回消息
  Future<void> _handleRecall(
      BuildContext context, ChatProvider chatProvider) async {
    final confirmed = await showDialog<bool>(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('撤回消息'),
        content: const Text('确定要撤回此消息吗？'),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context, false),
            child: const Text('取消'),
          ),
          TextButton(
            onPressed: () => Navigator.pop(context, true),
            child: const Text('撤回'),
          ),
        ],
      ),
    );

    if (confirmed == true) {
      final success = await chatProvider.recallMessage(message.id);
      if (context.mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
            content: Text(success ? '消息已撤回' : (chatProvider.error ?? '撤回失败')),
          ),
        );
      }
    }
  }

  /// 删除消息（管理员）
  Future<void> _handleDelete(
      BuildContext context, ChatProvider chatProvider) async {
    final confirmed = await showDialog<bool>(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('删除消息'),
        content: const Text('确定吗？此操作无法撤销。'),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context, false),
            child: const Text('取消'),
          ),
          TextButton(
            onPressed: () => Navigator.pop(context, true),
            style: TextButton.styleFrom(foregroundColor: Colors.red),
            child: const Text('删除'),
          ),
        ],
      ),
    );

    if (confirmed == true) {
      final success = await chatProvider.deleteMessage(message.id);
      if (context.mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
            content: Text(success ? '消息已删除' : (chatProvider.error ?? '删除失败')),
          ),
        );
      }
    }
  }

  /// 格式化时间
  String _formatTime(DateTime time) {
    final now = DateTime.now();
    final today = DateTime(now.year, now.month, now.day);
    final yesterday = today.subtract(const Duration(days: 1));
    final messageDate = DateTime(time.year, time.month, time.day);

    final hour = time.hour.toString().padLeft(2, '0');
    final minute = time.minute.toString().padLeft(2, '0');

    if (messageDate == today) {
      return '$hour:$minute';
    } else if (messageDate == yesterday) {
      return '昨天 $hour:$minute';
    } else if (now.year == time.year) {
      return '${time.month}月${time.day}日 $hour:$minute';
    } else {
      return '${time.year}年${time.month}月${time.day}日 $hour:$minute';
    }
  }
}

// ================================================================
// 聊天输入栏 —— 微信风格
// ================================================================
class _ChatInput extends StatefulWidget {
  final Function(String) onSend;

  const _ChatInput({required this.onSend});

  @override
  State<_ChatInput> createState() => _ChatInputState();
}

class _ChatInputState extends State<_ChatInput> {
  final _controller = TextEditingController();

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

  void _handleSend() {
    final text = _controller.text.trim();
    if (text.isNotEmpty) {
      widget.onSend(text);
      _controller.clear();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
        color: AppTheme.chatInputBg,
        border: Border(
          top: BorderSide(
            color: AppTheme.dividerColor,
            width: 0.5,
          ),
        ),
      ),
      padding: EdgeInsets.only(
        left: 12,
        right: 12,
        top: 8,
        bottom: MediaQuery.of(context).padding.bottom + 8,
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          // 输入框
          Expanded(
            child: Container(
              constraints: const BoxConstraints(
                minHeight: 36,
                maxHeight: 120,
              ),
              child: TextField(
                controller: _controller,
                maxLines: null,
                style: const TextStyle(
                  fontSize: 15,
                  color: AppTheme.textPrimary,
                ),
                decoration: InputDecoration(
                  hintText: '输入消息...',
                  hintStyle: const TextStyle(
                    color: AppTheme.textHint,
                    fontSize: 15,
                  ),
                  filled: true,
                  fillColor: AppTheme.cardBackground,
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(6),
                    borderSide: BorderSide.none,
                  ),
                  contentPadding: const EdgeInsets.symmetric(
                    horizontal: 12,
                    vertical: 8,
                  ),
                  isDense: true,
                ),
                onSubmitted: (_) => _handleSend(),
              ),
            ),
          ),
          const SizedBox(width: 8),
          // 发送按钮：微信绿圆形
          GestureDetector(
            onTap: _handleSend,
            child: Container(
              width: 36,
              height: 36,
              decoration: const BoxDecoration(
                color: AppTheme.primaryColor,
                shape: BoxShape.circle,
              ),
              child: const Icon(
                Icons.send_rounded,
                color: Colors.white,
                size: 18,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

// ================================================================
// 群信息底部弹窗 —— 微信风格，干净白底
// ================================================================
class _GroupInfoSheet extends StatelessWidget {
  final Group group;

  const _GroupInfoSheet({required this.group});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 20),
      decoration: const BoxDecoration(
        color: AppTheme.cardBackground,
        borderRadius: BorderRadius.vertical(top: Radius.circular(12)),
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          // 顶部拖拽指示条
          Container(
            width: 36,
            height: 4,
            margin: const EdgeInsets.only(bottom: 20),
            decoration: BoxDecoration(
              color: AppTheme.dragHandleColor,
              borderRadius: BorderRadius.circular(2),
            ),
          ),
          // 群头像
          custom.GroupAvatar(
            groupName: group.name,
            radius: 40,
          ),
          const SizedBox(height: 12),
          // 群名称
          Text(
            group.name,
            style: const TextStyle(
              fontSize: 18,
              fontWeight: FontWeight.w600,
              color: AppTheme.textPrimary,
            ),
          ),
          const SizedBox(height: 4),
          // 成员数
          Text(
            '${group.memberCount}位成员',
            style: const TextStyle(
              fontSize: 14,
              color: AppTheme.textHint,
            ),
          ),
          // 群描述
          if (group.description != null &&
              group.description!.isNotEmpty) ...[
            const SizedBox(height: 12),
            Container(
              width: double.infinity,
              padding: const EdgeInsets.all(12),
              decoration: BoxDecoration(
                color: AppTheme.chatInputBg,
                borderRadius: BorderRadius.circular(8),
              ),
              child: Text(
                group.description!,
                textAlign: TextAlign.center,
                style: const TextStyle(
                  fontSize: 14,
                  color: AppTheme.textSecondary,
                ),
              ),
            ),
          ],
          // 频道列表
          if (group.panels.isNotEmpty) ...[
            const SizedBox(height: 16),
            const Align(
              alignment: Alignment.centerLeft,
              child: Text(
                '频道',
                style: TextStyle(
                  fontSize: 14,
                  fontWeight: FontWeight.w600,
                  color: AppTheme.textPrimary,
                ),
              ),
            ),
            const SizedBox(height: 8),
            Wrap(
              spacing: 8,
              runSpacing: 8,
              children: group.panels
                  .where((p) => p.type == 0)
                  .map((p) => Container(
                        padding: const EdgeInsets.symmetric(
                            horizontal: 12, vertical: 6),
                        decoration: BoxDecoration(
                          color: AppTheme.chatInputBg,
                          borderRadius: BorderRadius.circular(6),
                        ),
                        child: Row(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            Icon(Icons.tag,
                                size: 14, color: AppTheme.textHint),
                            const SizedBox(width: 4),
                            Text(
                              p.name,
                              style: const TextStyle(
                                fontSize: 13,
                                color: AppTheme.textPrimary,
                              ),
                            ),
                          ],
                        ),
                      ))
                  .toList(),
            ),
          ],
          const SizedBox(height: 24),
        ],
      ),
    );
  }
}