// Copyright 2018 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'dart:math' as Math;
import 'package:flutter/material.dart';
import 'package:maplibre/maplibre.dart';
import 'package:maplibre_gl/maplibre_gl.dart' as gl;
import '../ecs/system.dart';

abstract class ExamplePage extends StatelessWidget {
  const ExamplePage(
    this.leading,
    this.title, {
    this.needsLocationPermission = true,
    super.key,
  });

  final Widget leading;
  final String title;
  final bool needsLocationPermission;
}


class MapUiPage extends ExamplePage {
  const MapUiPage({super.key}) : super(const Icon(Icons.map), '态势');

  @override
  Widget build(BuildContext context) {
    return const MapUiBody();
  }
}

class MapUiBody extends StatefulWidget {
  const MapUiBody({super.key});

  @override
  State<MapUiBody> createState() => MapUiBodyState();
  
  /// 静态方法，用于通过 GlobalKey 获取 MapUiBodyState 实例
  static MapUiBodyState? of(BuildContext context) {
    final mapUiBody = context.findAncestorWidgetOfExactType<MapUiBody>();
    if (mapUiBody?.key is GlobalKey<MapUiBodyState>) {
      final key = mapUiBody?.key as GlobalKey<MapUiBodyState>;
      return key.currentState;
    }
    return null;
  }
}

class MapUiBodyState extends State<MapUiBody> with TickerProviderStateMixin {
  late final MapController _controller;
  final GlobalKey _mapKey = GlobalKey();
  
  // MapSystem 实例，用于通过系统调用地图接口
  late final MapSystem mapSystem;

  final _markerPositions = [
    const Geographic(lon: -10, lat: 0),
    const Geographic(lon: -5, lat: 0),
    const Geographic(lon: 0, lat: 0),
    const Geographic(lon: 5, lat: 0),
  ];

  // 自定义图片标记数据
  final _customMarkers = <Feature<Point>>[];
  bool _customMarkerImageLoaded = false;

  // 圆形数据
  final _circles = <Feature<Point>>[];

  // 多边形数据（包括扇形和长方形）
  final _polygons = <Feature<Polygon>>[];

  Geographic? _originalPosition;
  MapGestures _mapGestures = const MapGestures.all();

  @override
  void initState() {
    super.initState();
    // 初始化 MapSystem，并将 this 传递给它
    mapSystem = MapSystem(mapUiBodyState: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //appBar: AppBar(title: const Text('Interactive Widget Layer')),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Padding(
            padding: EdgeInsets.only(left: 16, bottom: 8),
            
          ),
          Expanded(
            child: MapLibreMap(
              key: _mapKey,
              options: MapOptions(
                initZoom: 3,
                initCenter: const Geographic(lon: 0, lat: 0),
                initStyle: "assets/osm_style.json",
                gestures: _mapGestures,
              ),
              onMapCreated: (controller) => _controller = controller,
              onEvent: (event) async {
                if (event is MapEventStyleLoaded) {
                  // 加载自定义标记图片
                  await event.style.addImageFromIconData(
                    id: 'custom-marker',
                    iconData: Icons.location_on,
                    color: Colors.blue,
                  );
                  setState(() {
                    _customMarkerImageLoaded = true;
                  });
                } else if (event is MapEventLongClick) {
                  final position = event.point;
                  _markerPositions.add(position);

                  setState(() {});
                }
              },
              layers: [
                // 自定义图片标记层
                MarkerLayer(
                  points: _customMarkers.where((marker) => 
                    marker.properties['type'] != 'fixed_circle'
                  ).toList(), // 过滤掉固定圆形
                  iconImage: _customMarkerImageLoaded ? 'custom-marker' : null,
                  iconSize: 0.15,
                  iconAnchor: IconAnchor.bottom,
                ),
                // 圆形层
                CircleLayer(
                  points: _circles,
                  color: Colors.orange.withValues(alpha: 0.5),
                  radius: 20,
                  strokeColor: Colors.red,
                  strokeWidth: 2,
                ),
                // 多边形层（扇形、长方形和圆形）
                PolygonLayer(
                  polygons: _polygons,
                  color: Colors.lightBlueAccent.withValues(alpha: 0.6),
                  outlineColor: Colors.blue,
                ),
              ],
              children: [
                WidgetLayer(
                  allowInteraction: true,
                  markers: List.generate(
                    _markerPositions.length,
                    (index) => Marker(
                      size: const Size.square(50),
                      point: _markerPositions[index],
                      child: GestureDetector(
                        onTap: () => _onTap(index),
                        onLongPressStart: (details) =>
                            _onLongPress(index, details),
                        onPanStart: (details) => _onLongPanStart(details, index),
                        onPanUpdate: (details) async =>
                            _onPanUpdate(details, index),
                        onPanEnd: (details) async => _onPanEnd(details, index),
                        child: const Icon(
                          Icons.location_on,
                          color: Colors.red,
                          size: 50,
                        ),
                      ),
                      alignment: Alignment.bottomCenter,
                    ),
                  ),
                ),
                // 添加固定圆形的Widget
                WidgetLayer(
                  allowInteraction: false, // 固定圆形不需要交互
                  markers: _customMarkers
                      .where((marker) => marker.properties['type'] == 'fixed_circle')
                      .map((marker) {
                        final pointGeometry = marker.geometry as Point;
                        // 使用Point的position属性获取坐标
                        final geographic = Geographic(
                          lon: pointGeometry.position.x,
                          lat: pointGeometry.position.y,
                        );
                        return Marker(
                          size: Size.fromRadius(marker.properties['radius']?.toDouble() ?? 20.0),
                          point: geographic,
                          child: IgnorePointer(  // 忽略指针事件，确保不会干扰地图手势
                            child: Container(
                              width: (marker.properties['radius']?.toDouble() ?? 20.0) * 2,
                              height: (marker.properties['radius']?.toDouble() ?? 20.0) * 2,
                              decoration: BoxDecoration(
                                color: marker.properties['color'] ?? Colors.orange,
                                shape: BoxShape.circle,
                                border: Border.all(
                                  color: marker.properties['strokeColor'] ?? Colors.red,
                                  width: marker.properties['strokeWidth']?.toDouble() ?? 2.0,
                                ),
                              ),
                            ),
                          ),
                          alignment: Alignment.center,
                        );
                      })
                      .toList(),
                ),
                // display the UI widgets above the widget markers.
                const MapScalebar(),
                const SourceAttribution(),
                const MapControlButtons(),
                const MapCompass(),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Future<Geographic> _toLngLat(Offset eventOffset) async {
    final mapRenderBox =
        _mapKey.currentContext?.findRenderObject() as RenderBox?;

    assert(mapRenderBox != null, 'RenderBox of Map should never be null');

    final mapOffset = mapRenderBox!.localToGlobal(Offset.zero);

    final offset = Offset(
      eventOffset.dx - mapOffset.dx,
      eventOffset.dy - mapOffset.dy,
    );

    return _controller.toLngLat(offset);
  }

  void _onLongPress(int index, LongPressStartDetails details) {
    final offset = details.globalPosition;

    showMenu(
      context: context,
      position: RelativeRect.fromLTRB(
        offset.dx,
        offset.dy,
        MediaQuery.of(context).size.width - offset.dx,
        MediaQuery.of(context).size.height - offset.dy,
      ),
      items: [
        const PopupMenuItem<void>(child: Text('Edit')),
        PopupMenuItem<void>(
          onTap: () async {
            final isConfirmed = await _showConfirmationDialogDelete(index);

            if (isConfirmed) {
              _markerPositions.removeAt(index);

              setState(() {});
            }
          },
          child: const Text('Delete'),
        ),
      ],
    );
  }

  Future<void> _onPanEnd(DragEndDetails details, int index) async {
    final isAccepted = await _showConfirmationDialogMove();

    if (!isAccepted) {
      _markerPositions[index] = _originalPosition!;
    } else {
      final newPosition = await _toLngLat(details.globalPosition);
      _markerPositions[index] = newPosition;
    }

    _originalPosition = null;

    setState(() {
      _mapGestures = const MapGestures.all();
    });
  }

  void _onLongPanStart(DragStartDetails details, int index) {
    // Keep original position in case of discarded move
    _originalPosition = Geographic.from(_markerPositions[index]);

    setState(() {
      // Disable camera panning while a marker gets moved.
      _mapGestures = const MapGestures.all(pan: false);
    });
  }

  Future<void> _onPanUpdate(DragUpdateDetails details, int index) async {
    final newPosition = await _toLngLat(details.globalPosition);
    _markerPositions[index] = newPosition;

    setState(() {});
  }

  void _onTap(int index) {
    _showMarkerDetails(index);
  }

  Future<bool> _showConfirmationDialogDelete(int index) async {
    final isConfirmed = await showDialog<bool>(
      context: context,
      builder: (context) => AlertDialog(
        title: Text('Delete marker [$index]?'),
        actions: <Widget>[
          TextButton(
            style: TextButton.styleFrom(
              textStyle: Theme.of(context).textTheme.labelLarge,
            ),
            child: const Text('Cancel'),
            onPressed: () {
              Navigator.of(context).pop(false);
            },
          ),
          TextButton(
            style: TextButton.styleFrom(
              textStyle: Theme.of(context).textTheme.labelLarge,
            ),
            child: const Text('Delete'),
            onPressed: () {
              Navigator.of(context).pop(true);
            },
          ),
        ],
      ),
    );

    return isConfirmed ?? false;
  }

  Future<bool> _showConfirmationDialogMove() async {
    final isConfirmed = await showDialog<bool>(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('Accept new position?'),
        actions: <Widget>[
          TextButton(
            style: TextButton.styleFrom(
              textStyle: Theme.of(context).textTheme.labelLarge,
            ),
            child: const Text('Discard'),
            onPressed: () {
              Navigator.of(context).pop(false);
            },
          ),
          TextButton(
            style: TextButton.styleFrom(
              textStyle: Theme.of(context).textTheme.labelLarge,
            ),
            child: const Text('Accept'),
            onPressed: () {
              Navigator.of(context).pop(true);
            },
          ),
        ],
      ),
    );

    return isConfirmed ?? false;
  }

  Future<void> _showMarkerDetails(int index) async {
    await showDialog<void>(
      context: context,
      builder: (context) => AlertDialog(
        title: Text('Details marker with index: $index'),
        content: Text('Show here the details of Marker with index $index'),
        actions: <Widget>[
          TextButton(
            style: TextButton.styleFrom(
              textStyle: Theme.of(context).textTheme.labelLarge,
            ),
            child: const Text('Cancel'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ],
      ),
    );

    return;
  }

  // ==================== 公共接口方法 ====================

  /// 添加自定义图片标记
  ///
  /// [position] 标记的地理位置
  /// [properties] 可选的属性数据
  void addCustomMarker(Geographic position, {Map<String, dynamic>? properties}) {
    setState(() {
      _customMarkers.add(Feature(
        geometry: Point(position),
        properties: properties,
      ));
    });
  }

  /// 添加圆形
  ///
  /// [position] 圆心的地理位置
  /// [radius] 圆的半径（单位：像素）
  /// [color] 填充颜色
  /// [strokeColor] 边框颜色
  /// [strokeWidth] 边框宽度
  void addCircle(
    Geographic position, {
    double radius = 20,
    Color color = Colors.orange,
    Color strokeColor = Colors.red,
    double strokeWidth = 2,
  }) {
    setState(() {
      _circles.add(Feature(
        geometry: Point(position),
        properties: {
          'radius': radius,
          'color': color,
          'strokeColor': strokeColor,
          'strokeWidth': strokeWidth,
        },
      ));
    });
  }

  /// 添加固定大小的圆形（不随地图缩放）
  ///
  /// [center] 圆心的地理位置
  /// [radius] 圆的半径（单位：米）
  /// [color] 填充颜色
  /// [outlineColor] 边框颜色
  void addFixedCircle(
    Geographic center, {
    required double radius,
    Color color = Colors.orange,
    Color outlineColor = Colors.blue,
  }) {
    // 将半径从米转换为经纬度（度）
    final radiusInDegrees = _metersToDegrees(center, radius);
    
    final points = <Geographic>[];
    
    // 计算圆周上的点（360度）
    for (int i = 0; i <= 36; i++) { // 使用36个点来构成圆形
      final angle = (360 * i / 36) * 3.14159265359 / 180; // 角度转弧度
      
      // 将角度转换为经纬度偏移
      final latOffset = radiusInDegrees * Math.sin(angle);
      final lonOffset = radiusInDegrees * Math.cos(angle);
      
      points.add(Geographic(
        lon: center.lon + lonOffset,
        lat: center.lat + latOffset,
      ));
    }
    
    setState(() {
      _polygons.add(Feature(
        geometry: Polygon.from([points]),
        properties: {
          'color': color,
          'outlineColor': outlineColor,
          'type': 'fixed_circle_geo', // 标记为地理圆形
        },
      ));
    });
  }

  /// 添加扇形
  ///
  /// [center] 扇形中心的地理位置
  /// [radius] 扇形的半径（单位：米）
  /// [startAngle] 起始角度（单位：度，0度表示正东方向）
  /// [endAngle] 结束角度（单位：度）
  /// [segments] 扇形的分段数，值越大越平滑
  /// [color] 填充颜色
  /// [outlineColor] 边框颜色
  void addSector(
    Geographic center, {
    required double radius,
    required double startAngle,
    required double endAngle,
    int segments = 36,
    Color color = Colors.lightBlueAccent,
    Color outlineColor = Colors.blue,
  }) {
    // 将半径从米转换为经纬度（度）
    final radiusInDegrees = _metersToDegrees(center, radius);
    
    final points = <Geographic>[];
    
    // 添加中心点
    points.add(center);
    
    // 计算扇形的弧线上的点
    for (int i = 0; i <= segments; i++) {
      final angle = startAngle + (endAngle - startAngle) * i / segments;
      final angleRad = angle * 3.14159265359 / 180;
      
      // 将角度转换为经纬度偏移
      final latOffset = radiusInDegrees * Math.sin(angleRad);
      final lonOffset = radiusInDegrees * Math.cos(angleRad);
      
      points.add(Geographic(
        lon: center.lon + lonOffset,
        lat: center.lat + latOffset,
      ));
    }
    
    setState(() {
      _polygons.add(Feature(
        geometry: Polygon.from([points]),
        properties: {
          'color': color,
          'outlineColor': outlineColor,
        },
      ));
    });
  }

  /// 添加长方形
  ///
  /// [center] 长方形中心的地理位置
  /// [width] 长方形的宽度（单位：米）
  /// [height] 长方形的高度（单位：米）
  /// [color] 填充颜色
  /// [outlineColor] 边框颜色
  void addRectangle(
    Geographic center, {
    required double width,
    required double height,
    Color color = Colors.lightBlueAccent,
    Color outlineColor = Colors.blue,
  }) {
    // 将宽高从米转换为经纬度（度）
    final widthInDegrees = _metersToDegrees(center, width / 2);
    final heightInDegrees = _metersToDegrees(center, height / 2);
    
    final points = [
      Geographic(lon: center.lon - widthInDegrees, lat: center.lat - heightInDegrees),
      Geographic(lon: center.lon + widthInDegrees, lat: center.lat - heightInDegrees),
      Geographic(lon: center.lon + widthInDegrees, lat: center.lat + heightInDegrees),
      Geographic(lon: center.lon - widthInDegrees, lat: center.lat + heightInDegrees),
      Geographic(lon: center.lon - widthInDegrees, lat: center.lat - heightInDegrees), // 闭合多边形
    ];
    
    setState(() {
      _polygons.add(Feature(
        geometry: Polygon.from([points]),
        properties: {
          'color': color,
          'outlineColor': outlineColor,
        },
      ));
    });
  }

  /// 将距离（米）转换为经纬度（度）
  /// 此方法使用近似计算，适用于小范围区域
  double _metersToDegrees(Geographic center, double meters) {
    // 地球半径，约为6378137米
    const earthRadius = 6378137.0;
    
    // 将米转换为度
    // 1度大约等于111320米（在赤道附近）
    // 但需要考虑纬度的影响，因为经度的距离会随纬度变化
    final latCircumference = 2 * Math.pi * earthRadius; // 纬线周长
    final latFactor = meters / latCircumference * 360; // 纬度方向转换因子
    
    // 经度方向需要考虑纬度的影响
    final lonCircumference = 2 * Math.pi * earthRadius * Math.cos(center.lat * Math.pi / 180); // 经线周长
    final lonFactor = meters / lonCircumference * 360; // 经度方向转换因子
    
    // 返回平均值，对于小范围区域，这个近似是足够的
    return (latFactor + lonFactor) / 2;
  }

  /// 清除所有自定义标记
  void clearCustomMarkers() {
    setState(() {
      _customMarkers.clear();
    });
  }

  /// 清除所有圆形
  void clearCircles() {
    setState(() {
      _circles.clear();
    });
  }

  /// 清除所有多边形（包括扇形和长方形）
  void clearPolygons() {
    setState(() {
      _polygons.clear();
    });
  }

  /// 清除所有自定义图层
  void clearAllCustomLayers() {
    setState(() {
      _customMarkers.clear();
      _circles.clear();
      _polygons.clear();
    });
  }
}