import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:kaer_with_panels/app/localization/app_translations.dart';
import 'package:kaer_with_panels/app/localization/kr_language_utils.dart';
import 'package:kaer_with_panels/app/widgets/kr_app_text_style.dart';
import '../controllers/kr_language_selector_controller.dart';

class KRLanguageSelectorView extends GetView<KRLanguageSelectorController> {
  const KRLanguageSelectorView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      backgroundColor: Theme.of(context).primaryColor,
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [
              Color.fromRGBO(23, 151, 255, 0.15), // 渐变开始颜色
              Color.fromRGBO(23, 151, 255, 0.05), // 中间过渡颜色
              // 非渐变色区域
            ],
            stops: [0.0, 0.28], // 调整渐变结束位置
          ),
        ),
        child: Column(
          children: [
            AppBar(
              backgroundColor: Colors.transparent,
              elevation: 0,
              leading: IconButton(
                icon: Icon(
                  Icons.arrow_back_ios,
                  size: 20.r,
                  color: Theme.of(context).textTheme.bodyMedium?.color,
                ),
                onPressed: () => Get.back(),
              ),
              title: Text(
                AppTranslations.kr_setting.switchLanguage,
                style: KrAppTextStyle(
                  color: Theme.of(context).textTheme.bodyMedium?.color,
                  fontSize: 16,
                  fontWeight: FontWeight.w500,
                ),
              ),
              centerTitle: true,
            ),
            Expanded(
              child: Obx(
                () => ListView.separated(
                  padding: EdgeInsets.all(16.r),
                  itemCount: controller.kr_languages.length,
                  separatorBuilder: (context, index) => SizedBox(height: 12.h),
                  itemBuilder: (context, index) {
                    final language = controller.kr_languages[index];
                    return _kr_buildLanguageCard(language, context);
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  // 构建语言卡片
  Widget _kr_buildLanguageCard(KRLanguage language, BuildContext context) {
    return InkWell(
      onTap: () => controller.kr_selectLanguage(language),
      child: Container(
        padding: EdgeInsets.all(16.r),
        decoration: BoxDecoration(
          color: Theme.of(context).cardColor,
          borderRadius: BorderRadius.circular(12.r),
        ),
        child: Row(
          children: [
            // 国旗图标
            CircleAvatar(
              radius: 16.r,
              backgroundColor: Colors.blue.withOpacity(0.1),
              child: Text(
                language.flagEmoji,
                style: TextStyle(fontSize: 16),
              ),
            ),
            SizedBox(width: 12.w),
            // 语言名称
            Text(
              language.languageName,
              style: KrAppTextStyle(
                fontSize: 14,
                color: Theme.of(context).textTheme.bodyMedium?.color,
              ),
            ),
            const Spacer(),
            // 选中标记
            if (controller.kr_selectedLanguage.value == language.countryCode)
              Icon(
                Icons.check_circle,
                color: Colors.blue,
                size: 20.r,
              ),
          ],
        ),
      ),
    );
  }
} 