import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_map_geojson2/flutter_map_geojson2.dart';
import 'package:latlong2/latlong.dart';
import 'package:provider/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/helper/utils.dart';
import 'package:test_sa/modules/asset_tracking/models/coordinates_model.dart';
import 'package:test_sa/new_views/app_style/app_color.dart';
import 'package:test_sa/new_views/common_widgets/app_filled_button.dart';
import 'package:test_sa/new_views/common_widgets/default_app_bar.dart';
import 'package:test_sa/new_views/common_widgets/multiple_item_drop_down_menu.dart';
import 'package:test_sa/new_views/common_widgets/single_item_drop_down_menu.dart';
import 'package:test_sa/providers/loading_list_notifier.dart';
import 'package:test_sa/views/widgets/item_views/info_text_widget.dart';

import 'asset_tracking_item_view.dart';
import 'asset_tracking_provider.dart';
import 'models/asset_tracking_model.dart';
import 'models/floor_map_model.dart';
import 'models/penguin_site_model.dart';
import 'models/zone_data_model.dart';

class MapTrackingPage extends StatefulWidget {
  final AssetTrackingModel? assetTrackingData;

  MapTrackingPage({Key? key, this.assetTrackingData}) : super(key: key);

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

class _MapTrackingPageState extends State<MapTrackingPage> {
  final MapController mapController = MapController();
  late AssetTrackingProvider assetTrackingProvider;

  late bool inAppView;

  FloorMapModel? floorMapModel;
  Map<String, dynamic>? _geojson;
  List<Marker> markers = []; // move to provider

  LatLngBounds? _computedBounds;
  final ExpansibleController expansibleController = ExpansibleController();

  static const LatLng _fallbackCenter = LatLng(24.81200245073082, 46.624273601310186);

  @override
  void initState() {
    super.initState();
    inAppView = widget.assetTrackingData == null;
    assetTrackingProvider = Provider.of<AssetTrackingProvider>(context, listen: false);
    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (!inAppView) {
        getFloorMap(widget.assetTrackingData!.location!.floor!.id!);
      } else {
        getPenguinSites();
      }
    });
  }

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

  void getPenguinSites() async {
    Utils.showLoading(context);
    await assetTrackingProvider.getPenguinSites();
    Utils.hideLoading(context);
  }

  void getPenguinBuildings(int id) async {
    Utils.showLoading(context);
    await assetTrackingProvider.getPenguinBuildings(id);
    Utils.hideLoading(context);
  }

  void getPenguinFloors(int id) async {
    Utils.showLoading(context);
    await assetTrackingProvider.getPenguinFloors(id);
    Utils.hideLoading(context);
  }

  void getFloorMap(int id) {
    Utils.showLoading(context);
    assetTrackingProvider.getFloorMap(id).then((floorMap) {
      Utils.hideLoading(context);
      _onFloorMapLoaded(floorMap);
    }).catchError((error) {
      Utils.hideLoading(context);
    });
  }

  void _onFloorMapLoaded(FloorMapModel? loadedFloorMap) {
    floorMapModel = loadedFloorMap;

    if (floorMapModel?.geojsonData == null) {
      setState(() {});
      return;
    }

    try {
      final decoded = floorMapModel!.geojsonData!;
      final bounds = _computeBoundsFromGeoJson(decoded);

      setState(() {
        _geojson = decoded;
        _computedBounds = bounds;
        markers = [
          Marker(
            point: LatLng(widget.assetTrackingData!.location!.latitude!, widget.assetTrackingData!.location!.longitude!),
            child: const Icon(Icons.location_pin, color: AppColor.red30),
          ),
        ];
      });

      WidgetsBinding.instance.addPostFrameCallback((_) {
        mapController.fitCamera(
          CameraFit.bounds(bounds: bounds, padding: const EdgeInsets.all(24)),
        );
      });
    } catch (e) {
      print('Failed to parse/compute bounds for floor geojson: $e');
      setState(() {}); // still show the map with whatever we have
    }
  }

  LatLngBounds _computeBoundsFromGeoJson(Map<String, dynamic> geojson) {
    final features = (geojson['features'] as List<dynamic>? ?? []);

    double? minLng, minLat, maxLng, maxLat;

    void visit(dynamic node) {
      if (node is List && node.isNotEmpty && node.first is num) {
        final lng = (node[0] as num).toDouble();
        final lat = (node[1] as num).toDouble();
        minLng = (minLng == null || lng < minLng!) ? lng : minLng;
        maxLng = (maxLng == null || lng > maxLng!) ? lng : maxLng;
        minLat = (minLat == null || lat < minLat!) ? lat : minLat;
        maxLat = (maxLat == null || lat > maxLat!) ? lat : maxLat;
      } else if (node is List) {
        for (final child in node) {
          visit(child);
        }
      }
    }

    for (final feature in features) {
      final geometry = feature['geometry'] as Map<String, dynamic>?;
      final coordinates = geometry?['coordinates'];
      if (coordinates == null) continue;
      visit(coordinates);
    }

    if (minLng == null || minLat == null || maxLng == null || maxLat == null) {
      throw StateError('No coordinates found in floor geojson — cannot compute bounds.');
    }

    return LatLngBounds(
      LatLng(minLat!, minLng!),
      LatLng(maxLat!, maxLng!),
    );
  }

  double _dragPosition = 0.5;
  late double _sheetPosition = _dragPosition;
  final minChildSize = 0.25;
  final maxChildSize = 1.0;

  // final LayerHitNotifier<Map<String, dynamic>> _polygonHitNotifier = ValueNotifier(null);
  final LayerHitNotifier<Object> _polygonHitNotifier = ValueNotifier(null);

  @override
  Widget build(BuildContext context) {
    Widget mapWidget = FlutterMap(
      mapController: mapController,
      options: const MapOptions(initialCenter: _fallbackCenter, initialZoom: 16.0),
      children: [
        TileLayer(
          urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
          userAgentPackageName: 'com.hmg.atoms',
        ),
        if (_geojson != null) ...[
          GestureDetector(
            onTap: () {
              // final hitResult = _polygonHitNotifier.value;
              //
              // if (hitResult == null || hitResult.hitValues.isEmpty) return;
              // print("hitResult:$hitResult");
              // final hitValue = hitResult.hitValues.first;
              //
              // // Narrow safely instead of assuming the type.
              // if (hitValue is Map<String, dynamic>) {
              //   print(hitValue);
              // } else {
              //   // ignore: avoid_print
              //   print('Unexpected hit value type: ${hitValue.runtimeType} -> $hitValue');
              // }
            },
            child: GeoJsonLayer.memory(
              _geojson!,
              hitNotifier: _polygonHitNotifier,
              styleDefaults: GeoJsonStyleDefaults.leaflet,
            ),
          ),

          // if (!inAppView || )
          if (markers.isNotEmpty) MarkerLayer(markers: markers),
        ],
        if (inAppView && _geojson == null)
          Selector<AssetTrackingProvider, List<Coordinates>>(
              selector: (_, assetTPro) => assetTPro.coordinates,
              builder: (_, coordinates, __) {
                if (coordinates.isEmpty) return const SizedBox();

                List<LatLng> list = [
                  for (var coordinate in (coordinates)) LatLng(coordinate.latitude!, coordinate.longitude!),
                ];
                List<Polygon> zonesPolygons = [
                  Polygon(
                    label: assetTrackingProvider.selectedBuilding?.label ?? "",
                    labelStyle: AppTextStyles.bodyText2.copyWith(color: AppColor.textColor(context)),
                    points: list,
                    color: AppColor.red30.withOpacity(0.3),
                    borderColor: AppColor.red30,
                    borderStrokeWidth: 2.0,
                  ),
                ];
                return PolygonLayer(polygons: zonesPolygons, hitNotifier: _polygonHitNotifier);
              }),
        if (_geojson != null && inAppView)
          Positioned(
            bottom: 0,
            left: 0,
            right: 0,
            child: Selector<AssetTrackingProvider, List<AssetTrackingModel>>(
                selector: (_, myModel) => myModel.assetsOnTheFloorList,
                builder: (_, assetsOnTheFloorList, __) {
                  return assetsOnTheFloorList.isEmpty
                      ? const SizedBox()
                      : Container(
                          margin: const EdgeInsets.all(16),
                          padding: const EdgeInsets.only(right: 0, left: 0),
                          decoration: BoxDecoration(
                            color: AppColor.tabBarBackground(context),
                            border: Border.all(color: AppColor.tabBarBorder(context)),
                            borderRadius: BorderRadius.circular(20),
                          ),
                          child: UpwardExpansionTile(title: InfoTextLabelWidget(label: "${assetsOnTheFloorList.length} Assets found on this floor"), children: [
                            LimitedBox(
                              maxHeight: 120,
                              child: MultipleItemDropDownMenu<AssetTrackingModel, NullableLoadingProvider>(
                                context: context,
                                title: 'Assets on The Floor',
                                hintMsg: 'Search By Label or Serial Number',
                                initialValue: [],
                                showShadow: false,
                                staticData: assetsOnTheFloorList,
                                showCancel: true,
                                showAsFullScreenDialog: true,
                                onSelect: (selectedAssets) {
                                  setState(() {
                                    markers = [
                                      for (var asset in selectedAssets!)
                                        Marker(
                                          point: LatLng(asset.location!.latitude!, asset.location!.longitude!),
                                          child: Tooltip(
                                            triggerMode: TooltipTriggerMode.tap,
                                            message: "Last seen: ${asset.location?.lastSeen?.toServiceRequestDetailsFormat}",
                                            child: const Icon(Icons.location_pin, color: AppColor.red30),
                                          ),
                                        ),
                                    ];
                                  });
                                  // markers
                                },
                              ).paddingOnly(start: 16, end: 16, top: 16),
                            ),
                          ]),
                        );

                  // Column(
                  //         mainAxisSize: MainAxisSize.min,
                  //         children: [
                  //           Container(
                  //             width: 50.toScreenWidth,
                  //             height: 6.toScreenHeight,
                  //             decoration: BoxDecoration(color: AppColor.white50, borderRadius: BorderRadius.circular(30)),
                  //           ).center,
                  //           InfoTextLabelWidget(label: "There is ${assetsOnTheFloorList.length} assets on this floor"),
                  //         ],
                  //       ).bottomSheetContainer(context, padding: const EdgeInsets.all(16));
                }),
          ),
        Positioned(
          top: 70,
          right: 8,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              IconButton(
                icon: const Icon(Icons.add),
                padding: EdgeInsets.zero,
                style: IconButton.styleFrom(
                  backgroundColor: AppColor.background(context), // Sets the background color
                  foregroundColor: AppColor.icon2Color(context), // Sets the icon color
                ),
                visualDensity: VisualDensity.compact,
                tooltip: "Zoom In",
                onPressed: () {
                  final zoom = mapController.camera.zoom + 1;
                  mapController.move(mapController.camera.center, zoom);
                },
              ),
              IconButton(
                icon: const Icon(Icons.remove),
                padding: EdgeInsets.zero,
                visualDensity: VisualDensity.compact,
                style: IconButton.styleFrom(
                  backgroundColor: AppColor.background(context), // Sets the background color
                  foregroundColor: AppColor.icon2Color(context), // Sets the icon color
                ),
                tooltip: "Zoom Out",
                onPressed: () {
                  final zoom = mapController.camera.zoom - 1;
                  mapController.move(mapController.camera.center, zoom);
                },
              ),
            ],
          ),
        )
      ],
    );

    return inAppView
        ? Stack(
            alignment: AlignmentDirectional.topCenter,
            children: [
              mapWidget,
              Container(
                margin: const EdgeInsets.all(16),
                padding: const EdgeInsets.only(right: 16, left: 16),
                decoration: BoxDecoration(
                  color: AppColor.tabBarBackground(context),
                  border: Border.all(color: AppColor.tabBarBorder(context)),
                  borderRadius: BorderRadius.circular(20),
                ),
                child: Theme(
                  data: ThemeData(splashColor: Colors.transparent, hoverColor: Colors.transparent, highlightColor: Colors.transparent),
                  child: Consumer<AssetTrackingProvider>(builder: (context, assetProvider, _) {
                    return ExpansionTile(
                      shape: Border.all(color: Colors.transparent, width: 0),
                      collapsedShape: Border.all(color: Colors.transparent, width: 0),
                      controller: expansibleController,
                      title: InfoTextLabelWidget(label: assetProvider.getExpansionHeader),
                      iconColor: AppColor.icon2Color(context),
                      collapsedIconColor: AppColor.icon2Color(context),
                      dense: true,
                      childrenPadding: const EdgeInsets.all(0),
                      tilePadding: const EdgeInsets.all(0),
                      children: <Widget>[
                        SingleItemDropDownMenu<PenguinSiteModel, NullableLoadingProvider>(
                          context: context,
                          title: "Select Site",
                          staticData: assetProvider.sitesList,
                          initialValue: assetProvider.selectedSite,
                          showShadow: false,
                          // backgroundColor: AppColor.fieldBgColor(context),
                          showAsBottomSheet: true,
                          onSelect: (value) {
                            if (value != null) {
                              assetProvider.selectedSite = value;
                              getPenguinBuildings(value.id!);
                            }
                          },
                        ),
                        4.height,
                        SingleItemDropDownMenu<PenguinSiteModel, NullableLoadingProvider>(
                          context: context,
                          title: "Select Building",
                          staticData: assetProvider.buildList,
                          initialValue: assetProvider.selectedBuilding,
                          showShadow: false,
                          enabled: assetProvider.selectedSite != null,
                          // backgroundColor: AppColor.fieldBgColor(context),
                          showAsBottomSheet: true,
                          onSelect: (value) {
                            if (value != null) {
                              assetProvider.selectedBuilding = value;
                              getPenguinFloors(value.id!);
                            }
                          },
                        ),
                        4.height,
                        SingleItemDropDownMenu<PenguinSiteModel, NullableLoadingProvider>(
                          context: context,
                          title: "Select Floor",
                          staticData: assetProvider.floorList,
                          initialValue: assetProvider.selectedFloor,
                          showShadow: false,
                          enabled: assetProvider.selectedBuilding != null,
                          // backgroundColor: AppColor.fieldBgColor(context),
                          showAsBottomSheet: true,
                          onSelect: (value) {
                            if (value != null) {
                              assetProvider.selectedFloor = value;
                            }
                          },
                        ),
                        8.height,
                        Align(
                          alignment: AlignmentGeometry.centerRight,
                          child: AppTextButton(
                            label: "View",
                            disableButton: assetProvider.selectedSite == null || assetProvider.selectedBuilding == null,
                            onPressed: () {
                              expansibleController.collapse();
                              assetTrackingProvider.coordinates.clear();
                              assetTrackingProvider.assetsOnTheFloorList.clear();
                              assetTrackingProvider.notify();

                              assetTrackingProvider.getAssetsFromPenguinByFloor();
                              if (assetProvider.selectedFloor == null) {
                                assetTrackingProvider.getZoneFromPenguin();
                              } else if (assetProvider.selectedFloor != null) {
                                getFloorMap(assetProvider.selectedFloor!.id!);
                                assetTrackingProvider.getZoneFromPenguin();
                              } else {
                                assetTrackingProvider.calculateCoordinates();
                              }
                            },
                          ),
                        ),
                        16.height,
                      ],
                    );
                  }),
                ),
              )
            ],
          )
        : Scaffold(appBar: const DefaultAppBar(title: "Live Asset Tracking"), body: mapWidget);
  }
}

class UpwardExpansionTile extends StatefulWidget {
  final Widget title;
  final List<Widget> children;

  const UpwardExpansionTile({Key? key, required this.title, required this.children}) : super(key: key);

  @override
  _UpwardExpansionTileState createState() => _UpwardExpansionTileState();
}

class _UpwardExpansionTileState extends State<UpwardExpansionTile> {
  bool _isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        // Expanded content appears ABOVE the title
        AnimatedCrossFade(
          firstChild: const SizedBox.shrink(),
          secondChild: Column(
            mainAxisSize: MainAxisSize.min,
            children: widget.children,
          ),
          crossFadeState: _isExpanded ? CrossFadeState.showSecond : CrossFadeState.showFirst,
          duration: const Duration(milliseconds: 200),
        ),
        // The clickable header/title sits at the bottom
        InkWell(
          onTap: () {
            setState(() {
              _isExpanded = !_isExpanded;
            });
          },
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                widget.title,
                Icon(_isExpanded ? Icons.expand_less : Icons.expand_more),
              ],
            ),
          ),
        ),
      ],
    );
  }
}