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 '../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';

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

  @override
  Widget build(BuildContext context) {
    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 ?? '未登录';
                      return UserInfoCard(
                        controller: controller,
                        userId: account,
                      );
                    }),

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

                    // 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((){
            // 1. 从 Obx 的回调函数中 return 一个 Widget
            return Positioned(
              bottom: 40.0,
              left: 0,
              right: 0,
              child: Text(
                '当前版本：${controller.kr_version.value}',
                textAlign: TextAlign.center,
                style: TextStyle(
                  // 2. 建议使用更稳定的颜色，避免主题切换时出现问题
                  color: Theme.of(context).primaryColor,
                  fontSize: 10.w,
                ),
              ),
            );
          }),
        ],
      ),
    );
  }
}


const List<MenuItem> _menuItems = [
  MenuItem(
    iconName: 'icon-1',
    title: '节点列表',
    route: Routes.HI_NODE_LIST,
  ),
  MenuItem(
    iconName: 'icon-2',
    title: '消息中心',
    route: Routes.KR_MESSAGE,
  ),
  MenuItem(
    iconName: 'icon-3',
    title: '常见问题',
    route: Routes.HI_HELP,
  ),
  MenuItem(
    iconName: 'icon-4',
    title: '邀请好友',
    route: Routes.KR_INVITE,
  ),
  MenuItem(
    iconName: 'icon-5',
    title: '在线客服',
    route: Routes.KR_CRISP,
  ),
];