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 createState() => _WeatherDetailsPageState(); } class _WeatherDetailsPageState extends State { @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(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( 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), ), ), ], ), ), ); }), ], ); } }