import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
//import 'dart:ui';
import '../controllers/explore_controller.dart';
import '../../../core/widgets/common_bottom_nav.dart';

class ExploreView extends GetView<ExploreController> {
  const ExploreView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final isDarkMode = Theme.of(context).brightness == Brightness.dark;

    return Scaffold(
      backgroundColor: isDarkMode ? Colors.black : Colors.grey[50],
      body: SafeArea(
        child: Column(
          children: [
            // 标题和搜索
            _buildHeaderAndSearch(isDarkMode),

            // 主要内容（可滚动）
            Expanded(
              child: SingleChildScrollView(
                //physics: const BouncingScrollPhysics(),
                child: Padding(
                  padding: EdgeInsets.fromLTRB(16.w, 0, 16.w, 0.h),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      // 特色功能
                      Container(
                        height: 180.h,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(24.r),
                          boxShadow: [
                            BoxShadow(
                              color: Colors.black.withOpacity(0.2),
                              blurRadius: 10,
                              offset: const Offset(0, 4),
                            ),
                          ],
                        ),
                        child: PageView(
                          children: [
                            // _buildFeaturedCard(
                            //   'assets/images/explore1.png',
                            //   'exploreSlogan1'.tr, // 智能陪伴，无限可能
                            //   'exploreAi'.tr, // 探索voitrans提供的AI功能
                            // ),
                            _buildFeaturedCard(
                              'assets/images/explore.png',
                              'exploreSlogan'.tr, // 智能耳机，无限可能
                              'exploreAi'.tr, // 探索voitrans提供的AI功能
                            ),
                            // _buildFeaturedCard(
                            //   'assets/images/explore2.jpg',
                            //   'exploreSlogan2'.tr, // 智能眼镜，无限可能
                            //   'exploreAi'.tr, // 探索voitrans提供的AI功能
                            // ),
                          ],
                        ),
                      ),

                      // AI功能列表
                      SizedBox(height: 24.h),
                      _buildCustomAILayout(isDarkMode),

                      // 热门功能场景
                      SizedBox(height: 24.h),
                      //_buildFunctionScenesSection(isDarkMode),

                      // 新功能推荐
                      SizedBox(height: 24.h),
                      //_buildNewFeatureSection(isDarkMode),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
      bottomNavigationBar: const CommonBottomNav(currentIndex: 1),
    );
  }

  // 标题和搜索
  Widget _buildHeaderAndSearch(bool isDarkMode) {
    return Padding(
      padding: EdgeInsets.all(16.w),
      child: Column(
        children: [
          // 标题和菜单按钮
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                'explore'.tr, // 发现
                style: TextStyle(
                  fontSize: 20.sp,
                  fontWeight: FontWeight.bold,
                  color: isDarkMode ? Colors.white : Colors.grey[800],
                ),
              ),
              Container(
                width: 32.w,
                height: 32.w,
                decoration: BoxDecoration(
                  color: isDarkMode
                      ? Colors.white.withOpacity(0.1)
                      : Colors.grey[200],
                  shape: BoxShape.circle,
                ),
                child: IconButton(
                  icon: Icon(
                    Icons.analytics_outlined,
                    size: 16.sp,
                    color: isDarkMode ? Colors.white : Colors.grey[700],
                  ),
                  padding: EdgeInsets.zero,
                  onPressed: controller.goToUsageStats,
                ),
              ),
            ],
          ),

          // // 搜索框
          // SizedBox(height: 16.h),
          // Container(
          //   decoration: BoxDecoration(
          //     color:
          //         isDarkMode ? Colors.white.withOpacity(0.1) : Colors.grey[100],
          //     borderRadius: BorderRadius.circular(12.r),
          //   ),
          //   child: TextField(
          //     controller: controller.searchController,
          //     decoration: InputDecoration(
          //       hintText: 'searchAi'.tr, // 搜索AI功能...
          //       hintStyle: TextStyle(
          //         fontSize: 14.sp,
          //         color: isDarkMode ? Colors.grey[400] : Colors.grey[400],
          //       ),
          //       prefixIcon: Icon(
          //         Icons.search,
          //         size: 20.sp,
          //         color: isDarkMode ? Colors.grey[400] : Colors.grey[400],
          //       ),
          //       border: InputBorder.none,
          //       contentPadding: EdgeInsets.symmetric(vertical: 12.h),
          //     ),
          //     textInputAction: TextInputAction.search,
          //     onSubmitted: (_) => controller.search(),
          //     style: TextStyle(
          //       color: isDarkMode ? Colors.white : Colors.black,
          //     ),
          //   ),
          // ),
        ],
      ),
    );
  }

  // 特色功能卡片
  Widget _buildFeaturedCard(String image, String title, String description) {
    return Stack(
      children: [
        // 背景图片
        ClipRRect(
          borderRadius: BorderRadius.circular(24.r),
          child: Container(
            color: Colors.blue.shade900, // 预设颜色，图片加载失败时显示
            child: Image.asset(
              image,
              width: double.infinity,
              height: 180.h,
              fit: BoxFit.cover,
              errorBuilder: (context, error, stackTrace) {
                return Container(
                  color: Colors.blue.shade900,
                  width: double.infinity,
                  height: 180.h,
                  child: Icon(
                    Icons.image_not_supported,
                    color: Colors.white,
                    size: 40.sp,
                  ),
                );
              },
            ),
          ),
        ),

        // 渐变遮罩
        Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(24.r),
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [
                Colors.black.withOpacity(0.1),
                Colors.black.withOpacity(0.6),
              ],
            ),
          ),
        ),

        // 文本内容
        Positioned(
          bottom: 0,
          left: 0,
          right: 0,
          child: Padding(
            padding: EdgeInsets.all(24.w),
            child: Column(
              mainAxisSize: MainAxisSize.min, // 使用最小尺寸，避免占用过多空间
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // 标题文本 - 支持多行显示
                Text(
                  title,
                  style: TextStyle(
                    fontSize: 22.sp,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                    height: 1.2, // 设置行高，提升多行文本可读性
                  ),
                  softWrap: true, // 启用软换行
                  overflow: TextOverflow.visible, // 确保文本完全显示
                ),
                SizedBox(height: 6.h), // 稍微增加间距，适应多行布局
                // 描述文本 - 支持多行显示
                Text(
                  description,
                  style: TextStyle(
                    fontSize: 14.sp,
                    color: Colors.white.withOpacity(0.8),
                    height: 1.3, // 设置行高，提升多行文本可读性
                  ),
                  softWrap: true, // 启用软换行
                  overflow: TextOverflow.visible, // 确保文本完全显示
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }

  // 自定义AI功能布局：2x2网格，商务会议助手占据下方两个网格位置
  Widget _buildCustomAILayout(bool isDarkMode) {
    // 找到AI全能助手
    final aiAssistantIndex = controller.aiFeatures.indexWhere(
      (feature) => feature.agentId == 'personal_assistant',
    );

    // 找到同声传译
    final translationIndex = controller.aiFeatures.indexWhere(
      (feature) => feature.agentId == 'simultaneous_interpreter',
    );

    // 找到商务会议助手（在aiFeaturesWide中）
    final meetingFeature = controller.aiFeaturesWide.isNotEmpty
        ? controller.aiFeaturesWide.first
        : null;

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'aiFunction'.tr, // AI功能
          style: TextStyle(
            fontSize: 18.sp,
            fontWeight: FontWeight.w600,
            color: isDarkMode ? Colors.white : Colors.grey[800],
          ),
        ),
        SizedBox(height: 16.h),

        // 2x2网格布局
        Column(
          children: [
            // 上层：AI全能助手（左）和同声传译（右）
            Row(
              children: [
                // 左上角：AI全能助手
                if (aiAssistantIndex != -1)
                  Expanded(
                    child: AspectRatio(
                      aspectRatio: 1.0, // 正方形
                      child: _buildAIFeatureItem(
                        controller.aiFeatures[aiAssistantIndex],
                        aiAssistantIndex,
                        isDarkMode,
                      ),
                    ),
                  ),

                SizedBox(width: 16.w),

                // 右上角：同声传译
                if (translationIndex != -1)
                  Expanded(
                    child: AspectRatio(
                      aspectRatio: 1.0, // 正方形
                      child: _buildAIFeatureItem(
                        controller.aiFeatures[translationIndex],
                        translationIndex,
                        isDarkMode,
                      ),
                    ),
                  ),
              ],
            ),

            SizedBox(height: 16.h),

            // 下层：商务会议助手（横跨整行）
            if (meetingFeature != null)
              AspectRatio(
                aspectRatio: 2.0, // 宽高比2:1，横跨两个网格位置
                child: _buildAIFeatureItemWideForMeeting(
                  meetingFeature,
                  0, // 使用固定索引，因为这是aiFeaturesWide中的项目
                  isDarkMode,
                ),
              ),
          ],
        ),
      ],
    );
  }

  // AI功能项
  Widget _buildAIFeatureItem(AIFeature feature, int index, bool isDarkMode) {
    return GestureDetector(
      onTap: () => controller.onAIFeatureTap(index),
      child: Container(
        padding: EdgeInsets.all(20.w),
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [
              feature.startColor.withOpacity(isDarkMode ? 0.3 : 0.3),
              feature.endColor.withOpacity(isDarkMode ? 0.3 : 0.3),
            ],
          ),
          borderRadius: BorderRadius.circular(20.r),
          boxShadow: [
            BoxShadow(
              color: isDarkMode
                  ? Colors.black.withOpacity(0.2)
                  : Colors.grey.withOpacity(0.1),
              blurRadius: 8,
              offset: const Offset(0, 4),
            ),
          ],
        ),
        child: Stack(
          children: [
            // 图标圆圈
            Align(
              alignment: Alignment.topLeft,
              child: Container(
                width: 48.w,
                height: 48.w,
                decoration: BoxDecoration(
                  color: feature.iconColor.withOpacity(0.2),
                  shape: BoxShape.circle,
                ),
                child: Icon(
                  feature.icon,
                  size: 24.sp,
                  color: feature.iconColor,
                ),
              ),
            ),
            // 文本内容
            Padding(
              padding: EdgeInsets.only(top: 58.h),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: [
                  // 标题
                  Text(
                    feature.title,
                    style: TextStyle(
                      fontSize: 16.sp,
                      fontWeight: FontWeight.w600,
                      color: isDarkMode ? Colors.white : Colors.grey[800],
                    ),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                  SizedBox(height: 4.h),
                  // 描述
                  Text(
                    feature.description,
                    style: TextStyle(
                      fontSize: 12.sp,
                      color: isDarkMode ? Colors.grey[400] : Colors.grey[600],
                    ),
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

//整行布局
  Widget _buildAIFeaturesWideSection(bool isDarkMode) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // Text(
        //   'aiFunction'.tr, // AI功能
        //   style: TextStyle(
        //     fontSize: 18.sp,
        //     fontWeight: FontWeight.w600,
        //     color: isDarkMode ? Colors.white : Colors.grey[800],
        //   ),
        // ),
        // SizedBox(height: 16.h),
        // 直接使用 Column 包裹宽版卡片
        Column(
          children: controller.aiFeaturesWide.map((feature) {
            return Padding(
              padding: EdgeInsets.only(bottom: 16.h), // 卡片间距
              child: _buildAIFeatureItemWide(
                feature,
                controller.aiFeatures.indexOf(feature),
                isDarkMode,
              ),
            );
          }).toList(),
        ),
      ],
    );
  }

  // AI功能项（宽版本，用于横跨整行的AI全能助手）
  Widget _buildAIFeatureItemWide(
      AIFeature feature, int index, bool isDarkMode) {
    return GestureDetector(
      onTap: () => controller.onAIFeatureTap(index),
      child: Container(
        padding: EdgeInsets.all(20.w),
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [
              feature.startColor.withOpacity(isDarkMode ? 0.3 : 0.3),
              feature.endColor.withOpacity(isDarkMode ? 0.3 : 0.3),
            ],
          ),
          borderRadius: BorderRadius.circular(20.r),
          boxShadow: [
            BoxShadow(
              color: isDarkMode
                  ? Colors.black.withOpacity(0.2)
                  : Colors.grey.withOpacity(0.1),
              blurRadius: 8.w,
              offset: const Offset(0, 4),
            ),
          ],
        ),
        child: Row(
          children: [
            // 图标圆圈
            Container(
              width: 48.w,
              height: 48.w,
              decoration: BoxDecoration(
                color: feature.iconColor.withValues(alpha: 0.2),
                shape: BoxShape.circle,
              ),
              child: Icon(
                feature.icon,
                size: 24.sp,
                color: feature.iconColor,
              ),
            ),
            SizedBox(width: 16.w),
            // 文本内容
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  // 标题
                  Text(
                    feature.title,
                    style: TextStyle(
                      fontSize: 16.sp,
                      fontWeight: FontWeight.w600,
                      color: isDarkMode ? Colors.white : Colors.grey[800],
                    ),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                  SizedBox(height: 4.h),
                  // 描述
                  Text(
                    feature.description,
                    style: TextStyle(
                      fontSize: 12.sp,
                      color: isDarkMode ? Colors.grey[400] : Colors.grey[600],
                    ),
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  // AI功能项（宽版本，专门用于商务会议助手）
  Widget _buildAIFeatureItemWideForMeeting(
      AIFeature feature, int index, bool isDarkMode) {
    return GestureDetector(
      onTap: () => controller.onAIFeatureWideTap(index),
      child: Container(
        padding: EdgeInsets.all(20.w),
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [
              feature.startColor.withValues(alpha: isDarkMode ? 0.3 : 0.3),
              feature.endColor.withValues(alpha: isDarkMode ? 0.3 : 0.3),
            ],
          ),
          borderRadius: BorderRadius.circular(20.r),
          boxShadow: [
            BoxShadow(
              color: isDarkMode
                  ? Colors.black.withValues(alpha: 0.2)
                  : Colors.grey.withValues(alpha: 0.1),
              blurRadius: 8,
              offset: const Offset(0, 4),
            ),
          ],
        ),
        child: Row(
          children: [
            // 图标圆圈
            Container(
              width: 48.w,
              height: 48.w,
              decoration: BoxDecoration(
                color: feature.iconColor.withValues(alpha: 0.2),
                shape: BoxShape.circle,
              ),
              child: Icon(
                feature.icon,
                size: 24.sp,
                color: feature.iconColor,
              ),
            ),
            SizedBox(width: 16.w),
            // 文本内容
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  // 标题
                  Text(
                    feature.title,
                    style: TextStyle(
                      fontSize: 18.sp,
                      fontWeight: FontWeight.w600,
                      color: isDarkMode ? Colors.white : Colors.grey[800],
                    ),
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                  ),
                  SizedBox(height: 4.h),
                  // 描述
                  Text(
                    feature.description,
                    style: TextStyle(
                      fontSize: 14.sp,
                      color: isDarkMode ? Colors.grey[400] : Colors.grey[600],
                    ),
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  // 热门功能场景部分
  Widget _buildFunctionScenesSection(bool isDarkMode) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // Text(
        //   'popularFunction'.tr, // 热门功能场景
        //   style: TextStyle(
        //     fontSize: 18.sp,
        //     fontWeight: FontWeight.w600,
        //     color: isDarkMode ? Colors.white : Colors.grey[800],
        //   ),
        // ),
        // SizedBox(height: 16.h),
        ListView.builder(
          shrinkWrap: true,
          physics: const NeverScrollableScrollPhysics(),
          itemCount: controller.functionScenes.length,
          itemBuilder: (context, index) {
            final scene = controller.functionScenes[index];
            return Padding(
              padding: EdgeInsets.only(bottom: 16.h),
              child: _buildFunctionSceneItem(scene, index, isDarkMode),
            );
          },
        ),
      ],
    );
  }

  // 功能场景项
  Widget _buildFunctionSceneItem(
      FunctionScene scene, int index, bool isDarkMode) {
    return GestureDetector(
      onTap: () => controller.onFunctionSceneTap(index),
      child: Container(
        padding: EdgeInsets.all(16.w),
        decoration: BoxDecoration(
          color: isDarkMode
              ? Colors.white.withValues(alpha: 0.05)
              : Colors.grey[100],
          borderRadius: BorderRadius.circular(16.r),
          boxShadow: [
            BoxShadow(
              color: isDarkMode
                  ? Colors.black.withValues(alpha: 0.2)
                  : Colors.grey.withValues(alpha: 0.1),
              blurRadius: 4,
              offset: const Offset(0, 2),
            ),
          ],
        ),
        child: Row(
          children: [
            // 图标
            Container(
              width: 48.w,
              height: 48.w,
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                  colors: [
                    scene.startColor.withOpacity(isDarkMode ? 0.3 : 0.3),
                    scene.endColor.withOpacity(isDarkMode ? 0.3 : 0.3),
                  ],
                ),
                borderRadius: BorderRadius.circular(12.r),
              ),
              child: Icon(
                scene.icon,
                size: 24.sp,
                color: scene.iconColor,
              ),
            ),
            SizedBox(width: 16.w),

            // 文本内容
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    scene.title,
                    style: TextStyle(
                      fontSize: 16.sp,
                      fontWeight: FontWeight.w600,
                      color: isDarkMode ? Colors.white : Colors.grey[800],
                    ),
                  ),
                  SizedBox(height: 4.h),
                  Text(
                    scene.description,
                    style: TextStyle(
                      fontSize: 12.sp,
                      color: isDarkMode ? Colors.grey[400] : Colors.grey[600],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  // 新功能推荐部分
  Widget _buildNewFeatureSection(bool isDarkMode) {
    return Container(
      padding: EdgeInsets.all(20.w),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: [
            const Color(0xFF9C27B0).withOpacity(isDarkMode ? 0.3 : 0.3),
            const Color(0xFFE91E63).withOpacity(isDarkMode ? 0.3 : 0.3),
          ],
        ),
        borderRadius: BorderRadius.circular(16.r),
        boxShadow: [
          BoxShadow(
            color: isDarkMode
                ? Colors.black.withOpacity(0.2)
                : Colors.grey.withOpacity(0.1),
            blurRadius: 8,
            offset: const Offset(0, 4),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 图标
          Container(
            width: 48.w,
            height: 48.w,
            decoration: BoxDecoration(
              color: const Color(0xFF9C27B0).withOpacity(0.2),
              borderRadius: BorderRadius.circular(12.r),
            ),
            child: Icon(
              Icons.lightbulb_outline,
              size: 24.sp,
              color: const Color(0xFF9C27B0),
            ),
          ),
          SizedBox(height: 16.h),

          // 标题
          Text(
            'aiSinger'.tr, // AI歌手模式
            style: TextStyle(
              fontSize: 20.sp,
              fontWeight: FontWeight.bold,
              color: isDarkMode ? Colors.white : Colors.grey[800],
            ),
          ),
          SizedBox(height: 8.h),

          // 描述
          Text(
            'aiSingerInfo'.tr, // 用你喜欢的歌手声音演唱任何歌曲，甚至是你自己创作的歌曲
            style: TextStyle(
              fontSize: 14.sp,
              color: isDarkMode ? Colors.grey[300] : Colors.grey[600],
            ),
          ),
          SizedBox(height: 16.h),

          // 按钮
          ElevatedButton(
            onPressed: controller.tryNewFeature,
            style: ElevatedButton.styleFrom(
              backgroundColor: isDarkMode
                  ? const Color(0xFF9C27B0)
                  : Colors.white.withOpacity(0.2),
              foregroundColor: Colors.white,
              padding: EdgeInsets.symmetric(horizontal: 20.w, vertical: 10.h),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(12.r),
              ),
            ),
            child: Text(
              'tryNow'.tr, // 立即尝试
              style: TextStyle(
                fontSize: 14.sp,
                fontWeight: FontWeight.w500,
                color: isDarkMode ? Colors.white : Colors.grey[800],
              ),
            ),
          ),
        ],
      ),
    );
  }
}