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

class RoomStatusDistribution extends StatelessWidget {
  final Map<String, dynamic> roomStatusDistribution;

  const RoomStatusDistribution(
      {super.key, required this.roomStatusDistribution});

  @override
  Widget build(BuildContext context) {
    final statuses =
        (roomStatusDistribution['statuses'] as List<dynamic>?)
                ?.map((e) => e as Map<String, dynamic>)
                .toList() ??
            <Map<String, dynamic>>[];
    final totalRooms = roomStatusDistribution['totalRooms'] as int? ?? 0;

    return GestureDetector(
      onTap: () {
        context.pushRoute(const ReportRoomDetailRoute());
      },
      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(
                  (roomStatusDistribution['title'] as String?) ?? '',
                  style: TextStyle(
                    fontSize: 28.sp,
                    fontWeight: FontWeight.normal,
                    color: const Color.fromRGBO(107, 114, 128, 1),
                  ),
                ),
                Row(
                  children: [
                    Text(
                      '共$totalRooms间',
                      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),
            ...statuses.map((status) {
              final count = status['count'] as int? ?? 0;
              final color = status['color'] as Color? ?? Colors.grey;
              final name = status['name'] as String? ?? '';
              final percentage = totalRooms > 0 ? count / totalRooms : 0.0;
              final percentText = '${(percentage * 100).toInt()}%';

              return Padding(
                padding: EdgeInsets.only(bottom: 16.h),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Row(
                          children: [
                            Container(
                              width: 12.w,
                              height: 12.h,
                              decoration: BoxDecoration(
                                color: color,
                                shape: BoxShape.circle,
                              ),
                            ),
                            SizedBox(width: 8.w),
                            Text(
                              name,
                              style: TextStyle(
                                fontSize: 24.sp,
                                color: const Color.fromRGBO(55, 65, 81, 1),
                              ),
                            ),
                          ],
                        ),
                        Text(
                          '$count间($percentText)',
                          style: TextStyle(
                            fontSize: 24.sp,
                            color: color,
                          ),
                        ),
                      ],
                    ),
                    SizedBox(height: 8.h),
                    Stack(
                      children: [
                        Container(
                          height: 8.h,
                          decoration: BoxDecoration(
                            color: const Color.fromRGBO(229, 231, 235, 1),
                            borderRadius: BorderRadius.circular(4.r),
                          ),
                        ),
                        FractionallySizedBox(
                          widthFactor: percentage,
                          child: Container(
                            height: 8.h,
                            decoration: BoxDecoration(
                              color: color,
                              borderRadius: BorderRadius.circular(4.r),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              );
            }).toList(),
          ],
        ),
      ),
    );
  }
}
