nomo/lib/app/modules/medialocation/views/medialocation_view.dart

import 'package:flutter/material.dart' hide Banner;
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:nomo/config/theme/dark_theme_colors.dart';

import '../../../../config/translations/strings_enum.dart';
import '../../../constants/assets.dart';
import '../../../data/models/banner/banner_list.dart';
import '../../../widgets/click_opacity.dart';
import '../../../widgets/ix_image.dart';
import '../../../widgets/submit_btn.dart';
import '../controllers/medialocation_controller.dart';

class MedialocationView extends GetView<MedialocationController> {
  const MedialocationView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: DarkThemeColors.scaffoldBackgroundColor,
      body: Stack(
        children: [
          // 背景图层（只显示顶部214高度）
          Positioned(
            top: 0,
            left: 0,
            right: 0,
            height: 214.w,
            child: ClipRect(
              child: Obx(
                () => IXImage(
                  source: controller.bannerInfoImg.isNotEmpty
                      ? controller.bannerInfoImg
                      : Assets.mediaBg,
                  width: 375.w,
                  height: 214.w,
                  sourceType: controller.bannerInfoImg.isNotEmpty
                      ? ImageSourceType.network
                      : ImageSourceType.asset,
                ),
              ),
            ),
          ),
          // 渐变遮罩层
          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(),
                _buildHeader(),

                // 可滚动内容区域
                Expanded(
                  child: Padding(
                    padding: EdgeInsets.symmetric(horizontal: 14.w),
                    child: Column(
                      children: [
                        20.verticalSpace,
                        // 流媒体服务卡片
                        _buildStreamingServicesCard(),
                      ],
                    ),
                  ),
                ),
                20.verticalSpace,
                // 底部连接按钮
                _buildConnectButton(),
              ],
            ),
          ),
        ],
      ),
    );
  }

  // 顶部标题栏
  Widget _buildAppBar() {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 20.w, vertical: 12.h),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          SizedBox(width: 32.w),
          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 _buildHeader() {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 20.w),
      child: Column(
        children: [
          // 图标和标题
          Obx(
            () => Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                IXImage(
                  source: controller.bannerImg,
                  width: 32.w,
                  height: 32.w,
                  sourceType: ImageSourceType.network,
                ),
                8.horizontalSpace,
                Text(
                  controller.bannerTitle,
                  style: TextStyle(
                    fontSize: 22.sp,
                    fontWeight: FontWeight.w500,
                    height: 1.3,
                    color: Colors.white,
                  ),
                ),
              ],
            ),
          ),

          8.verticalSpace,

          // 连接状态
          Obx(() {
            // 访问 stateStream 以触发 Obx 响应
            final _ = controller.coreController.stateStream.value;
            final text = controller.isConnected
                ? Strings.connected.tr
                : controller.isConnecting
                ? Strings.connecting.tr
                : Strings.disconnected.tr;
            final textColor = controller.isConnected
                ? DarkThemeColors.text1
                : controller.isConnecting
                ? DarkThemeColors.text1
                : DarkThemeColors.text1;
            final statusImgPath = controller.isConnected
                ? Assets.connected
                : controller.isConnecting
                ? Assets.connecting
                : Assets.disconnected;

            return SizedBox(
              height: 20.w,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  IXImage(
                    source: statusImgPath,
                    sourceType: ImageSourceType.asset,
                    width: 14.w,
                    height: 14.w,
                  ),
                  4.horizontalSpace,
                  Text(
                    text,
                    style: TextStyle(
                      fontSize: 14.sp,
                      height: 1.4,
                      fontWeight: FontWeight.w500,
                      color: textColor,
                    ),
                  ),
                ],
              ),
            );
          }),
        ],
      ),
    );
  }

  /// 构建流媒体服务卡片
  Widget _buildStreamingServicesCard() {
    return Obx(() {
      if (controller.bannerList.isEmpty) {
        return const SizedBox.shrink();
      }
      return Container(
        decoration: BoxDecoration(
          color: DarkThemeColors.bg2,
          borderRadius: BorderRadius.circular(12.r),
        ),
        child: ListView.separated(
          shrinkWrap: true,
          physics: const NeverScrollableScrollPhysics(),
          padding: EdgeInsets.zero,
          itemCount: controller.bannerList.length,
          separatorBuilder: (context, index) => Divider(
            height: 1.w,
            thickness: 1.w,
            color: DarkThemeColors.strokes1,
          ),
          itemBuilder: (context, index) {
            final banner = controller.bannerList[index];
            return _buildStreamingServiceItem(banner);
          },
        ),
      );
    });
  }

  /// 构建单个流媒体服务项
  Widget _buildStreamingServiceItem(Banner banner) {
    return ClickOpacity(
      onTap: () => controller.onBannerTap(banner),
      child: Container(
        padding: EdgeInsets.all(16.w),
        child: Row(
          children: [
            // Logo
            ClipRRect(
              borderRadius: BorderRadius.circular(12.r),
              child: IXImage(
                source: banner.img ?? '',
                width: 40.w,
                height: 40.w,
                sourceType: ImageSourceType.network,
              ),
            ),

            10.horizontalSpace,

            // 名称和描述
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    banner.title ?? '',
                    style: TextStyle(
                      fontSize: 14.sp,
                      height: 1.4,
                      fontWeight: FontWeight.w500,
                      color: DarkThemeColors.text1,
                    ),
                  ),
                  if (banner.content != null && banner.content!.isNotEmpty)
                    Text(
                      banner.content!,
                      style: TextStyle(
                        fontSize: 13.sp,
                        height: 1.4,
                        color: DarkThemeColors.text2,
                      ),
                    ),
                ],
              ),
            ),

            16.horizontalSpace,

            // Open 按钮
            Container(
              padding: EdgeInsets.symmetric(horizontal: 10.w, vertical: 4.w),
              decoration: BoxDecoration(
                color: DarkThemeColors.primaryColor,
                borderRadius: BorderRadius.circular(20.r),
              ),
              child: Text(
                Strings.open.tr,
                style: TextStyle(fontSize: 13.sp, color: DarkThemeColors.text1),
              ),
            ),
          ],
        ),
      ),
    );
  }

  /// 构建底部连接按钮
  Widget _buildConnectButton() {
    return Padding(
      padding: EdgeInsets.all(16.w),
      child: Obx(() {
        // 访问 stateStream 以触发 Obx 响应
        final _ = controller.coreController.stateStream.value;
        return SubmitButton(
          text: controller.isConnected
              ? Strings.disconnect.tr
              : controller.isConnecting
              ? Strings.connecting.tr
              : Strings.connect.tr,
          onPressed: controller.isConnected
              ? controller.disconnect
              : controller.connect,
          isLoading: controller.isConnecting,
          bgColor: controller.isConnected
              ? Colors.red
              : DarkThemeColors.primaryColor,
        );
      }),
    );
  }
}