import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:maibu_satabot_v2/core/localization/app_localizations.dart';
import 'package:maibu_satabot_v2/core/theme/AppTheme.dart';
import 'package:maibu_satabot_v2/features/v2/home/domain/entities/home_entity.dart';

class PowerTrendChart extends StatelessWidget {
  final List<PowerTrendPoint> data;
  final String trendType;
  final Function(String) onToggleType;

  const PowerTrendChart({
    super.key,
    required this.data,
    required this.trendType,
    required this.onToggleType,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              AppLocalizations.of(context).translate('home_v2.power_trend'),
              style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
                color: context.appColors.textPrimary,
              ),
            ),
            Container(
              height: 32,
              decoration: BoxDecoration(
                color: context.appColors.fillBackground,
                borderRadius: BorderRadius.circular(8),
              ),
              child: Row(
                children: [
                  _buildTypeButton(
                    context,
                    'day',
                    AppLocalizations.of(context).translate('home_v2.day'),
                  ),
                  _buildTypeButton(
                    context,
                    'month',
                    AppLocalizations.of(context).translate('home_v2.month'),
                  ),
                ],
              ),
            ),
          ],
        ),
        const SizedBox(height: 12),
        Container(
          height: 220,
          padding: const EdgeInsets.all(16),
          decoration: BoxDecoration(
            color: context.appColors.cardBackground,
            borderRadius: BorderRadius.circular(16),
            boxShadow: [
              BoxShadow(
                color: context.appColors.cardShadow,
                blurRadius: 4,
                offset: const Offset(0, 2),
              ),
            ],
          ),
          child: LineChart(
            LineChartData(
              gridData: FlGridData(
                show: true,
                drawVerticalLine: true,
                horizontalInterval: 200,
                verticalInterval: 6,
                getDrawingHorizontalLine: (value) {
                  return FlLine(
                    color: context.appColors.divider.withOpacity(0.3),
                    strokeWidth: 1,
                  );
                },
                getDrawingVerticalLine: (value) {
                  return FlLine(
                    color: context.appColors.divider.withOpacity(0.3),
                    strokeWidth: 1,
                  );
                },
              ),
              titlesData: FlTitlesData(
                bottomTitles: AxisTitles(
                  sideTitles: SideTitles(
                    showTitles: true,
                    reservedSize: 30,
                    interval: 6,
                    getTitlesWidget: (value, meta) {
                      final index = value.toInt();
                      if (index == 0 ||
                          index == 6 ||
                          index == 12 ||
                          index == 18 ||
                          index == 23) {
                        String time;
                        if (index == 23) {
                          time = '23:00';
                        } else {
                          time = '${index.toString().padLeft(2, '0')}:00';
                        }
                        return Text(
                          time,
                          style: TextStyle(
                            color: context.appColors.textTertiary,
                            fontSize: 12,
                          ),
                        );
                      }
                      return const Text('');
                    },
                  ),
                ),
                leftTitles: AxisTitles(
                  sideTitles: SideTitles(
                    showTitles: true,
                    reservedSize: 40,
                    interval: 200,
                    getTitlesWidget: (value, meta) {
                      return Text(
                        value.toInt().toString(),
                        style: TextStyle(
                          color: context.appColors.textTertiary,
                          fontSize: 12,
                        ),
                      );
                    },
                  ),
                ),
                rightTitles: const AxisTitles(
                  sideTitles: SideTitles(showTitles: false),
                ),
                topTitles: const AxisTitles(
                  sideTitles: SideTitles(showTitles: false),
                ),
              ),
              borderData: FlBorderData(show: false),
              minX: 0,
              maxX: 23,
              minY: 0,
              maxY: 1000,
              lineBarsData: [
                LineChartBarData(
                  spots: data
                      .asMap()
                      .entries
                      .map((e) => FlSpot(e.key.toDouble(), e.value.power))
                      .toList(),
                  isCurved: true,
                  color: context.appColors.primary,
                  barWidth: 2,
                  dotData: FlDotData(
                    show: true,
                    getDotPainter: (spot, percent, barData, index) {
                      return FlDotCirclePainter(
                        radius: 2,
                        color: context.appColors.primary,
                      );
                    },
                  ),
                  belowBarData: BarAreaData(
                    show: true,
                    gradient: LinearGradient(
                      colors: [
                        context.appColors.primary.withOpacity(0.2),
                        context.appColors.primary.withOpacity(0.0),
                      ],
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildTypeButton(BuildContext context, String type, String label) {
    final isSelected = trendType == type;
    return GestureDetector(
      onTap: () => onToggleType(type),
      child: Container(
        width: 50,
        height: 32,
        decoration: BoxDecoration(
          color: isSelected ? context.appColors.primary : Colors.transparent,
          borderRadius: BorderRadius.circular(8),
        ),
        alignment: Alignment.center,
        child: Text(
          label,
          style: TextStyle(
            color: isSelected
                ? Colors.white
                : context.appColors.textTertiary,
            fontSize: 14,
          ),
        ),
      ),
    );
  }
}