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

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

import '../../../constants/assets.dart';
import '../../../constants/iconfont/iconfont.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: IXImage(
                source: Assets.mediaBg,
                width: 375.w,
                height: 214.w,
                sourceType: 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: SingleChildScrollView(
                    padding: EdgeInsets.symmetric(horizontal: 16.w),
                    child: Column(
                      children: [
                        20.verticalSpace,

                        // 流媒体服务卡片
                        _buildStreamingServicesCard(),

                        10.verticalSpace,

                        // 功能说明列表
                        _buildFeaturesList(),

                        32.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: [
          // Movies&TV 图标和标题
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(
                IconFont.icon19,
                color: DarkThemeColors.errorColor,
                size: 32.w,
              ),
              4.horizontalSpace,
              Text(
                'Movies&TV',
                style: TextStyle(
                  fontSize: 22.sp,
                  fontWeight: FontWeight.w500,
                  height: 1.3,
                  color: Colors.white,
                ),
              ),
            ],
          ),

          8.verticalSpace,

          // 连接状态
          Obx(() {
            final text = controller.isConnected.value
                ? 'Connected'
                : controller.isConnecting.value
                ? 'Connecting'
                : 'Disconnected';
            final textColor = controller.isConnected.value
                ? DarkThemeColors.text1
                : controller.isConnecting.value
                ? DarkThemeColors.text1
                : DarkThemeColors.text1;
            final statusImgPath = controller.isConnected.value
                ? Assets.connected
                : controller.isConnecting.value
                ? Assets.connecting
                : Assets.disconnected;

            return 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,
                    fontWeight: FontWeight.w500,
                    color: textColor,
                  ),
                ),
              ],
            );
          }),
        ],
      ),
    );
  }

  /// 构建流媒体服务卡片
  Widget _buildStreamingServicesCard() {
    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.streamingServices.length,
        separatorBuilder: (context, index) => Divider(
          height: 1.w,
          thickness: 1.w,
          color: DarkThemeColors.strokes1,
        ),
        itemBuilder: (context, index) {
          final service = controller.streamingServices[index];
          return _buildStreamingServiceItem(service);
        },
      ),
    );
  }

  /// 构建单个流媒体服务项
  Widget _buildStreamingServiceItem(StreamingService service) {
    return ClickOpacity(
      onTap: () => controller.openStreamingService(service),
      child: Container(
        padding: EdgeInsets.all(16.w),
        child: Row(
          children: [
            // Logo
            Container(
              width: 40.w,
              height: 40.w,
              decoration: BoxDecoration(
                color: _getServiceColor(service.name),
                borderRadius: BorderRadius.circular(12.r),
              ),
              child: Center(
                child: Text(
                  service.name[0].toUpperCase(),
                  style: TextStyle(
                    fontSize: 24.sp,
                    fontWeight: FontWeight.bold,
                    color: DarkThemeColors.text1,
                  ),
                ),
              ),
            ),

            10.horizontalSpace,

            // 名称和描述
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    service.name,
                    style: TextStyle(
                      fontSize: 14.sp,
                      height: 1.4,
                      fontWeight: FontWeight.w500,
                      color: DarkThemeColors.text1,
                    ),
                  ),
                  Text(
                    service.description,
                    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(
                'Open',
                style: TextStyle(fontSize: 13.sp, color: DarkThemeColors.text1),
              ),
            ),
          ],
        ),
      ),
    );
  }

  /// 构建功能说明列表
  Widget _buildFeaturesList() {
    return Column(
      children: [
        _buildFeatureItem(
          icon: Icons.favorite_outline,
          iconColor: Colors.red,
          text: 'Access your favorite content',
        ),
        _buildFeatureItem(
          icon: Icons.public,
          iconColor: Colors.blue,
          text: 'Connection from anywhere',
        ),
        _buildFeatureItem(
          icon: Icons.speed,
          iconColor: Colors.purple,
          text: 'Ultra fast servers',
        ),
      ],
    );
  }

  /// 构建单个功能说明项
  Widget _buildFeatureItem({
    required IconData icon,
    required Color iconColor,
    required String text,
  }) {
    return Container(
      decoration: BoxDecoration(
        color: DarkThemeColors.bg3,
        borderRadius: BorderRadius.circular(12.r),
      ),
      height: 40.w,
      margin: EdgeInsets.only(bottom: 10.w),
      padding: EdgeInsets.symmetric(horizontal: 14.w),
      child: Row(
        children: [
          Icon(icon, color: iconColor, size: 20.w),
          10.horizontalSpace,
          Expanded(
            child: Text(
              text,
              style: TextStyle(fontSize: 13.sp, color: DarkThemeColors.text2),
            ),
          ),
        ],
      ),
    );
  }

  /// 构建底部连接按钮
  Widget _buildConnectButton() {
    return Padding(
      padding: EdgeInsets.all(16.w),
      child: Obx(() {
        return SubmitButton(
          text: controller.isConnected.value
              ? 'Disconnect'
              : controller.isConnecting.value
              ? 'Connecting...'
              : 'Connect',
          onPressed: controller.isConnected.value
              ? controller.disconnect
              : controller.connect,
          isLoading: controller.isConnecting.value,
          bgColor: controller.isConnected.value
              ? Colors.red
              : DarkThemeColors.primaryColor,
        );
      }),
    );
  }

  /// 获取服务颜色
  Color _getServiceColor(String serviceName) {
    switch (serviceName.toLowerCase()) {
      case 'netflix':
        return const Color(0xFFE50914);
      case 'youtube':
        return const Color(0xFFFF0000);
      case 'hulu':
        return const Color(0xFF1CE783);
      case 'amazon':
        return const Color(0xFF00A8E1);
      default:
        return DarkThemeColors.primaryColor;
    }
  }
}