import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:test_sa/controllers/api_routes/urls.dart';
import 'package:test_sa/controllers/providers/api/devices_provider.dart';
import 'package:test_sa/extensions/context_extension.dart';
import 'package:test_sa/extensions/int_extensions.dart';
import 'package:test_sa/extensions/string_extensions.dart';
import 'package:test_sa/extensions/text_extensions.dart';
import 'package:test_sa/extensions/widget_extensions.dart';
import 'package:test_sa/models/device/asset_by_id_model.dart';
import 'package:test_sa/new_views/common_widgets/default_app_bar.dart';
import 'package:test_sa/views/widgets/item_views/info_header_widget.dart';
import 'package:test_sa/views/widgets/item_views/info_text_widget.dart';
import 'package:test_sa/views/widgets/loaders/app_loading.dart';
import 'package:test_sa/views/widgets/loaders/failed_loading.dart';

import '../../../new_views/app_style/app_color.dart';
import '../requests/request_status.dart';

class AssetDetailPage extends StatefulWidget {
  static const String id = "/asset-details";

  const AssetDetailPage({Key? key}) : super(key: key);

  @override
  _AssetDetailPageState createState() {
    return _AssetDetailPageState();
  }
}

class _AssetDetailPageState extends State<AssetDetailPage> with SingleTickerProviderStateMixin {
  late AnimationController _animationController;
  int? assetId;
  AssetProvider? _assetProvider;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      duration: const Duration(milliseconds: 1400),
      vsync: this,
    );
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }


  @override
  Widget build(BuildContext context) {
    assetId ??= ModalRoute.of(context)?.settings.arguments as int;
    _assetProvider ??= Provider.of<AssetProvider>(context, listen: false);
    _assetProvider?.stateCode = null;
    return Scaffold(
      appBar: DefaultAppBar(title: context.translation.assetDetails),
      body: FutureBuilder<AssetByIdModel>(
        future: _assetProvider!.getAssetById(assetId!, context.translation),
        builder: (BuildContext context, AsyncSnapshot<AssetByIdModel> snapshot) {
          if (snapshot.hasError) {
            return FailedLoading(
              message: snapshot.error.toString(),
              onReload: () {
                setState(() {});
              },
            );
          }
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: ALoading());
          } else if (snapshot.hasData) {}
          if (snapshot.hasData) {
            AssetByIdModel assetModel = snapshot.data!;
            // Start animation when data is loaded
            _animationController.forward(from: 0.0);

            // Image animation - fade in with scale
            final imageAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
              CurvedAnimation(
                parent: _animationController,
                curve: const Interval(0.0, 0.4, curve: Curves.easeOut),
              ),
            );

            final imageScaleAnimation = Tween<double>(begin: 0.92, end: 1.0).animate(
              CurvedAnimation(
                parent: _animationController,
                curve: const Interval(0.0, 0.4, curve: Curves.easeOutCubic),
              ),
            );

            // Status label animation
            final statusAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
              CurvedAnimation(
                parent: _animationController,
                curve: const Interval(0.15, 0.5, curve: Curves.easeOut),
              ),
            );

            final statusSlideAnimation = Tween<Offset>(
              begin: const Offset(0.0, 0.2),
              end: Offset.zero,
            ).animate(
              CurvedAnimation(
                parent: _animationController,
                curve: const Interval(0.15, 0.5, curve: Curves.easeOutCubic),
              ),
            );

            // Header animation
            final headerAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
              CurvedAnimation(
                parent: _animationController,
                curve: const Interval(0.25, 0.6, curve: Curves.easeOut),
              ),
            );

            final headerSlideAnimation = Tween<Offset>(
              begin: const Offset(0.0, 0.2),
              end: Offset.zero,
            ).animate(
              CurvedAnimation(
                parent: _animationController,
                curve: const Interval(0.25, 0.6, curve: Curves.easeOutCubic),
              ),
            );

            // Details row animation
            final detailsAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
              CurvedAnimation(
                parent: _animationController,
                curve: const Interval(0.35, 0.75, curve: Curves.easeOut),
              ),
            );

            final detailsSlideAnimation = Tween<Offset>(
              begin: const Offset(0.0, 0.15),
              end: Offset.zero,
            ).animate(
              CurvedAnimation(
                parent: _animationController,
                curve: const Interval(0.35, 0.75, curve: Curves.easeOutCubic),
              ),
            );

            // Dates section animation
            final datesAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
              CurvedAnimation(
                parent: _animationController,
                curve: const Interval(0.50, 0.9, curve: Curves.easeOut),
              ),
            );

            final datesSlideAnimation = Tween<Offset>(
              begin: const Offset(0.0, 0.15),
              end: Offset.zero,
            ).animate(
              CurvedAnimation(
                parent: _animationController,
                curve: const Interval(0.50, 0.9, curve: Curves.easeOutCubic),
              ),
            );

            // Description animation (if exists)
            final descAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
              CurvedAnimation(
                parent: _animationController,
                curve: const Interval(0.65, 1.0, curve: Curves.easeOut),
              ),
            );

            final descSlideAnimation = Tween<Offset>(
              begin: const Offset(0.0, 0.1),
              end: Offset.zero,
            ).animate(
              CurvedAnimation(
                parent: _animationController,
                curve: const Interval(0.65, 1.0, curve: Curves.easeOutCubic),
              ),
            );

            return SingleChildScrollView(
              padding: const EdgeInsets.all(16),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // Animated image
                  FadeTransition(
                    opacity: imageAnimation,
                    child: ScaleTransition(
                      scale: imageScaleAnimation,
                      child: AspectRatio(
                        aspectRatio: 159 / 94,
                        child: Container(
                          width: 95,
                          height: 95,
                          decoration: ShapeDecoration(
                              color: AppColor.neutral30,
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(16),
                              ),
                              image: DecorationImage(
                                fit: BoxFit.cover,
                                image: NetworkImage(assetModel.assetPhoto != null ? URLs.getFileUrl(assetModel.assetPhoto!)! : "https://www.lasteelcraft.com/images/no-image-available.png"),
                              )),
                        ),
                      ),
                    ),
                  ),
                  6.height,
                  // Animated content column
                  Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      // Status label with animation
                      if (assetModel.commissioningStatus != null)
                        FadeTransition(
                          opacity: statusAnimation,
                          child: SlideTransition(
                            position: statusSlideAnimation,
                            child: StatusLabel(
                              label: assetModel.commissioningStatus!.name,
                              textColor: AppColor.getRequestStatusTextColorByName(context, assetModel.commissioningStatus!.name!),
                              backgroundColor: AppColor.getRequestStatusColorByName(context, assetModel.commissioningStatus!.name!),
                            ),
                          ),
                        ),
                      if (assetModel.commissioningStatus != null) 8.height,

                      // Header with animation
                      FadeTransition(
                        opacity: headerAnimation,
                        child: SlideTransition(
                          position: headerSlideAnimation,
                          child: InfoHeader16Widget(assetModel.modelDefinition?.assetName?.cleanupWhitespace.capitalizeFirstOfEach ?? "-"),
                        ),
                      ),
                      8.height,

                      // Details row with animation
                      FadeTransition(
                        opacity: detailsAnimation,
                        child: SlideTransition(
                          position: detailsSlideAnimation,
                          child: Row(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  InfoTextWidget(label: context.translation.assetNo, value: assetModel.multiAssets!.first.assetNumber, showEmptyValue: true),
                                  InfoTextWidget(label: context.translation.modelName, value: assetModel.modelDefinition!.modelName, showEmptyValue: true),
                                  InfoTextWidget(label: context.translation.supplier, value: assetModel.supplier?.suppliername, showEmptyValue: true),
                                  InfoTextWidget(label: context.translation.manufacture, value: assetModel.modelDefinition!.manufacturerName, showEmptyValue: true),
                                ],
                              ).expanded,
                              8.width,
                              Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  InfoTextWidget(label: context.translation.snNo, value: assetModel.multiAssets!.first.assetSerialNo, showEmptyValue: true),
                                  InfoTextWidget(label: context.translation.site, value: assetModel.site?.custName?.cleanupWhitespace.capitalizeFirstOfEach, showEmptyValue: true),
                                  InfoTextWidget(label: context.translation.building, value: assetModel.building?.name?.cleanupWhitespace.capitalizeFirstOfEach, showEmptyValue: true),
                                  InfoTextWidget(label: context.translation.floor, value: assetModel.floor?.name?.cleanupWhitespace.capitalizeFirstOfEach, showEmptyValue: true),
                                  InfoTextWidget(label: context.translation.md, value: assetModel.department?.departmentName?.cleanupWhitespace.capitalizeFirstOfEach, showEmptyValue: true),
                                  InfoTextWidget(label: context.translation.room, value: assetModel.room?.name?.cleanupWhitespace.capitalizeFirstOfEach, showEmptyValue: true),
                                ],
                              ).expanded,
                            ],
                          ),
                        ),
                      ),
                      8.height,

                      // Divider with animation
                      FadeTransition(
                        opacity: datesAnimation,
                        child: const Divider(color: AppColor.neutral30, height: 1, thickness: 1),
                      ),
                      8.height,

                      // Dates section with animation
                      FadeTransition(
                        opacity: datesAnimation,
                        child: SlideTransition(
                          position: datesSlideAnimation,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              InfoTextWidget(label: context.translation.installationDate, value: assetModel.installationDate?.toAssetDetailsFormat, showEmptyValue: true),
                              InfoTextWidget(label: context.translation.nextPmDate, value: assetModel.nextPMDate?.toAssetDetailsFormat, showEmptyValue: true),
                              InfoTextWidget(label: context.translation.lastPmDate, value: assetModel.lastPMDate?.toAssetDetailsFormat, showEmptyValue: true),
                            ],
                          ),
                        ),
                      ),

                      // Description with animation (if exists)
                      if ((assetModel.modelDefinition?.assetDescription ?? "").isNotEmpty) ...[
                        8.height,
                        FadeTransition(
                          opacity: descAnimation,
                          child: const Divider().defaultStyle(context),
                        ),
                        FadeTransition(
                          opacity: descAnimation,
                          child: SlideTransition(
                            position: descSlideAnimation,
                            child: InfoTextWidget(label: assetModel.modelDefinition!.assetDescription!, showEmptyValue: true, isMsg: true),
                          ),
                        ),
                      ]
                    ],
                  )
                ],
              ).toShadowContainer(context),
            );
          }
          return const Center(child: ALoading());
        },
      ),
    );
  }
}