'use client';
import {useEffect,useRef,useState} from 'react';import type {Map as LeafletMap} from 'leaflet';import type {RequestRecord} from './cereri/browse';import 'leaflet/dist/leaflet.css';
export default function GeoMap({rows,onPick}:{rows?:RequestRecord[],onPick?:(coords:[number,number])=>void}){const el=useRef<HTMLDivElement>(null),[error,setError]=useState('');useEffect(()=>{let map:LeafletMap|undefined,disposed=false;import('leaflet').then(L=>{if(!el.current||disposed)return;map=L.map(el.current).setView([45.8,24.9],6);L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png',{maxZoom:18,attribution:'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);if(onPick){let marker:ReturnType<typeof L.circleMarker>|undefined;map.on('click',e=>{marker?.remove();const lat=Math.round(e.latlng.lat*1000)/1000,lng=Math.round(e.latlng.lng*1000)/1000;marker=L.circleMarker([lat,lng],{radius:10,color:'#3158ed',fillOpacity:.7}).addTo(map!);onPick([lat,lng]);});}const groups=new Map<string,RequestRecord[]>();for(const r of rows||[]){if(r.lat==null||r.lng==null)continue;const key=r.city.toLowerCase();groups.set(key,[...(groups.get(key)||[]),r]);}for(const group of groups.values()){const lat=group.reduce((s,r)=>s+r.lat!,0)/group.length,lng=group.reduce((s,r)=>s+r.lng!,0)/group.length;const popup=document.createElement('div');const title=document.createElement('strong');title.textContent=`${group[0].city} · ${group.length} cereri`;popup.appendChild(title);for(const r of group){const a=document.createElement('a');a.textContent=r.title;a.href='/cereri/'+encodeURIComponent(r.id);a.style.display='block';a.style.marginTop='10px';popup.appendChild(a);}L.marker([lat,lng],{icon:L.divIcon({className:'relto-map-marker',html:String(group.length),iconSize:[38,38]})}).addTo(map!).bindPopup(popup);} }).catch(()=>setError('Harta nu poate fi încărcată momentan. Poți continua cu lista cererilor.'));return()=>{disposed=true;map?.remove()}},[rows,onPick]);return <>{error&&<p role="alert" className="error">{error}</p>}<div ref={el} aria-label={onPick?'Alege zona dorită pe harta României':'Harta cererilor pe localități'} style={{height:400,borderRadius:12,position:'relative',zIndex:0}}/></>}