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 GeoZone {
  final Map<String, dynamic> properties;
  final List<LatLng> points;
  final List<AssetTrackingModel> assets;

  GeoZone({required this.properties, required this.points, required this.assets});

  String get name {
    for (final key in const ['name', 'Name', 'label', 'title', 'zoneName', 'id']) {
      final value = properties[key];
      if (value != null && value.toString().trim().isNotEmpty) return value.toString();
    }
    return "Zone";
  }
}

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);
    });
  }

  /// "View" button: loads the floor map (if a floor is selected) or the building outline.
  Future<void> _onViewPressed(AssetTrackingProvider provider) async {
    expansibleController.collapse();
    provider.coordinates = [];
    provider.assetsOnTheFloorList = [];
    provider.notify();

    provider.getAssetsFromPenguinByFloor();

    if (provider.selectedFloor != null) {
      getFloorMap(provider.selectedFloor!.id!);
      provider.getZoneFromPenguin();
      return;
    }

    // Building only: remove any previously displayed floor map so the building outline is visible.
    setState(() {
      _geojson = null;
      floorMapModel = null;
      _selectedZoneProperties = null;
      markers = [];
      _lastFittedCoordinatesKey = null; // force re-fit even if the same building is viewed again
    });

    // Only show the loader when zones must be fetched; if they are cached the call completes
    // before the (post-frame) dialog appears, and the dialog would never be dismissed.
    final needsNetwork = provider.zonesList.isEmpty;
    if (needsNetwork) Utils.showLoading(context);
    await provider.getZoneFromPenguin();
    if (!mounted) return;
    if (needsNetwork) Utils.hideLoading(context);
    // Camera fit happens in the building-outline Selector once the polygon is rendered.
  }

  /// Signature of the last building outline the camera was fitted to.
  String? _lastFittedCoordinatesKey;

  /// Zooms/pans the map so all [points] are visible. Runs after the current frame so the
  /// map has its final size, and schedules a frame so the callback is guaranteed to fire.
  void _fitCameraToPoints(List<LatLng> points) {
    if (points.isEmpty) return;
    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (!mounted) return;
      if (points.length == 1) {
        mapController.move(points.first, 18);
        return;
      }
      mapController.fitCamera(
        CameraFit.bounds(bounds: LatLngBounds.fromPoints(points), padding: const EdgeInsets.all(48), maxZoom: 20),
      );
    });
    WidgetsBinding.instance.scheduleFrame();
  }

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

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

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

      final assetLocation = widget.assetTrackingData?.location;
      final hasAssetPosition = !inAppView && assetLocation?.latitude != null && assetLocation?.longitude != null;

      setState(() {
        _geojson = decoded;
        _computedBounds = bounds;
        markers = [
          if (hasAssetPosition)
            Marker(
              point: LatLng(assetLocation!.latitude!, assetLocation.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!),
    );
  }

  Map<String, dynamic>? _selectedZoneProperties;

  Polygon _buildZonePolygon(List<LatLng> points, List<List<LatLng>>? holes, Map<String, dynamic> properties, List<AssetTrackingModel> floorAssets) {
    final base = defaultOnPolygon(points, holes, properties, defaults: GeoJsonStyleDefaults.leaflet);
    final zoneAssets = floorAssets.where((asset) => _isAssetInsideZone(asset, points, holes)).toList();
    final zone = GeoZone(properties: properties, points: points, assets: zoneAssets);
    final isSelected = identical(properties, _selectedZoneProperties);

    return Polygon<Object>(
      points: base.points,
      holePointsList: base.holePointsList,
      color: isSelected ? AppColor.red30.withOpacity(0.35) : base.color,
      borderColor: isSelected ? AppColor.red30 : base.borderColor,
      borderStrokeWidth: base.borderStrokeWidth,
      // Count is shown as a circular badge marker (see _buildZoneBadgeMarkers).
      hitValue: zone,
    );
  }

  /// Parses polygon features from [_geojson] and returns a circular badge marker
  /// (with the asset count) placed at the center of every zone that has assets.
  List<Marker> _buildZoneBadgeMarkers(List<AssetTrackingModel> floorAssets) {
    if (!inAppView || floorAssets.isEmpty || _geojson == null) return const [];

    List<LatLng> parseRing(dynamic ring) => [
          for (final c in (ring as List))
            if (c is List && c.length >= 2 && c[0] is num && c[1] is num) LatLng((c[1] as num).toDouble(), (c[0] as num).toDouble()),
        ];

    final badges = <Marker>[];

    void addZone(dynamic polygonCoords, Map<String, dynamic> properties) {
      if (polygonCoords is! List || polygonCoords.isEmpty) return;
      final outer = parseRing(polygonCoords.first);
      if (outer.length < 3) return;
      final holes = [for (final r in polygonCoords.skip(1)) parseRing(r)].where((h) => h.length >= 3).toList();

      final zoneAssets = floorAssets.where((a) => _isAssetInsideZone(a, outer, holes)).toList();
      if (zoneAssets.isEmpty) return;

      final center = Polygon(
        points: outer,
        holePointsList: holes.isEmpty ? null : holes,
        labelPlacementCalculator: const PolygonLabelPlacementCalculator.simpleCentroid(),
      ).labelPosition;
      final zone = GeoZone(properties: properties, points: outer, assets: zoneAssets);

      badges.add(
        Marker(
          point: center,
          width: 21,
          height: 21,
          child: GestureDetector(
            onTap: () => _showZoneDetails(zone),
            child: _ZoneCountBadge(count: zoneAssets.length),
          ),
        ),
      );
    }

    for (final feature in (_geojson!['features'] as List? ?? const [])) {
      if (feature is! Map) continue;
      final geometry = feature['geometry'];
      if (geometry is! Map) continue;
      final properties = (feature['properties'] as Map<String, dynamic>?) ?? <String, dynamic>{};
      final coordinates = geometry['coordinates'];
      switch (geometry['type']) {
        case 'Polygon':
          addZone(coordinates, properties);
        case 'MultiPolygon':
          for (final polygon in (coordinates as List? ?? const [])) {
            addZone(polygon, properties);
          }
      }
    }
    return badges;
  }

  bool _isAssetInsideZone(AssetTrackingModel asset, List<LatLng> outer, List<List<LatLng>>? holes) {
    final lat = asset.location?.latitude;
    final lng = asset.location?.longitude;
    if (lat == null || lng == null) return false;
    final point = LatLng(lat, lng);
    if (!_isPointInRing(point, outer)) return false;
    for (final hole in holes ?? const <List<LatLng>>[]) {
      if (_isPointInRing(point, hole)) return false;
    }
    return true;
  }

  /// Ray-casting point-in-polygon test (longitude = x, latitude = y).
  bool _isPointInRing(LatLng point, List<LatLng> ring) {
    bool inside = false;
    final x = point.longitude, y = point.latitude;
    for (int i = 0, j = ring.length - 1; i < ring.length; j = i++) {
      final xi = ring[i].longitude, yi = ring[i].latitude;
      final xj = ring[j].longitude, yj = ring[j].latitude;
      final intersects = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
      if (intersects) inside = !inside;
    }
    return inside;
  }

  void _onFeatureTapped() {
    final hitResult = _polygonHitNotifier.value;
    if (hitResult == null) return;
    final zone = hitResult.hitValues.whereType<GeoZone>().firstOrNull;
    if (zone == null) return;

    setState(() {
      // _selectedZoneProperties = zone.properties;
      // if (inAppView) markers = [for (final asset in zone.assets) _buildAssetMarker(asset)];
    });
    _showZoneDetails(zone);
  }

  Marker _buildAssetMarker(AssetTrackingModel asset) {
    return Marker(
      point: LatLng(asset.location!.latitude!, asset.location!.longitude!),
      child: Tooltip(
        triggerMode: TooltipTriggerMode.tap,
        message: "${asset.label ?? ''}\nLast seen: ${asset.location?.lastSeen?.toServiceRequestDetailsFormat}",
        child: const Icon(Icons.location_pin, color: AppColor.red30),
      ),
    );
  }

  void _showZoneDetails(GeoZone zone) {
    showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      backgroundColor: Colors.transparent,
      builder: (sheetContext) {
        return Container(
          constraints: BoxConstraints(maxHeight: MediaQuery.of(sheetContext).size.height * 0.6),
          decoration: BoxDecoration(
            color: AppColor.background(sheetContext),
            borderRadius: const BorderRadius.vertical(top: Radius.circular(20)),
          ),
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(zone.name, style: AppTextStyles.heading5.copyWith(color: AppColor.textColor(sheetContext))),
                4.height,
                InfoTextLabelWidget(label: inAppView ? "${zone.assets.length} Asset(s) in this zone" : "Zone"),
                if (inAppView && zone.assets.isNotEmpty) ...[
                  12.height,
                  Flexible(
                    child: ListView.separated(
                      shrinkWrap: true,
                      itemCount: zone.assets.length,
                      separatorBuilder: (_, __) => 12.height,
                      itemBuilder: (_, index) => AssetTrackingListItemView(zone.assets[index], false, showViewOnMap: false),
                    ),
                  ),
                ],
              ],
            ),
          ),
        );
      },
    ).whenComplete(() {
      if (mounted) setState(() => _selectedZoneProperties = null);
    });
  }

  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) ...[
          Selector<AssetTrackingProvider, List<AssetTrackingModel>>(
            selector: (_, provider) => inAppView ? List<AssetTrackingModel>.of(provider.assetsOnTheFloorList) : const [],
            builder: (_, floorAssets, __) {
              // Hide zone count badges while asset pins are shown, to avoid overlapping/confusing UI.
              final zoneBadges = markers.isEmpty ? _buildZoneBadgeMarkers(floorAssets) : const <Marker>[];
              return Stack(
                children: [
                  GestureDetector(
                    onTap: _onFeatureTapped,
                    child: GeoJsonLayer.memory(
                      _geojson!,
                      hitNotifier: _polygonHitNotifier,
                      styleDefaults: GeoJsonStyleDefaults.leaflet,
                      onPolygon: (points, holes, properties) => _buildZonePolygon(points, holes, properties, floorAssets),
                    ),
                  ),
                  // Circular count badges drawn on top of each zone.
                  if (zoneBadges.isNotEmpty) MarkerLayer(markers: zoneBadges),
                ],
              );
            },
          ),

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

                List<LatLng> list = [
                  for (var coordinate in (coordinates))
                    if (coordinate.latitude != null && coordinate.longitude != null) LatLng(coordinate.latitude!, coordinate.longitude!),
                ];
                if (list.isEmpty) return const SizedBox();

                // Fit the camera to the building outline once per new outline.
                final key = "${assetTrackingProvider.selectedBuilding?.id}|${list.length}|${list.first}|${list.last}";
                if (key != _lastFittedCoordinatesKey) {
                  _lastFittedCoordinatesKey = key;
                  _fitCameraToPoints(list);
                }
                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(() {
                                    _selectedZoneProperties = null;
                                    markers = [for (var asset in selectedAssets!) _buildAssetMarker(asset)];
                                  });
                                  // 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;
                              assetProvider.selectedBuilding = null;
                              assetProvider.selectedFloor = null;
                              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 _ZoneCountBadge extends StatelessWidget {
  final int count;

  const _ZoneCountBadge({required this.count});

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: AppColor.red30,
        border: Border.all(color: Colors.white, width: 1),
        boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.25), blurRadius: 4, offset: const Offset(0, 2))],
      ),
      child: FittedBox(
        fit: BoxFit.scaleDown,
        child: Padding(
          padding: const EdgeInsets.all(0),
          child: Text(
            count > 99 ? "99+" : "$count",
            style: const TextStyle(color: Colors.white, fontSize: 10, fontWeight: FontWeight.w600),
          ),
        ),
      ),
    );
  }
}

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),
              ],
            ),
          ),
        ),
      ],
    );
  }
}