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/language_controller.dart';

class LanguageView extends BaseView<LanguageController> {
  const LanguageView({super.key});

  @override
  Widget buildContent(BuildContext context) {
    return Column(
      children: [
        IXAppBar(title: 'Language'),
        Expanded(
          child: SingleChildScrollView(
            child: 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(
                    children: controller.languages.asMap().entries.map((entry) {
                      final index = entry.key;
                      final language = entry.value;
                      final isSelected =
                          controller.selectedLanguage.value == language.code;

                      return Column(
                        children: [
                          _buildLanguageOption(
                            language: language,
                            isSelected: isSelected,
                            onTap: () =>
                                controller.selectLanguage(language.code),
                          ),
                          if (index < controller.languages.length - 1)
                            _buildDivider(),
                        ],
                      );
                    }).toList(),
                  ),
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }

  /// 构建语言选项
  Widget _buildLanguageOption({
    required LanguageInfo language,
    required bool isSelected,
    required VoidCallback onTap,
  }) {
    return ClickOpacity(
      onTap: onTap,
      child: Padding(
        padding: EdgeInsets.symmetric(horizontal: 20.w, vertical: 16.h),
        child: Row(
          children: [
            // 语言信息
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    language.name,
                    style: TextStyle(
                      fontSize: 16.sp,
                      fontWeight: FontWeight.w500,
                      color: isSelected
                          ? const Color(0xFF00A8E8)
                          : Colors.white,
                    ),
                  ),
                  SizedBox(height: 4.h),
                  Text(
                    language.nativeName,
                    style: TextStyle(
                      fontSize: 14.sp,
                      color: Get.reactiveTheme.hintColor,
                    ),
                  ),
                ],
              ),
            ),

            // 选中指示器
            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)
                      : Colors.white.withOpacity(0.3),
                  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,
      ),
    );
  }
}