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

/// Tactical Overlays Switchboard HUD Sheet
class TacticalOverlaysSheet extends StatelessWidget {
  final List<TacticalOverlayLayer> layers;
  final Function(String layerId, bool isVisible) onToggleLayer;
  final VoidCallback onClose;

  const TacticalOverlaysSheet({
    super.key,
    required this.layers,
    required this.onToggleLayer,
    required this.onClose,
  });

  @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(0xFF38BDF8), 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(0xFF38BDF8).withAlpha(40),
                      borderRadius: BorderRadius.circular(10),
                      border: Border.all(color: const Color(0xFF38BDF8)),
                    ),
                    child: const Icon(Icons.layers, color: Color(0xFF38BDF8), size: 20),
                  ),
                  const SizedBox(width: 10),
                  const Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          'منظومة الشفافات العسكرية (Tactical Overlays)',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 14,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        Text(
                          'طبقات دراسة أرض المعركة (IPB) وممرات الحركة وخطوط التنسيق',
                          style: TextStyle(color: Color(0xFF94A3B8), fontSize: 10),
                        ),
                      ],
                    ),
                  ),
                  IconButton(
                    icon: const Icon(Icons.close, color: Colors.white70, size: 20),
                    onPressed: onClose,
                  ),
                ],
              ),

              const SizedBox(height: 14),

              // ── Overlays List ─────────────────────────────────────
              ...layers.map((l) {
                return Container(
                  margin: const EdgeInsets.symmetric(vertical: 4),
                  decoration: BoxDecoration(
                    color: const Color(0xFF0F172A),
                    borderRadius: BorderRadius.circular(10),
                    border: Border.all(
                      color: l.isVisible ? l.color.withAlpha(120) : Colors.white12,
                    ),
                  ),
                  child: SwitchListTile(
                    value: l.isVisible,
                    onChanged: (v) => onToggleLayer(l.id, v),
                    secondary: Container(
                      padding: const EdgeInsets.all(6),
                      decoration: BoxDecoration(
                        color: l.color.withAlpha(30),
                        borderRadius: BorderRadius.circular(6),
                      ),
                      child: Icon(Icons.visibility, color: l.color, size: 18),
                    ),
                    title: Text(
                      l.nameAr,
                      style: const TextStyle(color: Colors.white, fontSize: 12, fontWeight: FontWeight.bold),
                    ),
                    activeTrackColor: l.color,
                    activeThumbColor: Colors.white,
                  ),
                );
              }),
            ],
          ),
        ),
      ),
    );
  }
}