import 'package:flutter/material.dart';
import '../services/offline_routing_engine.dart';

class TacticalRoutePreviewCard extends StatelessWidget {
  final OfflineRoutePlan activeRoute;
  final VoidCallback onClose;
  final VoidCallback onStartNavigation;

  const TacticalRoutePreviewCard({
    super.key,
    required this.activeRoute,
    required this.onClose,
    required this.onStartNavigation,
  });

  @override
  Widget build(BuildContext context) {
    // ملاحظة: هذا الودجت يوضع دائماً داخل Positioned على مستوى الشاشة
    // (خارج Obx) — لا يُعِد Positioned من الداخل لتجنب خطأ
    // "Positioned inside non-Stack / hit test render box with no size".
    return Container(
      padding: const EdgeInsets.all(14),
      decoration: BoxDecoration(
        color: const Color(0xF50F172A),
        borderRadius: BorderRadius.circular(18),
        border: Border.all(color: const Color(0xFF38BDF8), width: 1.5),
        boxShadow: const [BoxShadow(color: Colors.black87, blurRadius: 25)],
      ),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Row(
                  children: [
                    Icon(
                      activeRoute.isOffline ? Icons.offline_pin : Icons.cloud_done,
                      color: const Color(0xFF38BDF8),
                      size: 18,
                    ),
                    const SizedBox(width: 8),
                    Text(
                      activeRoute.isOffline
                          ? 'مسار تكتيكي محلي (On-Device 100%)'
                          : 'مسار خادم السيرفر السحابي (Live Route)',
                      style: const TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 12,
                        color: Color(0xFF38BDF8),
                      ),
                    ),
                  ],
                ),
                IconButton(
                  icon: const Icon(Icons.close, size: 16, color: Colors.white54),
                  onPressed: onClose,
                ),
              ],
            ),

            const SizedBox(height: 8),

            // Metrics Row
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                _buildMetricCol('المسافة', '${activeRoute.totalDistanceKm} كم'),
                _buildMetricCol('زمن العبور', '${activeRoute.estimatedDurationMinutes.round()} دقيقة'),
                _buildMetricCol('الصعود / الهبوط', '+${activeRoute.elevationGainMeters} م / -${activeRoute.elevationLossMeters} م'),
                _buildMetricCol('أقصى ميل', '${activeRoute.maxInclinePercent.abs()}%'),
              ],
            ),

            const SizedBox(height: 8),

            // Incline Profile Badge
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
              decoration: BoxDecoration(
                color: const Color(0xFF020617),
                borderRadius: BorderRadius.circular(8),
                border: Border.all(color: Colors.white12),
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const Icon(Icons.terrain, size: 14, color: Color(0xFFF59E0B)),
                  const SizedBox(width: 6),
                  Flexible(
                    child: Text(
                      activeRoute.inclineSummaryArabic,
                      style: const TextStyle(fontSize: 10.5, color: Color(0xFFCBD5E1), fontWeight: FontWeight.w600),
                      overflow: TextOverflow.ellipsis,
                    ),
                  ),
                ],
              ),
            ),

            const SizedBox(height: 12),

            // Start Navigation Button (Google Maps / Siro Style)
            ElevatedButton.icon(
              onPressed: onStartNavigation,
              icon: const Icon(Icons.navigation, size: 18),
              label: const Text(
                'بدء الملاحة الحية ثلاثية الأبعاد (Start 3D Navigation)',
                style: TextStyle(fontSize: 13, fontWeight: FontWeight.w900),
              ),
              style: ElevatedButton.styleFrom(
                backgroundColor: const Color(0xFF22C55E),
                foregroundColor: Colors.white,
                padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
                minimumSize: const Size(double.infinity, 44),
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
              ),
            ),
          ],
        ),
    );
  }

  Widget _buildMetricCol(String label, String value) {
    return Column(
      children: [
        Text(label, style: const TextStyle(fontSize: 9.5, color: Color(0xFF94A3B8))),
        const SizedBox(height: 2),
        Text(value, style: const TextStyle(fontSize: 11.5, fontWeight: FontWeight.bold, color: Colors.white)),
      ],
    );
  }
}