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
  Widget buildContent(BuildContext context) {
    return Column(
      children: [
        IXAppBar(title: 'Routing Mode'),
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 14.w, vertical: 20.h),
          child: Container(
            decoration: BoxDecoration(
              color: Get.reactiveTheme.highlightColor,
              borderRadius: BorderRadius.circular(16.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(
          children: [
            // 图标
            Container(
              width: 40.w,
              height: 40.w,
              decoration: BoxDecoration(
                color: const Color(0xFF00A8E8),
                borderRadius: BorderRadius.circular(12.r),
              ),
              child: Icon(icon, color: Colors.white, size: 20.w),
            ),

            SizedBox(width: 12.w),

            // 标题和描述
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    title,
                    style: TextStyle(
                      fontSize: 16.sp,
                      fontWeight: FontWeight.w500,
                      color: Colors.white,
                    ),
                  ),
                  SizedBox(height: 4.h),
                  Text(
                    description,
                    style: TextStyle(
                      fontSize: 12.sp,
                      color: Get.reactiveTheme.hintColor,
                      height: 1.4,
                    ),
                  ),
                ],
              ),
            ),

            SizedBox(width: 12.w),

            // 选中指示器
            Container(
              width: 24.w,
              height: 24.w,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: isSelected
                    ? const Color(0xFF00A8E8)
                    : Colors.transparent,
                border: Border.all(
                  color: isSelected
                      ? const Color(0xFF00A8E8)
                      : Get.reactiveTheme.hintColor.withOpacity(0.5),
                  width: 2.w,
                ),
              ),
              child: isSelected
                  ? Icon(Icons.check, color: Colors.white, size: 16.w)
                  : null,
            ),
          ],
        ),
      ),
    );
  }

  /// 构建分割线
  Widget _buildDivider() {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 20.w),
      child: Divider(
        color: Get.reactiveTheme.hintColor.withOpacity(0.1),
        height: 1.h,
        thickness: 1.h,
      ),
    );
  }
}