import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:smart_hotel_app/routes/app_router.gr.dart';

class DeviceOnlineRate extends StatelessWidget {
  final Map<String, dynamic> deviceOnlineRate;

  const DeviceOnlineRate({super.key, required this.deviceOnlineRate});

  @override
  Widget build(BuildContext context) {
    final devices =
        (deviceOnlineRate['devices'] as List<dynamic>?)
                ?.map((e) => e as Map<String, dynamic>)
                .toList() ??
            <Map<String, dynamic>>[];
    final totalDevices =
        devices.fold<int>(0, (sum, device) => sum + ((device['count'] as int?) ?? 0));
    final rate = deviceOnlineRate['rate'] as double? ?? 0.0;

    return GestureDetector(
      onTap: () {
        context.pushRoute(const ReportDeviceListRoute());
      },
      child: Container(
        width: double.infinity,
        padding: EdgeInsets.all(28.w),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(24.r),
          color: Colors.white,
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  (deviceOnlineRate['title'] as String?) ?? '',
                  style: TextStyle(
                    fontSize: 28.sp,
                    fontWeight: FontWeight.normal,
                    color: const Color.fromRGBO(107, 114, 128, 1),
                  ),
                ),
                Row(
                  children: [
                    Text(
                      '共$totalDevices台',
                      style: TextStyle(
                        fontSize: 24.sp,
                        color: const Color.fromRGBO(156, 163, 175, 1),
                      ),
                    ),
                    SizedBox(width: 8.w),
                    Icon(
                      Icons.arrow_forward_ios,
                      size: 24.sp,
                      color: const Color.fromRGBO(156, 163, 175, 1),
                    ),
                  ],
                ),
              ],
            ),
            SizedBox(height: 20.h),
            Row(
              children: [
                SizedBox(
                  width: 120.w,
                  height: 120.h,
                  child: Stack(
                    alignment: Alignment.center,
                    children: [
                      PieChart(
                        PieChartData(
                          sections: [
                            PieChartSectionData(
                              value: rate,
                              color: const Color.fromRGBO(49, 193, 177, 1),
                              title: '',
                              radius: 20.w,
                            ),
                            PieChartSectionData(
                              // value: 1 - rate,
                              value: 1 - rate,
                              color: const Color.fromRGBO(229, 231, 235, 1),
                              title: '',
                              radius: 30.w,
                            ),
                          ],
                          sectionsSpace: 0,
                          centerSpaceRadius: 38.w,
                        ),
                      ),
                      Text(
                        (deviceOnlineRate['rateText'] as String?) ?? '',
                        style: TextStyle(
                          fontSize: 24.sp,
                          fontWeight: FontWeight.bold,
                          color: const Color.fromRGBO(20, 184, 166, 1),
                        ),
                      ),
                    ],
                  ),
                ),
                SizedBox(width: 24.w),
                Expanded(
                  child: Column(
                    children: devices.map((device) {
                      return Padding(
                        padding: EdgeInsets.only(bottom: 8.h),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text(
                              (device['name'] as String?) ?? '',
                              style: TextStyle(
                                fontSize: 22.sp,
                                color: const Color.fromRGBO(107, 114, 128, 1),
                              ),
                            ),
                            Text(
                              '${device['count'] ?? 0} 台',
                              style: TextStyle(
                                fontSize: 22.sp,
                                color: const Color.fromRGBO(55, 65, 81, 1),
                              ),
                            ),
                          ],
                        ),
                      );
                    }).toList(),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}