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 '../../../../config/translations/strings_enum.dart';
import '../controllers/theme_controller.dart';

class ThemeView extends BaseView<ThemeController> {
  const ThemeView({super.key});

  @override
  PreferredSizeWidget? get appBar => IXAppBar(title: Strings.theme.tr);

  @override
  Widget buildContent(BuildContext context) {
    return SingleChildScrollView(
      child: 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(
              children: controller.themeModes.asMap().entries.map((entry) {
                final index = entry.key;
                final themeMode = entry.value;
                final isSelected =
                    controller.selectedMode.value == themeMode.code;

                return Column(
                  children: [
                    _buildThemeOption(
                      themeMode: themeMode,
                      isSelected: isSelected,
                      onTap: () => controller.selectThemeMode(themeMode.code),
                    ),
                    if (index < controller.themeModes.length - 1)
                      _buildDivider(),
                  ],
                );
              }).toList(),
            ),
          ),
        ),
      ),
    );
  }

  /// 构建主题选项
  Widget _buildThemeOption({
    required ThemeModeInfo themeMode,
    required bool isSelected,
    required VoidCallback onTap,
  }) {
    return ClickOpacity(
      onTap: onTap,
      child: Padding(
        padding: EdgeInsets.all(14.w),
        child: Row(
          children: [
            // 主题名称
            Expanded(
              child: Text(
                themeMode.name,
                style: TextStyle(
                  fontSize: 14.sp,
                  height: 1.4,
                  fontWeight: FontWeight.w600,
                  color: isSelected
                      ? Get.reactiveTheme.shadowColor
                      : Get.reactiveTheme.textTheme.bodyLarge!.color,
                ),
              ),
            ),

            // 选中指示器
            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: 1.5.w,
                ),
              ),
              child: isSelected
                  ? Icon(Icons.check, color: Colors.white, size: 16.w)
                  : null,
            ),
          ],
        ),
      ),
    );
  }

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