import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';
import 'package:geolocator/geolocator.dart';
import 'package:latlong2/latlong.dart';
import 'package:manager_api_new/api.dart';
import 'package:mymuseum_visitapp/Helpers/translationHelper.dart';
import 'package:mymuseum_visitapp/Models/visitContext.dart';
import 'package:mymuseum_visitapp/Screens/Sections/GuidedPath/guided_path_audio_player.dart';
import 'package:mymuseum_visitapp/Screens/Sections/GuidedPath/guided_path_end_view.dart';
import 'package:mymuseum_visitapp/Screens/Sections/GuidedPath/guided_path_geo.dart';
import 'package:mymuseum_visitapp/Screens/Sections/GuidedPath/guided_step_challenge.dart';
import 'package:mymuseum_visitapp/Services/pushNotificationService.dart';
import 'package:mymuseum_visitapp/constants.dart';

class GuidedPathMapProgressionPage extends StatefulWidget {
  final GuidedPathDTO path;
  final MapDTO mapDTO;
  final VisitAppContext visitAppContext;

  const GuidedPathMapProgressionPage({
    Key? key,
    required this.path,
    required this.mapDTO,
    required this.visitAppContext,
  }) : super(key: key);

  @override
  State<GuidedPathMapProgressionPage> createState() =>
      _GuidedPathMapProgressionPageState();
}

class _GuidedPathMapProgressionPageState extends State<GuidedPathMapProgressionPage>
    with SingleTickerProviderStateMixin {
  late List<GuidedStepDTO> _steps;
  int _index = 0;
  final Set<String> _completedStepIds = {};

  GuidedStepChallengeController? _challenge;
  bool _expiredShown = false;
  bool _showDetail = false;

  LatLng? _userPosition;
  bool _inGeoZone = false;
  double? _distanceMeters;
  bool _geoUnavailable = false;
  StreamSubscription<Position>? _positionSub;

  final MapController _mapController = MapController();
  late AnimationController _pulse;
  late Animation<double> _pulseAnim;

  static const _gold = Color(0xFFD4AF37);
  static const _green = Color(0xFF2E9E6B);

  bool get _isGame => widget.path.isGameMode == true;
  Color get _accent => _isGame ? _gold : kMainColor;
  Color get _ink => _isGame ? const Color(0xFFF4ECD8) : const Color(0xFF1E2A33);
  Color get _muted => _isGame ? const Color(0xFF8a8068) : const Color(0xFF6B7B86);
  Color get _detailBg => _isGame ? const Color(0xFF0B1018) : const Color(0xFFF6F3EE);

  GuidedStepDTO? get _currentStep => _steps.isEmpty ? null : _steps[_index];

  @override
  void initState() {
    super.initState();
    _steps = [...(widget.path.steps ?? [])]
      ..sort((a, b) => (a.order ?? 0).compareTo(b.order ?? 0));
    _pulse = AnimationController(vsync: this, duration: const Duration(milliseconds: 900))
      ..repeat(reverse: true);
    _pulseAnim = Tween<double>(begin: 1.0, end: 1.4)
        .animate(CurvedAnimation(parent: _pulse, curve: Curves.easeInOut));
    _initStepState();
    _startLocationTracking();
  }

  @override
  void dispose() {
    _positionSub?.cancel();
    _pulse.dispose();
    _challenge?.removeListener(_onChallengeChanged);
    _challenge?.dispose();
    super.dispose();
  }

  // ─── État d'étape ───────────────────────────────────────────────────────────

  void _initStepState() {
    _challenge?.removeListener(_onChallengeChanged);
    _challenge?.dispose();
    _expiredShown = false;
    _showDetail = false;
    _inGeoZone = false;
    _distanceMeters = null;

    final step = _currentStep;
    if (step == null) return;

    final questions = GuidedStepChallengeController.buildQuestions(step);
    final hasTimer = step.isStepTimer == true && (step.timerSeconds ?? 0) > 0;
    _challenge = GuidedStepChallengeController(
      questions: questions,
      isGame: _isGame,
      requireSuccess: widget.path.requireSuccessToAdvance ?? false,
      hasTimer: hasTimer,
      timerSeconds: step.timerSeconds ?? 0,
      visitAppContext: widget.visitAppContext,
    )..addListener(_onChallengeChanged);

    if (_userPosition != null) _checkGeoZone(_userPosition!);
    _centerOnCurrent();
  }

  void _onChallengeChanged() {
    if (!mounted) return;
    setState(() {});
    final c = _challenge;
    final step = _currentStep;
    if (c != null && c.expired && !_expiredShown) {
      final msg = TranslationHelper.get(step?.timerExpiredMessage, widget.visitAppContext);
      if (msg.isNotEmpty) {
        _expiredShown = true;
        WidgetsBinding.instance.addPostFrameCallback((_) => _showExpiredModal(msg));
      }
    }
  }

  String _translate(List<TranslationDTO>? list) =>
      TranslationHelper.get(list, widget.visitAppContext);

  bool _hasGeoTrigger(GuidedStepDTO step) =>
      step.isGeoTriggered == true &&
      step.geometry != null &&
      (step.zoneRadiusMeters ?? 0) > 0;

  bool get _canAdvance {
    final step = _currentStep;
    if (step == null || step.isStepLocked == true) return false;
    final requireSuccess = widget.path.requireSuccessToAdvance ?? false;
    final zoneOk = !_hasGeoTrigger(step) || _inGeoZone || !requireSuccess || _geoUnavailable;
    return (_challenge?.canAdvance ?? true) && zoneOk;
  }

  // ─── Navigation ───────────────────────────────────────────────────────────

  void _advance() {
    final step = _currentStep;
    if (step == null || !_canAdvance) return;
    if (step.id != null) _completedStepIds.add(step.id!);
    if (_index < _steps.length - 1) {
      setState(() {
        _index++;
        _initStepState();
      });
    } else {
      _showEnd();
    }
  }

  void _goBack() {
    if (_index > 0 && !(widget.path.isLinear ?? false)) {
      setState(() {
        _index--;
        _initStepState();
      });
    }
  }

  void _openChallenge() {
    setState(() => _showDetail = true);
    final started = _challenge?.openChallenge() ?? false;
    if (started) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: const Text('Le chrono a démarré !'),
        behavior: SnackBarBehavior.floating,
        duration: const Duration(seconds: 2),
        backgroundColor: _isGame ? const Color(0xFF141a24) : const Color(0xFF1E2A33),
      ));
    }
  }

  void _showEnd() {
    final outro = _stripHtml(
        TranslationHelper.getWithResource(widget.path.gameMessageFin, widget.visitAppContext));
    Navigator.of(context).push(MaterialPageRoute(
      builder: (_) => GuidedPathEndView(
        isGame: _isGame,
        primaryColor: kMainColor,
        pathTitle: _translate(widget.path.title),
        stepsCount: _steps.length,
        estimatedDurationMinutes: widget.path.estimatedDurationMinutes,
        gameOutro: outro,
        onBack: () {
          Navigator.of(context).pop();
          Navigator.of(context).pop();
        },
      ),
    ));
  }

  // ─── Géoloc ───────────────────────────────────────────────────────────────

  Future<void> _startLocationTracking() async {
    final serviceEnabled = await Geolocator.isLocationServiceEnabled();
    if (!serviceEnabled) {
      if (mounted) setState(() => _geoUnavailable = true);
      return;
    }
    var permission = await Geolocator.checkPermission();
    if (permission == LocationPermission.denied) {
      permission = await Geolocator.requestPermission();
    }
    if (permission == LocationPermission.denied ||
        permission == LocationPermission.deniedForever) {
      if (mounted) setState(() => _geoUnavailable = true);
      return;
    }
    if (mounted) setState(() => _geoUnavailable = false);
    _positionSub = Geolocator.getPositionStream(
      locationSettings:
          const LocationSettings(accuracy: LocationAccuracy.high, distanceFilter: 5),
    ).listen((pos) {
      if (!mounted) return;
      final p = LatLng(pos.latitude, pos.longitude);
      setState(() => _userPosition = p);
      _checkGeoZone(p);
    });
  }

  void _retryGeo() {
    _positionSub?.cancel();
    _startLocationTracking();
  }

  void _checkGeoZone(LatLng position) {
    if (!mounted) return;
    final step = _currentStep;
    if (step == null || !_hasGeoTrigger(step)) return;
    final center = GuidedPathGeo.center(step.geometry);
    if (center == null) return;

    final radius = step.zoneRadiusMeters ?? 0;
    final dist = const Distance().distance(position, center);
    final inZone = dist <= radius;
    if (inZone && !_inGeoZone) {
      PushNotificationService.showGeoZoneNotification(stepTitle: _translate(step.title));
    }
    setState(() {
      _distanceMeters = dist;
      _inGeoZone = inZone;
    });
  }

  // ─── Carte ──────────────────────────────────────────────────────────────────

  List<GuidedStepDTO> get _visibleSteps => (widget.path.hideNextStepsUntilComplete ?? false)
      ? _steps.sublist(0, _index + 1)
      : _steps;

  List<LatLng> get _polylinePositions => _visibleSteps
      .map((s) => GuidedPathGeo.center(s.geometry))
      .whereType<LatLng>()
      .toList();

  void _centerOnCurrent() {
    final center = GuidedPathGeo.center(_currentStep?.geometry);
    if (center == null) return;
    WidgetsBinding.instance.addPostFrameCallback((_) {
      try {
        _mapController.move(center, _mapController.camera.zoom);
      } catch (_) {}
    });
  }

  void _fitToSteps() {
    final pts = _polylinePositions;
    if (pts.length < 2) return;
    try {
      _mapController.fitCamera(
        CameraFit.bounds(
          bounds: LatLngBounds.fromPoints(pts),
          padding: const EdgeInsets.all(70),
          maxZoom: 17,
        ),
      );
    } catch (_) {}
  }

  String _formatDistance(double m) {
    if (m < 1000) return '${m.round()} m';
    return '${(m / 1000).toStringAsFixed(m < 10000 ? 1 : 0)} km';
  }

  String _stripHtml(String html) => html
      .replaceAll(RegExp(r'<[^>]*>'), ' ')
      .replaceAll('&nbsp;', ' ')
      .replaceAll(RegExp(r'\s+'), ' ')
      .trim();

  // ─── Build ────────────────────────────────────────────────────────────────

  @override
  Widget build(BuildContext context) {
    final step = _currentStep;
    if (step == null) {
      return const Scaffold(body: Center(child: Text('Aucune étape')));
    }
    final challenge = _challenge!;

    final fallback = widget.mapDTO.latitude != null && widget.mapDTO.longitude != null
        ? LatLng(double.tryParse(widget.mapDTO.latitude!) ?? 50.4655,
            double.tryParse(widget.mapDTO.longitude!) ?? 4.8651)
        : const LatLng(50.465503, 4.865105);
    final initialCenter = _polylinePositions.isNotEmpty ? _polylinePositions.first : fallback;
    final zoom = widget.mapDTO.zoom?.toDouble() ?? 15.0;

    return Scaffold(
      body: Stack(
        children: [
          FlutterMap(
            mapController: _mapController,
            options: MapOptions(
              initialCenter: initialCenter,
              initialZoom: zoom,
              onMapReady: _fitToSteps,
            ),
            children: [
              TileLayer(
                urlTemplate: 'https://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',
                userAgentPackageName: 'be.unov.myinfomate.visitapp',
              ),
              ..._buildShapeLayers(),
              if (_polylinePositions.length > 1)
                PolylineLayer(
                  polylines: [
                    Polyline(
                      points: _polylinePositions,
                      color: _accent.withOpacity(0.85),
                      strokeWidth: 4,
                      pattern: StrokePattern.dashed(segments: const [8.0, 6.0]),
                    ),
                  ],
                ),
              MarkerLayer(markers: _buildMarkers()),
            ],
          ),

          _buildTopHeader(),
          if (!_showDetail) _buildBottomSheet(step),
          if (_showDetail) _buildDetailOverlay(step),

          GuidedStepChallengeOverlay(
            controller: challenge,
            stepIndex: _index,
            accentColor: _accent,
            isGame: _isGame,
            visitAppContext: widget.visitAppContext,
          ),
        ],
      ),
    );
  }

  List<Widget> _buildShapeLayers() {
    final polylines = <Polyline>[];
    final polygons = <Polygon>[];
    for (final s in _visibleSteps) {
      final shape = GuidedPathGeo.shape(s.geometry);
      if (shape == null) continue;
      final completed = s.id != null && _completedStepIds.contains(s.id);
      final current = s.id == _currentStep?.id;
      final color = completed ? _green : (current ? _accent : Colors.grey);
      final opacity = (!completed && !current) ? 0.5 : 0.9;
      if (shape.type == 'LineString') {
        polylines.add(Polyline(
          points: shape.positions,
          color: color.withOpacity(opacity),
          strokeWidth: 5,
        ));
      } else {
        polygons.add(Polygon(
          points: shape.positions,
          color: color.withOpacity(0.15),
          borderColor: color.withOpacity(opacity),
          borderStrokeWidth: 3,
        ));
      }
    }
    return [
      if (polygons.isNotEmpty) PolygonLayer(polygons: polygons),
      if (polylines.isNotEmpty) PolylineLayer(polylines: polylines),
    ];
  }

  List<Marker> _buildMarkers() {
    final markers = <Marker>[];
    var visibleOrder = 0;
    for (int i = 0; i < _steps.length; i++) {
      final step = _steps[i];
      final visible = _visibleSteps.contains(step);
      if (!visible) continue;
      visibleOrder++;
      final center = GuidedPathGeo.center(step.geometry);
      if (center == null) continue;

      final completed = step.id != null && _completedStepIds.contains(step.id);
      final current = i == _index;
      final locked = step.isStepLocked == true;

      Widget pin;
      if (current) {
        pin = AnimatedBuilder(
          animation: _pulseAnim,
          builder: (_, __) => Transform.scale(
            scale: _pulseAnim.value,
            child: _numberedPin('$visibleOrder', _accent, _isGame),
          ),
        );
      } else if (completed) {
        pin = _iconPin(Icons.check, _green);
      } else if (locked) {
        pin = _iconPin(Icons.lock, Colors.grey.shade500);
      } else {
        pin = _numberedPin('$visibleOrder', Colors.grey.shade500, false);
      }

      markers.add(Marker(
        point: center,
        width: 44,
        height: 44,
        child: pin,
      ));
    }

    if (_userPosition != null) {
      markers.add(Marker(
        point: _userPosition!,
        width: 26,
        height: 26,
        child: Container(
          decoration: BoxDecoration(
            color: Colors.blue,
            shape: BoxShape.circle,
            border: Border.all(color: Colors.white, width: 2),
            boxShadow: [
              BoxShadow(color: Colors.blue.withOpacity(0.4), blurRadius: 8, spreadRadius: 2)
            ],
          ),
        ),
      ));
    }
    return markers;
  }

  Widget _numberedPin(String label, Color color, bool goldText) {
    return Container(
      width: 34,
      height: 34,
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: color,
        shape: BoxShape.circle,
        border: Border.all(color: Colors.white, width: 2),
        boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.25), blurRadius: 5)],
      ),
      child: Text(label,
          style: TextStyle(
              color: goldText ? const Color(0xFF1a1305) : Colors.white,
              fontWeight: FontWeight.w800,
              fontSize: 14)),
    );
  }

  Widget _iconPin(IconData icon, Color color) {
    return Container(
      width: 34,
      height: 34,
      decoration: BoxDecoration(
        color: color,
        shape: BoxShape.circle,
        border: Border.all(color: Colors.white, width: 2),
        boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.25), blurRadius: 5)],
      ),
      child: Icon(icon, color: Colors.white, size: 18),
    );
  }

  Widget _buildTopHeader() {
    return Positioned(
      top: MediaQuery.of(context).padding.top + 12,
      left: 14,
      right: 14,
      child: Row(
        children: [
          GestureDetector(
            onTap: () => Navigator.of(context).pop(),
            child: Container(
              width: 40,
              height: 40,
              decoration: BoxDecoration(
                color: Colors.white.withOpacity(0.9),
                borderRadius: BorderRadius.circular(12),
                boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.12), blurRadius: 8)],
              ),
              child: const Icon(Icons.arrow_back_ios_new, size: 16, color: Color(0xFF1E2A33)),
            ),
          ),
          const SizedBox(width: 10),
          Expanded(
            child: Container(
              height: 40,
              padding: const EdgeInsets.only(left: 14, right: 8),
              decoration: BoxDecoration(
                color: Colors.white.withOpacity(0.9),
                borderRadius: BorderRadius.circular(12),
                boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.12), blurRadius: 8)],
              ),
              child: Row(
                children: [
                  Expanded(
                    child: Text(_translate(widget.path.title),
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                        style: const TextStyle(
                            fontSize: 15,
                            fontWeight: FontWeight.w600,
                            color: Color(0xFF1E2A33))),
                  ),
                  Container(
                    padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                    decoration: BoxDecoration(
                      color: _accent.withOpacity(0.12),
                      borderRadius: BorderRadius.circular(9),
                    ),
                    child: Text('${_index + 1} / ${_steps.length}',
                        style: TextStyle(
                            color: _accent, fontSize: 12, fontWeight: FontWeight.w700)),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildBottomSheet(GuidedStepDTO step) {
    final title = _translate(step.title);
    final hasQuiz = _challenge?.hasQuiz ?? false;
    final progress = _steps.length > 1 ? _index / (_steps.length - 1) : 0.0;

    return Positioned(
      left: 0,
      right: 0,
      bottom: 0,
      child: Container(
        decoration: const BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.vertical(top: Radius.circular(22)),
          boxShadow: [BoxShadow(color: Colors.black26, blurRadius: 24, offset: Offset(0, -8))],
        ),
        padding: EdgeInsets.only(bottom: 18 + MediaQuery.of(context).padding.bottom),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Padding(
              padding: const EdgeInsets.only(top: 10, bottom: 4),
              child: Container(
                width: 40,
                height: 5,
                decoration: BoxDecoration(
                  color: const Color(0xFFE2DCD2),
                  borderRadius: BorderRadius.circular(3),
                ),
              ),
            ),
            GestureDetector(
              onTap: () => setState(() => _showDetail = true),
              child: Padding(
                padding: const EdgeInsets.fromLTRB(18, 4, 18, 0),
                child: Row(
                  children: [
                    _stepThumb(step),
                    const SizedBox(width: 14),
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text('ÉTAPE EN COURS',
                              style: TextStyle(
                                  color: _accent,
                                  fontSize: 11,
                                  fontWeight: FontWeight.w700,
                                  letterSpacing: 0.5)),
                          const SizedBox(height: 3),
                          Text(title,
                              maxLines: 2,
                              overflow: TextOverflow.ellipsis,
                              style: const TextStyle(
                                  color: Color(0xFF1E2A33),
                                  fontSize: 18,
                                  fontWeight: FontWeight.w600,
                                  height: 1.15)),
                        ],
                      ),
                    ),
                    const Icon(Icons.chevron_right, color: Color(0xFF6B7B86)),
                  ],
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.fromLTRB(18, 12, 18, 0),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(4),
                child: LinearProgressIndicator(
                  value: progress.clamp(0.0, 1.0),
                  minHeight: 6,
                  backgroundColor: const Color(0xFFEEE9E0),
                  valueColor: AlwaysStoppedAnimation<Color>(_accent),
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.fromLTRB(18, 12, 18, 0),
              child: Row(
                children: [
                  if (_index > 0 && !(widget.path.isLinear ?? false)) ...[
                    Expanded(
                      child: OutlinedButton(
                        onPressed: _goBack,
                        style: OutlinedButton.styleFrom(
                          foregroundColor: const Color(0xFF46555F),
                          side: const BorderSide(color: Color(0xFFE2DCD2), width: 1.5),
                          padding: const EdgeInsets.symmetric(vertical: 14),
                          shape:
                              RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)),
                        ),
                        child: const Text('Précédente',
                            style: TextStyle(fontSize: 14, fontWeight: FontWeight.w700)),
                      ),
                    ),
                    const SizedBox(width: 11),
                  ],
                  if (hasQuiz) ...[
                    Expanded(
                      child: OutlinedButton.icon(
                        onPressed: () => setState(() => _showDetail = true),
                        style: OutlinedButton.styleFrom(
                          foregroundColor: _accent,
                          side: BorderSide(color: _accent.withOpacity(0.5), width: 1.5),
                          padding: const EdgeInsets.symmetric(vertical: 14),
                          shape:
                              RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)),
                        ),
                        icon: Icon(Icons.star, size: 13, color: _accent),
                        label: const Text('Défi',
                            style: TextStyle(fontSize: 14, fontWeight: FontWeight.w700)),
                      ),
                    ),
                    const SizedBox(width: 11),
                  ],
                  Expanded(
                    flex: 2,
                    child: ElevatedButton.icon(
                      onPressed: _canAdvance ? _advance : () => setState(() => _showDetail = true),
                      style: ElevatedButton.styleFrom(
                        backgroundColor:
                            _canAdvance ? _accent : _accent.withOpacity(0.35),
                        foregroundColor: _isGame ? const Color(0xFF1a1305) : Colors.white,
                        padding: const EdgeInsets.symmetric(vertical: 14),
                        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)),
                        elevation: 0,
                      ),
                      icon: const Icon(Icons.flag, size: 14),
                      label: Text(_index < _steps.length - 1 ? 'Étape suivante' : 'Terminer',
                          style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w700)),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _stepThumb(GuidedStepDTO step) {
    return Container(
      width: 72,
      height: 72,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(16),
        gradient: LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: [_accent.withOpacity(0.6), _accent],
        ),
      ),
      clipBehavior: Clip.antiAlias,
      child: step.imageUrl != null
          ? Image.network(step.imageUrl!,
              fit: BoxFit.cover,
              errorBuilder: (_, __, ___) => _thumbBadge())
          : _thumbBadge(),
    );
  }

  Widget _thumbBadge() => Center(
        child: Text('${_index + 1}',
            style: TextStyle(
                color: _isGame ? const Color(0xFF1a1305) : Colors.white,
                fontSize: 22,
                fontWeight: FontWeight.w800)),
      );

  Widget _buildDetailOverlay(GuidedStepDTO step) {
    final title = _translate(step.title);
    final desc = _translate(step.description);
    final hasQuiz = _challenge?.hasQuiz ?? false;
    final hasGeo = _hasGeoTrigger(step);
    final radius = (step.zoneRadiusMeters ?? 0).round();

    final audioUrl = () {
      final list = step.audioIds ?? [];
      if (list.isEmpty) return null;
      final match = list.firstWhere(
        (a) => a.language == widget.visitAppContext.language,
        orElse: () => list.first,
      );
      final v = match.value;
      return (v != null && v.startsWith('http')) ? v : null;
    }();

    return Positioned.fill(
      child: Container(
        color: _detailBg,
        child: SafeArea(
          child: Column(
            children: [
              // Header
              Padding(
                padding: const EdgeInsets.fromLTRB(12, 8, 14, 8),
                child: Row(
                  children: [
                    GestureDetector(
                      onTap: () => setState(() => _showDetail = false),
                      child: Container(
                        width: 40,
                        height: 40,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(12),
                          color: _isGame ? Colors.white.withOpacity(0.08) : Colors.white,
                        ),
                        child: Icon(Icons.arrow_back_ios_new,
                            size: 16, color: _isGame ? _gold : const Color(0xFF1E2A33)),
                      ),
                    ),
                    const SizedBox(width: 10),
                    Expanded(
                      child: Row(
                        children: List.generate(_steps.length, (i) {
                          return Expanded(
                            child: Container(
                              margin: const EdgeInsets.symmetric(horizontal: 2),
                              height: 5,
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(3),
                                color: i < _index
                                    ? (_isGame ? _gold : _green)
                                    : i == _index
                                        ? _accent
                                        : (_isGame
                                            ? Colors.white.withOpacity(0.1)
                                            : const Color(0xFFE2DCD2)),
                              ),
                            ),
                          );
                        }),
                      ),
                    ),
                    const SizedBox(width: 10),
                    Text('${_index + 1} / ${_steps.length}',
                        style: TextStyle(
                            color: _isGame ? _gold : const Color(0xFF46555F),
                            fontSize: 13,
                            fontWeight: FontWeight.w700)),
                  ],
                ),
              ),
              Expanded(
                child: SingleChildScrollView(
                  padding: const EdgeInsets.fromLTRB(20, 8, 20, 24),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      if (step.imageUrl != null)
                        ClipRRect(
                          borderRadius: BorderRadius.circular(16),
                          child: Image.network(step.imageUrl!,
                              height: 200, width: double.infinity, fit: BoxFit.cover),
                        ),
                      if (step.imageUrl != null) const SizedBox(height: 16),
                      Text(title,
                          style: TextStyle(
                              color: _ink,
                              fontSize: 22,
                              fontWeight: FontWeight.w600,
                              height: 1.15)),
                      const SizedBox(height: 12),
                      if (audioUrl != null)
                        GuidedPathAudioPlayer(
                          key: ValueKey('audio-${step.id}'),
                          url: audioUrl,
                          accentColor: _accent,
                          isGame: _isGame,
                        ),
                      if (desc.isNotEmpty)
                        HtmlWidget(desc,
                            textStyle: TextStyle(color: _muted, fontSize: 15.5, height: 1.65)),
                      if (hasGeo) ...[
                        const SizedBox(height: 16),
                        _buildGeoIndicator(radius),
                      ],
                    ],
                  ),
                ),
              ),
              _buildDetailBottomBar(hasQuiz),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildGeoIndicator(int radius) {
    final String label;
    if (_inGeoZone) {
      label = 'Vous êtes dans la zone';
    } else if (_distanceMeters != null) {
      label = 'À ${_formatDistance(_distanceMeters!)} de la zone ($radius m)';
    } else {
      label = 'Zone à atteindre · $radius m';
    }
    final color = _inGeoZone ? _green : _accent;

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(30),
            color: color.withOpacity(_inGeoZone ? 0.14 : 0.12),
          ),
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Icon(Icons.location_on, size: 14, color: color),
              const SizedBox(width: 6),
              Text(label, style: TextStyle(color: color, fontSize: 12.5)),
            ],
          ),
        ),
        if (_geoUnavailable) ...[
          const SizedBox(height: 8),
          GestureDetector(
            onTap: _retryGeo,
            child: const Text('Localisation indisponible — réessayer',
                style: TextStyle(
                    color: Color(0xFFD14343),
                    fontSize: 12,
                    decoration: TextDecoration.underline)),
          ),
        ],
      ],
    );
  }

  Widget _buildDetailBottomBar(bool hasQuiz) {
    return Container(
      padding: EdgeInsets.fromLTRB(18, 12, 18, 18 + MediaQuery.of(context).padding.bottom),
      child: Row(
        children: [
          if (hasQuiz) ...[
            Expanded(
              child: OutlinedButton.icon(
                onPressed: _openChallenge,
                style: OutlinedButton.styleFrom(
                  foregroundColor: _accent,
                  backgroundColor: _isGame ? Colors.white.withOpacity(0.04) : Colors.white,
                  side: BorderSide(
                      color: _isGame ? _gold.withOpacity(0.4) : const Color(0xFFD4C9B8),
                      width: 1.5),
                  padding: const EdgeInsets.symmetric(vertical: 14),
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
                ),
                icon: Icon(Icons.star, size: 14, color: _accent),
                label: const Text('Voir le défi',
                    style: TextStyle(fontSize: 14, fontWeight: FontWeight.w700)),
              ),
            ),
            const SizedBox(width: 10),
          ],
          Expanded(
            flex: 2,
            child: ElevatedButton(
              onPressed: _canAdvance
                  ? () {
                      setState(() => _showDetail = false);
                      _advance();
                    }
                  : null,
              style: ElevatedButton.styleFrom(
                backgroundColor: _accent,
                foregroundColor: _isGame ? const Color(0xFF1a1305) : Colors.white,
                disabledBackgroundColor: _accent.withOpacity(0.4),
                padding: const EdgeInsets.symmetric(vertical: 16),
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
                elevation: 0,
              ),
              child: Text(_index < _steps.length - 1 ? 'Étape suivante' : 'Terminer',
                  style: const TextStyle(fontSize: 15, fontWeight: FontWeight.w700)),
            ),
          ),
        ],
      ),
    );
  }

  void _showExpiredModal(String html) {
    showDialog(
      context: context,
      builder: (_) => Dialog(
        backgroundColor: _isGame ? const Color(0xFF0B1018) : Colors.white,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24)),
        child: Padding(
          padding: const EdgeInsets.fromLTRB(24, 28, 24, 24),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Container(
                width: 64,
                height: 64,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: const Color(0xFFD14343).withOpacity(0.14),
                ),
                child: const Icon(Icons.timer_off, size: 30, color: Color(0xFFD14343)),
              ),
              const SizedBox(height: 16),
              Text('Temps écoulé !',
                  style: TextStyle(color: _ink, fontSize: 19, fontWeight: FontWeight.w700)),
              const SizedBox(height: 10),
              HtmlWidget(html, textStyle: TextStyle(color: _muted, fontSize: 14.5, height: 1.6)),
              const SizedBox(height: 20),
              SizedBox(
                width: double.infinity,
                child: ElevatedButton(
                  onPressed: () => Navigator.of(context).pop(),
                  style: ElevatedButton.styleFrom(
                    backgroundColor: _accent,
                    foregroundColor: _isGame ? const Color(0xFF1a1305) : Colors.white,
                    padding: const EdgeInsets.symmetric(vertical: 13),
                    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)),
                    elevation: 0,
                  ),
                  child: const Text('Fermer',
                      style: TextStyle(fontSize: 14.5, fontWeight: FontWeight.w700)),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}