import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import '../controllers/pairing_controller.dart';
import '../../../core/widgets/common_bottom_nav.dart';
import '../../../core/themes/app_theme.dart';

class PairingView extends GetView<PairingController> {
  const PairingView({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 : Colors.white,
      body: SafeArea(
        child: _buildMainContent(isDarkMode),
      ),
      bottomNavigationBar: Opacity(
        opacity: 0.5,
        child: const CommonBottomNav(currentIndex: 0),
      ),
    );
  }

  // 主要内容
  Widget _buildMainContent(bool isDarkMode) {
    return Container(
      width: double.infinity,
      height: MediaQuery.of(Get.context!).size.height,
      padding: EdgeInsets.symmetric(horizontal: 24.w),
      // 添加SingleChildScrollView以防止溢出
      child: SingleChildScrollView(
        physics: BouncingScrollPhysics(),
        child: ConstrainedBox(
          constraints: BoxConstraints(
            minHeight: MediaQuery.of(Get.context!).size.height - 100.h, // 减去底部导航和状态栏高度
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              SizedBox(height: 20.h), // 顶部间距
              
              // 标题部分
              _buildHeader(isDarkMode),
              
              SizedBox(height: 20.h),
              
              // 设备动画 - 更大尺寸
              _buildDeviceAnimation(),
              
              SizedBox(height: 20.h),
              
              // 状态信息
              _buildStatusInfo(isDarkMode),
              
              SizedBox(height: 40.h),
              
              // 底部按钮
              _buildActionButtons(isDarkMode),
              
              SizedBox(height: 20.h),
            ],
          ),
        ),
      ),
    );
  }

  // 头部标题
  Widget _buildHeader(bool isDarkMode) {
    return Column(
      children: [
        Text(
          'DeepVoice',
          style: TextStyle(
            fontSize: 30.sp,
            fontWeight: FontWeight.bold,
            color: isDarkMode ? Colors.white : Colors.black,
          ),
        ),
        SizedBox(height: 8.h),
        Text(
          '连接世界，超越声音',
          style: TextStyle(
            fontSize: 16.sp,
            color: isDarkMode ? Colors.white60 : Colors.black54,
          ),
        ),
      ],
    );
  }

  // 设备动画
  Widget _buildDeviceAnimation() {
    return Container(
      width: 240.w,
      height: 240.w,
      child: Stack(
        alignment: Alignment.center,
        children: [
          // 脉搏背景 - 更显眼的渐变效果
          TweenAnimationBuilder<double>(
            tween: Tween<double>(begin: 0.8, end: 1.1),
            duration: const Duration(seconds: 2),
            curve: Curves.easeInOut,
            builder: (context, value, child) {
              return Container(
                width: 200.w * value,
                height: 200.w * value,
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                    colors: [
                      Color(0xFF0066CC).withOpacity(0.3),
                      Color(0xFF5E5CE6).withOpacity(0.3),
                    ],
                  ),
                  shape: BoxShape.circle,
                ),
              );
            },
            onEnd: () {
              // 重新开始动画
            },
          ),
          
          // 旋转边框
          SizedBox(
            width: 100.w,
            height: 100.w,
            child: CircularProgressIndicator(
              strokeWidth: 4.w,
              valueColor: AlwaysStoppedAnimation<Color>(
                Color(0xFF0066CC),
              ),
              backgroundColor: Colors.grey.withOpacity(0.2),
            ),
          ),
          
          // 设备图标
          Container(
            width: 120.w,
            height: 120.w,
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                colors: [
                  Color(0xFF0066CC),
                  Color(0xFF5E5CE6),
                ],
              ),
              shape: BoxShape.circle,
            ),
            child: Icon(
              Icons.headphones,
              color: Colors.white,
              size: 60.w,
            ),
          ),
        ],
      ),
    );
  }
  
  // 状态信息
  Widget _buildStatusInfo(bool isDarkMode) {
    return Obx(() {
      final status = controller.statusDescription.value;
      final isLoading = controller.isLoading.value;
      
      return Column(
        children: [
          // 状态文本 - 更大更醒目
          Text(
            status,
            style: TextStyle(
              fontSize: 20.sp,
              fontWeight: FontWeight.w600,
              color: isDarkMode ? Colors.white : Colors.black,
            ),
            textAlign: TextAlign.center,
          ),
          
          SizedBox(height: 10.h),
          
          // 子状态提示文本
          Text(
            '请打开耳机充电盒，将耳机放入您的耳朵',
            style: TextStyle(
              fontSize: 14.sp,
              color: isDarkMode ? Colors.white60 : Colors.grey[600],
            ),
            textAlign: TextAlign.center,
          ),
          
          // 设备列表（有设备时才显示）
          if (controller.connectedDevices.isNotEmpty) ...[
            SizedBox(height: 24.h),
            _buildConnectedDevicesList(isDarkMode),
          ],
        ],
      );
    });
  }
  
  // 已连接设备列表
  Widget _buildConnectedDevicesList(bool isDarkMode) {
    return Obx(() {
      final devices = controller.connectedDevices;
      
      if (devices.isEmpty) {
        return const SizedBox.shrink();
      }
      
      return Container(
        width: double.infinity,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              '当前已连接:',
              style: TextStyle(
                fontSize: 16.sp,
                fontWeight: FontWeight.w600,
                color: isDarkMode ? Colors.white70 : Colors.black87,
              ),
            ),
            SizedBox(height: 8.h),
            ...devices.map((device) => _buildDeviceItem(device, isDarkMode)),
          ],
        ),
      );
    });
  }
  
  // 设备项
  Widget _buildDeviceItem(device, bool isDarkMode) {
    return Container(
      margin: EdgeInsets.only(bottom: 8.h),
      padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 12.h),
      decoration: BoxDecoration(
        color: isDarkMode ? Colors.grey[900] : Colors.grey[100],
        borderRadius: BorderRadius.circular(8.r),
      ),
      child: Row(
        children: [
          Icon(
            Icons.headphones,
            color: isDarkMode ? Colors.white70 : Colors.black54,
            size: 24.w,
          ),
          SizedBox(width: 12.w),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  device.name,
                  style: TextStyle(
                    fontSize: 16.sp,
                    fontWeight: FontWeight.w500,
                    color: isDarkMode ? Colors.white : Colors.black,
                  ),
                ),
                SizedBox(height: 4.h),
                Text(
                  device.address,
                  style: TextStyle(
                    fontSize: 12.sp,
                    color: isDarkMode ? Colors.white54 : Colors.black45,
                  ),
                ),
              ],
            ),
          ),
          Icon(
            Icons.bluetooth_connected,
            color: Colors.green,
            size: 20.w,
          ),
        ],
      ),
    );
  }
  
  // 操作按钮
  Widget _buildActionButtons(bool isDarkMode) {
    return Container(
      width: double.infinity,
      child: Column(
        children: [
          // 主按钮 - 改为更宽的圆角按钮
          ElevatedButton(
            onPressed: () => controller.openBluetoothSettings(),
            style: ElevatedButton.styleFrom(
              backgroundColor: isDarkMode ? Colors.grey[800] : Colors.grey[200],
              foregroundColor: isDarkMode ? Colors.white : Colors.black87,
              padding: EdgeInsets.symmetric(vertical: 16.h),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(16.r),
              ),
              elevation: 0,
              minimumSize: Size(double.infinity, 56.h),
            ),
            child: Text(
              '去系统设置',
              style: TextStyle(
                fontSize: 16.sp,
                fontWeight: FontWeight.w600,
              ),
            ),
          ),
          
          SizedBox(height: 12.h),
          
          // 次要按钮
          TextButton(
            onPressed: () => controller.skipConnecting(),
            style: TextButton.styleFrom(
              foregroundColor: Color(0xFF0066CC),
              padding: EdgeInsets.symmetric(vertical: 12.h),
              minimumSize: Size(double.infinity, 48.h),
            ),
            child: Text(
              '稍后再说',
              style: TextStyle(
                fontSize: 16.sp,
                fontWeight: FontWeight.w500,
              ),
            ),
          ),
        ],
      ),
    );
  }
}