nomo/lib/app/modules/subscription/views/subscription_view.dart

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:nomo/app/constants/iconfont/iconfont.dart';
import 'package:nomo/config/theme/dark_theme_colors.dart';
import 'package:nomo/config/theme/theme_extensions/theme_extension.dart';
import 'package:video_player/video_player.dart';
import '../../../constants/assets.dart';
import '../../../widgets/info_card.dart';
import '../../../widgets/ix_image.dart';
import '../controllers/subscription_controller.dart';

class SubscriptionView extends GetView<SubscriptionController> {
  const SubscriptionView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: DarkThemeColors.scaffoldBackgroundColor,
      body: Stack(
        children: [
          // 视频背景层（只显示顶部214高度）
          Obx(() {
            if (controller.isVideoInitialized.value) {
              return Positioned(
                top: 0,
                left: 0,
                right: 0,
                height: 214.w,
                child: ClipRect(
                  child: FittedBox(
                    fit: BoxFit.cover,
                    child: SizedBox(
                      width: controller.videoController.value.size.width,
                      height: controller.videoController.value.size.height,
                      child: VideoPlayer(controller.videoController),
                    ),
                  ),
                ),
              );
            }
            return const SizedBox.shrink();
          }),
          // 渐变遮罩层（只在视频区域）
          Positioned(
            top: 0,
            left: 0,
            right: 0,
            height: 214.w,
            child: Container(
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [Colors.black.withValues(alpha: 0.6), Colors.black],
                  stops: const [0.0, 1.0],
                ),
              ),
            ),
          ),
          // 内容层
          SafeArea(
            child: Column(
              children: [
                _buildAppBar(),
                Expanded(
                  child: SingleChildScrollView(
                    padding: EdgeInsets.symmetric(horizontal: 20.w),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        16.verticalSpaceFromWidth,
                        _buildCurrentSubscription(),
                        24.verticalSpaceFromWidth,
                        _buildPlanOptions(),
                        _buildPlanChangeInfo(),
                        16.verticalSpaceFromWidth,
                        _buildPremiumFeatures(),
                        16.verticalSpaceFromWidth,
                      ],
                    ),
                  ),
                ),
                _buildBottomSection(),
              ],
            ),
          ),
        ],
      ),
    );
  }

  // 顶部标题栏
  Widget _buildAppBar() {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 20.w, vertical: 12.h),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          SizedBox(width: 32.w),
          Text(
            'Subscription',
            style: TextStyle(
              fontSize: 16.sp,
              height: 1.4,
              fontWeight: FontWeight.w500,
              color: Colors.white,
            ),
          ),
          GestureDetector(
            onTap: () => Get.back(),
            child: Container(
              width: 24.w,
              height: 24.w,
              decoration: BoxDecoration(
                color: Colors.white.withValues(alpha: 0.1),
                shape: BoxShape.circle,
              ),
              child: Icon(Icons.close_rounded, color: Colors.white, size: 16.w),
            ),
          ),
        ],
      ),
    );
  }

  // 当前订阅信息
  Widget _buildCurrentSubscription() {
    return Row(
      children: [
        // 钻石图标
        IXImage(
          source: Assets.subscriptionDiamond,
          width: 92.w,
          height: 80.w,
          sourceType: ImageSourceType.asset,
        ),
        12.horizontalSpace,
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                children: [
                  IXImage(
                    source: Assets.subscriptionWallet,
                    width: 20.w,
                    height: 20.w,
                    sourceType: ImageSourceType.asset,
                  ),
                  4.horizontalSpace,
                  Text(
                    'Current subscription',
                    style: TextStyle(
                      fontSize: 14.sp,
                      height: 1.4,
                      color: DarkThemeColors.subscriptionColor,
                      fontWeight: FontWeight.w700,
                    ),
                  ),
                ],
              ),
              10.verticalSpaceFromWidth,
              Text(
                'Year Plan \$40.00 per year',
                style: TextStyle(
                  fontSize: 14.sp,
                  height: 1.4,
                  color: Colors.white,
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }

  // 订阅计划选项
  Widget _buildPlanOptions() {
    return Obx(
      () => Column(
        children: List.generate(
          controller.plans.length,
          (index) => _buildPlanItem(
            controller.plans[index],
            index,
            controller.selectedPlanIndex.value == index,
          ),
        ),
      ),
    );
  }

  Widget _buildPlanItem(Map<String, dynamic> plan, int index, bool isSelected) {
    final badge = plan['badge'] as String?;
    final badgeBgColor = plan['badgeBgColor'] as Color?;
    final badgeTextColor = plan['badgeTextColor'] as Color?;
    final badgeBorderColor = plan['badgeBorderColor'] as Color?;

    return GestureDetector(
      onTap: () => controller.selectPlan(index),
      child: Container(
        margin: EdgeInsets.only(bottom: 18.w),
        decoration: BoxDecoration(
          color: DarkThemeColors.cardColor,
          borderRadius: BorderRadius.circular(12.r),
          border: Border.all(
            color: isSelected
                ? DarkThemeColors.subscriptionColor
                : DarkThemeColors.dividerColor,
            width: 2.w,
          ),
        ),
        child: Stack(
          clipBehavior: Clip.none,
          children: [
            // 主要内容
            Padding(
              padding: EdgeInsets.all(10.w),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        plan['price'] as String,
                        style: TextStyle(
                          fontSize: 18.sp,
                          height: 1.4,
                          color: DarkThemeColors.bodyTextColor,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                      Text(
                        plan['period'] as String,
                        style: TextStyle(
                          fontSize: 12.sp,
                          height: 1.6,
                          color: DarkThemeColors.hintTextColor,
                        ),
                      ),
                    ],
                  ),
                  Row(
                    children: [
                      Text(
                        plan['title'] as String,
                        style: TextStyle(
                          fontSize: 13.sp,
                          height: 1.4,
                          color: DarkThemeColors.bodyTextColor,
                        ),
                      ),
                      8.horizontalSpace,
                      Container(
                        width: 20.w,
                        height: 20.w,
                        decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          border: Border.all(
                            color: isSelected
                                ? DarkThemeColors.primaryColor
                                : Colors.white30,
                            width: 1.5.w,
                          ),
                          color: isSelected
                              ? DarkThemeColors.primaryColor
                              : Colors.transparent,
                        ),
                        child: isSelected
                            ? Icon(Icons.check, color: Colors.white, size: 12.w)
                            : null,
                      ),
                    ],
                  ),
                ],
              ),
            ),
            // 标签固定在右上角，压在边框线上
            if (badge != null)
              Positioned(
                top: -11.h, // 负值让标签向上移动，压在边框线上
                right: 12.w,
                child: Container(
                  padding: EdgeInsets.symmetric(horizontal: 6.w),
                  decoration: BoxDecoration(
                    color: badgeBgColor ?? Colors.black,
                    borderRadius: BorderRadius.circular(4.r),
                    border: badgeBorderColor != null
                        ? Border.all(color: badgeBorderColor, width: 1)
                        : null,
                  ),
                  child: Text(
                    badge,
                    style: TextStyle(
                      fontSize: 12.sp,
                      color: badgeTextColor ?? Colors.white,
                      height: 1.6,
                    ),
                  ),
                ),
              ),
          ],
        ),
      ),
    );
  }

  // 计划变更信息
  Widget _buildPlanChangeInfo() {
    return InfoCard(
      title: 'Plan change info',
      items: [
        InfoItem(
          imageSource: Assets.subscriptionPlanChange1,
          title: 'When it starts',
          description: 'Your new plan begins right away.',
          iconColor: DarkThemeColors.primaryColor,
        ),
        InfoItem(
          imageSource: Assets.subscriptionPlanChange2,
          title: 'What happens to your balance',
          description:
              'Any unused amount from your old plan will be added to the new one.',
          iconColor: DarkThemeColors.primaryColor,
        ),
        InfoItem(
          imageSource: Assets.subscriptionPlanChange3,
          title: 'Extra time',
          description:
              'You\'ll get extra days based on your remaining balance.',
          iconColor: DarkThemeColors.primaryColor,
        ),
      ],
    );
  }

  // Premium 功能列表
  Widget _buildPremiumFeatures() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'Premium\'s included',
          style: TextStyle(
            fontSize: 16.sp,
            color: DarkThemeColors.subscriptionColor,
            fontWeight: FontWeight.w500,
          ),
        ),
        16.verticalSpace,
        Container(
          padding: EdgeInsets.symmetric(vertical: 4.w, horizontal: 10.w),
          decoration: BoxDecoration(
            color: DarkThemeColors.bgDisable,
            borderRadius: BorderRadius.circular(12.r),
          ),
          child: Column(
            children: [
              _buildFeatureItem(IconFont.icon60, 'Unlock all free locations'),
              _buildFeatureItem(IconFont.icon61, 'Unlock smart mode'),
              _buildFeatureItem(IconFont.icon62, 'Unlock Multi-hop mode'),
              _buildFeatureItem(IconFont.icon63, 'Premium can share X devices'),
              _buildFeatureItem(IconFont.icon64, 'Own your own private server'),
              _buildFeatureItem(IconFont.icon65, 'Close ads'),
            ],
          ),
        ),
      ],
    );
  }

  Widget _buildFeatureItem(IconData icon, String title) {
    return SizedBox(
      height: 44.w,
      child: Row(
        children: [
          Icon(icon, color: DarkThemeColors.subscriptionColor, size: 24.w),
          12.horizontalSpace,
          Expanded(
            child: Text(
              title,
              style: TextStyle(
                fontSize: 13.sp,
                color: Get.reactiveTheme.hintColor,
              ),
            ),
          ),
          Container(
            width: 20.w,
            height: 20.w,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: DarkThemeColors.subscriptionSelectColor,
            ),
            child: Icon(Icons.check, color: Colors.white, size: 12.w),
          ),
        ],
      ),
    );
  }

  // 底部按钮区域
  Widget _buildBottomSection() {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 10.w, horizontal: 14.w),
      decoration: BoxDecoration(
        border: Border(
          top: BorderSide(color: Colors.white.withOpacity(0.1), width: 1),
        ),
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          // 确认按钮
          GestureDetector(
            onTap: controller.confirmChange,
            child: Container(
              width: double.infinity,
              height: 48.h,
              decoration: BoxDecoration(
                color: DarkThemeColors.backgroundColor,
                borderRadius: BorderRadius.circular(12.r),
              ),
              child: Center(
                child: Text(
                  'Confirm Change',
                  style: TextStyle(
                    fontSize: 16.sp,
                    color: DarkThemeColors.subscriptionColor,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ),
            ),
          ),
          14.verticalSpaceFromWidth,
          // 底部链接
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              GestureDetector(
                onTap: controller.restorePurchases,
                child: Text(
                  'Restore Purchases',
                  style: TextStyle(
                    fontSize: 16.sp,
                    color: DarkThemeColors.bodyTextColor,
                  ),
                ),
              ),
              Text(
                '  |  ',
                style: TextStyle(
                  fontSize: 16.sp,
                  color: DarkThemeColors.hintTextColor,
                ),
              ),
              GestureDetector(
                onTap: controller.handlePaymentIssue,
                child: Text(
                  'Payment issue',
                  style: TextStyle(
                    fontSize: 16.sp,
                    color: DarkThemeColors.bodyTextColor,
                  ),
                ),
              ),
            ],
          ),
          14.verticalSpaceFromWidth,
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              IXImage(
                source: Assets.subscriptionGreenShield,
                width: 20.w,
                height: 20.w,
                sourceType: ImageSourceType.asset,
              ),
              10.horizontalSpace,
              Text(
                'Yearly auto-renew. Cancel anytime',
                style: TextStyle(
                  fontSize: 13.sp,
                  color: DarkThemeColors.hintTextColor,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}