import 'package:clean/base/base_page.dart';
import 'package:clean/module/screenshots_blurry/screenshots_controller.dart';
import 'package:clean/resource/assets.gen.dart';
import 'package:clean/router/app_pages.dart';
import 'package:flutter/Material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:wechat_assets_picker/wechat_assets_picker.dart';

class ScreenshotsPage extends BasePage<ScreenShotsController> {
  const ScreenshotsPage({super.key});

  static void start(String titleName) {
    Get.toNamed(RoutePath.screenshots, arguments: {
      "titleName": titleName,
    });
  }

  @override
  bool statusBarDarkFont() {
    return false;
  }

  @override
  bool immersive() {
    return true;
  }

  @override
  Widget buildBody(BuildContext context) {
    return Stack(children: [
      Container(
        child: SafeArea(
          child: Column(
            children: [
              _titleCard(),
              // Photo groups
              Expanded(
                child: Obx(() {
                  return SizedBox(
                    child: GridView.builder(
                        padding: EdgeInsets.symmetric(horizontal: 16.w),
                        scrollDirection: Axis.vertical,
                        // 设置为垂直方向滚动
                        physics: BouncingScrollPhysics(),
                        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: 3, // 每行显示 2 个元素
                          mainAxisSpacing: 8.w, // 垂直间距
                          crossAxisSpacing: 8.h, // 水平间距
                        ),
                        itemCount: controller.photoGroups[0].imageCount,
                        itemBuilder:
                            _buildPhotoItem(controller.photoGroups[0].title)),
                  );
                }),
              ),

              _bottomBarCard(),
              SizedBox(height: 8.h),
            ],
          ),
        ),
      ),
      IgnorePointer(
        child: Assets.images.bgHome.image(
          width: 360.w,
          height: 234.h,
        ),
      ),
    ]);
  }

  Widget _titleCard() {
    return Container(
      alignment: Alignment.centerLeft,
      padding: EdgeInsets.only(left: 16.w, top: 14.h, right: 16.w),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              GestureDetector(
                onTap: () => Get.back(),
                child: Assets.images.iconBackArrow.image(
                  width: 28.w,
                  height: 28.h,
                ),
              ),
              GestureDetector(
                onTap: () => controller
                    .toggleGroupSelection(controller.photoGroups[0].title),
                child: Obx(() => Text(
                      controller.photoGroups
                              .firstWhere((g) =>
                                  g.title == controller.photoGroups[0].title)
                              .isSelected
                              .value
                          ? 'Deselect All'
                          : 'Select All',
                      style: TextStyle(
                        color: Colors.white.withValues(alpha: 0.7),
                        fontSize: 14.sp,
                        fontWeight: FontWeight.w400,
                      ),
                    )),
              ),
            ],
          ),
          SizedBox(height: 12.h),
          Text(
            controller.titleName,
            style: TextStyle(
              color: Colors.white,
              fontSize: 24.sp,
              fontWeight: FontWeight.w700,
            ),
          ),
          SizedBox(height: 20.h),
        ],
      ),
    );
  }

  Widget _bottomBarCard() {
    return Container(
      width: 328.w,
      height: 48.h,
      decoration: ShapeDecoration(
        color: Color(0xFF0279FB),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10.r),
        ),
      ),
      padding: EdgeInsets.symmetric(horizontal: 16.w),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Assets.images.iconDelete.image(
            width: 18.w,
            height: 18.h,
          ),
          SizedBox(width: 5.w),
          Obx(() {
            return Text(
              '${controller.selectedFileCount.value} files selected (${controller.selectedFilesSize.value.toStringAsFixed(1)} KB)',
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.white,
                fontSize: 16.sp,
                fontWeight: FontWeight.w500,
              ),
            );
          }),
        ],
      ),
    );
  }

  Widget Function(BuildContext, int) _buildPhotoItem(String title) =>
      (context, index) {
        final group =
            controller.photoGroups.firstWhere((group) => group.title == title);
        final assetEntity = group.images[index];

        return GestureDetector(
          onTap: () => controller.clickImage(title, index),
          child: Obx(() {
            final isSelected = group.selectedImages[index];
            return Stack(
              children: [
                Container(
                  width: 104.w,
                  height: 104.w,
                  decoration: ShapeDecoration(
                    color: Colors.white.withValues(alpha: 0.12),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(9.27.sp),
                    ),
                    image: DecorationImage(
                      image: AssetEntityImageProvider(assetEntity),
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                Positioned(
                  right: 8.w,
                  bottom: 8.h,
                  child: GestureDetector(
                      onTap: () =>
                          controller.toggleImageSelection(title, index),
                      child: Container(
                    child: isSelected
                        ? Center(
                            child: Assets.images.iconSelected.image(
                              width: 20.w,
                              height: 20.h,
                            ),
                          )
                        : Center(
                            child: Assets.images.iconUnselected.image(
                            width: 20.w,
                            height: 20.h,
                          )),
                  )),
                ),
              ],
            );
          }),
        );
      };

  Widget _noNoPicturesCard() {
    return Column(
      children: [
        _titleCard(),
        Expanded(
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Container(
                  width: 70.w,
                  height: 70.h,
                  clipBehavior: Clip.antiAlias,
                  decoration: BoxDecoration(),
                  child: Assets.images.iconNoPictures.image(),
                ),
                SizedBox(height: 22.h),
                Text(
                  'No pictures found',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 20.sp,
                    fontWeight: FontWeight.w700,
                  ),
                ),
                SizedBox(height: 12.h),
                Text(
                  'No pictures available at the moment',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    color: Colors.white.withValues(alpha: 0.6),
                    fontSize: 14.sp,
                    fontWeight: FontWeight.w400,
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}