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 'cubit/inspection_topology_cubit.dart';
import 'cubit/inspection_topology_state.dart';
import 'widget/device_header_widget.dart';
import 'widget/status_legend_widget.dart';
import 'widget/network_topology_widget.dart';
import 'widget/device_detail_dialog.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (_) => InspectionTopologyCubit(deviceId: deviceId),
      child: const InspectionTopologyPage(),
    );
  }
}

class InspectionTopologyPage extends StatelessWidget {
  const InspectionTopologyPage({super.key});

  @override
  Widget build(BuildContext context) {
    return 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: Text(
          '设备拓扑',
          style: TextStyle(
            color: const Color.fromRGBO(15, 23, 42, 1),
            fontSize: 32.sp,
            fontWeight: FontWeight.w600,
          ),
        ),
        centerTitle: true,
      ),
      body: BlocBuilder<InspectionTopologyCubit, InspectionTopologyState>(
        builder: (context, state) {
          if (state.isLoading) {
            return const Center(
              child: CircularProgressIndicator(),
            );
          }

          if (state.error != null) {
            return Center(
              child: Padding(
                padding: EdgeInsets.symmetric(horizontal: 28.w),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Text(
                      state.error!,
                      style: TextStyle(
                        fontSize: 28.sp,
                        color: const Color.fromRGBO(239, 68, 68, 1),
                      ),
                      textAlign: TextAlign.center,
                    ),
                    SizedBox(height: 24.h),
                    ElevatedButton(
                      onPressed: () {
                        context
                            .read<InspectionTopologyCubit>()
                            .loadTopology();
                      },
                      child: Text(
                        '重新加载',
                        style: TextStyle(fontSize: 28.sp),
                      ),
                    ),
                  ],
                ),
              ),
            );
          }

          return Stack(
            children: [
              SingleChildScrollView(
                padding: EdgeInsets.symmetric(horizontal: 28.w, vertical: 24.h),
                child: Column(
                  children: [
                    SizedBox(height: 10.h),
                    StatusLegendWidget(),
                    SizedBox(height: 20.h),
                    DeviceHeaderWidget(
                      deviceName: state.deviceName,
                      deviceModel: state.deviceModel,
                    ),
                    NetworkTopologyWidget(
                      topologyNodes: state.topologyNodes,
                      deviceCount: state.deviceCount,
                      connectionCount: state.connectionCount,
                      onNodeTap: (node) =>
                          context.read<InspectionTopologyCubit>().selectNode(node),
                    ),
                  ],
                ),
              ),
              if (state.selectedNode != null)
                DeviceDetailDialog(
                  node: state.selectedNode!,
                  curentState: state,
                  onClose: () =>
                      context.read<InspectionTopologyCubit>().selectNode(null),
                ),
            ],
          );
        },
      ),
    );
  }
}