import { useEffect, useState } from 'react';

const MapComponent = ({ latitude, longitude, name, description, officeType }) => {
  const [mapLoaded, setMapLoaded] = useState(false);

  useEffect(() => {
    // Load Leaflet on client-side only
    if (typeof window !== 'undefined' && latitude && longitude) {
      // Import Leaflet dynamically
      import('leaflet').then((L) => {
        // Safety check to see if map element exists
        const mapElement = document.getElementById('map');
        if (!mapElement) return;
        
        // Clean up any existing map instance
        if (mapElement._leaflet_map) {
          mapElement._leaflet_map.remove();
        }
        
        // Initialize map
        const map = L.map('map').setView([latitude, longitude], 15);
        
        // Store the map instance on the DOM element to clean up later
        mapElement._leaflet_map = map;
        
        // Add OpenStreetMap tiles
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          attribution: '© OpenStreetMap contributors',
          maxZoom: 19
        }).addTo(map);
        
        // Add marker for post office
        const marker = L.marker([latitude, longitude])
          .addTo(map)
          .bindPopup(`
            <div style="font-family: 'Segoe UI', sans-serif;">
              <h4 style="margin: 0 0 8px 0; color: #004d99;">${name}</h4>
              <p style="margin: 4px 0;"><strong>📍 Adres:</strong><br>${description.street} ${description.houseNumber}<br>${description.zipCode} ${description.city}</p>
              <p style="margin: 4px 0;"><strong>🏢 Typ:</strong> ${officeType === 'UP' ? 'Urząd Pocztowy' : officeType}</p>
            </div>
          `, {
            maxWidth: 300
          });
        
        // Open popup by default
        marker.openPopup();
        
        // Make sure map renders correctly
        setTimeout(() => {
          map.invalidateSize();
          setMapLoaded(true);
        }, 300);
      });
    }
    
    // Clean up function
    return () => {
      const mapElement = document.getElementById('map');
      if (mapElement && mapElement._leaflet_map) {
        mapElement._leaflet_map.remove();
      }
    };
  }, [latitude, longitude, name, description, officeType]);

  return <div id="map" style={{ height: '400px', borderRadius: '8px' }}></div>;
};

export default MapComponent;