import 'package:dio_cache_interceptor_hive_store/dio_cache_interceptor_hive_store.dart';
import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_map_cache/flutter_map_cache.dart';
import 'package:flutter_map_location_marker/flutter_map_location_marker.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:latlong2/latlong.dart';
import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';
import 'package:rogapp/features/location/location_provider.dart';
import 'package:rogapp/features/state/game_state.dart';
import 'package:rogapp/features/state/game_view_model.dart';
import 'package:path_provider/path_provider.dart';

class HomePage extends ConsumerStatefulWidget {
  const HomePage({super.key});

  @override
  ConsumerState<HomePage> createState() => _HomePageState();
}

class _HomePageState extends ConsumerState<HomePage> {
  MapController mapController = MapController();
  String? _cachePath;

  @override
  void initState() {
    super.initState();
    //ref.read(featureCheckpointCollectionProvider.future);
    ref.read(locationNotifierProvider.notifier).startListening();
    _initializeCachePath();
  }

  Future<void> _initializeCachePath() async {
    _cachePath = await getTemporaryDirectory().then((dir) => dir.path);
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    final gameState = ref.watch(gameViewModelProvider);
    final locationState = ref.watch(locationNotifierProvider);

    if (_cachePath == null || gameState.markers.isEmpty) {
      return Scaffold(
        appBar: AppBar(),
        body: Center(child: CircularProgressIndicator()),
      );
    }
    return Scaffold(
      appBar: AppBar(
        actions: [
          Text(
              'Current Latitude: ${locationState.currentPosition?.latitude ?? 'No data'}'),
          IconButton(
            icon: Icon(MdiIcons.logout),
            onPressed: () => _logGameState(gameState),
          ),
          Text(gameState.currentLocation?.latitude.toString() ??
              '--- No location'),
        ],
      ),
      body: Column(
        children: [
          Expanded(child: _buildMap(gameState, _cachePath!)),
        ],
      ),
    );
  }

  void _logGameState(GameState gameState) {
    print("Checkpoint photo taken: ${gameState.checkpointPhotoTaken}");
    print("Current checkpoint: ${gameState.currentCheckpoint}");
    print("Has left start area: ${gameState.hasLeftStartArea}");
    print("Has visited checkpoint: ${gameState.hasVisitedCheckpoint}");
  }

  Widget _buildMap(GameState gameState, String cachePath) {
    return FlutterMap(
      mapController: mapController,
      options: MapOptions(
        interactionOptions: const InteractionOptions(
          enableMultiFingerGestureRace: true,
          flags: InteractiveFlag.doubleTapDragZoom |
              InteractiveFlag.doubleTapZoom |
              InteractiveFlag.drag |
              InteractiveFlag.flingAnimation |
              InteractiveFlag.pinchZoom |
              InteractiveFlag.scrollWheelZoom,
        ),
        maxZoom: 18.4,
        onMapReady: () => mapController.move(LatLng(37.153196, 139.587659), 4),
      ),
      children: [
        TileLayer(
          urlTemplate:
              'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
          tileProvider: CachedTileProvider(
            maxStale: Duration(days: 30),
            store: HiveCacheStore(cachePath, hiveBoxName: 'HiveCacheStore'),
          ),
        ),
        CurrentLocationLayer(
          alignDirectionOnUpdate: AlignOnUpdate.never,
          style: const LocationMarkerStyle(
            marker: DefaultLocationMarker(
              child: Icon(
                Icons.navigation,
                color: Colors.white,
                size: 15,
              ),
            ),
            markerSize: Size(27, 27),
            markerDirection: MarkerDirection.heading,
          ),
        ),
        MarkerLayer(
          markers: gameState.markers.map((feature) {
            return Marker(
              child: const Icon(Icons.location_on),
              // Convert each Feature to a Marker
              width: 80.0,
              height: 80.0,
              point:
                  LatLng(feature.geometry.latitude, feature.geometry.longitude),
            );
          }).toList(),
        ),
      ],
    );
  }
}