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/routes/app_router.gr.dart';
import 'package:smart_hotel_app/repositories/inspection_device_repository.dart';
import 'package:smart_hotel_app/services/inspection_device_service.dart';
import 'cubit/inspection_device_cubit.dart';
import 'cubit/inspection_device_state.dart';
import 'widget/device_overview_card.dart';
import 'widget/inspection_history_card.dart';
import 'widget/inspection_items_card.dart';
import 'widget/start_inspection_button.dart';

@RoutePage()
class InspectionDeviceView extends StatelessWidget {
  final String deviceId;

  const InspectionDeviceView({super.key, @pathParam required this.deviceId});

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (_) => InspectionDeviceCubit(
        deviceId: deviceId,
        service: InspectionDeviceService(
          repository: InspectionDeviceRepository(),
        ),
      ),
      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.popRoute();
            },
          ),
          title: GestureDetector(
            onTap: () {
              context.pushRoute(InspectionTopologyRoute());
            },
            child: Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                Text(
                  '设备拓扑图',
                  style: TextStyle(
                    color: const Color.fromRGBO(100, 116, 139, 1),
                    fontSize: 32.sp,
                    fontWeight: FontWeight.w200,
                  ),
                ),
                Icon(
                  Icons.arrow_forward,
                  color: const Color.fromRGBO(100, 116, 139, 1),
                ),
              ],
            ),
          ),
          centerTitle: false,
        ),
        body: SingleChildScrollView(
          padding: EdgeInsets.symmetric(horizontal: 28.w, vertical: 20.h),
          child: BlocBuilder<InspectionDeviceCubit, InspectionDeviceState>(
            builder: (context, state) {
              return Column(
                children: [
                  DeviceOverviewCard(
                    deviceName: state.deviceName,
                    deviceType: state.deviceType,
                    deviceStatus: state.deviceStatus,
                    deviceModel: state.deviceModel,
                    installLocation: state.installLocation,
                    area: state.area,
                    responsiblePerson: state.responsiblePerson,
                    lastInspectionTime: state.lastInspectionTime,
                    icon: state.icon,
                  ),
                  SizedBox(height: 20.h),
                  InspectionHistoryCard(
                    historyList: state.inspectionHistory,
                  ),
                  // SizedBox(height: 20.h),
                  InspectionItemsCard(
                    items: state.inspectionItems,
                  ),
                  SizedBox(height: 30.h),
                  StartInspectionButton(deviceId: state.deviceId),
                  SizedBox(height: 20.h),
                  GestureDetector(
                    onTap: () {
                      context.pushRoute(
                        InspectionHistoryRoute(deviceId: state.deviceId),
                      );
                    },
                    child: Container(
                      width: double.infinity,
                      height: 88.h,
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(24.r),
                        border: Border.all(
                          color: const Color.fromRGBO(66, 165, 245, 1.0),
                          width: 2.w,
                        ),
                      ),
                      child: Center(
                        child: Text(
                          '巡检记录',
                          style: TextStyle(
                            color: const Color.fromRGBO(66, 165, 245, 1.0),
                            fontSize: 32.sp,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                    ),
                  ),
                  SizedBox(height: 30.h),
                ],
              );
            },
          ),
        ),
      ),
    );
  }
}