import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';
import '../controllers/workout_controller.dart';
import '../utils/formatters.dart';

/// شاشة تتبع التمرين (Live Tracking Screen)
/// تعرض الخريطة، المسار، والإحصائيات الحية.
class TrackingScreen extends StatefulWidget {
  const TrackingScreen({super.key});

  @override
  State<TrackingScreen> createState() => _TrackingScreenState();
}

class _TrackingScreenState extends State<TrackingScreen> {
  final MapController _mapController = MapController();
  bool _followUser = true;
  late Worker _worker;

  @override
  void initState() {
    super.initState();
    final ctrl = Get.find<WorkoutController>();
    _worker = ever(ctrl.liveCoordinates, (coords) {
      if (_followUser && coords.isNotEmpty) {
        try {
          final center = LatLng(coords.last.latitude, coords.last.longitude);
          _mapController.move(center, _mapController.camera.zoom);
        } catch (_) {
          // Map not fully initialized yet
        }
      }
    });
  }

  @override
  void dispose() {
    _worker.dispose();
    _mapController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final ctrl = Get.find<WorkoutController>();

    return Scaffold(
      body: Stack(
        children: [
          // 1. الخريطة (The Map)
          Obx(() {
            final coords = ctrl.liveCoordinates;
            final center = coords.isNotEmpty 
                ? LatLng(coords.last.latitude, coords.last.longitude)
                : const LatLng(31.9454, 35.9284); // Amman default

            return FlutterMap(
              mapController: _mapController,
              options: MapOptions(
                initialCenter: center,
                initialZoom: 16,
                onPositionChanged: (pos, hasGesture) {
                  if (hasGesture) setState(() => _followUser = false);
                },
              ),
              children: [
                TileLayer(
                  urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
                  userAgentPackageName: 'com.musadaq.running',
                ),
                // رسم المسار (The Route Polyline)
                PolylineLayer(
                  polylines: [
                    Polyline(
                      points: coords.map((c) => LatLng(c.latitude, c.longitude)).toList(),
                      strokeWidth: 5,
                      color: const Color(0xFFFF5722),
                    ),
                  ],
                ),
                // موقع المستخدم الحالي (Current Location Marker)
                if (coords.isNotEmpty)
                  MarkerLayer(
                    markers: [
                      Marker(
                        point: LatLng(coords.last.latitude, coords.last.longitude),
                        width: 40,
                        height: 40,
                        child: _buildLocationMarker(),
                      ),
                    ],
                  ),
              ],
            );
          }),

          // 2. لوحة الإحصائيات (Stats Overlay)
          _buildTopStats(ctrl),

          // 3. أزرار التحكم (Control Buttons)
          _buildBottomControls(ctrl),

          // 4. زر إعادة التمركز (Recenter Button)
          if (!_followUser)
            Positioned(
              right: 20,
              bottom: 150,
              child: FloatingActionButton.small(
                onPressed: () => setState(() => _followUser = true),
                backgroundColor: Colors.white,
                child: const Icon(Icons.my_location, color: Colors.black),
              ),
            ),
        ],
      ),
    );
  }

  Widget _buildTopStats(WorkoutController ctrl) {
    return Positioned(
      top: 50,
      left: 20,
      right: 20,
      child: Container(
        padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 10),
        decoration: BoxDecoration(
          color: Colors.black.withOpacity(0.8),
          borderRadius: BorderRadius.circular(20),
          border: Border.all(color: Colors.white10),
        ),
        child: Obx(() => Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            _buildStatItem("الوقت", Formatters.time(ctrl.elapsedSeconds.value)),
            _buildStatItem("المسافة", "${Formatters.distanceKm(ctrl.liveDistance.value)} كم"),
            _buildStatItem("الوتيرة", Formatters.pace(ctrl.liveSpeed.value)),
          ],
        )),
      ),
    );
  }

  Widget _buildStatItem(String label, String value) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Text(label, style: const TextStyle(color: Colors.grey, fontSize: 12)),
        Text(value, style: const TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold)),
      ],
    );
  }

  Widget _buildBottomControls(WorkoutController ctrl) {
    return Positioned(
      bottom: 40,
      left: 30,
      right: 30,
      child: Obx(() {
        final workout = ctrl.currentWorkout.value;
        if (workout == null) return const SizedBox.shrink();

        return Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            // زر التوقف المؤقت / الاستئناف
            _buildCircleButton(
              onPressed: workout.isPaused ? ctrl.resumeWorkout : ctrl.pauseWorkout,
              icon: workout.isPaused ? Icons.play_arrow : Icons.pause,
              color: Colors.orange,
            ),
            // زر الإنهاء (ضغطة مطولة لتجنب الخطأ)
            GestureDetector(
              onLongPress: () {
                ctrl.stopWorkout();
                Get.back();
              },
              child: _buildCircleButton(
                onPressed: () {
                  Get.snackbar("تنبيه", "اضغط مطولاً على زر الإيقاف للإنهاء", 
                    snackPosition: SnackPosition.BOTTOM, backgroundColor: Colors.white, colorText: Colors.black);
                },
                icon: Icons.stop,
                color: Colors.red,
                size: 80,
              ),
            ),
          ],
        );
      }),
    );
  }

  Widget _buildCircleButton({required VoidCallback onPressed, required IconData icon, required Color color, double size = 60}) {
    return Container(
      width: size,
      height: size,
      decoration: BoxDecoration(
        color: color,
        shape: BoxShape.circle,
        boxShadow: [BoxShadow(color: color.withOpacity(0.4), blurRadius: 10, spreadRadius: 2)],
      ),
      child: IconButton(
        icon: Icon(icon, color: Colors.white, size: size * 0.5),
        onPressed: onPressed,
      ),
    );
  }

  Widget _buildLocationMarker() {
    return Stack(
      alignment: Alignment.center,
      children: [
        Container(
          width: 30,
          height: 30,
          decoration: BoxDecoration(
            color: const Color(0xFFFF5722).withOpacity(0.2),
            shape: BoxShape.circle,
          ),
        ),
        Container(
          width: 15,
          height: 15,
          decoration: const BoxDecoration(
            color: Color(0xFFFF5722),
            shape: BoxShape.circle,
            border: Border.fromBorderSide(BorderSide(color: Colors.white, width: 2)),
          ),
        ),
      ],
    );
  }
}