import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class ReportMetricsBlock extends StatelessWidget {
  final Map<String, dynamic> reportMetrics;

  const ReportMetricsBlock({super.key, required this.reportMetrics});

  @override
  Widget build(BuildContext context) {
    final powerUsage = reportMetrics['powerUsage'] as Map<String, dynamic>;
    final pendingAlerts = reportMetrics['pendingAlerts'] as Map<String, dynamic>;

    return Row(
      children: [
        Expanded(
          child: _buildMetricCard(
            title: '今日用电',
            value: powerUsage['value'],
            unit: powerUsage['unit'] as String,
            changeText: powerUsage['changeText'] as String,
            changeColor: const Color.fromRGBO(16, 185, 129, 1),
            progress: powerUsage['progress'] as double,
            progressColor: const Color.fromRGBO(59, 130, 246, 1),
          ),
        ),
        SizedBox(width: 20.w),
        Expanded(
          child: _buildMetricCard(
            title: '待处理告警',
            value: pendingAlerts['value'],
            unit: pendingAlerts['unit'] as String,
            changeText: pendingAlerts['changeText'] as String,
            changeColor: const Color.fromRGBO(251, 191, 36, 1),
            progress: pendingAlerts['progress'] as double,
            progressColor: const Color.fromRGBO(251, 191, 36, 1),
          ),
        ),
      ],
    );
  }

  Widget _buildMetricCard({
    required String title,
    required int value,
    required String unit,
    required String changeText,
    required Color changeColor,
    required double progress,
    required Color progressColor,
  }) {
    return Container(
      padding: EdgeInsets.all(20.w),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(16.r),
        color: Colors.white,
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            title,
            style: TextStyle(
              fontSize: 24.sp,
              color: const Color.fromRGBO(107, 114, 128, 1),
            ),
          ),
          SizedBox(height: 12.h),
          Row(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              Text(
                '$value',
                style: TextStyle(
                  fontSize: 40.sp,
                  fontWeight: FontWeight.bold,
                  color: const Color.fromRGBO(31, 41, 55, 1),
                ),
              ),
              SizedBox(width: 4.w),
              Padding(
                padding: EdgeInsets.only(bottom: 6.h),
                child: Text(
                  unit,
                  style: TextStyle(
                    fontSize: 20.sp,
                    color: const Color.fromRGBO(107, 114, 128, 1),
                  ),
                ),
              ),
            ],
          ),
          SizedBox(height: 8.h),
          Row(
            children: [
              Text(
                changeText,
                style: TextStyle(
                  fontSize: 20.sp,
                  color: changeColor,
                ),
              ),
            ],
          ),
          SizedBox(height: 12.h),
          ClipRRect(
            borderRadius: BorderRadius.circular(4.r),
            child: LinearProgressIndicator(
              value: progress,
              backgroundColor: const Color.fromRGBO(229, 231, 235, 1),
              valueColor: AlwaysStoppedAnimation<Color>(progressColor),
              minHeight: 6.h,
            ),
          ),
        ],
      ),
    );
  }
}