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

import '../controllers/routingmode_controller.dart';

class RoutingmodeView extends BaseView<RoutingmodeController> {
  const RoutingmodeView({super.key});

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

  @override
  Widget buildContent(BuildContext context) {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 14.w, vertical: 10.w),
      child: Container(
        decoration: BoxDecoration(
          color: Get.reactiveTheme.highlightColor,
          borderRadius: BorderRadius.circular(12.r),
        ),
        child: Obx(
          () => Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              _buildRoutingOption(
                mode: RoutingMode.smart,
                icon: Icons.flash_on,
                title: 'Smart',
                description:
                    'The local and VPN networks coexist, and the optimal route is selected intelligently.',
                isSelected: controller.selectedMode.value == RoutingMode.smart,
                onTap: () => controller.selectMode(RoutingMode.smart),
              ),
              _buildDivider(),
              _buildRoutingOption(
                mode: RoutingMode.global,
                icon: Icons.language,
                title: 'Global',
                description:
                    'All traffic is routed through the VPN server to ensure maximum privacy and security.',
                isSelected: controller.selectedMode.value == RoutingMode.global,
                onTap: () => controller.selectMode(RoutingMode.global),
              ),
            ],
          ),
        ),
      ),
    );
  }

  /// 构建路由选项
  Widget _buildRoutingOption({
    required RoutingMode mode,
    required IconData icon,
    required String title,
    required String description,
    required bool isSelected,
    required VoidCallback onTap,
  }) {
    return ClickOpacity(
      onTap: onTap,
      child: Padding(
        padding: EdgeInsets.symmetric(horizontal: 20.w, vertical: 16.h),
        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,
                      color: Get.reactiveTheme.hintColor,
                      height: 1.6,
                    ),
                  ),
                ],
              ),
            ),

            10.horizontalSpace,

            // 选中指示器
            Container(
              width: 20.w,
              height: 20.w,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: isSelected
                    ? Get.reactiveTheme.shadowColor
                    : Colors.transparent,
                border: Border.all(
                  color: isSelected
                      ? Get.reactiveTheme.shadowColor
                      : Colors.grey[400]!,
                  width: 2.w,
                ),
              ),
              child: isSelected
                  ? Icon(Icons.check, color: Colors.white, size: 16.w)
                  : null,
            ),
          ],
        ),
      ),
    );
  }

  /// 构建分割线
  Widget _buildDivider() {
    return Divider(color: Get.reactiveTheme.dividerColor, height: 1.w);
  }
}