nomo/lib/app/modules/splittunneling/views/splittunneling_view.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.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/iconfont/iconfont.dart';
import 'package:nomo/app/widgets/click_opacity.dart';
import 'package:nomo/app/widgets/ix_app_bar.dart';
import 'package:nomo/app/widgets/ix_image.dart';
import 'package:nomo/config/theme/theme_extensions/theme_extension.dart';

import '../controllers/splittunneling_controller.dart';
import '../selectapp/controllers/splittunneling_selectapp_controller.dart';

class SplittunnelingView extends BaseView<SplittunnelingController> {
  const SplittunnelingView({super.key});

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

  @override
  Widget buildContent(BuildContext context) {
    return Column(
      children: [
        Expanded(
          child: SingleChildScrollView(
            padding: EdgeInsets.symmetric(horizontal: 14.w, vertical: 10.w),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // 顶部提示框
                _buildAlertBox(),

                10.verticalSpaceFromWidth,

                // 模式选择区域
                _buildModeSelection(),
              ],
            ),
          ),
        ),
        // 底部信息框
        SafeArea(child: _buildInfoBox()),
      ],
    );
  }

  /// 构建顶部提示框
  Widget _buildAlertBox() {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 14.w, vertical: 10.w),
      decoration: BoxDecoration(
        color: Get.reactiveTheme.cardColor,
        borderRadius: BorderRadius.circular(12.r),
      ),
      child: Row(
        children: [
          Icon(IconFont.icon67, size: 20.w, color: const Color(0xFFFFB800)),
          SizedBox(width: 12.w),
          Expanded(
            child: Text(
              'Only one mode can be active at a time.',
              style: TextStyle(
                fontSize: 12.sp,
                color: Get.reactiveTheme.textTheme.bodyLarge!.color,
                fontWeight: FontWeight.w500,
              ),
            ),
          ),
        ],
      ),
    );
  }

  /// 构建模式选择区域
  Widget _buildModeSelection() {
    return Column(
      children: [
        _buildModeCard(
          mode: SplitTunnelingMode.exclude,
          icon: IconFont.icon42,
          title: 'Exclude selected apps from VPN',
          description:
              'Choose apps that will connect directly without using the VPN.',
          onTap: () {
            controller.selectMode(SplitTunnelingMode.exclude);
            // 刷新显示
            controller.refreshSelectedApps();
          },
        ),

        10.verticalSpaceFromWidth,

        _buildModeCard(
          mode: SplitTunnelingMode.include,
          icon: IconFont.icon43,
          title: 'Use VPN for selected apps only',
          description:
              'Choose apps that will use the VPN while others connect normally.',
          onTap: () {
            controller.selectMode(SplitTunnelingMode.include);
            // 刷新显示
            controller.refreshSelectedApps();
          },
        ),
      ],
    );
  }

  /// 构建模式卡片
  Widget _buildModeCard({
    required SplitTunnelingMode mode,
    required IconData icon,
    required String title,
    required String description,
    required VoidCallback onTap,
  }) {
    return Container(
      decoration: BoxDecoration(
        color: Get.reactiveTheme.highlightColor,
        borderRadius: BorderRadius.circular(12.r),
      ),
      child: Column(
        children: [
          ClickOpacity(
            onTap: onTap,
            child: Padding(
              padding: EdgeInsets.all(14.w),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // 图标
                  Container(
                    width: 30.w,
                    height: 30.w,
                    decoration: BoxDecoration(
                      color: Get.reactiveTheme.shadowColor,
                      borderRadius: BorderRadius.circular(8.r),
                    ),
                    child: Icon(icon, color: Colors.white, size: 20.w),
                  ),

                  10.horizontalSpace,

                  // 标题和描述
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          title,
                          style: TextStyle(
                            fontSize: 14.sp,
                            height: 1.4,
                            color: Get.reactiveTheme.textTheme.bodyLarge!.color,
                          ),
                        ),
                        Text(
                          description,
                          style: TextStyle(
                            fontSize: 12.sp,
                            height: 1.6,
                            color: Get.reactiveTheme.hintColor,
                          ),
                        ),
                      ],
                    ),
                  ),

                  10.horizontalSpace,

                  // Switch 开关
                  Obx(() {
                    final isSelected = controller.selectedMode.value == mode;
                    return CupertinoSwitch(
                      value: isSelected,
                      onChanged: (value) {
                        if (value) {
                          controller.selectMode(mode);
                        } else {
                          controller.selectMode(SplitTunnelingMode.none);
                        }
                        controller.refreshSelectedApps();
                      },
                      activeTrackColor: Get.reactiveTheme.shadowColor,
                      thumbColor: Colors.white,
                      inactiveThumbColor: Colors.white,
                      inactiveTrackColor: Colors.grey,
                    );
                  }),
                ],
              ),
            ),
          ),
          // 显示选中的应用
          Obx(() {
            final isSelected = controller.selectedMode.value == mode;
            if (isSelected) {
              final selectedApps = controller.getSelectedApps(mode);
              if (selectedApps.isNotEmpty) {
                return _buildSelectedAppsPreview(selectedApps);
              }
            }
            return const SizedBox.shrink();
          }),
        ],
      ),
    );
  }

  /// 构建选中应用预览
  Widget _buildSelectedAppsPreview(List<Map<String, dynamic>> selectedApps) {
    return AnimatedContainer(
      duration: const Duration(milliseconds: 300),
      curve: Curves.easeInOut,
      child: ClickOpacity(
        onTap: () {
          controller.toSelectAppPage(controller.selectedMode.value);
        },
        child: Container(
          height: 44.w,
          padding: EdgeInsets.symmetric(horizontal: 16.w),
          decoration: BoxDecoration(
            color: Get.reactiveTheme.cardColor,
            borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(12.r),
              bottomRight: Radius.circular(12.r),
            ),
          ),
          child: Row(
            children: [
              Text(
                'Select apps',
                style: TextStyle(
                  fontSize: 12.sp,
                  color: Get.reactiveTheme.hintColor,
                  fontWeight: FontWeight.w500,
                ),
              ),
              SizedBox(width: 8.w),
              Expanded(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    // 显示应用图标
                    ...selectedApps
                        .take(3)
                        .toList()
                        .asMap()
                        .entries
                        .map(
                          (entry) => AnimatedContainer(
                            duration: Duration(
                              milliseconds: 200 + (entry.key * 100),
                            ),
                            curve: Curves.easeOut,
                            margin: EdgeInsets.only(right: 6.w),
                            child: SlideTransition(
                              position:
                                  Tween<Offset>(
                                    begin: const Offset(0, 1),
                                    end: Offset.zero,
                                  ).animate(
                                    CurvedAnimation(
                                      parent: kAlwaysCompleteAnimation,
                                      curve: Curves.easeOut,
                                    ),
                                  ),
                              child: FadeTransition(
                                opacity: Tween<double>(begin: 0.0, end: 1.0)
                                    .animate(
                                      CurvedAnimation(
                                        parent: kAlwaysCompleteAnimation,
                                        curve: Curves.easeOut,
                                      ),
                                    ),
                                child: ClipRRect(
                                  borderRadius: BorderRadius.circular(4.r),
                                  child: IXImage(
                                    key: ValueKey(
                                      'preview_${entry.value['packageName']}',
                                    ),
                                    source: entry.value['icon'],
                                    width: 24.w,
                                    height: 24.w,
                                    sourceType: ImageSourceType.memory,
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ),
                    // 如果有更多应用，显示箭头
                    if (selectedApps.length > 3) ...[
                      SizedBox(width: 4.w),
                      AnimatedScale(
                        scale: 1.0,
                        duration: const Duration(milliseconds: 300),
                        curve: Curves.easeOut,
                        child: Icon(
                          Icons.arrow_forward_ios,
                          size: 12.w,
                          color: Get.reactiveTheme.hintColor,
                        ),
                      ),
                    ],
                  ],
                ),
              ),
              AnimatedRotation(
                turns: 0.0,
                duration: const Duration(milliseconds: 200),
                child: Icon(
                  Icons.keyboard_arrow_right,
                  size: 20.w,
                  color: Get.reactiveTheme.hintColor,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  /// 构建底部信息框
  Widget _buildInfoBox() {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 14.w, vertical: 10.w),
      padding: EdgeInsets.symmetric(horizontal: 14.w, vertical: 10.w),
      decoration: BoxDecoration(
        color: Get.reactiveTheme.canvasColor,
        borderRadius: BorderRadius.circular(12.r),
      ),
      child: Column(
        children: [
          Row(
            children: [
              Icon(
                IconFont.icon22,
                size: 20.w,
                color: Get.reactiveTheme.textTheme.bodyLarge!.color,
              ),
              4.horizontalSpace,
              Text(
                'Customize your VPN',
                style: TextStyle(
                  fontSize: 14.sp,
                  height: 1.6,
                  fontWeight: FontWeight.w500,
                  color: Get.reactiveTheme.textTheme.bodyLarge!.color,
                ),
              ),
            ],
          ),
          10.verticalSpaceFromWidth,
          Text(
            'Split tunneling lets you control which apps use the VPN connection and which connect directly. It helps you manage bandwidth and access local or foreign content without turning off the VPN.',
            style: TextStyle(
              fontSize: 12.sp,
              color: Get.reactiveTheme.hintColor,
              height: 1.6,
            ),
          ),
        ],
      ),
    );
  }
}