nomo/lib/app/widgets/feedback_bottom_sheet.dart

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:nomo/app/widgets/click_opacity.dart';

import 'submit_btn.dart';

/// 反馈弹窗底部弹出框
class FeedbackBottomSheet extends StatefulWidget {
  const FeedbackBottomSheet({super.key});

  /// 显示反馈弹窗
  static Future<void> show() {
    return Get.bottomSheet(
      const FeedbackBottomSheet(),
      backgroundColor: Colors.transparent,
      isDismissible: true,
      enableDrag: true,
      isScrollControlled: true,
    );
  }

  @override
  State<FeedbackBottomSheet> createState() => _FeedbackBottomSheetState();
}

class _FeedbackBottomSheetState extends State<FeedbackBottomSheet>
    with SingleTickerProviderStateMixin {
  // 选中的表情索引（0-4）
  int? selectedEmojiIndex;

  // 选中的问题标签
  final Set<String> selectedIssues = {};

  // 表情列表
  final List<String> emojis = ['😡', '😥', '🤭', '😏', '🥰'];

  // 每个表情对应的问题标签
  final Map<int, List<String>> emojiIssues = {
    0: [
      // 差评 😡
      'VPN connection failed',
      'Internet too slow',
      'Keeps disconnecting',
      'App crashes or freezes',
      'Other issues',
    ],
    1: [
      // 一般偏差 😥
      'Connection unstable',
      'Speed not as expected',
      'Hard to use / confusing UI',
      'Other issues',
    ],
    2: [
      // 中等 🤭
      'Works fine but not fast enough',
      'Limited free servers',
      'App could be simpler',
      'Sometimes disconnects',
      'Nothing special',
    ],
    3: [
      // 好 😏
      'Easy to use',
      'Fast connection',
      'Stable performance',
      'Useful free version',
      'Satisfied overall',
    ],
    4: [
      // 很好 🥰
      'Fast and stable connection',
      'Great user experience',
      'Excellent premium features',
      'Worth recommending',
      'I love the design',
    ],
  };

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Get.theme.highlightColor,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(16.r),
          topRight: Radius.circular(16.r),
        ),
      ),
      child: SafeArea(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            // 关闭按钮
            _buildCloseButton(),
            // 标题
            _buildTitle(),

            10.verticalSpaceFromWidth,

            // 副标题
            _buildSubtitle(),

            10.verticalSpaceFromWidth,

            // 表情选择器
            _buildEmojiSelector(),

            // 问题标签区域 - 使用 AnimatedSize 实现平滑高度过渡
            AnimatedSize(
              duration: const Duration(milliseconds: 300),
              curve: Curves.easeInOut,
              child: selectedEmojiIndex != null
                  ? Column(
                      mainAxisSize: MainAxisSize.min,
                      children: [24.verticalSpaceFromWidth, _buildIssueTags()],
                    )
                  : const SizedBox.shrink(),
            ),

            // 发送按钮 - 使用 AnimatedSize 实现平滑显示/隐藏
            AnimatedSize(
              duration: const Duration(milliseconds: 300),
              curve: Curves.easeInOut,
              child: selectedEmojiIndex != null
                  ? _buildSendButton()
                  : 24.verticalSpaceFromWidth,
            ),
          ],
        ),
      ),
    );
  }

  /// 构建关闭按钮
  Widget _buildCloseButton() {
    return Align(
      alignment: Alignment.centerRight,
      child: ClickOpacity(
        onTap: () => Navigator.of(Get.context!).pop(),
        child: Container(
          width: 24.w,
          height: 24.w,
          margin: EdgeInsets.only(right: 8.w, top: 8.w),
          padding: EdgeInsets.all(4.w),
          decoration: BoxDecoration(
            color: Get.theme.cardColor,
            shape: BoxShape.circle,
          ),
          child: Icon(
            Icons.close_rounded,
            size: 16.w,
            color: Get.theme.textTheme.bodyLarge!.color,
          ),
        ),
      ),
    );
  }

  /// 构建标题
  Widget _buildTitle() {
    return Text(
      "How's your\nexperience so far ?",
      textAlign: TextAlign.center,
      style: TextStyle(
        fontSize: 22.sp,
        fontWeight: FontWeight.w500,
        color: Get.theme.textTheme.bodyLarge!.color,
        height: 1.3,
      ),
    );
  }

  /// 构建副标题
  Widget _buildSubtitle() {
    return Text(
      "we'd love to know !",
      textAlign: TextAlign.center,
      style: TextStyle(
        fontSize: 16.sp,
        height: 1.4,
        color: Get.theme.hintColor,
      ),
    );
  }

  /// 构建表情选择器
  Widget _buildEmojiSelector() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: List.generate(
        emojis.length,
        (index) => _buildEmojiButton(index),
      ),
    );
  }

  /// 构建单个表情按钮
  Widget _buildEmojiButton(int index) {
    final isSelected = selectedEmojiIndex == index;

    return ClickOpacity(
      onTap: () {
        setState(() {
          if (selectedEmojiIndex == index) {
            // 如果点击已选中的表情，取消选择
            selectedEmojiIndex = null;
          } else {
            // 选择新的表情
            selectedEmojiIndex = index;
          }
          // 切换表情时清空已选的问题标签
          selectedIssues.clear();
        });
      },
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 200),
        width: 56.w,
        height: 56.w,
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: isSelected ? Get.theme.cardColor : Colors.transparent,
          border: Border.all(
            color: isSelected ? Get.theme.dividerColor : Colors.transparent,
            width: 1.w,
          ),
        ),
        alignment: Alignment.center,
        child: Text(emojis[index], style: TextStyle(fontSize: 32.sp)),
      ),
    );
  }

  /// 构建问题标签
  Widget _buildIssueTags() {
    if (selectedEmojiIndex == null) return const SizedBox.shrink();

    final issues = emojiIssues[selectedEmojiIndex!] ?? [];

    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 24.w),
      child: Wrap(
        spacing: 10.w,
        runSpacing: 10.h,
        alignment: WrapAlignment.center,
        children: issues.map((issue) => _buildIssueTag(issue)).toList(),
      ),
    );
  }

  /// 构建单个问题标签
  Widget _buildIssueTag(String issue) {
    final isSelected = selectedIssues.contains(issue);

    return ClickOpacity(
      onTap: () {
        setState(() {
          if (isSelected) {
            selectedIssues.remove(issue);
          } else {
            selectedIssues.add(issue);
          }
        });
      },
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 200),
        padding: EdgeInsets.symmetric(horizontal: 14.w, vertical: 8.h),
        decoration: BoxDecoration(
          color: isSelected ? Get.theme.primaryColor : Get.theme.cardColor,
          borderRadius: BorderRadius.circular(24.r),
          border: Border.all(
            color: isSelected ? Get.theme.primaryColor : Get.theme.dividerColor,
            width: 1.w,
          ),
        ),
        child: Text(
          issue,
          style: TextStyle(
            fontSize: 14.sp,
            color: isSelected
                ? Get.theme.textTheme.bodyLarge!.color
                : Get.theme.hintColor,
          ),
        ),
      ),
    );
  }

  /// 构建发送按钮
  Widget _buildSendButton() {
    // 必须选中表情并且选中至少一个问题标签才能发送
    final canSend = selectedEmojiIndex != null && selectedIssues.isNotEmpty;

    return Container(
      margin: EdgeInsets.only(left: 24.w, right: 24.w, top: 24.h, bottom: 10.w),
      child: SubmitButton(
        text: 'Send',
        enabled: canSend,
        onPressed: canSend ? _handleSend : null,
      ),
    );
  }

  /// 处理发送
  void _handleSend() {
    // TODO: 这里可以添加发送反馈的逻辑
    Get.back();

    // 显示成功提示
    Get.snackbar(
      'Thank you!',
      'Your feedback has been submitted.',
      snackPosition: SnackPosition.bottom,
      backgroundColor: Get.theme.primaryColor,
      colorText: Colors.white,
      margin: EdgeInsets.all(16.w),
      borderRadius: 12.r,
      duration: const Duration(seconds: 2),
    );
  }
}