import 'package:flutter/material.dart';
import '../models/military_operations_models.dart';

/// Tactical Military Symbols Palette HUD Sheet
class TacticalSymbolsSheet extends StatelessWidget {
  final TacticalSymbolType? activePlacementType;
  final List<TacticalSymbolItem> placedSymbols;
  final Function(TacticalSymbolType) onSelectSymbolType;
  final Function(TacticalSymbolItem) onDeleteSymbol;
  final VoidCallback onClose;

  const TacticalSymbolsSheet({
    super.key,
    required this.activePlacementType,
    required this.placedSymbols,
    required this.onSelectSymbolType,
    required this.onDeleteSymbol,
    required this.onClose,
  });

  static const List<({TacticalSymbolType type, String name, IconData icon, Color color})> _palette = [
    (type: TacticalSymbolType.friendlyInfantry, name: 'مشاة صديقة', icon: Icons.group, color: Color(0xFF0071E3)),
    (type: TacticalSymbolType.friendlyArmor, name: 'دروع ودبابات', icon: Icons.shield, color: Color(0xFF0071E3)),
    (type: TacticalSymbolType.friendlyArtillery, name: 'مدفعية ميدان', icon: Icons.gps_fixed, color: Color(0xFF0071E3)),
    (type: TacticalSymbolType.friendlyAirDefense, name: 'دفاع جوي', icon: Icons.radar, color: Color(0xFF0071E3)),
    (type: TacticalSymbolType.friendlyRadar, name: 'رادار كشف', icon: Icons.track_changes, color: Color(0xFF0071E3)),
    (type: TacticalSymbolType.friendlyHq, name: 'مركز قيادة HQ', icon: Icons.flag, color: Color(0xFF0071E3)),
    (type: TacticalSymbolType.checkpoint, name: 'نقطة سيطرة', icon: Icons.gavel, color: Color(0xFF38BDF8)),
    (type: TacticalSymbolType.observationPost, name: 'مرصد أمامي OP', icon: Icons.visibility, color: Color(0xFF38BDF8)),
    (type: TacticalSymbolType.enemyInfantry, name: 'مشاة معادية', icon: Icons.group, color: Color(0xFFEF4444)),
    (type: TacticalSymbolType.enemyArmor, name: 'دروع معادية', icon: Icons.shield, color: Color(0xFFEF4444)),
    (type: TacticalSymbolType.enemyArtillery, name: 'مدفعية معادية', icon: Icons.gps_fixed, color: Color(0xFFEF4444)),
    (type: TacticalSymbolType.minefield, name: 'حقل ألغام', icon: Icons.warning_amber, color: Color(0xFFF59E0B)),
    (type: TacticalSymbolType.hlz, name: 'مهبط مروحي', icon: Icons.flight_land, color: Color(0xFF10B981)),
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
        color: Color(0xFF090E1A),
        borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
        border: Border(top: BorderSide(color: Color(0xFF0071E3), width: 1.5)),
        boxShadow: [
          BoxShadow(color: Colors.black87, blurRadius: 24, spreadRadius: 4),
        ],
      ),
      child: SafeArea(
        top: false,
        child: SingleChildScrollView(
          padding: const EdgeInsets.all(16),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              // ── Header ───────────────────────────────────────────
              Row(
                children: [
                  Container(
                    padding: const EdgeInsets.all(8),
                    decoration: BoxDecoration(
                      color: const Color(0xFF0071E3).withAlpha(40),
                      borderRadius: BorderRadius.circular(10),
                      border: Border.all(color: const Color(0xFF0071E3)),
                    ),
                    child: const Icon(Icons.military_tech, color: Color(0xFF38BDF8), size: 20),
                  ),
                  const SizedBox(width: 10),
                  const Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          'الرموز والتشكيلات العسكرية (Tactical Symbols)',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 14,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        Text(
                          'اختر الرمز ثم انقر على الخريطة لتثبيته في الميدان',
                          style: TextStyle(color: Color(0xFF94A3B8), fontSize: 10),
                        ),
                      ],
                    ),
                  ),
                  IconButton(
                    icon: const Icon(Icons.close, color: Colors.white70, size: 20),
                    onPressed: onClose,
                  ),
                ],
              ),

              const SizedBox(height: 14),

              // ── Symbols Grid ──────────────────────────────────────
              GridView.builder(
                shrinkWrap: true,
                physics: const NeverScrollableScrollPhysics(),
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 4,
                  crossAxisSpacing: 8,
                  mainAxisSpacing: 8,
                  childAspectRatio: 1.05,
                ),
                itemCount: _palette.length,
                itemBuilder: (ctx, i) {
                  final item = _palette[i];
                  final isSelected = activePlacementType == item.type;
                  return InkWell(
                    onTap: () => onSelectSymbolType(item.type),
                    borderRadius: BorderRadius.circular(10),
                    child: Container(
                      decoration: BoxDecoration(
                        color: isSelected ? item.color.withAlpha(50) : const Color(0xFF0F172A),
                        borderRadius: BorderRadius.circular(10),
                        border: Border.all(
                          color: isSelected ? item.color : Colors.white12,
                          width: isSelected ? 1.8 : 1.0,
                        ),
                      ),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Icon(item.icon, color: item.color, size: 22),
                          const SizedBox(height: 4),
                          Text(
                            item.name,
                            style: TextStyle(
                              color: isSelected ? Colors.white : const Color(0xFF94A3B8),
                              fontSize: 9.5,
                              fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
                            ),
                            textAlign: TextAlign.center,
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                          ),
                        ],
                      ),
                    ),
                  );
                },
              ),

              if (placedSymbols.isNotEmpty) ...[
                const SizedBox(height: 14),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      'العناصر المثبتة على الخريطة (${placedSymbols.length}):',
                      style: const TextStyle(color: Colors.white, fontSize: 11, fontWeight: FontWeight.bold),
                    ),
                  ],
                ),
                const SizedBox(height: 6),
                SizedBox(
                  height: 60,
                  child: ListView.builder(
                    scrollDirection: Axis.horizontal,
                    itemCount: placedSymbols.length,
                    itemBuilder: (ctx, i) {
                      final s = placedSymbols[i];
                      return Container(
                        margin: const EdgeInsets.only(left: 8),
                        padding: const EdgeInsets.all(16),
                        decoration: BoxDecoration(
                          color: s.color.withAlpha(30),
                          borderRadius: BorderRadius.circular(8),
                          border: Border.all(color: s.color.withAlpha(100)),
                        ),
                        child: Row(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            Icon(s.icon, color: s.color, size: 16),
                            const SizedBox(width: 6),
                            Text(s.name, style: const TextStyle(color: Colors.white, fontSize: 11)),
                            const SizedBox(width: 6),
                            InkWell(
                              onTap: () => onDeleteSymbol(s),
                              child: const Icon(Icons.close, color: Colors.white38, size: 14),
                            ),
                          ],
                        ),
                      );
                    },
                  ),
                ),
              ],
            ],
          ),
        ),
      ),
    );
  }
}