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

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

  Widget _buildStatusWidget() {
    return Obx(() {
      switch (controller.connectStatus) {
        case ConnectStatus.searching:
          return Column(
            children: [
              Text(
                'searching'.tr + controller.searchDots,
                style: TextStyle(
                  fontSize: 16.sp,
                  color: Colors.grey[600],
                ),
              ),
              Text(
                'searching_hint'.tr,
                style: TextStyle(
                  fontSize: 14.sp,
                  color: Colors.grey[400],
                  height: 2,
                ),
              ),
            ],
          );
        case ConnectStatus.connected:
          return Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(
                    Icons.check_circle,
                    color: Colors.green,
                    size: 20.sp,
                  ),
                  SizedBox(width: 8.w),
                  Text(
                    'connected'.tr,
                    style: TextStyle(
                      fontSize: 16.sp,
                      color: Colors.green,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                ],
              ),
              Text(
                'device_ready'.tr,
                style: TextStyle(
                  fontSize: 14.sp,
                  color: Colors.grey[400],
                  height: 2,
                ),
              ),
            ],
          );
        case ConnectStatus.failed:
          return Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(
                    Icons.error,
                    color: Colors.red[400],
                    size: 20.sp,
                  ),
                  SizedBox(width: 8.w),
                  Text(
                    'connection_failed'.tr,
                    style: TextStyle(
                      fontSize: 16.sp,
                      color: Colors.red[400],
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                ],
              ),
              SizedBox(height: 12.h),
              Text(
                'connection_failed_hint'.tr,
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 14.sp,
                  color: Colors.grey[500],
                  height: 1.8,
                ),
              ),
            ],
          );
        default:
          return const SizedBox.shrink();
      }
    });
  }

  Widget _buildActionButton() {
    return Obx(() {
      switch (controller.connectStatus) {
        case ConnectStatus.searching:
          return Container(
            width: double.infinity,
            height: 56.h,
            margin: EdgeInsets.symmetric(horizontal: 20.w),
            decoration: BoxDecoration(
              color: Colors.grey[100],
              borderRadius: BorderRadius.circular(28.r),
            ),
            child: Center(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  SizedBox(
                    width: 20.w,
                    height: 20.w,
                    child: const CircularProgressIndicator(
                      strokeWidth: 2,
                      valueColor: AlwaysStoppedAnimation<Color>(Color(0xFF4A6FE5)),
                    ),
                  ),
                  SizedBox(width: 12.w),
                  Text(
                    'searching'.tr,
                    style: TextStyle(
                      fontSize: 18.sp,
                      fontWeight: FontWeight.w600,
                      color: Colors.grey[400],
                    ),
                  ),
                ],
              ),
            ),
          );
        case ConnectStatus.failed:
          return TextButton(
            onPressed: controller.retryConnect,
            style: TextButton.styleFrom(
              padding: EdgeInsets.symmetric(horizontal: 40.w, vertical: 12.h),
              backgroundColor: Colors.blue[50],
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(28.r),
              ),
            ),
            child: Text(
              'retry'.tr,
              style: TextStyle(
                fontSize: 18.sp,
                color: const Color(0xFF4A6FE5),
                fontWeight: FontWeight.w600,
              ),
            ),
          );
        case ConnectStatus.connected:
          return Container(
            width: double.infinity,
            height: 56.h,
            margin: EdgeInsets.symmetric(horizontal: 20.w),
            decoration: BoxDecoration(
              gradient: const LinearGradient(
                colors: [Color(0xFF4CAF50), Color(0xFF66BB6A)],
                begin: Alignment.centerLeft,
                end: Alignment.centerRight,
              ),
              borderRadius: BorderRadius.circular(28.r),
              boxShadow: [
                BoxShadow(
                  color: const Color(0xFF4CAF50).withOpacity(0.3),
                  offset: const Offset(0, 4),
                  blurRadius: 12,
                ),
              ],
            ),
            child: Material(
              color: Colors.transparent,
              child: InkWell(
                onTap: controller.disconnectDevice,
                borderRadius: BorderRadius.circular(28.r),
                child: Center(
                  child: Text(
                    'disconnect'.tr,
                    style: TextStyle(
                      fontSize: 18.sp,
                      fontWeight: FontWeight.w600,
                      color: Colors.white,
                      letterSpacing: 0.5,
                    ),
                  ),
                ),
              ),
            ),
          );
        default:
          return Container(
            width: double.infinity,
            height: 56.h,
            margin: EdgeInsets.symmetric(horizontal: 20.w),
            decoration: BoxDecoration(
              gradient: const LinearGradient(
                colors: [Color(0xFF4A6FE5), Color(0xFF6B8FF7)],
                begin: Alignment.centerLeft,
                end: Alignment.centerRight,
              ),
              borderRadius: BorderRadius.circular(28.r),
              boxShadow: [
                BoxShadow(
                  color: const Color(0xFF4A6FE5).withOpacity(0.3),
                  offset: const Offset(0, 4),
                  blurRadius: 12,
                ),
              ],
            ),
            child: Material(
              color: Colors.transparent,
              child: InkWell(
                onTap: controller.connectDevice,
                borderRadius: BorderRadius.circular(28.r),
                child: Center(
                  child: Text(
                    'add_device'.tr,
                    style: TextStyle(
                      fontSize: 18.sp,
                      fontWeight: FontWeight.w600,
                      color: Colors.white,
                      letterSpacing: 0.5,
                    ),
                  ),
                ),
              ),
            ),
          );
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Container(
          padding: EdgeInsets.symmetric(horizontal: 24.w),
          child: Column(
            children: [
              SizedBox(height: 40.h),
              Text(
                'app_name'.tr,
                style: TextStyle(
                  fontSize: 24.sp,
                  fontWeight: FontWeight.bold,
                  color: Colors.black87,
                ),
              ),
              SizedBox(height: 40.h),
              Image.asset(
                'assets/images/headphone.png',
                width: 200.w,
                height: 200.w,
                fit: BoxFit.contain,
              ),
              Expanded(
                child: Center(
                  child: _buildStatusWidget(),
                ),
              ),
              _buildActionButton(),
              SizedBox(height: 40.h),
            ],
          ),
        ),
      ),
      bottomNavigationBar: const CommonBottomNav(currentIndex: 0),
    );
  }
}