import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';

import '../../core/theme/app_theme.dart';
import '../home/colonias_data.dart';

class AddressMapCard extends StatelessWidget {
  final String label;
  final String street;
  final String colonia;
  final double? lat;
  final double? lng;

  const AddressMapCard({
    super.key,
    required this.label,
    required this.street,
    required this.colonia,
    this.lat,
    this.lng,
  });

  @override
  Widget build(BuildContext context) {
    // Si existen coordenadas exactas las usa, de lo contrario cae al centro de la colonia
    final center = (lat != null && lng != null)
        ? LatLng(lat!, lng!)
        : kColoniaCenter(colonia);

    return Container(
      margin: const EdgeInsets.only(bottom: 16),
      decoration: BoxDecoration(
        color: AppTheme.surface,
        borderRadius: BorderRadius.circular(AppTheme.radiusLg),
        border: Border.all(color: AppTheme.border, width: 0.5),
        boxShadow: AppTheme.softShadow,
      ),
      clipBehavior: Clip.hardEdge,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // ── Mapa no interactivo ──
          SizedBox(
            height: 130,
            child: FlutterMap(
              options: MapOptions(
                initialCenter: center,
                initialZoom: 16.0,
                // ¡Esta línea desactiva todas las interacciones!
                interactionOptions: const InteractionOptions(
                  flags: InteractiveFlag.none,
                ),
              ),
              children: [
                TileLayer(
                  urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
                  userAgentPackageName: 'com.onlineshack.recolecta',
                ),
                MarkerLayer(
                  markers: [
                    Marker(
                      point: center,
                      width: 36,
                      height: 36,
                      child: const Icon(
                        Icons.home_rounded,
                        color: AppTheme.primary,
                        size: 36,
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),

          // ── Información en texto ──
          Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    Icon(
                      label.toLowerCase().contains('negocio')
                          ? Icons.storefront
                          : Icons.home_outlined,
                      color: AppTheme.primary,
                      size: 20,
                    ),
                    const SizedBox(width: 8),
                    Text(
                      label,
                      style: const TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.w600,
                        color: AppTheme.textPrimary,
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 8),
                Text(street, style: const TextStyle(fontSize: 14)),
                const SizedBox(height: 2),
                Text(
                  'Colonia $colonia',
                  style: const TextStyle(
                    fontSize: 13,
                    color: AppTheme.textSecondary,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}