import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:hmg_patient_app_new/core/app_export.dart';
import 'package:hmg_patient_app_new/extensions/string_extensions.dart';
import 'package:hmg_patient_app_new/extensions/widget_extensions.dart';
import 'package:hmg_patient_app_new/features/weather/models/waether_cities_model.dart';
import 'package:hmg_patient_app_new/features/weather/weather_view_model.dart';
import 'package:hmg_patient_app_new/generated/locale_keys.g.dart';
import 'package:hmg_patient_app_new/presentation/hmg_services/widgets/weather_widget.dart';
import 'package:hmg_patient_app_new/theme/colors.dart';
import 'package:hmg_patient_app_new/widgets/appbar/collapsing_list_view.dart';
import 'package:provider/provider.dart';
import 'package:shimmer/shimmer.dart';

class WeatherDetailsPage extends StatefulWidget {
  final bool showBackIcon;
  const WeatherDetailsPage({super.key, this.showBackIcon = true});

  @override
  State<WeatherDetailsPage> createState() => _WeatherDetailsPageState();
}

class _WeatherDetailsPageState extends State<WeatherDetailsPage> {
  @override
  void initState() {
    super.initState();
    // Fetch weather data when page loads only if data is not already available
    WidgetsBinding.instance.addPostFrameCallback((_) {
      final weatherVM = Provider.of<WeatherMonitorViewModel>(context, listen: false);
      // Only fetch if cityInfoList is empty
      if (weatherVM.cityInfoList.isEmpty && !weatherVM.isLoading) {
        weatherVM.initiateFetchWeather();
      }
    });
  }

  Color _getColorFromColorName(ColorName? colorName) {
    if (colorName == null) return AppColors.successColor;

    switch (colorName) {
      case ColorName.GREEN:
      case ColorName.LIGHTGREEN:
        return AppColors.successColor;
      case ColorName.YELLOW:
        return AppColors.warningColorYellow;
      case ColorName.ORANGE:
        return AppColors.warningColor;
      case ColorName.RED:
        return AppColors.errorColor;
    }
  }

  Color _getBackgroundColorFromColorName(ColorName? colorName) {
    if (colorName == null) return AppColors.successLightColor.withValues(alpha: 0.1);

    switch (colorName) {
      case ColorName.GREEN:
      case ColorName.LIGHTGREEN:
        return AppColors.successLightColor.withValues(alpha: 0.1);
      case ColorName.YELLOW:
        return AppColors.warningColorYellow.withValues(alpha: 0.1);
      case ColorName.ORANGE:
        return AppColors.warningLightColor.withValues(alpha: 0.1);
      case ColorName.RED:
        return AppColors.errorLightColor.withValues(alpha: 0.1);
    }
  }

  /// Get color based on colorName from API (language-independent)
  Color _getColorFromColorNameOrCategory(ColorName? colorName, String? categoryLabel) {
    // First priority: Use the colorName from API if available
    if (colorName != null) {
      return _getColorFromColorName(colorName);
    }

    // Fallback: Try to parse category label (for English)
    if (categoryLabel == null) return AppColors.successColor;

    final category = categoryLabel.toLowerCase().trim();

    // Green: Low, Beneficial
    if (category.contains('low') || category.contains('beneficial')) {
      return AppColors.successColor;
    }
    // Yellow: Fair
    else if (category.contains('fair')) {
      return AppColors.warningColorYellow;
    }
    // Red: Very High, At High Risk
    else if (category.contains('very high') || category.contains('at high risk')) {
      return AppColors.errorColor;
    }
    // Orange: Risk, High (but not "very high" or "at high risk")
    else if (category.contains('risk') || category.contains('high')) {
      return AppColors.warningColor;
    }

    return AppColors.successColor; // Default to green
  }

  /// Get background color based on colorName from API (language-independent)
  Color _getBackgroundFromColorNameOrCategory(ColorName? colorName, String? categoryLabel) {
    // First priority: Use the colorName from API if available
    if (colorName != null) {
      return _getBackgroundColorFromColorName(colorName);
    }

    // Fallback: Try to parse category label (for English)
    if (categoryLabel == null) return AppColors.successLightColor.withValues(alpha: 0.1);

    final category = categoryLabel.toLowerCase().trim();

    // Green: Low, Beneficial
    if (category.contains('low') || category.contains('beneficial')) {
      return AppColors.successLightColor.withValues(alpha: 0.1);
    }
    // Yellow: Fair
    else if (category.contains('fair')) {
      return AppColors.warningColorYellow.withValues(alpha: 0.1);
    }
    // Red: Very High, At High Risk
    else if (category.contains('very high') || category.contains('at high risk')) {
      return AppColors.errorLightColor.withValues(alpha: 0.1);
    }
    // Orange: Risk, High (but not "very high" or "at high risk")
    else if (category.contains('risk') || category.contains('high')) {
      return AppColors.warningLightColor.withValues(alpha: 0.1);
    }

    return AppColors.successLightColor.withValues(alpha: 0.1); // Default to green
  }

  IconData _getIconFromCategory(String? category) {
    if (category == null) return Icons.wb_sunny_outlined;

    final lowerCategory = category.toLowerCase();
    if (lowerCategory.contains('walking') || lowerCategory.contains('activity')) {
      return Icons.directions_walk;
    } else if (lowerCategory.contains('weather') || lowerCategory.contains('temperature')) {
      return Icons.thermostat_outlined;
    } else if (lowerCategory.contains('elderly') || lowerCategory.contains('hiking')) {
      return Icons.elderly;
    }
    return Icons.wb_sunny_outlined;
  }

  @override
  Widget build(BuildContext context) {
    return Consumer<WeatherMonitorViewModel>(
      builder: (context, weatherVM, child) {
        return Scaffold(
          backgroundColor: AppColors.bgScaffoldColor,
          body: CollapsingListView(
            title: LocaleKeys.healthWeatherIndicators.tr(),
            isLeading: widget.showBackIcon,
            child: weatherVM.isLoading
                ? _buildShimmerLoading()
                : Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      // Reuse WeatherWidget at the top (without the button)
                      const WeatherWidget(showButton: false),

                      SizedBox(height: 16.h),

                      // Categories List (Sliders)
                      ...weatherVM.cityInfoList.map((cityInfo) {
                        return _buildCategoryCard(
                          description: cityInfo.name ?? '',
                          categoryLabel: cityInfo.category ?? '',
                          colorName: cityInfo.colorName,
                          color: _getColorFromColorNameOrCategory(cityInfo.colorName, cityInfo.category),
                          backgroundColor: _getBackgroundFromColorNameOrCategory(cityInfo.colorName, cityInfo.category),
                          icon: _getIconFromCategory(cityInfo.category),
                        );
                      }),

                      SizedBox(height: 24.h),
                    ],
                  ),
          ),
        );
      },
    );
  }

  Widget _buildCategoryCard({
    required String description,
    required String categoryLabel,
    required ColorName? colorName,
    required Color color,
    required Color backgroundColor,
    required IconData icon,
  }) {
    return Container(
      margin: EdgeInsets.only(bottom: 16.h),
      padding: EdgeInsets.all(16.w),
      decoration: RoundedRectangleBorder().toSmoothCornerDecoration(
        color: AppColors.whiteColor,
        borderRadius: 16.r,
        hasShadow: false,
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // Icon
          Container(
            width: 40.w,
            height: 40.w,
            decoration: BoxDecoration(
              color: backgroundColor,
              borderRadius: BorderRadius.circular(8.r),
            ),
            child: Icon(
              icon,
              color: color,
              size: 24.w,
            ),
          ),
          SizedBox(width: 12.w),
          // Content
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                description.toText14(
                  isBold: true,
                  color: AppColors.textColor,
                ),
                SizedBox(height: 8.h),
                // Progress bar
                Container(
                  height: 4.h,
                  decoration: BoxDecoration(
                    color: AppColors.lightGrayBGColor,
                    borderRadius: BorderRadius.circular(2.r),
                  ),
                  child: FractionallySizedBox(
                    alignment: Alignment.centerLeft,
                    widthFactor: 0.7,
                    child: Container(
                      decoration: BoxDecoration(
                        color: color,
                        borderRadius: BorderRadius.circular(2.r),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
          SizedBox(width: 12.w),
          // Category Label
          Container(
            padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 6.h),
            decoration: BoxDecoration(
              color: backgroundColor,
              borderRadius: BorderRadius.circular(8.r),
            ),
            child: categoryLabel.toText12(
              color: color,
              isBold: true,
              maxLine: 1
            ),
          ),
        ],
      ),
    ).paddingSymmetrical(24.w, 0.w);
  }

  Widget _buildShimmerLoading() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // Weather Widget Shimmer
        Shimmer.fromColors(
          baseColor: AppColors.shimmerBaseColor,
          highlightColor: AppColors.shimmerHighlightColor,
          child: Container(
            margin: EdgeInsets.symmetric(horizontal: 24.w),
            padding: EdgeInsets.all(16.w),
            decoration: RoundedRectangleBorder().toSmoothCornerDecoration(
              color: AppColors.whiteColor,
              borderRadius: 24.r,
              hasShadow: false,
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    Container(
                      width: 64.w,
                      height: 64.w,
                      decoration: BoxDecoration(
                        color: AppColors.whiteColor,
                        borderRadius: BorderRadius.circular(12.r),
                      ),
                    ),
                    SizedBox(width: 12.w),
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Container(
                            width: double.infinity,
                            height: 12.h,
                            decoration: BoxDecoration(
                              color: AppColors.whiteColor,
                              borderRadius: BorderRadius.circular(4.r),
                            ),
                          ),
                          SizedBox(height: 8.h),
                          Container(
                            width: 120.w,
                            height: 16.h,
                            decoration: BoxDecoration(
                              color: AppColors.whiteColor,
                              borderRadius: BorderRadius.circular(4.r),
                            ),
                          ),
                          SizedBox(height: 8.h),
                          Container(
                            width: 160.w,
                            height: 12.h,
                            decoration: BoxDecoration(
                              color: AppColors.whiteColor,
                              borderRadius: BorderRadius.circular(4.r),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
                SizedBox(height: 16.h),
                Container(
                  width: double.infinity,
                  height: 40.h,
                  decoration: BoxDecoration(
                    color: AppColors.whiteColor,
                    borderRadius: BorderRadius.circular(10.r),
                  ),
                ),
              ],
            ),
          ),
        ),
        SizedBox(height: 16.h),

        // Shimmer for category cards
        ...List.generate(3, (index) {
          return Shimmer.fromColors(
            baseColor: AppColors.shimmerBaseColor,
            highlightColor: AppColors.shimmerHighlightColor,
            child: Container(
              margin: EdgeInsets.only(bottom: 16.h, left: 24.w, right: 24.w),
              padding: EdgeInsets.all(16.w),
              decoration: RoundedRectangleBorder().toSmoothCornerDecoration(
                color: AppColors.whiteColor,
                borderRadius: 16.r,
                hasShadow: false,
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    children: [
                      Container(
                        width: 40.w,
                        height: 40.w,
                        decoration: BoxDecoration(
                          color: AppColors.whiteColor,
                          shape: BoxShape.circle,
                        ),
                      ),
                      SizedBox(width: 12.w),
                      Expanded(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Container(
                              width: double.infinity,
                              height: 14.h,
                              decoration: BoxDecoration(
                                color: AppColors.whiteColor,
                                borderRadius: BorderRadius.circular(4.r),
                              ),
                            ),
                            SizedBox(height: 8.h),
                            Container(
                              width: 100.w,
                              height: 12.h,
                              decoration: BoxDecoration(
                                color: AppColors.whiteColor,
                                borderRadius: BorderRadius.circular(4.r),
                              ),
                            ),
                          ],
                        ),
                      ),
                      Container(
                        width: 60.w,
                        height: 24.h,
                        decoration: BoxDecoration(
                          color: AppColors.whiteColor,
                          borderRadius: BorderRadius.circular(8.r),
                        ),
                      ),
                    ],
                  ),
                  SizedBox(height: 12.h),
                  Container(
                    width: double.infinity,
                    height: 8.h,
                    decoration: BoxDecoration(
                      color: AppColors.whiteColor,
                      borderRadius: BorderRadius.circular(4.r),
                    ),
                  ),
                ],
              ),
            ),
          );
        }),
      ],
    );
  }
}

