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 WeeklyPowerChart extends StatelessWidget {
  final Map<String, dynamic> weeklyPowerUsage;

  const WeeklyPowerChart({super.key, required this.weeklyPowerUsage});

  @override
  Widget build(BuildContext context) {
    final data = weeklyPowerUsage['data'] as List<Map<String, dynamic>>;

    return GestureDetector(
      onTap: () {
        context.pushRoute(const ReportEnergyDetailRoute());
      },
      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(
                  '${weeklyPowerUsage['title']} (${weeklyPowerUsage['unit']})',
                  style: TextStyle(
                    fontSize: 28.sp,
                    fontWeight: FontWeight.normal,
                    color: const Color.fromRGBO(107, 114, 128, 1),
                  ),
                ),
                Row(
                  children: [
                    Text(
                      weeklyPowerUsage['dateRange'] as String,
                      style: TextStyle(
                        fontSize: 22.sp,
                        color: const Color.fromRGBO(156, 163, 175, 1),
                      ),
                    ),
                    SizedBox(width: 8.w),
                    Icon(
                      Icons.arrow_forward_ios,
                      size: 20.sp,
                      color: const Color.fromRGBO(156, 163, 175, 1),
                    ),
                  ],
                ),
              ],
            ),
          SizedBox(height: 20.h),
          SizedBox(
            height: 200.h,
            child: BarChart(
              BarChartData(
                alignment: BarChartAlignment.spaceBetween,
                maxY: 300,
                barTouchData: BarTouchData(enabled: false),
                titlesData: FlTitlesData(
                  show: true,
                  rightTitles: const AxisTitles(
                    sideTitles: SideTitles(showTitles: false),
                  ),
                  topTitles: const AxisTitles(
                    sideTitles: SideTitles(showTitles: false),
                  ),
                  bottomTitles: AxisTitles(
                    sideTitles: SideTitles(
                      showTitles: true,
                      reservedSize: 28,
                      getTitlesWidget: (value, meta) {
                        final index = value.toInt();
                        if (index >= 0 && index < data.length) {
                          return Padding(
                            padding: EdgeInsets.only(top: 8.h),
                            child: Text(
                              data[index]['day'] as String,
                              style: TextStyle(
                                fontSize: 22.sp,
                                color: const Color.fromRGBO(156, 163, 175, 1),
                              ),
                            ),
                          );
                        }
                        return const SizedBox.shrink();
                      },
                    ),
                  ),
                  leftTitles: const AxisTitles(
                    sideTitles: SideTitles(showTitles: false),
                  ),
                ),
                borderData: FlBorderData(show: false),
                gridData: const FlGridData(show: false),
                barGroups: data.asMap().entries.map((entry) {
                  final index = entry.key;
                  final value = (entry.value['value'] as int).toDouble();
                  return BarChartGroupData(
                    x: index,
                    barRods: [
                      BarChartRodData(
                        toY: value,
                        color: const Color.fromRGBO(59, 130, 246, 1),
                        width: 24.w,
                        borderRadius: const BorderRadius.only(
                          topLeft: Radius.circular(4),
                          topRight: Radius.circular(4),
                        ),
                      ),
                    ],
                  );
                }).toList(),
              ),
            ),
          ),
        ],
      ),
      ),
    );
  }
}