import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:health/health.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:hmg_patient_app_new/core/app_state.dart';
import 'package:hmg_patient_app_new/core/dependencies.dart';
import 'package:hmg_patient_app_new/core/utils/size_utils.dart';
import 'package:hmg_patient_app_new/core/utils/utils.dart';
import 'package:hmg_patient_app_new/extensions/string_extensions.dart';
import 'package:hmg_patient_app_new/generated/locale_keys.g.dart';
import 'package:hmg_patient_app_new/presentation/smartwatches/widgets/health_metric.dart';
import 'package:hmg_patient_app_new/theme/colors.dart';

class HealthMetricCard extends StatelessWidget {
  final HealthMetricInfo metric;
  final List<HealthDataPoint> data;
  final VoidCallback onTap;

  const HealthMetricCard({
    Key? key,
    required this.metric,
    required this.data,
    required this.onTap,
  }) : super(key: key);

  // Helper method to convert HealthValue to double
  double _getValueAsDouble(HealthValue value, HealthDataType type) {
    if (value is NumericHealthValue) {
      return value.numericValue.toDouble();
    }
    return 0.0;
  }

  @override
  Widget build(BuildContext context) {
    final latestValue = data.isNotEmpty ? _getValueAsDouble(data.last.value, data.last.type) : 0.0;
    final isHealthy = latestValue >= metric.minHealthyValue && latestValue <= metric.maxHealthyValue;

    return Card(
      color: AppColors.whiteColor,
      elevation: 4,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(20),
      ),
      child: InkWell(
        onTap: onTap,
        borderRadius: BorderRadius.circular(20),
        child: Container(
          padding: const EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Utils.buildSvgWithAssets(
                    icon: metric.svgIcon,
                    height: 30.h,
                    width: 30.h,
                    fit: BoxFit.contain,
                    applyThemeColor: false,
                  ),
                  // Icon(
                  //   metric.icon,
                  //   color: metric.color,
                  //   size: 30,
                  // ),
                  if (data.isNotEmpty)
                    Container(
                      padding: const EdgeInsets.symmetric(
                        horizontal: 8,
                        vertical: 4,
                      ),
                      decoration: BoxDecoration(
                        color: isHealthy ? Colors.green[100] : Color(0xffD7D2F3),
                        borderRadius: BorderRadius.circular(12),
                      ),
                      child: Text(
                        isHealthy ? "Healthy".needTranslation : 'Warning'.needTranslation,
                        style: TextStyle(
                          color: isHealthy ? Colors.green[700] : AppColors.blackColor,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                ],
              ),
              const SizedBox(height: 16),
              (getIt.get<AppState>().isArabic() ? metric.nameAr : metric.nameEn).toText18(isBold: true, maxlines: 1),
              // Text(
              //   metric.name,
              //   style: const TextStyle(
              //     fontSize: 18,
              //     fontWeight: FontWeight.bold,
              //   ),
              // ),
              const SizedBox(height: 8),
              Text(
                data.isEmpty ? LocaleKeys.noDataAvailable.tr(context: context) : '${latestValue.toStringAsFixed(metric.type == HealthDataType.STEPS ? 0 : 1)} ${metric.unit}',
                style: TextStyle(
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                  color: metric.color,
                ),
              ),
              if (data.isNotEmpty) ...[
                const SizedBox(height: 16),
                SizedBox(
                  height: 100,
                  child: LineChart(
                    LineChartData(
                      gridData: FlGridData(show: false),
                      titlesData: FlTitlesData(show: false),
                      borderData: FlBorderData(show: false),
                      lineBarsData: [
                        LineChartBarData(
                          spots: _convertToSpots(data),
                          isCurved: true,
                          color: metric.color,
                          barWidth: 3,
                          isStrokeCapRound: true,
                          dotData: FlDotData(show: false),
                          belowBarData: BarAreaData(
                            show: true,
                            color: metric.color.withOpacity(0.1),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ],
          ),
        ),
      ),
    );
  }

  List<FlSpot> _convertToSpots(List<HealthDataPoint> data) {
    if (data.isEmpty) return [];

    return List.generate(
      data.length,
      (index) => FlSpot(
        index.toDouble(),
        _getValueAsDouble(data[index].value, data[index].type),
      ),
    );
  }
}
