nomo/lib/app/modules/home/views/home_view.dart

import 'dart:io';

import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart' hide ConnectionState;
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:nomo/app/constants/iconfont/iconfont.dart';
import 'package:pull_to_refresh_flutter3/pull_to_refresh_flutter3.dart';
import '../../../../config/theme/theme_extensions/theme_extension.dart';
import '../../../../config/translations/strings_enum.dart';
import '../../../base/base_view.dart';
import '../../../constants/assets.dart';
import '../../../routes/app_pages.dart';
import '../../../widgets/click_opacity.dart';
import '../../../widgets/country_icon.dart';
import '../../../widgets/ix_image.dart';
import '../widgets/connection_button.dart';
import '../controllers/home_controller.dart';

import '../widgets/menu_list.dart';

class HomeView extends BaseView<HomeController> {
  const HomeView({super.key});

  @override
  bool get isPopScope => true;

  @override
  Widget buildContent(BuildContext context) {
    return SafeArea(
      child: Container(
        margin: EdgeInsets.symmetric(horizontal: 14.w),
        child: Stack(
          children: [
            Column(
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Obx(
                      () => ClickOpacity(
                        onTap: () => Get.toNamed(Routes.SUBSCRIPTION),
                        child: IXImage(
                          source: controller.isPremium
                              ? Assets.premium
                              : Assets.free,
                          width: controller.isPremium ? 92.w : 64.w,
                          height: 28.w,
                          sourceType: ImageSourceType.asset,
                        ),
                      ),
                    ),
                    ClickOpacity(
                      child: Padding(
                        padding: EdgeInsets.only(
                          left: 10.w,
                          right: 0.w,
                          top: 10.w,
                          bottom: 10.w,
                        ),
                        child: Icon(
                          IconFont.icon09,
                          size: 26.w,
                          color: Get.reactiveTheme.hintColor,
                        ),
                      ),
                      onTap: () {
                        Get.toNamed(Routes.SETTING);
                        // ErrorDialog.show(
                        //   message:
                        //       "The VPN was disconnected unexpectedly. Would you like to reconnect now to stay protected?",
                        // );
                      },
                    ),
                  ],
                ),

                Expanded(
                  child: SmartRefresher(
                    enablePullDown: true,
                    enablePullUp: false,
                    controller: controller.refreshController,
                    onRefresh: controller.onRefresh,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        // 80.verticalSpaceFromWidth,
                        Padding(
                          padding: EdgeInsets.symmetric(vertical: 20.w),
                          child: CarouselSlider(
                            options: CarouselOptions(
                              height: 80.w,
                              viewportFraction: 1.0,
                            ),
                            items: [1, 2, 3, 4, 5].map((i) {
                              return Builder(
                                builder: (BuildContext context) {
                                  return IXImage(
                                    source: Assets.bannerTest,
                                    width: double.infinity,
                                    height: 80.w,
                                    sourceType: ImageSourceType.asset,
                                    borderRadius: 14.r,
                                  );
                                },
                              );
                            }).toList(),
                          ),
                        ),
                        Text(
                          Strings.activeTime.tr,
                          style: TextStyle(
                            fontSize: 18.sp,
                            height: 1.3,
                            color: Get.reactiveTheme.hintColor,
                          ),
                        ),
                        2.verticalSpaceFromWidth,
                        Obx(
                          () => Text(
                            controller.coreController.timer,
                            style: TextStyle(
                              fontSize: 28.sp,
                              height: 1.2,
                              color: Get.reactiveTheme.primaryColor,
                            ),
                          ),
                        ),

                        20.verticalSpaceFromWidth,
                        // 位置选择按钮和最近位置（叠在一起的效果）
                        Stack(
                          children: [
                            Container(
                              alignment: Alignment.center,
                              margin: EdgeInsets.only(top: 138.w),
                              child: _buildConnectionButton(),
                            ),
                            _buildLocationStack(),
                          ],
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
            Positioned(
              bottom: Platform.isAndroid ? 10.w : 0,
              left: 0,
              right: 0,
              child: MenuList(),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildConnectionButton() {
    return Obx(
      () => ConnectionButton(
        state: controller.coreController.state,
        onTap: () {
          controller.coreController.handleConnection();
        },
      ),
    );
  }

  /// 构建位置堆叠效果（选中位置 + 最近位置）
  Widget _buildLocationStack() {
    return Obx(() {
      if (controller.selectedLocation == null) {
        return const SizedBox.shrink();
      }

      return Stack(
        children: [
          // 最近位置列表（背景层）
          if (controller.recentLocations.isNotEmpty)
            _buildRecentLocationsCard(),
          // 选中位置（前景层）
          _buildSelectedLocationCard(),
        ],
      );
    });
  }

  /// 构建选中位置卡片
  Widget _buildSelectedLocationCard() {
    return GestureDetector(
      onTap: () {
        Get.toNamed(Routes.NODE);
      },
      child: Obx(() {
        return Container(
          height: 56.w,
          width: double.maxFinite,
          padding: EdgeInsets.only(left: 16.w, right: 10.w),
          decoration: BoxDecoration(
            color: Get.reactiveTheme.highlightColor,
            borderRadius: BorderRadius.circular(12.r),
          ),
          child: Row(
            children: [
              // 国旗图标
              CountryIcon(
                countryCode: controller.selectedLocation?.country ?? '',
                width: 32.w,
                height: 24.w,
                borderRadius: 4.r,
              ),

              10.horizontalSpace,

              // 位置名称
              Expanded(
                child: Text(
                  '${controller.selectedLocation?.code ?? ''} - ${controller.selectedLocation?.name ?? ''}',
                  style: TextStyle(
                    fontSize: 16.sp,
                    height: 1.5,
                    fontWeight: FontWeight.w500,
                    color: Get.reactiveTheme.textTheme.bodyLarge!.color,
                  ),
                ),
              ),
              // 箭头图标
              Icon(
                IconFont.icon02,
                size: 20.w,
                color: Get.reactiveTheme.textTheme.bodyLarge!.color,
              ),
            ],
          ),
        );
      }),
    );
  }

  /// 构建最近位置卡片（支持展开/收缩）
  Widget _buildRecentLocationsCard() {
    return Obx(() {
      return Container(
        margin: EdgeInsets.symmetric(horizontal: 10.w),
        padding: EdgeInsets.only(left: 16.w, right: 16.w, top: 56.w, bottom: 0),
        decoration: BoxDecoration(
          color: Get.reactiveTheme.cardColor,
          borderRadius: BorderRadius.circular(12.r),
        ),
        child: Column(
          children: [
            GestureDetector(
              behavior: HitTestBehavior.opaque,
              onTap: () {
                controller.isRecentLocationsExpanded =
                    !controller.isRecentLocationsExpanded;
              },
              child: SizedBox(
                height: 44.w,
                child: Row(
                  children: [
                    Icon(
                      IconFont.icon68,
                      size: 16.w,
                      color: Get.reactiveTheme.hintColor,
                    ),
                    SizedBox(width: 4.w),
                    Text(
                      Strings.recent.tr,
                      style: TextStyle(
                        fontSize: 12.sp,
                        height: 1.2,
                        color: Get.reactiveTheme.hintColor,
                      ),
                    ),
                    const Spacer(),
                    // 最近三个节点的国旗图标（收缩状态）或箭头（展开状态）
                    Obx(() {
                      return AnimatedOpacity(
                        opacity: controller.isRecentLocationsExpanded
                            ? 0.0
                            : 1.0,
                        duration: const Duration(milliseconds: 300),
                        child: IgnorePointer(
                          ignoring: controller.isRecentLocationsExpanded,
                          child: Row(
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              ...controller.recentLocations.take(3).map((
                                location,
                              ) {
                                return Container(
                                  margin: EdgeInsets.only(right: 4.w),
                                  decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(5.r),
                                    border: Border.all(
                                      color: Get.reactiveTheme.canvasColor,
                                      width: 0.4.w,
                                    ),
                                  ),
                                  child: CountryIcon(
                                    countryCode: location.country ?? '',
                                    width: 24.w,
                                    height: 16.w,
                                    borderRadius: 4.r,
                                  ),
                                );
                              }),
                            ],
                          ),
                        ),
                      );
                    }),
                    Obx(() {
                      return AnimatedRotation(
                        turns: controller.isRecentLocationsExpanded
                            ? 0.25
                            : 0.0,
                        duration: const Duration(milliseconds: 300),
                        child: Icon(
                          IconFont.icon02,
                          size: 20.w,
                          color: Get.reactiveTheme.hintColor,
                        ),
                      );
                    }),
                  ],
                ),
              ),
            ),
            // 最近位置列表（可折叠）
            Obx(() {
              return ClipRect(
                child: AnimatedAlign(
                  duration: const Duration(milliseconds: 300),
                  curve: Curves.easeInOut,
                  heightFactor: controller.isRecentLocationsExpanded
                      ? 1.0
                      : 0.0,
                  alignment: Alignment.topLeft,
                  child: AnimatedOpacity(
                    opacity: controller.isRecentLocationsExpanded ? 1.0 : 0.0,
                    duration: const Duration(milliseconds: 300),
                    child: Column(
                      children: controller.recentLocations.map((location) {
                        return ClickOpacity(
                          onTap: () {
                            controller.isRecentLocationsExpanded =
                                !controller.isRecentLocationsExpanded;
                            controller.selectLocation(location);
                            controller.handleConnect();
                          },
                          child: Column(
                            children: [
                              Divider(
                                height: 1,
                                color: Get.reactiveTheme.dividerColor,
                              ),
                              Container(
                                margin: EdgeInsets.symmetric(vertical: 12.h),
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  crossAxisAlignment: CrossAxisAlignment.center,
                                  children: [
                                    // 国旗图标
                                    CountryIcon(
                                      countryCode: location.country ?? '',
                                      width: 28.w,
                                      height: 21.w,
                                      borderRadius: 4.r,
                                    ),
                                    SizedBox(width: 10.w),

                                    // 位置信息
                                    Expanded(
                                      child: Text(
                                        '${location.code} - ${location.name}',
                                        style: TextStyle(
                                          fontSize: 14.sp,
                                          fontWeight: FontWeight.w500,
                                          color: Get.reactiveTheme.hintColor,
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        );
                      }).toList(),
                    ),
                  ),
                ),
              );
            }),
          ],
        ),
      );
    });
  }
}