import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'dart:ui';
import '../controllers/home_controller.dart';
import '../../../core/routes/app_pages.dart';
import '../../../core/routes/app_routes.dart';
import '../../../core/widgets/common_bottom_nav.dart';

// 导入枚举
import '../controllers/home_controller.dart' show ConnectionStatus;

// 呼吸光动画组件
class AnimatedPulsing extends StatefulWidget {
  @override
  _AnimatedPulsingState createState() => _AnimatedPulsingState();
}

class _AnimatedPulsingState extends State<AnimatedPulsing> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);
    _animation = Tween<double>(begin: 0.5, end: 0.8).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Curves.easeInOut,
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (context, child) {
        return Opacity(
          opacity: _animation.value,
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(16.r),
              gradient: RadialGradient(
                colors: [
                  Colors.white.withOpacity(0.3),
                  Colors.transparent,
                ],
                center: Alignment.topRight,
                radius: 0.8,
                stops: [0.0, 1.0],
              ),
            ),
          ),
        );
      },
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final bool isDarkMode = Theme.of(context).brightness == Brightness.dark;
    
    return Scaffold(
      backgroundColor: isDarkMode ? Colors.black : Color(0xFFF9FAFC),
      body: SafeArea(
        child: SingleChildScrollView(
          padding: EdgeInsets.all(16.w),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 顶部标题栏
              _buildAppBar(isDarkMode),
              
              // 顶部图片
              Center(
                child: _buildEarbudsImage(),
              ),
              SizedBox(height: 20.h),
              
              // 设备状态卡片
              _buildDeviceStatusCard(isDarkMode),
              SizedBox(height: 20.h),

              // 热门AI体验
              _buildSectionTitle(isDarkMode),
              SizedBox(height: 16.h),
              _buildPremiumAILayout(),
            ],
          ),
        ),
      ),
      bottomNavigationBar: const CommonBottomNav(currentIndex: 0),
    );
  }

  // 顶部标题栏
  Widget _buildAppBar(bool isDarkMode) {
    return Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
          'DeepVoice',
                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.grey[800] : Colors.grey[200],
                  shape: BoxShape.circle,
                  boxShadow: [
                    BoxShadow(
                      color: Colors.grey.withOpacity(0.2),
                      blurRadius: 4,
                      offset: const Offset(0, 2),
                    ),
                  ],
                ),
                child: IconButton(
            icon: Icon(
              Icons.settings_outlined, 
              size: 16.sp, 
              color: isDarkMode ? Colors.white70 : Colors.grey[600]
            ),
                  padding: EdgeInsets.zero,
                  onPressed: () {
              Get.toNamed(Routes.settings);
                  },
                ),
              ),
            ],
    );
  }

  // 耳机图片
  Widget _buildEarbudsImage() {
    final bool isDarkMode = Get.isDarkMode;
    return Container(
      height: 220.h,
      alignment: Alignment.center,
      child: Image.asset(
        isDarkMode ? 'assets/images/headphone_dark.png' : 'assets/images/headphone_light.png',
        height: 180.h,
        fit: BoxFit.contain,
      ),
    );
  }

  // 设备状态卡片
  Widget _buildDeviceStatusCard(bool isDarkMode) {
    return Container(
      decoration: BoxDecoration(
        color: isDarkMode ? Color(0xFF1A1A1A) : Colors.white,
        borderRadius: BorderRadius.circular(16.r),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(isDarkMode ? 0.05 : 0.1),
            blurRadius: 10,
            offset: const Offset(0, 4),
          ),
        ],
      ),
      padding: EdgeInsets.all(16.w),
      child: Column(
        children: [
          // 状态标题行
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                '设备状态',
                style: TextStyle(
                  fontSize: 14.sp,
                  fontWeight: FontWeight.w500,
                  color: isDarkMode ? Colors.grey[300] : Colors.grey[700],
                ),
              ),
              Obx(() => Row(
                children: [
                  Container(
                    width: 8.w,
                    height: 8.w,
                    decoration: BoxDecoration(
                      color: controller.getConnectionStatusColor(),
                      shape: BoxShape.circle,
                    ),
                  ),
                  SizedBox(width: 4.w),
                  Text(
                    controller.getConnectionStatusText(),
                    style: TextStyle(
                      fontSize: 12.sp,
                      color: controller.getConnectionStatusColor(),
                    ),
                  ),
                  // 添加刷新按钮
                  SizedBox(width: 8.w),
                  InkWell(
                    onTap: controller.refreshDeviceInfo,
                    child: Icon(
                      Icons.refresh,
                      size: 16.sp,
                      color: isDarkMode ? Colors.grey[400] : Colors.grey[600],
                    ),
                  ),
                ],
              )),
            ],
          ),
          
          // 设备信息
          SizedBox(height: 12.h),
          Obx(() {
            // 如果连接失败且有错误信息，显示错误提示
            if (controller.connectionStatus == ConnectionStatus.failed && 
                controller.connectionErrorMsg.isNotEmpty) {
              return Column(
                children: [
                  Container(
                    padding: EdgeInsets.all(8.w),
                    decoration: BoxDecoration(
                      color: isDarkMode ? Colors.red[900]!.withOpacity(0.2) : Colors.red[50],
                      borderRadius: BorderRadius.circular(8.r),
                      border: Border.all(color: isDarkMode ? Colors.red[800]! : Colors.red[200]!),
                    ),
                    child: Row(
                      children: [
                        Icon(
                          Icons.error_outline,
                          color: Colors.red,
                          size: 16.sp,
                        ),
                        SizedBox(width: 8.w),
                        Expanded(
                          child: Text(
                            controller.connectionErrorMsg,
                            style: TextStyle(
                              fontSize: 12.sp,
                              color: isDarkMode ? Colors.red[300] : Colors.red[800],
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                  SizedBox(height: 12.h),
                  // 连接按钮
                  ElevatedButton(
                    onPressed: controller.rescanDevices,
                    style: ElevatedButton.styleFrom(
                      backgroundColor: Colors.blue,
                      foregroundColor: Colors.white,
                      minimumSize: Size(double.infinity, 36.h),
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(8.r),
                      ),
                    ),
                    child: Text('重新连接'),
                  ),
                ],
              );
            }
            
            // 如果正在连接中，显示连接中提示
            if (controller.connectionStatus == ConnectionStatus.connecting) {
              return Container(
                padding: EdgeInsets.symmetric(vertical: 16.h),
                child: Center(
                  child: Column(
                    children: [
                      SizedBox(
                        width: 24.w,
                        height: 24.w,
                        child: CircularProgressIndicator(
                          strokeWidth: 2.w,
                          valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
                        ),
                      ),
                      SizedBox(height: 8.h),
                      Text(
                        '正在连接设备...',
                        style: TextStyle(
                          fontSize: 12.sp,
                          color: Colors.blue,
                        ),
                      ),
                    ],
                  ),
                ),
              );
            }
            
            return controller.isConnected 
              ? Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Expanded(
                          child: Text(
                            '已连接到：${controller.getDeviceName()}',
                            style: TextStyle(
                              fontSize: 12.sp,
                              fontWeight: FontWeight.w500,
                              color: isDarkMode ? Colors.grey[300] : Colors.grey[700],
                            ),
                            overflow: TextOverflow.ellipsis,
                          ),
                        ),
                        Container(
                          padding: EdgeInsets.symmetric(horizontal: 6.w, vertical: 2.h),
                          decoration: BoxDecoration(
                            color: Colors.blue.withOpacity(0.1),
                            borderRadius: BorderRadius.circular(4.r),
                          ),
                          child: Text(
                            '信号: ${controller.getSignalStrength()}',
                            style: TextStyle(
                              fontSize: 10.sp,
                              color: Colors.blue[700],
                            ),
                          ),
                        ),
                      ],
                    ),
                    SizedBox(height: 8.h),
                    Container(
                      padding: EdgeInsets.symmetric(horizontal: 8.w, vertical: 6.h),
                      decoration: BoxDecoration(
                        color: isDarkMode ? Colors.grey[900] : Colors.grey[50],
                        borderRadius: BorderRadius.circular(8.r),
                      ),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            '设备ID：${controller.getDeviceId()}',
                            style: TextStyle(
                              fontSize: 10.sp,
                              color: isDarkMode ? Colors.grey[400] : Colors.grey[500],
                            ),
                          ),
                          SizedBox(height: 4.h),
                          Text(
                            '固件版本：${controller.firmwareVersion}',
                            style: TextStyle(
                              fontSize: 10.sp,
                              color: isDarkMode ? Colors.grey[400] : Colors.grey[500],
                            ),
                          ),
                          SizedBox(height: 4.h),
                          // 显示设备状态（已连接/已配对）
                          Row(
                            children: [
                              Container(
                                padding: EdgeInsets.symmetric(horizontal: 6.w, vertical: 2.h),
                                decoration: BoxDecoration(
                                  color: controller.getConnectionStatusColor().withOpacity(0.1),
                                  borderRadius: BorderRadius.circular(4.r),
                                ),
                                child: Text(
                                  controller.getConnectionStatusText(),
                                  style: TextStyle(
                                    fontSize: 10.sp,
                                    color: controller.getConnectionStatusColor(),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ],
                )
              : Container(
                  padding: EdgeInsets.symmetric(vertical: 8.h),
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    color: isDarkMode ? Colors.grey[900] : Colors.grey[100],
                    borderRadius: BorderRadius.circular(8.r),
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Icon(
                        Icons.bluetooth_disabled,
                        size: 14.sp,
                        color: isDarkMode ? Colors.grey[400] : Colors.grey[700],
                      ),
                      SizedBox(width: 4.w),
                      Text(
                        '未连接设备，点击下方按钮连接',
                        style: TextStyle(
                          fontSize: 12.sp,
                          color: isDarkMode ? Colors.grey[400] : Colors.grey[700],
                        ),
                      ),
                    ],
                  ),
                );
          }),
          
          // 连接按钮（仅在未连接时显示）
          SizedBox(height: 12.h),
          Obx(() {
            if (controller.connectionStatus == ConnectionStatus.disconnected) {
              return ElevatedButton(
                onPressed: controller.rescanDevices,
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.blue,
                  foregroundColor: Colors.white,
                  minimumSize: Size(double.infinity, 36.h),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(8.r),
                  ),
                ),
                child: Text('连接设备'),
              );
            } else {
              return SizedBox();
            }
          }),
        ],
      ),
    );
  }

  // 热门AI体验标题
  Widget _buildSectionTitle(bool isDarkMode) {
    return Row(
      children: [
        Text(
          '热门AI体验',
          style: TextStyle(
            fontSize: 18.sp,
            fontWeight: FontWeight.bold,
            color: isDarkMode ? Colors.white : Colors.grey[800],
          ),
        ),
        SizedBox(width: 8.w),
        Icon(
          Icons.star,
          color: Colors.amber,
          size: 20.w,
        ),
      ],
    );
  }

  // 优质AI体验布局（左1右2）
  Widget _buildPremiumAILayout() {
    final bool isDarkMode = Get.isDarkMode;
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // 左侧大卡片 - AI助理
        Expanded(
          flex: 1,
          child: _buildFeatureCard(
            title: 'AI全能助手',
            description: '24小时专属顾问，解答问题、提供建议',
            icon: Icons.assistant,
            gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [
                Color(0xFF0066CC).withOpacity(0.3),
                Color(0xFF5E5CE6).withOpacity(0.3),
              ],
            ),
            onTap: controller.exploreAIFeatures,
            iconOnTop: true,
            height: 175.h, // 增加高度
            isDarkMode: isDarkMode,
            iconColor: const Color(0xFF0066CC),
          ),
        ),
        
        SizedBox(width: 16.w),
        
        // 右侧两个卡片
        Expanded(
          flex: 1,
          child: Column(
            children: [
              // 右上卡片 - 同声翻译
              _buildFeatureCard(
                title: '同声传译',
                description: '80+语言实时翻译，出国无忧',
                icon: Icons.translate,
                gradient: LinearGradient(
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                  colors: [
                    Color(0xFF4CAF50).withOpacity(0.3),
                    Color(0xFF009688).withOpacity(0.3),
                  ],
                ),
                onTap: controller.openTranslation,
                height: 83.h, // 增加高度
                isDarkMode: isDarkMode,
                iconColor: const Color(0xFF4CAF50),
              ),
              
              SizedBox(height: 5.h), // 减少间距
              
              // 右下卡片 - AI女友
              _buildFeatureCard(
                title: 'AI伴侣',
                description: '懂你心意，温暖陪伴',
                icon: Icons.favorite,
                gradient: LinearGradient(
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                  colors: [
                    Color(0xFFE91E63).withOpacity(0.3),
                    Color(0xFFFF5252).withOpacity(0.3),
                  ],
                ),
                onTap: controller.openAIGirlfriend,
                height: 85.h, // 增加高度
                isDarkMode: isDarkMode,
                iconColor: const Color(0xFFE91E63),
              ),
            ],
          ),
        ),
      ],
    );
  }
  
  // 特性卡片构建方法
  Widget _buildFeatureCard({
    required String title,
    required String description,
    required IconData icon,
    required LinearGradient gradient,
    required VoidCallback onTap,
    double? height,
    bool iconOnTop = false,
    bool isDarkMode = false,
    Color iconColor = Colors.white,
  }) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        height: height ?? 175.h,
        padding: EdgeInsets.all(14.w),
        decoration: BoxDecoration(
          gradient: gradient,
          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: Stack(
          children: [
            // 图标
            if (iconOnTop) 
              // 大卡片布局
              Align(
                alignment: Alignment.topLeft,
                child: Container(
                  width: 45.w,
                  height: 45.w,
                  decoration: BoxDecoration(
                    color: iconColor.withOpacity(0.2),
                    shape: BoxShape.circle,
                  ),
                  child: Icon(
                    icon,
                    color: iconColor,
                    size: 24.w,
                  ),
                ),
              )
            else
              // 小卡片布局 - 图标
              Align(
                alignment: Alignment.topLeft,
                child: Container(
                  width: 34.w,
                  height: 34.w,
                  decoration: BoxDecoration(
                    color: iconColor.withOpacity(0.2),
                    shape: BoxShape.circle,
                  ),
                  child: Icon(
                    icon,
                    color: iconColor,
                    size: 18.w,
                  ),
                ),
              ),
            
            // 文本内容
            if (iconOnTop)
              // 大卡片布局 - 文本
              Padding(
                padding: EdgeInsets.only(top: 55.h),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Text(
                      title,
                      style: TextStyle(
                        color: isDarkMode ? Colors.white : Colors.grey[800],
                        fontSize: 16.sp,
                        fontWeight: FontWeight.bold,
                      ),
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                    ),
                    SizedBox(height: 4.h),
                    Text(
                      description,
                      style: TextStyle(
                        color: isDarkMode ? Colors.grey[400] : Colors.grey[600],
                        fontSize: 12.sp,
                      ),
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                    ),
                  ],
                ),
              )
            else
              // 小卡片布局 - 文本
              Padding(
                padding: EdgeInsets.only(left: 44.w),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Text(
                      title,
                      style: TextStyle(
                        color: isDarkMode ? Colors.white : Colors.grey[800],
                        fontSize: 14.sp,
                        fontWeight: FontWeight.bold,
                      ),
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                    ),
                    SizedBox(height: 2.h),
                    Text(
                      description,
                      style: TextStyle(
                        color: isDarkMode ? Colors.grey[400] : Colors.grey[600],
                        fontSize: 10.sp,
                      ),
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                    ),
                  ],
                ),
              ),
          ],
        ),
      ),
    );
  }
}