/* ════ UNA MESA · Results screen · Stitch design system ════ */
function ResultsScreen({ query, openRest, favs, toggleFav, startBook, geoLabel, geo }) {
const data = window.UM_DATA;
const [q, setQ] = useState(query || '');
const [cuisines, setCuisines] = useState([]);
const [prices, setPrices] = useState([]);
const [tags, setTags] = useState([]);
const [sort, setSort] = useState('match');
const [hoverId, setHoverId] = useState(null);
const mapContainerRef = useRef(null);
const leafletMapRef = useRef(null);
const markersRef = useRef([]);
const [coords, setCoords] = useState(geo?.lat ? { lat: geo.lat, lng: geo.lng } : null);
useEffect(() => {
if (coords) return;
let alive = true;
if (!('geolocation' in navigator)) { setCoords({ lat: 40.4168, lng: -3.7038 }); return; }
navigator.geolocation.getCurrentPosition(
pos => { if (alive) setCoords({ lat: pos.coords.latitude, lng: pos.coords.longitude }); },
() => { if (alive) setCoords({ lat: 40.4168, lng: -3.7038 }); },
{ timeout: 5000, maximumAge: 300000 }
);
return () => { alive = false; };
}, []);
useEffect(()=>{ setQ(query||''); }, [query]);
/* Map — init cuando coords están disponibles */
React.useEffect(() => {
console.log('[MAP EFFECT]', coords);
if (!coords || !mapContainerRef.current || !window.L) return;
if (leafletMapRef.current) { leafletMapRef.current.remove(); leafletMapRef.current = null; }
delete mapContainerRef.current._leaflet_id;
const map = window.L.map(mapContainerRef.current).setView([coords.lat, coords.lng], 14);
window.L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap'
}).addTo(map);
leafletMapRef.current = map;
return () => { if (leafletMapRef.current) { leafletMapRef.current.remove(); leafletMapRef.current = null; } };
}, [coords]);
const allCuisines = [...new Set(data.map(r=>r.cuisine))];
const allTags = [...new Set(data.flatMap(r=>r.tags))];
const toggle = (arr,set,v) => set(arr.includes(v) ? arr.filter(x=>x!==v) : [...arr,v]);
let list = data.filter(r => {
const text = (q||'').toLowerCase().trim();
const matchText = !text || [r.name,r.cuisine,r.area,...r.tags,...(r.kw||[])].join(' ').toLowerCase().includes(text);
const matchCui = !cuisines.length || cuisines.includes(r.cuisine);
const matchPrice = !prices.length || prices.includes(r.price);
const matchTag = !tags.length || tags.some(t=>r.tags.includes(t));
return matchText && matchCui && matchPrice && matchTag;
});
list = [...list].sort((a,b) => {
if (sort==='match') return b.match-a.match;
if (sort==='rating') return b.rating-a.rating;
if (sort==='price-lo') return a.price.length-b.price.length;
if (sort==='price-hi') return b.price.length-a.price.length;
return 0;
});
useEffect(() => {
if (!leafletMapRef.current || !coords) return;
markersRef.current.forEach(m => m.remove());
markersRef.current = [];
list.forEach(r => {
if (!r.lat || !r.lng) return;
const m = window.L.marker([r.lat, r.lng])
.addTo(leafletMapRef.current)
.bindPopup(''+r.name+'
'+r.rating.toFixed(1)+'★ · '+r.price+'
'+r.area+'');
m.on('click', () => openRest(r.id));
markersRef.current.push(m);
});
}, [list, coords]);
React.useEffect(() => {
if (!q || q.length < 3) return;
const timer = setTimeout(() => {
if (!leafletMapRef.current) return;
const words = q.trim().split(' ').filter(w => w.length > 2);
const cityQuery = words[words.length - 1] || q;
fetch(`https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(cityQuery)}&format=json&limit=1&countrycodes=es`)
.then(r => r.json())
.then(data => {
if (data[0] && leafletMapRef.current) {
leafletMapRef.current.setView([parseFloat(data[0].lat), parseFloat(data[0].lon)], 13);
}
})
.catch(() => {});
}, 600);
return () => clearTimeout(timer);
}, [q]);
const clearAll = () => { setCuisines([]); setPrices([]); setTags([]); setQ(''); };
/* pill filter button — replaces checkbox style */
const FPill = (label, arr, set) => React.createElement('button', {
type:'button',
className:'res-fpill'+(arr.includes(label)?' on':''),
onClick:()=>toggle(arr,set,label)
}, label);
/* sort pill button — replaces