import { useEffect, useRef } from 'react';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

interface MapComponentProps {
  position: [number, number];
}

export default function MapComponent({ position }: MapComponentProps) {
  const mapRef = useRef<L.Map | null>(null);
  const mapContainerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // Проверяем, что контейнер существует и карта еще не создана
    if (!mapRef.current && mapContainerRef.current) {
      // Создаем карту
      mapRef.current = L.map(mapContainerRef.current, {
        center: position,
        zoom: 15,
        scrollWheelZoom: false,
        attributionControl: false,
        doubleClickZoom: false,
        dragging: true,
        keyboard: false,
        touchZoom: false,
      });

      // Добавляем слой тайлов
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
      }).addTo(mapRef.current);

      // Создаем оранжевый маркер с белой окантовкой
      const orangeIcon = L.divIcon({
        html: `<div style="
          width: 24px;
          height: 24px;
          border-radius: 50%;
          background-color: #ff7f27;
          border: 3px solid white;
          box-shadow: 0 2px 5px rgba(0,0,0,0.5);
          transform: translate(-50%, -50%);
        "></div>`,
        className: 'custom-marker',
        iconSize: [24, 24],
        iconAnchor: [12, 12]
      });

      // Добавляем маркер
      const marker = L.marker(position, { icon: orangeIcon }).addTo(mapRef.current);

      // Добавляем всплывающее окно
      marker.bindPopup(`
        <div style="padding: 10px; color: #333;">
          <strong>AboutMe Events</strong><br/>
          Культурные мероприятия и события
        </div>
      `);
    }

    // Очищаем ресурсы при размонтировании компонента
    return () => {
      if (mapRef.current) {
        mapRef.current.remove();
        mapRef.current = null;
      }
    };
  }, [position]);

  return (
    <>
      <div 
        ref={mapContainerRef} 
        style={{ width: '100%', height: '100%', borderRadius: '1rem' }} 
      />
      <div style={{
        position: 'absolute',
        top: 0, left: 0, right: 0, bottom: 0,
        pointerEvents: 'none',
        boxShadow: 'inset 0 0 15px 5px rgba(0,0,0,0.2)',
        borderRadius: '1rem',
        zIndex: 100
      }}></div>
    </>
  );
}