import 'package:flutter/material.dart';
import '../models/angle_unit.dart';
import '../services/landmark_database.dart';
import 'offline_package_dialog.dart';

class TacticalDrawer extends StatefulWidget {
  final AngleUnit currentAngleUnit;
  final Function(AngleUnit) onAngleUnitChanged;
  final VoidCallback onOpenResectionHud;
  final VoidCallback? onStartRangefinderMode;
  final VoidCallback onStartRoutingMode;
  final VoidCallback onStartLosMode;
  final VoidCallback onStartViewshedMode;
  final VoidCallback onStartIsochroneMode;
  final VoidCallback onStartArtilleryMode;
  final VoidCallback onStartHlzMode;
  final VoidCallback onStartMinefieldMode;
  final VoidCallback onStartSymbolsMode;
  final VoidCallback onStartOverlaysMode;
  final VoidCallback onLandmarksSynced;
  final VoidCallback? onClearMap;
  final bool showContours;
  final Function(bool) onToggleContours;

  const TacticalDrawer({
    super.key,
    required this.currentAngleUnit,
    required this.onAngleUnitChanged,
    required this.onOpenResectionHud,
    this.onStartRangefinderMode,
    required this.onStartRoutingMode,
    required this.onStartLosMode,
    required this.onStartViewshedMode,
    required this.onStartIsochroneMode,
    required this.onStartArtilleryMode,
    required this.onStartHlzMode,
    required this.onStartMinefieldMode,
    required this.onStartSymbolsMode,
    required this.onStartOverlaysMode,
    required this.onLandmarksSynced,
    this.onClearMap,
    this.showContours = true,
    required this.onToggleContours,
  });

  @override
  State<TacticalDrawer> createState() => _TacticalDrawerState();
}

class _TacticalDrawerState extends State<TacticalDrawer> {
  int _landmarkCount = LandmarkDatabase.allLandmarks.length;

  void _openOfflinePackageModal() {
    showDialog(
      context: context,
      builder: (ctx) => OfflinePackageDialog(
        onPackageSynced: () {
          setState(() {
            _landmarkCount = LandmarkDatabase.allLandmarks.length;
          });
          widget.onLandmarksSynced();
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Drawer(
      backgroundColor: const Color(0xFF090E17),
      child: Column(
        children: [
          // ── Header ───────────────────────────────────────────────
          Container(
            padding: const EdgeInsets.only(top: 54, bottom: 20, right: 18, left: 18),
            decoration: const BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topRight,
                end: Alignment.bottomLeft,
                colors: [Color(0xFF0F172A), Color(0xFF020617)],
              ),
              border: Border(bottom: BorderSide(color: Colors.white12)),
            ),
            child: Row(
              children: [
                Container(
                  padding: const EdgeInsets.all(8),
                  decoration: BoxDecoration(
                    color: const Color(0xFF0071E3),
                    borderRadius: BorderRadius.circular(10),
                    boxShadow: const [BoxShadow(color: Color(0x660071E3), blurRadius: 10)],
                  ),
                  child: const Icon(Icons.shield, size: 24, color: Colors.white),
                ),
                const SizedBox(width: 12),
                const Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Text(
                        'مركز العمليات التكتيكية',
                        style: TextStyle(color: Colors.white, fontSize: 14.5, fontWeight: FontWeight.bold),
                      ),
                      Text(
                        'منظومة Intaleq Defense الميدانية (Off-Grid)',
                        style: TextStyle(color: Color(0xFF94A3B8), fontSize: 10),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),

          // ── Drawer Body (Scrollable Operations) ────────────────────
          Expanded(
            child: ListView(
              padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
              children: [
                // 1. Angle Unit Selector
                Container(
                  padding: const EdgeInsets.all(12),
                  decoration: BoxDecoration(
                    color: const Color(0xFF0F172A),
                    borderRadius: BorderRadius.circular(12),
                    border: Border.all(color: const Color(0xFF0071E3).withAlpha(102)),
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      const Row(
                        children: [
                          Icon(Icons.explore, size: 16, color: Color(0xFF38BDF8)),
                          SizedBox(width: 8),
                          Text(
                            'نظام قياس الزوايا والاتجاه:',
                            style: TextStyle(color: Colors.white, fontSize: 12, fontWeight: FontWeight.bold),
                          ),
                        ],
                      ),
                      const SizedBox(height: 8),
                      SegmentedButton<AngleUnit>(
                        segments: const [
                          ButtonSegment(
                            value: AngleUnit.degrees,
                            label: Text('درجات °', style: TextStyle(fontSize: 10.5)),
                          ),
                          ButtonSegment(
                            value: AngleUnit.mils,
                            label: Text('ميل ₥', style: TextStyle(fontSize: 10.5)),
                          ),
                          ButtonSegment(
                            value: AngleUnit.dual,
                            label: Text('مزدوج', style: TextStyle(fontSize: 10.5)),
                          ),
                        ],
                        selected: {widget.currentAngleUnit},
                        onSelectionChanged: (set) {
                          if (set.isNotEmpty) {
                            widget.onAngleUnitChanged(set.first);
                          }
                        },
                        style: SegmentedButton.styleFrom(
                          backgroundColor: const Color(0xFF1E293B),
                          selectedBackgroundColor: const Color(0xFF0071E3),
                          selectedForegroundColor: Colors.white,
                          foregroundColor: const Color(0xFF94A3B8),
                        ),
                      ),
                    ],
                  ),
                ),

                const SizedBox(height: 14),

                const Padding(
                  padding: EdgeInsets.symmetric(horizontal: 4, vertical: 4),
                  child: Text(
                    'العمليات الميدانية التكتيكية (100% Offline)',
                    style: TextStyle(color: Color(0xFF64748B), fontSize: 11, fontWeight: FontWeight.w800),
                  ),
                ),

                // 0. Clear Map & Reset Layers (مسح وتنظيف الخريطة)
                if (widget.onClearMap != null)
                  Padding(
                    padding: const EdgeInsets.symmetric(vertical: 4),
                    child: InkWell(
                      onTap: () {
                        Navigator.pop(context);
                        widget.onClearMap!();
                      },
                      borderRadius: BorderRadius.circular(12),
                      child: Container(
                        padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10),
                        decoration: BoxDecoration(
                          color: const Color(0x22F43F5E),
                          borderRadius: BorderRadius.circular(12),
                          border: Border.all(color: const Color(0xFFF43F5E).withAlpha(120)),
                        ),
                        child: const Row(
                          children: [
                            Icon(Icons.cleaning_services_rounded, color: Color(0xFFF43F5E), size: 20),
                            SizedBox(width: 12),
                            Expanded(
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text(
                                    'مسح وتنظيف الخريطة (Clear Map)',
                                    style: TextStyle(color: Color(0xFFF43F5E), fontSize: 12, fontWeight: FontWeight.bold),
                                  ),
                                  Text(
                                    'تصفير كافة الأدوات والرسوم والأهداف السابقة',
                                    style: TextStyle(color: Color(0xFF94A3B8), fontSize: 9.5),
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),

                // 1. Optical Rangefinder (قياس المسافة البصري بدون GPS)
                _buildOperationTile(
                  icon: Icons.center_focus_strong,
                  iconColor: const Color(0xFF00F0FF),
                  title: 'قياس المسافة البصري (بدون GPS)',
                  subtitle: 'حساب المسافة والارتفاع بالتقريب والتبعيد البصري',
                  onTap: () {
                    Navigator.pop(context);
                    widget.onStartRangefinderMode?.call();
                  },
                ),

                // 2. Visual Resection (التقاطع البصري العكسي)
                _buildOperationTile(
                  icon: Icons.camera_alt,
                  iconColor: const Color(0xFF38BDF8),
                  title: 'التقاطع البصري (GPS-Denied HUD)',
                  subtitle: 'تسديد الكاميرا وتحديد الإحداثيات بالرماية',
                  onTap: () {
                    Navigator.pop(context);
                    widget.onOpenResectionHud();
                  },
                ),

                // 3. Line-of-Sight & Intervisibility (LOS)
                _buildOperationTile(
                  icon: Icons.remove_red_eye,
                  iconColor: const Color(0xFFF59E0B),
                  title: 'تبادل الرؤية والمراقبة (LOS)',
                  subtitle: 'المقطع التضاريسي وكشف النقاط الميتة بالأقمار',
                  onTap: () {
                    Navigator.pop(context);
                    widget.onStartLosMode();
                  },
                ),

                // 4. 360° Viewshed Radar
                _buildOperationTile(
                  icon: Icons.radar,
                  iconColor: const Color(0xFF00F0FF),
                  title: 'رادار الرصد الدائري (360° Viewshed)',
                  subtitle: 'مضلع التغطية البصرية ومساحة الرصد بالكيلومتر²',
                  onTap: () {
                    Navigator.pop(context);
                    widget.onStartViewshedMode();
                  },
                ),

                // 5. Artillery Fire Mission Ballistics
                _buildOperationTile(
                  icon: Icons.gps_fixed,
                  iconColor: const Color(0xFFEF4444),
                  title: 'رماية المدفعية وقوس القذيفة (Fire Mission)',
                  subtitle: 'حلول الرماية البالستية وسلامة قمم الجبال',
                  onTap: () {
                    Navigator.pop(context);
                    widget.onStartArtilleryMode();
                  },
                ),

                // 6. Helicopter Landing Zones (HLZ)
                _buildOperationTile(
                  icon: Icons.flight_land,
                  iconColor: const Color(0xFF10B981),
                  title: 'مهابط الطيران العامودي (HLZ)',
                  subtitle: 'فحص ميول الأرض والعوائق وممرات الاقتراب',
                  onTap: () {
                    Navigator.pop(context);
                    widget.onStartHlzMode();
                  },
                ),

                // 7. Minefield & Breaching Lanes
                _buildOperationTile(
                  icon: Icons.warning_amber,
                  iconColor: const Color(0xFFF59E0B),
                  title: 'حقول الألغام وممرات العبور (Minefield)',
                  subtitle: 'تحديد نطاق الخطر وتخطيط ثغرات العبور الآمن',
                  onTap: () {
                    Navigator.pop(context);
                    widget.onStartMinefieldMode();
                  },
                ),

                // 8. Isochrone Reachability
                _buildOperationTile(
                  icon: Icons.timelapse,
                  iconColor: const Color(0xFFA855F7),
                  title: 'نطاق التدخل السريع (QRF Isochrone)',
                  subtitle: 'مضلعات زمن الاستجابة 5 و 10 و 15 دقيقة',
                  onTap: () {
                    Navigator.pop(context);
                    widget.onStartIsochroneMode();
                  },
                ),

                // 9. Tactical Symbols & Formations
                _buildOperationTile(
                  icon: Icons.military_tech,
                  iconColor: const Color(0xFF38BDF8),
                  title: 'الرموز والتشكيلات العسكرية (Symbols)',
                  subtitle: 'رموز NATO و Mil-Std-2525C القياسية',
                  onTap: () {
                    Navigator.pop(context);
                    widget.onStartSymbolsMode();
                  },
                ),

                // 10. Tactical Overlays (IPB)
                _buildOperationTile(
                  icon: Icons.layers,
                  iconColor: const Color(0xFF38BDF8),
                  title: 'منظومة الشفافات العسكرية (Overlays)',
                  subtitle: 'طبقات دراسة أرض المعركة IPB ومحاور التقدم',
                  onTap: () {
                    Navigator.pop(context);
                    widget.onStartOverlaysMode();
                  },
                ),

                // 11. Tactical Routing Engine
                _buildOperationTile(
                  icon: Icons.alt_route,
                  iconColor: const Color(0xFF38BDF8),
                  title: 'محرك التوجيه وقوافل الإمداد (Routing)',
                  subtitle: 'توجيه وحساب مسارات محلياً بدون إنترنت',
                  onTap: () {
                    Navigator.pop(context);
                    widget.onStartRoutingMode();
                  },
                ),

                const SizedBox(height: 14),

                const Padding(
                  padding: EdgeInsets.symmetric(horizontal: 4, vertical: 4),
                  child: Text(
                    'السيادة الرقمية وحزم البيانات',
                    style: TextStyle(color: Color(0xFF64748B), fontSize: 11, fontWeight: FontWeight.w800),
                  ),
                ),

                // Topographic Contour Lines
                Container(
                  margin: const EdgeInsets.symmetric(vertical: 4),
                  decoration: BoxDecoration(
                    color: const Color(0xFF0F172A),
                    borderRadius: BorderRadius.circular(12),
                    border: Border.all(color: const Color(0xFFF59E0B).withAlpha(102)),
                  ),
                  child: SwitchListTile(
                    value: widget.showContours,
                    onChanged: widget.onToggleContours,
                    secondary: Container(
                      padding: const EdgeInsets.all(8),
                      decoration: BoxDecoration(
                        color: const Color(0x33F59E0B),
                        borderRadius: BorderRadius.circular(8),
                      ),
                      child: const Icon(Icons.terrain, color: Color(0xFFF59E0B), size: 20),
                    ),
                    title: const Text(
                      'خطوط الكنتور الطبوغرافية (Contours)',
                      style: TextStyle(color: Colors.white, fontSize: 12, fontWeight: FontWeight.bold),
                    ),
                    subtitle: const Text(
                      'إظهار خطوط مناسيب الارتفاع والمنحدرات (كل 20م و 100م)',
                      style: TextStyle(color: Color(0xFF94A3B8), fontSize: 10),
                    ),
                    activeTrackColor: const Color(0xFFF59E0B),
                    activeThumbColor: Colors.white,
                  ),
                ),

                // Offline Jordan Package & Sync Manager
                Container(
                  margin: const EdgeInsets.symmetric(vertical: 4),
                  decoration: BoxDecoration(
                    color: const Color(0xFF0F172A),
                    borderRadius: BorderRadius.circular(12),
                    border: Border.all(color: const Color(0xFF22C55E).withAlpha(102)),
                  ),
                  child: ListTile(
                    leading: Container(
                      padding: const EdgeInsets.all(8),
                      decoration: BoxDecoration(
                        color: const Color(0x3322C55E),
                        borderRadius: BorderRadius.circular(8),
                      ),
                      child: const Icon(Icons.download_for_offline, color: Color(0xFF4ADE80), size: 20),
                    ),
                    title: Text(
                      'حزمة بيانات الأردن ($_landmarkCount معلم)',
                      style: const TextStyle(color: Colors.white, fontSize: 12, fontWeight: FontWeight.bold),
                    ),
                    subtitle: const Text(
                      'مزامنة معالم PostGIS وشبكة التوجيه والـ DEM',
                      style: TextStyle(color: Color(0xFF94A3B8), fontSize: 10),
                    ),
                    trailing: const Icon(Icons.chevron_left, color: Colors.white30, size: 18),
                    onTap: _openOfflinePackageModal,
                  ),
                ),
              ],
            ),
          ),

          // ── Footer: Air-Gapped Security Badge ─────────────────────
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
            decoration: const BoxDecoration(
              color: Color(0xFF020617),
              border: Border(top: BorderSide(color: Colors.white12)),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                const Row(
                  children: [
                    Icon(Icons.airplanemode_active, size: 14, color: Color(0xFF4ADE80)),
                    SizedBox(width: 6),
                    Text(
                      'جاهز للعمل بوضع الطيران 100%',
                      style: TextStyle(color: Color(0xFF4ADE80), fontSize: 11, fontWeight: FontWeight.bold),
                    ),
                  ],
                ),
                Container(
                  padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
                  decoration: BoxDecoration(
                    color: const Color(0x3322C55E),
                    borderRadius: BorderRadius.circular(6),
                  ),
                  child: const Text(
                    'OFF-GRID',
                    style: TextStyle(color: Color(0xFF4ADE80), fontSize: 9, fontWeight: FontWeight.w900),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildOperationTile({
    required IconData icon,
    required Color iconColor,
    required String title,
    required String subtitle,
    required VoidCallback onTap,
  }) {
    return Container(
      margin: const EdgeInsets.symmetric(vertical: 4),
      decoration: BoxDecoration(
        color: const Color(0xFF0F172A),
        borderRadius: BorderRadius.circular(12),
        border: Border.all(color: Colors.white12),
      ),
      child: ListTile(
        leading: Container(
          padding: const EdgeInsets.all(8),
          decoration: BoxDecoration(
            color: iconColor.withAlpha(38),
            borderRadius: BorderRadius.circular(8),
          ),
          child: Icon(icon, color: iconColor, size: 18),
        ),
        title: Text(
          title,
          style: const TextStyle(color: Colors.white, fontSize: 12, fontWeight: FontWeight.bold),
        ),
        subtitle: Text(
          subtitle,
          style: const TextStyle(color: Color(0xFF94A3B8), fontSize: 10),
        ),
        trailing: const Icon(Icons.chevron_left, color: Colors.white30, size: 18),
        onTap: onTap,
      ),
    );
  }
}