maps-saas/packages/tactical_app/lib/widgets/active_navigation_hud.dart

import 'package:flutter/material.dart';
import '../models/angle_unit.dart';
import '../models/navigation_state.dart';

class ActiveNavigationTopBanner extends StatelessWidget {
  final ActiveNavigationState navState;

  const ActiveNavigationTopBanner({super.key, required this.navState});

  @override
  Widget build(BuildContext context) {
    final step = navState.currentStep;
    if (step == null) return const SizedBox.shrink();

    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
      decoration: BoxDecoration(
        color: const Color(0xF50F172A),
        borderRadius: BorderRadius.circular(16),
        border: Border.all(color: const Color(0xFF0071E3), width: 1.5),
        boxShadow: const [
          BoxShadow(color: Colors.black87, blurRadius: 20, offset: Offset(0, 4)),
        ],
      ),
      child: Row(
        children: [
          // Maneuver Icon
          Container(
            padding: const EdgeInsets.all(10),
            decoration: BoxDecoration(
              color: const Color(0xFF0071E3),
              borderRadius: BorderRadius.circular(12),
              boxShadow: const [
                BoxShadow(color: Color(0x660071E3), blurRadius: 8),
              ],
            ),
            child: Icon(step.icon, color: Colors.white, size: 28),
          ),
          const SizedBox(width: 14),

          // Instruction Text
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: [
                Text(
                  'بعد ${step.distanceMeters.round()} متر',
                  style: const TextStyle(
                    color: Color(0xFF38BDF8),
                    fontSize: 12,
                    fontWeight: FontWeight.w900,
                  ),
                ),
                const SizedBox(height: 2),
                Text(
                  step.instructionAr,
                  style: const TextStyle(
                    color: Colors.white,
                    fontSize: 15,
                    fontWeight: FontWeight.bold,
                  ),
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                ),
                if (step.streetName.isNotEmpty) ...[
                  const SizedBox(height: 2),
                  Text(
                    step.streetName,
                    style: const TextStyle(
                      color: Color(0xFF94A3B8),
                      fontSize: 11.5,
                      fontWeight: FontWeight.w500,
                    ),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ],
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class ActiveNavigationBottomHUD extends StatelessWidget {
  final ActiveNavigationState navState;
  final VoidCallback onStopNavigation;

  const ActiveNavigationBottomHUD({
    super.key,
    required this.navState,
    required this.onStopNavigation,
  });

  @override
  Widget build(BuildContext context) {
    final now = DateTime.now();
    final arrivalTime = now.add(Duration(minutes: navState.remainingDurationMinutes.round()));
    final hourStr = arrivalTime.hour.toString().padLeft(2, '0');
    final minStr = arrivalTime.minute.toString().padLeft(2, '0');

    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: const Color(0xF50F172A),
        borderRadius: BorderRadius.circular(20),
        border: Border.all(color: const Color(0xFF22C55E), width: 1.5),
        boxShadow: const [
          BoxShadow(color: Colors.black87, blurRadius: 25, offset: Offset(0, 4)),
        ],
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          // Metrics Row
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              _buildHUDCol('وقت الوصول (ETA)', '$hourStr:$minStr', const Color(0xFF4ADE80)),
              Container(width: 1, height: 32, color: Colors.white12),
              _buildHUDCol('المسافة المتبقية', '${navState.remainingDistanceKm} كم', Colors.white),
              Container(width: 1, height: 32, color: Colors.white12),
              _buildHUDCol('الزمن المتبقي', '${navState.remainingDurationMinutes.round()} دقيقة', const Color(0xFF38BDF8)),
            ],
          ),

          const SizedBox(height: 14),

          // Stop Navigation Button
          Row(
            children: [
              Expanded(
                child: ElevatedButton.icon(
                  onPressed: onStopNavigation,
                  icon: const Icon(Icons.close, size: 18),
                  label: const Text(
                    'إنهاء الملاحة الميدانية (Exit Navigation)',
                    style: TextStyle(fontSize: 12.5, fontWeight: FontWeight.bold),
                  ),
                  style: ElevatedButton.styleFrom(
                    backgroundColor: const Color(0xFFEF4444),
                    foregroundColor: Colors.white,
                    padding: const EdgeInsets.symmetric(vertical: 12),
                    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildHUDCol(String label, String value, Color color) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Text(label, style: const TextStyle(color: Color(0xFF94A3B8), fontSize: 10)),
        const SizedBox(height: 3),
        Text(
          value,
          style: TextStyle(color: color, fontSize: 14, fontWeight: FontWeight.w900),
        ),
      ],
    );
  }
}

/// Unified Active Navigation HUD Container
class ActiveNavigationHud extends StatelessWidget {
  final ActiveNavigationState state;
  final AngleUnit angleUnit;
  final VoidCallback onStopNavigation;

  const ActiveNavigationHud({
    super.key,
    required this.state,
    required this.angleUnit,
    required this.onStopNavigation,
  });

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        ActiveNavigationTopBanner(navState: state),
        ActiveNavigationBottomHUD(navState: state, onStopNavigation: onStopNavigation),
      ],
    );
  }
}