import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:smart_hotel_app/views/home/device/cubit/device_state.dart';

class PowerCharBlock extends StatefulWidget {
  final DeviceInfo deviceInfo;

  const PowerCharBlock({super.key, required this.deviceInfo});

  @override
  State<PowerCharBlock> createState() => _PowerCharBlockState();
}

class _PowerCharBlockState extends State<PowerCharBlock> {
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      margin: EdgeInsets.only(top: 10.h),
      padding: EdgeInsets.all(25.w),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(25.r),
        color: Colors.white,
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                '24小时功率趋势',
                style: TextStyle(
                  fontSize: 24.sp,
                  color: Color.fromRGBO(100, 116, 139, 1),
                ),
              ),
              Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(12.r),
                  color: Colors.transparent,
                  border: Border.all(
                    color: Color.fromRGBO(73, 149, 234, 0.5),
                    width: 1.5.w,
                  ),
                ),
                child: Row(
                  children: [
                    _buildTab('功率', 0),
                    _buildTab('温度', 1),
                  ],
                ),
              ),
            ],
          ),
          SizedBox(height: 20.h),
          Container(
            height: 250.h,
            child: BarChart(
              BarChartData(
                alignment: BarChartAlignment.spaceBetween,
                maxY: 100,
                minY: 0,
                groupsSpace: 10,
                barTouchData: BarTouchData(enabled: false),
                gridData: FlGridData(
                  show: true,
                  drawHorizontalLine: true,
                  drawVerticalLine: false,
                  horizontalInterval: 20,
                  getDrawingHorizontalLine: (value) {
                    return FlLine(
                      color: Color.fromRGBO(209, 213, 219, 1),
                      strokeWidth: 1.5,
                      dashArray: [5, 5],
                    );
                  },
                ),
                titlesData: FlTitlesData(
                  show: true,
                  rightTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
                  topTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
                  leftTitles: AxisTitles(
                    sideTitles: SideTitles(
                      showTitles: true,
                      interval: 20,
                      getTitlesWidget: (value, meta) {
                        return Text(
                          '${value.toInt()}',
                          style: TextStyle(
                            color: Color.fromRGBO(156, 163, 175, 1),
                            fontSize: 14.sp,
                          ),
                        );
                      },
                      reservedSize: 40,
                    ),
                  ),
                  bottomTitles: AxisTitles(
                    sideTitles: SideTitles(
                      showTitles: true,
                      interval: 3,
                      getTitlesWidget: (value, meta) {
                        return Text(
                          '11:04',
                          style: TextStyle(
                            color: Color.fromRGBO(156, 163, 175, 1),
                            fontSize: 14.sp,
                          ),
                        );
                      },
                      reservedSize: 40,
                    ),
                  ),
                ),
                borderData: FlBorderData(show: false),
                barGroups: _buildBarGroups(_selectedIndex),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildTab(String title, int index) {
    final isSelected = _selectedIndex == index;
    return GestureDetector(
      onTap: () {
        setState(() {
          _selectedIndex = index;
        });
      },
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 8.h),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(8.r),
          color: isSelected ? Color.fromRGBO(219, 234, 254, 1) : Colors.transparent,
        ),
        child: Text(
          title,
          style: TextStyle(
            fontSize: 24.sp,
            color: isSelected ? Color.fromRGBO(73, 149, 234, 1) : Color.fromRGBO(100, 116, 139, 1),
          ),
        ),
      ),
    );
  }

  List<BarChartGroupData> _buildBarGroups(int index) {
    final data = index == 0 ? widget.deviceInfo.powerData : widget.deviceInfo.tempData;
    final Color mainColor = index == 0
        ? Color.fromRGBO(59, 130, 246, 1)
        : Color.fromRGBO(251, 191, 36, 1);
    
    return List.generate(
      data.length,
      (i) {
        if (data[i] == 0) return BarChartGroupData(x: i);
        return BarChartGroupData(
          x: i,
          barRods: [
            BarChartRodData(
              toY: data[i].toDouble(),
              color: mainColor,
              width: 22.w,
              borderRadius: BorderRadius.vertical(top: Radius.circular(8.r)),
            ),
          ],
        );
      },
    ).where((group) => group.barRods.isNotEmpty).toList();
  }
}