import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:smart_hotel_app/views/home/device/cubit/device_cubit.dart';
import 'package:smart_hotel_app/views/home/device/cubit/device_state.dart';
import 'package:smart_hotel_app/views/home/device/widget/device_parms_block.dart';
import 'package:smart_hotel_app/views/home/device/widget/power_char_block.dart';
import 'package:smart_hotel_app/views/home/device/widget/state_info_block.dart';
import 'package:smart_hotel_app/utils/toast_utils.dart';

@RoutePage()
class DeviceDetailView extends StatelessWidget {
  final int deviceId;

  const DeviceDetailView({super.key, required this.deviceId});

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (_) => DeviceCubit(deviceId: deviceId),
      child: BlocListener<DeviceCubit, DeviceState>(
        listenWhen: (prev, curr) =>
            curr.operationMessage != null &&
            prev.operationMessage != curr.operationMessage,
        listener: (context, state) {
          showToast(state.operationMessage!);
          context.read<DeviceCubit>().clearOperationMessage();
        },
        child: Scaffold(
          backgroundColor: const Color.fromRGBO(242, 243, 245, 1),
          appBar: AppBar(
            backgroundColor: Colors.white,
            elevation: 0,
            leading: IconButton(
              icon: const Icon(Icons.arrow_back_ios,
                  color: Color.fromRGBO(100, 116, 139, 1)),
              onPressed: () {
                context.maybePop();
              },
            ),
            title: Text(
              '设备控制',
              style: TextStyle(
                color: const Color.fromRGBO(10, 13, 20, 1),
                fontSize: 32.sp,
                fontWeight: FontWeight.w500,
              ),
            ),
            centerTitle: true,
          ),
          body: BlocBuilder<DeviceCubit, DeviceState>(
            builder: (context, state) {
              if (state.isLoading) {
                return const Center(child: CircularProgressIndicator(color: Color.fromRGBO(66, 165, 245, 1.0)));
              }
              if (state.error != null) {
                return Center(
                  child: Text(
                    '加载失败: ${state.error}',
                    style: TextStyle(
                      fontSize: 28.sp,
                      color: const Color.fromRGBO(255, 100, 101, 1),
                    ),
                  ),
                );
              }
              final deviceInfo = state.deviceInfo;
              if (deviceInfo == null) {
                return const SizedBox.shrink();
              }
              final cubit = context.read<DeviceCubit>();
              return SingleChildScrollView(
                padding: EdgeInsets.symmetric(horizontal: 28.w),
                child: Column(
                  children: [
                    StateInfoBlock(deviceInfo: deviceInfo),
                    SizedBox(height: 10.h),
                    DeviceParmsBlock(deviceInfo: deviceInfo),
                    SizedBox(height: 10.h),
                    PowerCharBlock(
                      deviceInfo: deviceInfo,
                      selectedTabIndex: state.selectedChartTabIndex,
                      onTabChanged: (index) => cubit.selectChartTab(index),
                    ),
                    SizedBox(height: 10.h),
                    _buildBottomButtons(context, cubit, state),
                    SizedBox(height: 30.h),
                  ],
                ),
              );
            },
          ),
        ),
      ),
    );
  }

  Widget _buildBottomButtons(
      BuildContext context, DeviceCubit cubit, DeviceState state) {
    return Container(
      width: double.infinity,
      padding: EdgeInsets.symmetric(vertical: 15.h),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            width: 300.w,
            height: 88.h,
            decoration: BoxDecoration(
              color: state.isPoweringOn
                  ? const Color.fromRGBO(73, 149, 234, 0.4)
                  : const Color.fromRGBO(73, 149, 234, 1),
              borderRadius: BorderRadius.circular(16.r),
            ),
            child: TextButton(
              onPressed: state.isPoweringOn
                  ? null
                  : () => cubit.remotePowerOn(),
              child: state.isPoweringOn
                  ? SizedBox(
                      width: 32.sp,
                      height: 32.sp,
                      child: const CircularProgressIndicator(
                        strokeWidth: 3,
                        color: Color.fromRGBO(66, 165, 245, 1.0),
                      ),
                    )
                  : Text(
                      "远程送电",
                      style: TextStyle(
                          fontSize: 28.sp,
                          color: const Color.fromRGBO(237, 245, 255, 1)),
                    ),
            ),
          ),
          SizedBox(width: 30.w),
          Container(
            width: 300.w,
            height: 88.h,
            decoration: BoxDecoration(
              color: state.isPoweringOff
                  ? const Color.fromRGBO(229, 241, 255, 0.6)
                  : const Color.fromRGBO(229, 241, 255, 1.0),
              border: Border.all(
                color: state.isPoweringOff
                    ? const Color.fromRGBO(73, 149, 234, 0.4)
                    : const Color.fromRGBO(73, 149, 234, 1),
                width: 1.w,
              ),
              borderRadius: BorderRadius.circular(16.r),
            ),
            child: TextButton(
              onPressed: state.isPoweringOff
                  ? null
                  : () => cubit.remotePowerOff(),
              child: state.isPoweringOff
                  ? SizedBox(
                      width: 32.sp,
                      height: 32.sp,
                      child: const CircularProgressIndicator(
                        strokeWidth: 3,
                        color: Color.fromRGBO(66, 165, 245, 1.0),
                      ),
                    )
                  : Text(
                      "远程断电",
                      style: TextStyle(
                          fontSize: 28.sp,
                          color: const Color.fromRGBO(100, 116, 139, 1)),
                    ),
            ),
          ),
        ],
      ),
    );
  }
}