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 onStartRoutingMode;
  final VoidCallback onStartLosMode;
  final VoidCallback onStartIsochroneMode;
  final VoidCallback onLandmarksSynced;
  final bool showContours;
  final Function(bool) onToggleContours;

  const TacticalDrawer({
    super.key,
    required this.currentAngleUnit,
    required this.onAngleUnitChanged,
    required this.onOpenResectionHud,
    required this.onStartRoutingMode,
    required this.onStartLosMode,
    required this.onStartIsochroneMode,
    required this.onLandmarksSynced,
    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),
                  ),
                ),

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

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

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

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

                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),
                  ),
                ),

                // 6. 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(
                      'خطوط الكنتور الطبوغرافية (Topographic 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,
                  ),
                ),

                // 7. 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 وشبكة التوجيه (825 KB)',
                      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,
      ),
    );
  }
}