SweetHome/app/components/PropertyMapWithMarkers.js

'use client';

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

delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
  iconRetinaUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-2x.png',
  iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png',
  shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png',
});

export default function PropertyMapWithMarkers({ properties = [], onPropertyClick }) {
  const mapRef = useRef(null);
  const mapInstanceRef = useRef(null);
  const markersRef = useRef([]);
  const [mapLoaded, setMapLoaded] = useState(false);

  useEffect(() => {
    if (!mapRef.current || mapInstanceRef.current) return;

    const map = L.map(mapRef.current).setView([33.5138, 38.9968], 7);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
      maxZoom: 19,
    }).addTo(map);

    mapInstanceRef.current = map;
    setMapLoaded(true);

    return () => {
      if (mapInstanceRef.current) {
        mapInstanceRef.current.remove();
        mapInstanceRef.current = null;
      }
    };
  }, []);

  useEffect(() => {
    if (!mapInstanceRef.current || !mapLoaded) return;

    markersRef.current.forEach(marker => marker.remove());
    markersRef.current = [];

    properties.forEach(property => {
      if (property.lat && property.lng) {
        const marker = L.marker([property.lat, property.lng]).addTo(mapInstanceRef.current);

        const popupContent = `
          <div dir="rtl" style="text-align: right; padding: 12px; max-width: 250px;">
            <h3 style="font-weight: bold; font-size: 16px; margin-bottom: 8px; color: #111;">${property.title || 'عقار'}</h3>
            <p style="font-size: 14px; color: #666; margin-bottom: 8px;">${property.address || property.location?.address || ''}</p>
            <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
              <span style="font-weight: bold; font-size: 18px; color: #d97706;">${formatPrice(property)}</span>
            </div>
            ${property.images && property.images.length > 0 ? `<img src="${property.images[0]}" alt="${property.title}" style="width: 100%; height: 96px; object-fit: cover; border-radius: 8px; margin-bottom: 8px;" onerror="this.src='/property-placeholder.jpg'" />` : ''}
            <div style="font-size: 12px; color: #888;">
              ${property.type ? `<p>النوع: ${property.type}</p>` : ''}
              ${property.bedrooms > 0 ? `<p>غرف نوم: ${property.bedrooms}</p>` : ''}
              ${property.bathrooms > 0 ? `<p>حمامات: ${property.bathrooms}</p>` : ''}
            </div>
          </div>
        `;

        marker.bindPopup(popupContent);

        marker.on('click', () => {
          if (onPropertyClick) {
            onPropertyClick(property);
          }
        });

        markersRef.current.push(marker);
      }
    });

    if (markersRef.current.length > 0) {
      const group = L.featureGroup(markersRef.current);
      mapInstanceRef.current.fitBounds(group.getBounds(), { padding: [50, 100] });
    }
  }, [properties, mapLoaded]);

  const formatPrice = (property) => {
    if (property.priceUnit === 'monthly') {
      return `${property.price?.toLocaleString() || 0} ل.س/شهر`;
    } else if (property.priceUnit === 'daily') {
      return `${property.price?.toLocaleString() || 0} ل.س/يوم`;
    } else {
      return `${property.price?.toLocaleString() || 0} ل.س`;
    }
  };

  return (
    <div className="relative w-full h-[600px] rounded-xl overflow-hidden border-2 border-gray-200">
      <div ref={mapRef} className="w-full h-full z-0" />
    </div>
  );
}