import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'dart:io' show Platform;
import 'package:flutter/foundation.dart' show kIsWeb;

import 'package:kaer_with_panels/app/model/response/kr_package_list.dart';
import 'package:kaer_with_panels/app/widgets/kr_app_text_style.dart';
import '../controllers/kr_purchase_membership_controller.dart';
import '../../../widgets/kr_simple_loading.dart';
import 'package:kaer_with_panels/app/localization/app_translations.dart';
import '../../../widgets/kr_network_image.dart';
import 'package:kaer_with_panels/app/widgets/dialogs/kr_dialog.dart';



/// 购买会员页面视图
class KRPurchaseMembershipView extends GetView<KRPurchaseMembershipController> {
  const KRPurchaseMembershipView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      backgroundColor: Theme.of(context).primaryColor,
      body: Obx(() {
        return 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_purchaseMembership.purchasePackage,
                  style: KrAppTextStyle(
                    color: Theme.of(context).textTheme.bodyMedium?.color,
                    fontSize: 16,
                    fontWeight: FontWeight.w500,
                  ),
                ),
                centerTitle: true,
              ),
              Expanded(
                child: Stack(
                  children: [
                    SingleChildScrollView(
                      child: Column(
                        children: [
                          _kr_buildAccountSection(context),
                          if (controller.kr_isLoading.value)
                            Container(
                              height: MediaQuery.of(context).size.height * 0.5,
                              child: Center(
                                child: KRSimpleLoading(
                                  color: Colors.blue,
                                  size: 50.0,
                                ),
                              ),
                            )
                          else if (controller.kr_plans.isEmpty)
                            Container(
                              height: MediaQuery.of(context).size.height * 0.5,
                              child: Center(
                                child: Text(
                                  AppTranslations.kr_purchaseMembership.noData,
                                  style: KrAppTextStyle(
                                    fontSize: 14,
                                    color: Theme.of(context).textTheme.bodyMedium?.color,
                                  ),
                                ),
                              ),
                            )
                          else
                            Container(
                              margin: EdgeInsets.symmetric(horizontal: 16.r),
                              child: Column(
                                children: [
                                  // 套餐选择部分
                                  Container(
                                    padding: EdgeInsets.all(16.r),
                                    decoration: BoxDecoration(
                                      color: Theme.of(context).cardColor,
                                      borderRadius: BorderRadius.circular(16.r),
                                      boxShadow: [
                                        BoxShadow(
                                          color: Colors.black.withOpacity(0.05),
                                          blurRadius: 10,
                                          offset: Offset(0, 4),
                                        ),
                                      ],
                                    ),
                                    child: Column(
                                      crossAxisAlignment: CrossAxisAlignment.start,
                                      children: [
                                        Text(
                                          AppTranslations.kr_purchaseMembership.selectPackage,
                                          style: KrAppTextStyle(
                                            fontSize: 15,
                                            fontWeight: FontWeight.w500,
                                            color: Theme.of(context).textTheme.bodyMedium?.color,
                                          ),
                                        ),
                                        SizedBox(height: 16.h),
                                        if (controller.kr_plans.length > 1)
                                          Container(
                                            height: 32.h,
                                            child: ListView.builder(
                                              scrollDirection: Axis.horizontal,
                                              padding: EdgeInsets.zero,
                                              itemCount: controller.kr_plans.length,
                                              itemBuilder: (context, index) {
                                                final plan = controller.kr_plans[index];
                                                final isSelected = index == controller.kr_selectedPlanIndex.value;
                                                return GestureDetector(
                                                  onTap: () => controller.kr_selectPlan(index),
                                                  child: Container(
                                                    margin: EdgeInsets.only(right: 8.w),
                                                    padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 4.h),
                                                    decoration: BoxDecoration(
                                                      color: isSelected ? Colors.blue : Theme.of(context).cardColor,
                                                      borderRadius: BorderRadius.circular(16.r),
                                                      border: Border.all(
                                                        color: isSelected ? Colors.blue : Colors.grey.withOpacity(0.3),
                                                        width: 1,
                                                      ),
                                                    ),
                                                    child: Center(
                                                      child: Text(
                                                        plan.kr_name,
                                                        style: KrAppTextStyle(
                                                          fontSize: 13,
                                                          color: isSelected ? Colors.white : Theme.of(context).textTheme.bodyMedium?.color,
                                                        ),
                                                      ),
                                                    ),
                                                  ),
                                                );
                                              },
                                            ),
                                          ),
                                        SizedBox(height: 16.h),
                                        GridView.builder(
                                          padding: EdgeInsets.zero,
                                          shrinkWrap: true,
                                          physics: NeverScrollableScrollPhysics(),
                                          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                                            crossAxisCount: 3,
                                            childAspectRatio: (Platform.isWindows || Platform.isMacOS || Platform.isLinux) ? 2.0 : 0.85,
                                            crossAxisSpacing: 8.w,
                                            mainAxisSpacing: 8.h,
                                          ),
                                          itemCount: controller.kr_getTotalOptionsCount(controller.kr_plans[controller.kr_selectedPlanIndex.value]),
                                          itemBuilder: (context, index) {
                                            final plan = controller.kr_plans[controller.kr_selectedPlanIndex.value];
                                            final discountIndex = plan.kr_discount.isEmpty ? null : index;
                                            return _kr_buildPlanOptionCard(
                                              plan,
                                              controller.kr_selectedPlanIndex.value,
                                              discountIndex,
                                              context,
                                            );
                                          },
                                        ),
                                      ],
                                    ),
                                  ),
                                  SizedBox(height: 16.h),
                                  // 套餐描述部分
                                  Container(
                                    padding: EdgeInsets.all(16.r),
                                    decoration: BoxDecoration(
                                      color: Theme.of(context).cardColor,
                                      borderRadius: BorderRadius.circular(16.r),
                                      boxShadow: [
                                        BoxShadow(
                                          color: Colors.black.withOpacity(0.05),
                                          blurRadius: 10,
                                          offset: Offset(0, 4),
                                        ),
                                      ],
                                    ),
                                    child: Column(
                                      crossAxisAlignment: CrossAxisAlignment.start,
                                      children: [
                                        Text(
                                          AppTranslations.kr_purchaseMembership.packageDescription,
                                          style: KrAppTextStyle(
                                            fontSize: 15,
                                            fontWeight: FontWeight.w500,
                                            color: Theme.of(context).textTheme.bodyMedium?.color,
                                          ),
                                        ),
                                        SizedBox(height: 16.h),
                                        Obx(() {
                                          final featureLabels = controller.kr_getSelectedPlanFeatureLabels();
                                          final features = controller.kr_getSelectedPlanFeatures();
                                          final isExpanded = controller.kr_isDescriptionExpanded.value;
                                          final selectedPlan = controller.kr_plans[controller.kr_selectedPlanIndex.value];
                                          
                                          // 添加流量和设备限制信息
                                          final trafficAndDeviceInfo = Padding(
                                            padding: EdgeInsets.only(bottom: 8.h),
                                            child: Container(
                                              width: double.infinity,
                                              padding: EdgeInsets.symmetric(
                                                horizontal: 12.w,
                                                vertical: 8.h,
                                              ),
                                              decoration: BoxDecoration(
                                                color: Theme.of(context).cardColor,
                                                borderRadius: BorderRadius.circular(12.r),
                                                border: Border.all(
                                                  color: Colors.grey.withOpacity(0.2),
                                                ),
                                              ),
                                              child: Row(
                                                children: [
                                                  Expanded(
                                                    child: Column(
                                                      crossAxisAlignment: CrossAxisAlignment.start,
                                                      children: [
                                                        Text(
                                                          '${AppTranslations.kr_purchaseMembership.trafficLimit}：${controller.kr_getTrafficLimitText(selectedPlan)}',
                                                          style: KrAppTextStyle(
                                                            fontSize: 13,
                                                            color: Theme.of(context).textTheme.bodyMedium?.color,
                                                          ),
                                                        ),
                                                        SizedBox(height: 4.h),
                                                        Text(
                                                          '${AppTranslations.kr_purchaseMembership.deviceLimit}：${controller.kr_getDeviceLimitText(selectedPlan)}',
                                                          style: KrAppTextStyle(
                                                            fontSize: 13,
                                                            color: Theme.of(context).textTheme.bodyMedium?.color,
                                                          ),
                                                        ),
                                                      ],
                                                    ),
                                                  ),
                                                ],
                                              ),
                                            ),
                                          );

                                          // if (featureLabels.isEmpty) {
                                          //   return Column(
                                          //     children: [
                                          //       trafficAndDeviceInfo,
                                          //       Center(
                                          //         child: Padding(
                                          //           padding: EdgeInsets.symmetric(vertical: 16.h),
                                          //           child: Text(
                                          //             AppTranslations.kr_purchaseMembership.noData,
                                          //             style: KrAppTextStyle(
                                          //               fontSize: 14,
                                          //               color: Theme.of(context).textTheme.bodySmall?.color,
                                          //             ),
                                          //           ),
                                          //         ),
                                          //       ),
                                          //     ],
                                          //   );
                                          // }
                                          
                                          final displayCount = isExpanded ? featureLabels.length : (featureLabels.length > 3 ? 3 : featureLabels.length);
                                          
                                          return Column(
                                            children: [
                                              trafficAndDeviceInfo,
                                              ...List.generate(displayCount, (index) {
                                                final feature = features[index];
                                                return Padding(
                                                  padding: EdgeInsets.only(bottom: 8.h),
                                                  child: GestureDetector(
                                                    onTap: () {
                                                      Get.dialog(
                                                        Dialog(
                                                          backgroundColor: Theme.of(Get.context!).cardColor,
                                                          shape: RoundedRectangleBorder(
                                                            borderRadius: BorderRadius.circular(16.r),
                                                          ),
                                                          child: Padding(
                                                            padding: EdgeInsets.all(16.r),
                                                            child: Column(
                                                              mainAxisSize: MainAxisSize.min,
                                                              crossAxisAlignment: CrossAxisAlignment.start,
                                                              children: [
                                                                Text(
                                                                  feature.kr_label,
                                                                  style: KrAppTextStyle(
                                                                    fontSize: 16,
                                                                    fontWeight: FontWeight.w500,
                                                                    color: Theme.of(Get.context!).textTheme.bodyMedium?.color,
                                                                  ),
                                                                ),
                                                                SizedBox(height: 8.h),
                                                                if (feature.kr_details.isNotEmpty)
                                                                  ...feature.kr_details.map((detail) => Padding(
                                                                    padding: EdgeInsets.only(bottom: 8.h),
                                                                    child: Column(
                                                                      crossAxisAlignment: CrossAxisAlignment.start,
                                                                      children: [
                                                                        if (detail.kr_label.isNotEmpty) ...[
                                                                          Text(
                                                                            detail.kr_label,
                                                                            style: KrAppTextStyle(
                                                                              fontSize: 14,
                                                                              fontWeight: FontWeight.w500,
                                                                              color: Theme.of(Get.context!).textTheme.bodyMedium?.color,
                                                                            ),
                                                                          ),
                                                                          SizedBox(height: 4.h),
                                                                        ],
                                                                        Text(
                                                                          detail.kr_description,
                                                                          style: KrAppTextStyle(
                                                                            fontSize: 14,
                                                                            color: Theme.of(Get.context!).textTheme.bodySmall?.color,
                                                                          ),
                                                                        ),
                                                                      ],
                                                                    ),
                                                                  )).toList(),
                                                                SizedBox(height: 16.h),
                                                                Align(
                                                                  alignment: Alignment.centerRight,
                                                                  child: TextButton(
                                                                    onPressed: () => Get.back(),
                                                                    child: Text(
                                                                      AppTranslations.kr_dialog.kr_ok,
                                                                      style: KrAppTextStyle(
                                                                        fontSize: 14,
                                                                        color: Colors.blue,
                                                                      ),
                                                                    ),
                                                                  ),
                                                                ),
                                                              ],
                                                            ),
                                                          ),
                                                        ),
                                                      );
                                                    },
                                                    child: Container(
                                                      width: double.infinity,
                                                      padding: EdgeInsets.symmetric(
                                                        horizontal: 12.w,
                                                        vertical: 8.h,
                                                      ),
                                                      decoration: BoxDecoration(
                                                        color: Theme.of(Get.context!).cardColor,
                                                        borderRadius: BorderRadius.circular(12.r),
                                                        border: Border.all(
                                                          color: Colors.grey.withOpacity(0.2),
                                                        ),
                                                      ),
                                                      child: Row(
                                                        children: [
                                                          Expanded(
                                                            child: Text(
                                                              featureLabels[index],
                                                              style: KrAppTextStyle(
                                                                fontSize: 13,
                                                                color: Theme.of(Get.context!).textTheme.bodyMedium?.color,
                                                              ),
                                                            ),
                                                          ),
                                                          Container(
                                                            padding: EdgeInsets.all(4.r),
                                                            decoration: BoxDecoration(
                                                              color: Colors.blue.withOpacity(0.1),
                                                              shape: BoxShape.circle,
                                                            ),
                                                            child: Icon(
                                                              Icons.info_outline,
                                                              size: 16.r,
                                                              color: Colors.blue,
                                                            ),
                                                          ),
                                                        ],
                                                      ),
                                                    ),
                                                  ),
                                                );
                                              }),
                                              if (featureLabels.length > 3)
                                                GestureDetector(
                                                  onTap: () => controller.kr_toggleDescriptionExpanded(),
                                                  child: Padding(
                                                    padding: EdgeInsets.symmetric(vertical: 4.h),
                                                    child: Row(
                                                      mainAxisAlignment: MainAxisAlignment.center,
                                                      children: [
                                                        Text(
                                                          isExpanded 
                                                              ? AppTranslations.kr_purchaseMembership.collapse 
                                                              : AppTranslations.kr_purchaseMembership.expand,
                                                          style: KrAppTextStyle(
                                                            fontSize: 13,
                                                            color: Colors.blue,
                                                          ),
                                                        ),
                                                        SizedBox(width: 4.w),
                                                        Icon(
                                                          isExpanded ? Icons.keyboard_arrow_up : Icons.keyboard_arrow_down,
                                                          size: 16.r,
                                                          color: Colors.blue,
                                                        ),
                                                      ],
                                                    ),
                                                  ),
                                                ),
                                            ],
                                          );
                                        }),
                                      ],
                                    ),
                                  ),
                                  SizedBox(height: 16.h),
                                  // 支付方式选择部分
                                  Container(
                                    padding: EdgeInsets.all(16.r),
                                    decoration: BoxDecoration(
                                      color: Theme.of(context).cardColor,
                                      borderRadius: BorderRadius.circular(16.r),
                                      boxShadow: [
                                        BoxShadow(
                                          color: Colors.black.withOpacity(0.05),
                                          blurRadius: 10,
                                          offset: Offset(0, 4),
                                        ),
                                      ],
                                    ),
                                    child: Column(
                                      crossAxisAlignment: CrossAxisAlignment.start,
                                      children: [
                                        Text(
                                          AppTranslations.kr_purchaseMembership.paymentMethod,
                                          style: KrAppTextStyle(
                                            fontSize: 15,
                                            fontWeight: FontWeight.w500,
                                            color: Theme.of(context).textTheme.bodyMedium?.color,
                                          ),
                                        ),
                                        SizedBox(height: 16.h),
                                        Obx(() => ListView.separated(
                                          padding: EdgeInsets.zero,
                                          shrinkWrap: true,
                                          physics: NeverScrollableScrollPhysics(),
                                          itemCount: controller.kr_paymentMethods.length,
                                          separatorBuilder: (context, index) => Divider(
                                            height: 1.w,
                                            indent: 44.w,
                                            color: Theme.of(context).dividerColor.withOpacity(0.1),
                                          ),
                                          itemBuilder: (context, index) {
                                            final paymentMethod = controller.kr_paymentMethods[index];
                                            return InkWell(
                                              onTap: () => controller.kr_selectPaymentMethod(index),
                                              child: Container(
                                                padding: EdgeInsets.symmetric(vertical: 12.r, horizontal: 16.r),
                                                child: Row(
                                                  children: [
                                                    Container(
                                                      width: 32.w,
                                                      height: 32.w,
                                                      decoration: BoxDecoration(
                                                        color: Colors.blue.withOpacity(0.1),
                                                        shape: BoxShape.circle,
                                                      ),
                                                      child: Center(
                                                        child: paymentMethod.icon.isNotEmpty
                                                            ? KRNetworkImage(
                                                                kr_imageUrl: paymentMethod.icon,
                                                                kr_width: 20.w,
                                                                kr_height: 20.w,
                                                                kr_placeholder: SizedBox(
                                                                  width: 20.w,
                                                                  height: 20.w,
                                                                  child: CircularProgressIndicator(
                                                                    strokeWidth: 2,
                                                                    valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
                                                                  ),
                                                                ),
                                                                kr_errorWidget: Icon(
                                                                  Icons.payment_rounded,
                                                                  size: 20.w,
                                                                  color: Colors.blue,
                                                                ),
                                                              )
                                                            : Icon(
                                                                Icons.payment_rounded,
                                                                size: 20.w,
                                                                color: Colors.blue,
                                                              ),
                                                      ),
                                                    ),
                                                    SizedBox(width: 12.w),
                                                    Expanded(
                                                      child: Column(
                                                        crossAxisAlignment: CrossAxisAlignment.start,
                                                        children: [
                                                          Text(
                                                            controller.kr_getPaymentMethodTitle(paymentMethod),
                                                            style: KrAppTextStyle(
                                                              fontSize: 14,
                                                              color: Theme.of(context).textTheme.bodyMedium?.color,
                                                            ),
                                                          ),
                                                        ],
                                                      ),
                                                    ),
                                                    Obx(() {
                                                      final isSelected = index == controller.kr_selectedPaymentMethodIndex.value;
                                                      return Container(
                                                        width: 24.w,
                                                        height: 24.w,
                                                        decoration: BoxDecoration(
                                                          color: isSelected ? Colors.blue : Colors.transparent,
                                                          shape: BoxShape.circle,
                                                          border: Border.all(
                                                            color: isSelected ? Colors.blue : Colors.grey.withOpacity(0.3),
                                                            width: 1.5,
                                                          ),
                                                        ),
                                                        child: isSelected
                                                            ? Icon(
                                                                Icons.check,
                                                                color: Colors.white,
                                                                size: 16.r,
                                                              )
                                                            : null,
                                                      );
                                                    }),
                                                  ],
                                                ),
                                              ),
                                            );
                                          },
                                        )),
                                      ],
                                    ),
                                  ),
                                  SizedBox(height: 80.h), // 为底部按钮留出空间
                                ],
                              ),
                            ),
                        ],
                      ),
                    ),
                    Positioned(
                      left: 0,
                      right: 0,
                      bottom: 0,
                      child: _kr_buildBottomSection(context),
                    ),
                  ],
                ),
              ),
            ],
          ),
        );
      }),
    );
  }

  // 账号部分
  Widget _kr_buildAccountSection(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(16.r),
      padding: EdgeInsets.all(16.r),
      decoration: BoxDecoration(
        color: Theme.of(context).cardColor,
        borderRadius: BorderRadius.circular(12.r),
      ),
      child: Row(
        children: [
          Text(
            AppTranslations.kr_purchaseMembership.myAccount,
            style: KrAppTextStyle(
              fontSize: 14,
              color: Theme.of(context).textTheme.bodyMedium?.color,
            ),
          ),
          const Spacer(),
          Obx(() => Text(
                controller.kr_userEmail.value,
                style: KrAppTextStyle(
                  fontSize: 14,
                  color: Theme.of(context).textTheme.bodySmall?.color,
                ),
              )),
        ],
      ),
    );
  }

  // 套餐选项卡片
  Widget _kr_buildPlanOptionCard(
      KRPackageListItem plan, 
      int planIndex, 
      int? discountIndex,
      BuildContext context) {
    return Obx(() {
      bool isSelected = planIndex == controller.kr_selectedPlanIndex.value && 
                       discountIndex == controller.kr_selectedDiscountIndex.value;
      return GestureDetector(
        onTap: () => controller.kr_selectPlan(planIndex, discountIndex: discountIndex),
        child: Container(
          padding: EdgeInsets.symmetric(vertical: 10.h),
          decoration: BoxDecoration(
            color: isSelected
                ? Colors.blue.withOpacity(0.08)
                : Theme.of(context).cardColor,
            borderRadius: BorderRadius.circular(12.r),
            border: Border.all(
              color: isSelected ? Colors.blue.withOpacity(0.3) : Colors.grey.withOpacity(0.15),
              width: 1,
            ),
            boxShadow: isSelected ? [
              BoxShadow(
                color: Colors.blue.withOpacity(0.08),
                blurRadius: 12,
                offset: Offset(0, 4),
                spreadRadius: 0,
              ),
            ] : [
              BoxShadow(
                color: Colors.black.withOpacity(0.03),
                blurRadius: 8,
                offset: Offset(0, 2),
                spreadRadius: 0,
              ),
            ],
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                controller.kr_getTimeStr(plan, discountIndex: discountIndex),
                style: KrAppTextStyle(
                  fontSize: 13,
                  fontWeight: FontWeight.w500,
                  color: isSelected
                      ? Colors.blue
                      : Theme.of(context).textTheme.bodyMedium?.color,
                ),
              ),
              SizedBox(height: 6.h),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.baseline,
                textBaseline: TextBaseline.alphabetic,
                children: [
                  Text(
                    '¥',
                    style: KrAppTextStyle(
                      fontSize: 12,
                      color: isSelected
                          ? Colors.blue.withOpacity(0.8)
                          : Theme.of(context).textTheme.bodySmall?.color,
                    ),
                  ),
                  Text(
                    controller.kr_getPlanPrice(plan, discountIndex: discountIndex)
                        .toStringAsFixed(2),
                    style: KrAppTextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.w600,
                      color: isSelected
                          ? Colors.blue
                          : Theme.of(context).textTheme.bodyMedium?.color,
                    ),
                  ),
                ],
              ),
              SizedBox(height: 6.h),
              if (discountIndex != null && plan.kr_discount.isNotEmpty) ...[
                Container(
                  padding: EdgeInsets.symmetric(
                    horizontal: 8.w,
                    vertical: 2.h
                  ),
                  decoration: BoxDecoration(
                    color: plan.kr_discount[discountIndex].kr_discount < 100 
                        ? Colors.red.withOpacity(0.08)
                        : Colors.transparent,
                    borderRadius: BorderRadius.circular(4.r),
                    border: plan.kr_discount[discountIndex].kr_discount < 100 
                        ? Border.all(
                            color: Colors.red.withOpacity(0.2),
                            width: 1,
                          )
                        : null,
                    boxShadow: plan.kr_discount[discountIndex].kr_discount < 100 
                        ? [
                            BoxShadow(
                              color: Colors.red.withOpacity(0.05),
                              blurRadius: 4,
                              offset: Offset(0, 2),
                              spreadRadius: 0,
                            ),
                          ]
                        : null,
                  ),
                  child: Text(
                    controller.kr_getDiscountText(plan, discountIndex),
                    style: KrAppTextStyle(
                      fontSize: 10,
                      fontWeight: FontWeight.w500,
                      color: plan.kr_discount[discountIndex].kr_discount < 100 
                          ? Colors.red.withOpacity(0.9)
                          : Colors.transparent,
                    ),
                  ),
                ),
              ],
            ],
          ),
        ),
      );
    });
  }

  // 底部部分
  Widget _kr_buildBottomSection(BuildContext context) {
    // 如果正在加载或没有数据，不显示底部按钮
    if (controller.kr_isLoading.value || controller.kr_plans.isEmpty || controller.kr_paymentMethods.isEmpty) {
      return SizedBox.shrink();
    }

    return Container(
      padding: EdgeInsets.all(16.r),
      decoration: BoxDecoration(
        color: Theme.of(context).scaffoldBackgroundColor,
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.05),
            offset: Offset(0, -2),
            blurRadius: 8,
          ),
        ],
      ),
      child: SizedBox(
        width: double.infinity,
        child: ElevatedButton(
          onPressed: () {
            KRDialog.show(
              title: AppTranslations.kr_purchaseMembership.confirmPurchase,
              message: AppTranslations.kr_purchaseMembership.confirmPurchaseDesc,
              cancelText: AppTranslations.kr_dialog.kr_cancel,
              confirmText: AppTranslations.kr_dialog.kr_confirm,
              onConfirm: () => controller.kr_startSubscription(),
            );
          },
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.blue,
            foregroundColor: Colors.white,
            padding: EdgeInsets.symmetric(vertical: 12.h),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(8.r),
            ),
          ),
          child: Text(
            controller.kr_getSubscribeButtonText(),
            style: KrAppTextStyle(
              fontSize: 14,
              fontWeight: FontWeight.w500,
              color: Colors.white,
            ),
          ),
        ),
      ),
    );
  }
}
