import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:easy_refresh/easy_refresh.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_markdown/flutter_markdown.dart';
import 'package:kaer_with_panels/app/widgets/hi_base_scaffold.dart';
import '../../../routes/app_pages.dart';
import 'package:kaer_with_panels/app/widgets/swipe/has_swipe_config.dart';
import 'package:kaer_with_panels/app/widgets/swipe/swipe_config.dart';
import '../controllers/hi_menu_controller.dart';
import 'package:kaer_with_panels/app/widgets/kr_app_text_style.dart';
import 'package:kaer_with_panels/app/localization/app_translations.dart';
import 'package:flutter/services.dart';
import 'package:kaer_with_panels/app/widgets/kr_local_image.dart';
import 'package:kaer_with_panels/app/modules/kr_home/views/hi_subscription_corner_button.dart';
import 'package:kaer_with_panels/app/common/app_run_data.dart';
import 'package:kaer_with_panels/app/modules/hi_menu/widgets/hi_menu_list_item.dart';
import 'package:kaer_with_panels/app/modules/hi_menu/widgets/user_info_card.dart';
import '../../../utils/kr_common_util.dart';

class HIMenuView extends GetView<HIMenuController> implements HasSwipeConfig {
  const HIMenuView({super.key});

  @override
  SwipeConfig get swipeConfig => SwipeConfig(
        enableRight: true,
        onRight: () => Get.offNamed(Routes.KR_HOME),
      );

  @override
  Widget build(BuildContext context) {
    final List<MenuItem> menuItems = [
      const MenuItem(
        iconName: 'icon-1',
        title: '节点列表',
        route: Routes.HI_NODE_LIST,
      ),
      const MenuItem(
        iconName: 'icon-2',
        title: '消息中心',
        route: Routes.KR_MESSAGE,
      ),
      const MenuItem(
        iconName: 'icon-3',
        title: '常见问题',
        route: Routes.HI_HELP,
      ),
      const MenuItem(
        iconName: 'icon-4',
        title: '邀请好友',
        route: Routes.KR_INVITE,
      ),
      MenuItem(
        iconName: 'icon-5',
        title: '在线客服',
        onTap: () => KRCommonUtil.kr_openCustomerService(),
      ),
    ];

    return HIBaseScaffold(
      child: Stack(
        fit: StackFit.expand,
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: [
              SizedBox(height: 60.h),
              Padding(
                // 5. 为整个区块设置左右 41.w 的内边距
                padding: EdgeInsets.symmetric(horizontal: 41.w),
                child: Column(
                  mainAxisSize: MainAxisSize.min, // 让 Column 包裹内容
                  children: [
                    Obx(() {
                      final account =
                          KRAppRunData.getInstance().kr_account.value;
                      final isDeviceLogin =
                          account != null && account.startsWith('9000');
                      final accountText = (account == null || isDeviceLogin)
                          ? '待绑定'
                          : '${KRAppRunData.getInstance().kr_account.value.toString()}';
                      return UserInfoCard(
                        controller: controller,
                        userId: accountText,
                      );
                    }),

                    SizedBox(height: 10.h), // 卡片 and 菜单列表的间距

                    // ListView.separated 现在也会继承 Padding 的约束
                    ListView.separated(
                      shrinkWrap: true, // 让 ListView 高度自适应内容
                      physics:
                          const NeverScrollableScrollPhysics(), // 在 Stack 中，禁用其自身的滚动
                      itemCount: menuItems.length,
                      // 渲染每一项
                      itemBuilder: (context, index) {
                        return MenuListItem(item: menuItems[index]);
                      },
                      // 设置每一项之间的间距
                      separatorBuilder: (context, index) {
                        return SizedBox(height: 10.h);
                      },
                    ),
                  ],
                ),
              ),
            ],
          ),
          // 版本号信息
          Obx(() {
            return Positioned(
              bottom: 40.0,
              left: 0,
              right: 0,
              child: GestureDetector(
                onDoubleTap: () => controller.toggleVersionDisplay(),
                child: Text(
                  '当前版本：${controller.kr_showBuild.value ? '${controller.kr_version.value}.${controller.kr_buildNumber.value}' : controller.kr_version.value}',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    color: Theme.of(context).primaryColor,
                    fontSize: 10.w,
                  ),
                ),
              ),
            );
          }),
        ],
      ),
    );
  }
}