import 'package:clean/base/base_page.dart';
import 'package:clean/module/store/store_controller.dart';
import 'package:clean/utils/expand.dart';
import 'package:flutter/Material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../../resource/assets.gen.dart';

class StorePage extends BasePage<StoreController> {
  const StorePage({super.key});

  @override
  bool immersive() {
    return true;
  }

  @override
  bool statusBarDarkFont() => false;

  @override
  Widget buildBody(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Stack(
        children: [
          IgnorePointer(
            child: Assets.images.bgStore.image(
              width: 360.w,
            ),
          ),
          SafeArea(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Container(
                      margin: EdgeInsets.only(left: 16.w, top: 14.h),
                      child: GestureDetector(
                        onTap: () {
                          Get.back();
                        },
                        child: Assets.images.iconCommonBack
                            .image(width: 28.w, height: 28.w),
                      ),
                    ),
                    Container(
                      margin: EdgeInsets.only(right: 16.w, top: 17.h),
                      child: GestureDetector(
                        onTap: () {
                          Get.back();
                        },
                        child: Text(
                          'Restore',
                          style: TextStyle(
                            color: Colors.white70,
                            fontSize: 14.sp,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
                SizedBox(
                  height: 30.h,
                ),
                // 标题
                Center(
                  child: RichText(
                    text: TextSpan(
                      children: [
                        TextSpan(
                          text: 'CLEAN ',
                          style: TextStyle(
                            color: "#FFDD55".color,
                            fontSize: 20.sp,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        TextSpan(
                          text: 'PRO ',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 20.sp,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        TextSpan(
                          text: 'FREE ',
                          style: TextStyle(
                            color: "#FFDD55".color,
                            fontSize: 20.sp,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        TextSpan(
                          text: 'UP STORAGE',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 20.sp,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                SizedBox(
                  height: 20.h,
                ),
                Center(
                  child: Container(
                    width: 328.w,
                    height: 203.h,
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: Assets.images.bgStoreFunc.provider(),
                        fit: BoxFit.fill,
                      ),
                    ),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        _buildFeatureItem(
                          icon: Assets.images.iconStoreSimilar
                              .image(width: 30.w, height: 30.w),
                          title: 'One-click Remove Similar Photos',
                        ),
                        _buildFeatureItem(
                          icon: Assets.images.iconStoreAi
                              .image(width: 30.w, height: 30.w),
                          title: 'Detect Blurry and Junk Photos',
                        ),
                        _buildFeatureItem(
                          icon: Assets.images.iconStoreContacts
                              .image(width: 30.w, height: 30.w),
                          title: 'Merge Duplicate Contacts',
                        ),
                        _buildFeatureItem(
                          icon: Assets.images.iconStorePremium
                              .image(width: 30.w, height: 30.w),
                          title: 'Premium Unlimited',
                        ),
                      ],
                    ),
                  ),
                ),
                SizedBox(height: 14.h),
                Expanded(
                  child: ListView.builder(
                    itemCount: 3,
                    itemBuilder: (context, index) {
                      return _buildSubscriptionOption(
                        title: '3-DAY FREE TRIAL',
                        price: '\$6.99/week',
                        perDay: 'only \$0.64/day',
                        isSelected: true,
                        showTag: true,
                      );
                    },
                  ),
                ),
                Center(
                  child: Text(
                    'Auto-renewable.Cancel anytime.',
                    style: TextStyle(
                      color: Colors.white.withOpacity(0.8),
                      fontSize: 12.sp,
                    ),
                  ),
                ),
                SizedBox(
                  height: 5.h,
                ),
                Center(
                  child: Container(
                    width: 312.w,
                    height: 48.h,
                    decoration: BoxDecoration(
                      color: "#0279FB".color,
                      borderRadius: BorderRadius.all(
                        Radius.circular(24.r),
                      ),
                    ),
                    child: GestureDetector(
                      child: Center(
                        child: Text(
                          "CONTINUE",
                          style: TextStyle(
                            color: Colors.white,
                            fontWeight: FontWeight.w700,
                            fontSize: 16.sp,
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
                // // 底部链接
                SizedBox(height: 8.h,),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    GestureDetector(
                      child: Text(
                        'Privacy Policy',
                        style: TextStyle(
                          color: Colors.white.withOpacity(0.8),
                          fontSize: 12.sp,
                        ),
                      ),
                      onTap: () {},
                    ),
                    Text(
                      ' | ',
                      style: TextStyle(
                        color: Colors.white.withOpacity(0.8),
                        fontSize: 12.sp,
                      ),
                    ),
                    GestureDetector(
                      child: Text(
                        'User Agreement',
                        style: TextStyle(
                          color: Colors.white.withOpacity(0.8),
                          fontSize: 12.sp,
                        ),
                      ),
                      onTap: () {},
                    ),
                  ],
                ),
                //
                // // 订阅选项
                // _buildSubscriptionOption(
                //   title: '3-DAY FREE TRIAL',
                //   price: '\$6.99/week',
                //   perDay: 'only \$0.64/day',
                //   isSelected: true,
                //   showTag: true,
                // ),
                //
                // _buildSubscriptionOption(
                //   title: '1 Month',
                //   price: '\$19.99',
                //   perDay: 'only \$0.64/day',
                // ),
                //
                // _buildSubscriptionOption(
                //   title: '1 Year',
                //   price: '\$69.99',
                //   perDay: 'only \$0.19/day',
                // ),
                //
                // // 底部文本
                // Padding(
                //   padding: EdgeInsets.symmetric(vertical: 16.h),
                //   child: Center(
                //     child: Text(
                //       'Auto-renewable.Cancel anytime.',
                //       style: TextStyle(
                //         color: Colors.white54,
                //         fontSize: 12.sp,
                //       ),
                //     ),
                //   ),
                // ),
                //
                // // 继续按钮
                // Padding(
                //   padding: EdgeInsets.all(20.w),
                //   child: ElevatedButton(
                //     style: ElevatedButton.styleFrom(
                //       backgroundColor: Colors.blue,
                //       minimumSize: Size(double.infinity, 50.h),
                //       shape: RoundedRectangleBorder(
                //         borderRadius: BorderRadius.circular(25.r),
                //       ),
                //     ),
                //     child: Text(
                //       'CONTINUE',
                //       style: TextStyle(
                //         fontSize: 16.sp,
                //         fontWeight: FontWeight.bold,
                //       ),
                //     ),
                //     onPressed: () {},
                //   ),
                // ),
                //
                // // 底部链接
                // Padding(
                //   padding: EdgeInsets.symmetric(horizontal: 20.w),
                //   child: Row(
                //     mainAxisAlignment: MainAxisAlignment.center,
                //     children: [
                //       TextButton(
                //         child: Text(
                //           'Privacy Policy',
                //           style: TextStyle(color: Colors.white54),
                //         ),
                //         onPressed: () {},
                //       ),
                //       Text(
                //         ' | ',
                //         style: TextStyle(color: Colors.white54),
                //       ),
                //       TextButton(
                //         child: Text(
                //           'User Agreement',
                //           style: TextStyle(color: Colors.white54),
                //         ),
                //         onPressed: () {},
                //       ),
                //     ],
                //   ),
                // ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildFeatureItem({
    required Image icon,
    required String title,
  }) {
    return Row(
      children: [
        SizedBox(width: 15.w),
        icon,
        SizedBox(width: 8.w),
        Text(
          title,
          style: TextStyle(
            color: Colors.white,
            fontSize: 15.sp,
            fontWeight: FontWeight.w500,
          ),
        ),
      ],
    );
  }

  Widget _buildSubscriptionOption({
    required String title,
    required String price,
    required String perDay,
    bool isSelected = false,
    bool showTag = false,
  }) {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 20.w, vertical: 5.h),
      decoration: BoxDecoration(
        color: Colors.white.withOpacity(0.06),
        borderRadius: BorderRadius.circular(14.r),
        border: isSelected ? Border.all(color: Colors.blue, width: 2.w) : null,
      ),
      child: Stack(
        children: [
          Padding(
            padding: EdgeInsets.all(16.w),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      title,
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 16.sp,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    Text(
                      perDay,
                      style: TextStyle(
                        color: Colors.white54,
                        fontSize: 12.sp,
                      ),
                    ),
                  ],
                ),
                Text(
                  price,
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 18.sp,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ],
            ),
          ),
          if (showTag)
            Positioned(
              right: 0,
              top: 0,
              child: Container(
                padding: EdgeInsets.symmetric(
                  horizontal: 8.w,
                  vertical: 4.h,
                ),
                decoration: BoxDecoration(
                  color: Colors.red,
                  borderRadius: BorderRadius.only(
                    topRight: Radius.circular(12.r),
                    bottomLeft: Radius.circular(12.r),
                  ),
                ),
                child: Text(
                  'No payment now!',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 12.sp,
                  ),
                ),
              ),
            ),
        ],
      ),
    );
  }
}