import 'package:agrilink_vocpro/core/constant/app_theme.dart';
import 'package:agrilink_vocpro/core/state/result_state.dart';
import 'package:agrilink_vocpro/features/home/detail_pages/temperature/provider/temp_provider.dart';
import 'package:agrilink_vocpro/features/home/widgets/graphic_widget.dart';
import 'package:bootstrap_icons/bootstrap_icons.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:gauge_indicator/gauge_indicator.dart';
import 'package:provider/provider.dart';

class TemperatureScreen extends StatelessWidget {
  const TemperatureScreen({super.key, this.temperature = 0});

  final double temperature;
  double get value => temperature;

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => TempProvider(),
      child: Scaffold(
        appBar: AppBar(
          title: Text('Temperature', style: AppTheme.labelMedium),
          centerTitle: true,
          backgroundColor: Colors.white,
          scrolledUnderElevation: 0,
          actions: const [
            Padding(
              padding: EdgeInsets.only(right: 16),
              child: Icon(
                BootstrapIcons.thermometer_half,
                color: Colors.red,
              ),
            )
          ],
        ),
        body: SafeArea(
          child: ListView(
            padding: EdgeInsets.all(16.w),
            children: [
              SizedBox(
                height: MediaQuery.of(context).size.height * 0.05,
              ),
              SizedBox(
                height: 240.h,
                child: Stack(
                  fit: StackFit.expand,
                  children: [
                    Center(
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          SizedBox(
                            height: 80.h,
                          ),
                          const Icon(BootstrapIcons.thermometer_half,
                              size: 32, color: Colors.orange),
                          Text(
                            '${value.toStringAsFixed(0)}°C', // Animated percentage text
                            style: const TextStyle(
                              fontSize: 28,
                              fontWeight: FontWeight.bold,
                              color: Colors.black,
                            ),
                          ),
                        ],
                      ),
                    ),
                    AnimatedRadialGauge(
                      duration: const Duration(seconds: 2),
                      curve: Curves.easeOut,
                      value: value,
                      axis: GaugeAxis(
                        degrees: 240,
                        min: 0,
                        max: 56.7,
                        style: GaugeAxisStyle(
                          background: Colors.grey.shade100,
                          thickness: 50,
                        ),
                        progressBar: const GaugeBasicProgressBar(
                          gradient: GaugeAxisGradient(colors: [
                            Colors.white12,
                            Colors.orange,
                          ]),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              const SizedBox(height: 16),
              const SizedBox(height: 16),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    'Temperature',
                    style: AppTheme.labelMedium,
                    textAlign: TextAlign.center,
                  ),
                  IconButton(
                      iconSize: 20.r,
                      color: Colors.blue,
                      onPressed: () {},
                      icon: const Icon(BootstrapIcons.info_circle))
                ],
              ),
              SizedBox(height: 16.h),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  Container(
                    height: 100.h,
                    width: 100.w,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(16),
                      color: Colors.blue.withOpacity(0.1),
                      border: Border.all(
                        color: Colors.blue,
                        width: 2,
                      ),
                    ),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text('Low',
                            style: AppTheme.labelMedium
                                .copyWith(color: Colors.blue)),
                        SizedBox(height: 8.h),
                        Text(
                          '<20°C',
                          style: AppTheme.labelMedium,
                          textAlign: TextAlign.center,
                        ),
                      ],
                    ),
                  ),
                  Container(
                    height: 100.h,
                    width: 100.w,
                    decoration: BoxDecoration(
                      color: Colors.green.withOpacity(0.1),
                      borderRadius: BorderRadius.circular(16),
                      border: Border.all(
                        color: Colors.green,
                        width: 2,
                      ),
                    ),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text('Ideal',
                            style: AppTheme.labelMedium
                                .copyWith(color: Colors.green)),
                        SizedBox(height: 8.h),
                        Text(
                          '20-30°C',
                          style: AppTheme.labelMedium,
                          textAlign: TextAlign.center,
                        ),
                      ],
                    ),
                  ),
                  Container(
                    height: 100.h,
                    width: 100.w,
                    decoration: BoxDecoration(
                      color: Colors.orange.withOpacity(0.1),
                      borderRadius: BorderRadius.circular(16),
                      border: Border.all(
                        color: Colors.orange.shade800,
                        width: 2,
                      ),
                    ),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text('high',
                            style: AppTheme.labelMedium
                                .copyWith(color: Colors.orange)),
                        SizedBox(height: 8.h),
                        Text(
                          '>30°C',
                          style: AppTheme.labelMedium,
                          textAlign: TextAlign.center,
                        ),
                      ],
                    ),
                  ),
                ],
              ),
              SizedBox(height: 16.h),
              const Text('Grafik'),
              SizedBox(height: 16.h),
              AspectRatio(
                aspectRatio: 1.6.h,
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(16.w),
                    border: Border.all(color: Colors.grey.shade300, width: 1.w),
                  ),
                  child: Consumer<TempProvider>(
                    builder: (context, provider, child) {
                      switch (provider.dataState) {
                        case ResultState.loading:
                          return const Center(
                            child: CupertinoActivityIndicator(),
                          );

                        case ResultState.hasData:
                          return GarphicWidget(
                            gradientColors: const [
                              Colors.cyan,
                              Colors.amber,
                            ],
                            hour: List.generate(
                                provider.dataFetched.length,
                                (index) =>
                                    provider.dataFetched[index].hour ?? 0),
                            data: List.generate(
                                provider.dataFetched.length,
                                (index) =>
                                    provider.dataFetched[index].vicitemperature
                                        ?.toDouble() ??
                                    0),
                          );
                        case ResultState.error:
                          return Center(
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Icon(
                                  BootstrapIcons.exclamation_circle,
                                  color: Colors.grey.shade400,
                                ),
                                SizedBox(height: 8.h),
                                Text(
                                  'Terjadi Kesalahan',
                                  style: AppTheme.labelSmall,
                                ),
                              ],
                            ),
                          );
                        case ResultState.noData:
                          return Center(
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Icon(
                                  BootstrapIcons.database_fill_x,
                                  color: Colors.grey.shade400,
                                ),
                                SizedBox(height: 8.h),
                                Text(
                                  'Tidak Ada Data',
                                  style: AppTheme.labelSmall,
                                ),
                              ],
                            ),
                          );
                        case ResultState.initial:
                          return const SizedBox.shrink();
                        default:
                          return const Center(
                            child: Text('Default Error'),
                          );
                      }
                    },
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}
