'use client';

import { MapContainer, TileLayer, Marker, Popup, Circle } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import L from 'leaflet';

delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
  iconUrl: '/leaflet/marker-icon.png',
  iconRetinaUrl: '/leaflet/marker-icon-2x.png',
  shadowUrl: '/leaflet/marker-shadow.png',
});

/**
 * Komponen peta lokasi real-time
 * @param {number} lat - Latitude user
 * @param {number} lng - Longitude user
 * @param {number} radius - Radius validasi (dalam meter)
 * @param {number} centerLat - Titik tengah area kantor (optional)
 * @param {number} centerLng - Titik tengah area kantor (optional)
 */
export default function LiveLocationMap({ lat, lng, radius, centerLat, centerLng }) {
  if (!lat || !lng) return <div>Loading map...</div>;

  return (
    <MapContainer center={[lat, lng]} zoom={17} style={{ height: '300px', width: '100%' }}>
      <TileLayer
        attribution='&copy; OpenStreetMap contributors'
        url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
      />
      {/* Marker posisi user */}
      <Marker position={[lat, lng]}>
        <Popup>Lokasi Anda</Popup>
      </Marker>

      {/* Circle radius validasi */}
      {radius && centerLat && centerLng && (
        <Circle
          center={[centerLat, centerLng]}
          radius={radius}
          pathOptions={{ fillColor: 'blue', fillOpacity: 0.1, color: 'blue' }}
        />
      )}
    </MapContainer>
  );
}