nomo/lib/app/modules/setting/views/setting_view.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:nomo/app/base/base_view.dart';
import 'package:nomo/app/constants/assets.dart';
import 'package:nomo/app/dialog/all_dialog.dart';
import 'package:nomo/app/widgets/click_opacity.dart';
import 'package:nomo/app/widgets/ix_image.dart';
import 'package:nomo/config/theme/theme_extensions/theme_extension.dart';
import 'package:nomo/utils/device_manager.dart';

import '../../../../config/theme/dark_theme_colors.dart';
import '../../../../config/translations/strings_enum.dart';
import '../../../../utils/system_helper.dart';
import '../../../components/ix_snackbar.dart';
import '../../../constants/iconfont/iconfont.dart';
import '../../../routes/app_pages.dart';
import '../../../widgets/ix_app_bar.dart';
import '../controllers/setting_controller.dart';

class SettingView extends BaseView<SettingController> {
  const SettingView({super.key});

  @override
  PreferredSizeWidget? get appBar => IXAppBar(title: 'Settings');

  @override
  Widget buildContent(BuildContext context) {
    return CustomScrollView(
      slivers: [
        // Account Section
        _buildSectionHeader('Account'),
        _buildAccountSection(),

        // Network Section
        _buildSectionHeader('Network'),
        _buildNetworkSection(),

        // APP Section
        _buildSectionHeader('APP'),
        _buildAppSection(),

        // Security Section
        _buildSectionHeader('Security'),
        _buildSecuritySection(),

        // 底部间距
        SliverToBoxAdapter(child: 20.verticalSpaceFromWidth),
      ],
    );
  }

  /// 构建分组标题
  Widget _buildSectionHeader(String title) {
    return SliverToBoxAdapter(
      child: Padding(
        padding: EdgeInsets.fromLTRB(14.w, 10.w, 14.w, 10.w),
        child: Text(
          title,
          style: TextStyle(
            fontSize: 16.sp,
            color: Get.reactiveTheme.hintColor,
            fontWeight: FontWeight.w500,
          ),
        ),
      ),
    );
  }

  /// Account 分组
  Widget _buildAccountSection() {
    return SliverToBoxAdapter(
      child: Obx(() {
        final isPremium = controller.isPremium.value;
        return Container(
          margin: EdgeInsets.symmetric(horizontal: 14.w),
          decoration: BoxDecoration(
            color: Get.reactiveTheme.highlightColor,
            borderRadius: BorderRadius.circular(12.r),
          ),
          child: Column(
            children: [
              _buildSettingItem(
                icon: IconFont.icon29,
                iconColor: Get.reactiveTheme.shadowColor,
                title: 'Account',
                trailing: IXImage(
                  source: isPremium ? Assets.premium : Assets.free,
                  width: isPremium ? 92.w : 64.w,
                  height: 28.w,
                  sourceType: ImageSourceType.asset,
                ),
                onTap: () {
                  Get.toNamed(Routes.ACCOUNT);
                },
              ),
              _buildDivider(),
              _buildSettingItem(
                icon: IconFont.icon14,
                iconColor: Get.reactiveTheme.shadowColor,
                title:
                    'UID ${DeviceManager.getCacheDeviceId().length > 12 ? '${DeviceManager.getCacheDeviceId().substring(0, 6)}***${DeviceManager.getCacheDeviceId().substring(DeviceManager.getCacheDeviceId().length - 6)}' : DeviceManager.getCacheDeviceId()}',
                showInfo: true,
                trailing: ClickOpacity(
                  onTap: () {
                    Clipboard.setData(
                      ClipboardData(text: DeviceManager.getCacheDeviceId()),
                    );
                    IXSnackBar.showIXSnackBar(
                      title: Strings.copied.tr,
                      message: Strings.copied.tr,
                    );
                  },
                  child: Icon(
                    IconFont.icon57,
                    size: 20.w,
                    color: Get.reactiveTheme.hintColor,
                  ),
                ),
                onTap: () {},
                onInfoTap: () {
                  AllDialog.showUidInfo();
                },
              ),
              _buildDivider(),
              // 根据用户类型显示不同的时间信息
              if (isPremium) ...[
                _buildSettingItem(
                  icon: IconFont.icon23,
                  iconColor: Get.reactiveTheme.shadowColor,
                  title: 'My Pre Code',
                  trailing: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Text(
                        '123***ADZ',
                        style: TextStyle(
                          fontSize: 13.sp,
                          color: Get.reactiveTheme.hintColor,
                        ),
                      ),
                      SizedBox(width: 4.w),
                      Icon(
                        IconFont.icon02,
                        size: 20.w,
                        color: Get.reactiveTheme.hintColor,
                      ),
                    ],
                  ),
                  onTap: () {
                    // TODO: 跳转到Pre Code页面
                    Get.toNamed(Routes.PRECODE);
                  },
                ),
                _buildDivider(),
                _buildSettingItem(
                  icon: IconFont.icon30,
                  iconColor: Get.reactiveTheme.shadowColor,
                  title: 'Valid Term',
                  trailing: Text(
                    'Year / 2026-12-12',
                    style: TextStyle(
                      fontSize: 13.sp,
                      color: Get.reactiveTheme.primaryColor,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                  onTap: () {
                    // TODO: 跳转到有效期详情页面
                  },
                ),
              ] else ...[
                _buildSettingItem(
                  icon: IconFont.icon30,
                  iconColor: Get.reactiveTheme.shadowColor,
                  title: 'Free Time',
                  trailing: Text(
                    '01:60:59 / Days',
                    style: TextStyle(
                      fontSize: 14.sp,
                      color: const Color(0xFFFF9500),
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                ),
              ],
              _buildDivider(),
              _buildSettingItem(
                icon: IconFont.icon31,
                iconColor: Get.reactiveTheme.shadowColor,
                title: 'Device Authorization',
                trailing: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Text(
                      isPremium ? '1/4' : '0/1',
                      style: TextStyle(
                        fontSize: 13.sp,
                        color: Get.reactiveTheme.hintColor,
                      ),
                    ),
                    SizedBox(width: 4.w),
                    Icon(
                      IconFont.icon02,
                      size: 20.w,
                      color: Get.reactiveTheme.hintColor,
                    ),
                  ],
                ),
                onTap: () {
                  Get.toNamed(Routes.DEVICEAUTH);
                },
              ),
            ],
          ),
        );
      }),
    );
  }

  /// Network 分组
  Widget _buildNetworkSection() {
    return SliverToBoxAdapter(
      child: Container(
        margin: EdgeInsets.symmetric(horizontal: 14.w),
        decoration: BoxDecoration(
          color: Get.reactiveTheme.highlightColor,
          borderRadius: BorderRadius.circular(12.r),
        ),
        child: Column(
          children: [
            _buildSettingItem(
              icon: IconFont.icon34,
              iconColor: Get.reactiveTheme.primaryColor,
              title: 'Routing Mode',
              trailing: Icon(
                IconFont.icon02,
                size: 20.w,
                color: Get.reactiveTheme.hintColor,
              ),
              onTap: () {
                // TODO: 跳转到路由模式页面
                Get.toNamed(Routes.ROUTINGMODE);
              },
            ),
            _buildDivider(),
            _buildSettingItem(
              icon: IconFont.icon32,
              iconColor: Get.reactiveTheme.primaryColor,
              title: 'Split Tunneling',
              trailing: Icon(
                IconFont.icon02,
                size: 20.w,
                color: Get.reactiveTheme.hintColor,
              ),
              onTap: () {
                // TODO: 跳转到分流隧道页面
                Get.toNamed(Routes.SPLITTUNNELING);
              },
            ),
            _buildDivider(),
            _buildSettingItem(
              icon: IconFont.icon33,
              iconColor: Get.reactiveTheme.primaryColor,
              title: 'Auto Reconnect',
              trailing: Obx(
                () => CupertinoSwitch(
                  value: controller.autoReconnect.value,
                  onChanged: (value) {
                    controller.autoReconnect.value = value;
                  },
                  activeTrackColor: Get.reactiveTheme.shadowColor,
                  thumbColor: Colors.white,
                  inactiveThumbColor: Colors.white,
                  inactiveTrackColor: Colors.grey,
                ),
              ),
            ),
            _buildDivider(),
            _buildSettingItem(
              icon: IconFont.icon35,
              iconColor: Get.reactiveTheme.primaryColor,
              title: 'Restore Default',
              trailing: Icon(
                IconFont.icon02,
                size: 20.w,
                color: Get.reactiveTheme.hintColor,
              ),
              onTap: () {
                // TODO: 恢复默认设置
              },
            ),
          ],
        ),
      ),
    );
  }

  /// APP 分组
  Widget _buildAppSection() {
    return SliverToBoxAdapter(
      child: Container(
        margin: EdgeInsets.symmetric(horizontal: 14.w),
        decoration: BoxDecoration(
          color: Get.reactiveTheme.highlightColor,
          borderRadius: BorderRadius.circular(12.r),
        ),
        child: Column(
          children: [
            _buildSettingItem(
              icon: IconFont.icon36,
              iconColor: DarkThemeColors.settingAppLinearGradientStartColor,
              iconGradient: LinearGradient(
                colors: [
                  DarkThemeColors.settingAppLinearGradientStartColor,
                  DarkThemeColors.settingAppLinearGradientEndColor,
                ],
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
              ),
              title: 'Language',
              trailing: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text(
                    'English',
                    style: TextStyle(
                      fontSize: 13.sp,
                      color: Get.reactiveTheme.hintColor,
                    ),
                  ),
                  8.horizontalSpace,
                  Icon(
                    IconFont.icon02,
                    size: 20.w,
                    color: Get.reactiveTheme.hintColor,
                  ),
                ],
              ),
              onTap: () {
                // TODO: 跳转到语言选择页面
                Get.toNamed(Routes.LANGUAGE);
              },
            ),
            _buildDivider(),
            _buildSettingItem(
              icon: IconFont.icon37,
              iconColor: DarkThemeColors.settingAppLinearGradientStartColor,
              iconGradient: LinearGradient(
                colors: [
                  DarkThemeColors.settingAppLinearGradientStartColor,
                  DarkThemeColors.settingAppLinearGradientEndColor,
                ],
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
              ),
              title: 'Feedback',
              trailing: Icon(
                IconFont.icon02,
                size: 20.w,
                color: Get.reactiveTheme.hintColor,
              ),
              onTap: () {
                // TODO: 跳转到反馈页面
                Get.toNamed(Routes.FEEDBACK);
              },
            ),
            _buildDivider(),
            _buildSettingItem(
              icon: IconFont.icon38,
              iconColor: DarkThemeColors.settingAppLinearGradientStartColor,
              iconGradient: LinearGradient(
                colors: [
                  DarkThemeColors.settingAppLinearGradientStartColor,
                  DarkThemeColors.settingAppLinearGradientEndColor,
                ],
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
              ),
              title: 'Privacy Policy',
              trailing: Icon(
                IconFont.icon02,
                size: 20.w,
                color: Get.reactiveTheme.hintColor,
              ),
              onTap: () {
                // TODO: 跳转到隐私政策页面
                SystemHelper.openPrivacyTerms();
              },
            ),
            _buildDivider(),
            _buildSettingItem(
              icon: IconFont.icon38,
              iconColor: DarkThemeColors.settingAppLinearGradientStartColor,
              iconGradient: LinearGradient(
                colors: [
                  DarkThemeColors.settingAppLinearGradientStartColor,
                  DarkThemeColors.settingAppLinearGradientEndColor,
                ],
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
              ),
              title: 'Terms of Service',
              trailing: Icon(
                IconFont.icon02,
                size: 20.w,
                color: Get.reactiveTheme.hintColor,
              ),
              onTap: () {
                // TODO: 跳转到服务条款页面
                SystemHelper.openTermsOfService();
              },
            ),
            _buildDivider(),
            _buildSettingItem(
              icon: IconFont.icon39,
              iconColor: DarkThemeColors.settingAppLinearGradientStartColor,
              iconGradient: LinearGradient(
                colors: [
                  DarkThemeColors.settingAppLinearGradientStartColor,
                  DarkThemeColors.settingAppLinearGradientEndColor,
                ],
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
              ),
              title: 'Version',
              trailing: Text(
                'V1.0.0',
                style: TextStyle(
                  fontSize: 13.sp,
                  color: Get.reactiveTheme.hintColor,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  /// Security 分组
  Widget _buildSecuritySection() {
    return SliverToBoxAdapter(
      child: Container(
        margin: EdgeInsets.symmetric(horizontal: 14.w),
        decoration: BoxDecoration(
          color: Get.reactiveTheme.highlightColor,
          borderRadius: BorderRadius.circular(12.r),
        ),
        child: Column(
          children: [
            _buildSettingItem(
              icon: IconFont.icon40,
              iconColor:
                  DarkThemeColors.settingSecurityLinearGradientStartColor,
              iconGradient: LinearGradient(
                colors: [
                  DarkThemeColors.settingSecurityLinearGradientStartColor,
                  DarkThemeColors.settingSecurityLinearGradientEndColor,
                ],
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
              ),
              title: 'Delete Account',
              onTap: () {
                // TODO: 删除账户
              },
            ),
            _buildDivider(),
            _buildSettingItem(
              icon: IconFont.icon66,
              iconColor:
                  DarkThemeColors.settingSecurityLinearGradientStartColor,
              iconGradient: LinearGradient(
                colors: [
                  DarkThemeColors.settingSecurityLinearGradientStartColor,
                  DarkThemeColors.settingSecurityLinearGradientEndColor,
                ],
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
              ),
              title: 'Logout',
              titleColor: const Color(0xFFEF0000),
              onTap: () {
                // TODO: 退出登录
                AllDialog.showLogoutConfirm();
              },
            ),
          ],
        ),
      ),
    );
  }

  /// 构建设置项
  Widget _buildSettingItem({
    required IconData icon,
    required Color iconColor,
    Gradient? iconGradient,
    required String title,
    Color? titleColor,
    bool showInfo = false,
    Widget? trailing,
    VoidCallback? onTap,
    VoidCallback? onInfoTap,
  }) {
    return ClickOpacity(
      onTap: onTap,
      child: Container(
        height: 56.w,
        padding: EdgeInsets.symmetric(horizontal: 14.w),
        child: Row(
          children: [
            // 图标
            Container(
              width: 30.w,
              height: 30.w,
              decoration: BoxDecoration(
                gradient: iconGradient,
                color: iconGradient == null ? iconColor : null,
                borderRadius: BorderRadius.circular(8.r),
              ),
              child: Icon(icon, size: 20.w, color: Colors.white),
            ),
            10.horizontalSpace,
            // 标题
            Expanded(
              child: Row(
                children: [
                  Text(
                    title,
                    style: TextStyle(
                      fontSize: 14.sp,
                      color:
                          titleColor ??
                          Get.reactiveTheme.textTheme.bodyLarge!.color,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                  4.horizontalSpace,
                  if (showInfo)
                    ClickOpacity(
                      onTap: onInfoTap,
                      child: Icon(
                        IconFont.icon59,
                        size: 20.w,
                        color: Colors.white,
                      ),
                    ),
                ],
              ),
            ),

            // 右侧内容
            if (trailing != null) trailing,
          ],
        ),
      ),
    );
  }

  /// 构建分割线
  Widget _buildDivider() {
    return Padding(
      padding: EdgeInsets.only(left: 60.w),
      child: Divider(
        height: 1,
        color: Get.reactiveTheme.dividerColor.withOpacity(0.3),
      ),
    );
  }
}