const [debounced, setDebounced] = useState(value);

useEffect(() => {

const t = setTimeout(() => setDebounced(value), delay);

return () => clearTimeout(t);

}, [value, delay]);

return debounced;

const [state, setState] = useState({ phase: "idle", data: null });

useEffect(() => {

if (!coords) {

setState({ phase: "idle", data: null });

return;

}

let cancelled = false;

let retried = false;

setState({ phase: "loading", data: null });

const load = () => {

fetch(`/api/${path}?lat=${coords.lat}&lon=${coords.lon}`)

.then((r) => r.json())

.then((data) => {

if (cancelled) return;

if (data && data.status === "error" && !retried) {

retried = true;

setTimeout(load, MODULE_RETRY_DELAY_MS);

return;

}

setState({ phase: "done", data });

})

.catch((err) => {

if (cancelled) return;

if (!retried) {

retried = true;

setTimeout(load, MODULE_RETRY_DELAY_MS);

return;

}

setState({ phase: "done", data: { status: "error", message: "Errore di rete: " + err.message } });

});

};

load();

return () => { cancelled = true; };

}, [path, coords && coords.lat, coords && coords.lon]);

return state;

if (distM == null) return 0;

if (distM <= 300) return 100;

if (distM >= 1500) return 0;

return Math.round((100 * (1500 - distM)) / 1200);

if (score >= 75) return { label: "Ottimo", cls: "t-ottimo" };

if (score >= 50) return { label: "Medio", cls: "t-medio" };

if (score >= 25) return { label: "Basso", cls: "t-basso" };

return { label: "Scarso", cls: "t-scarso" };

if (score >= 75) return { label: "Rischio alto", cls: "t-rischio-alto" };

if (score >= 50) return { label: "Rischio medio", cls: "t-rischio-medio" };

if (score >= 25) return { label: "Rischio basso", cls: "t-rischio-basso" };

return { label: "Rischio minimo", cls: "t-rischio-minimo" };

const items = (categories && categories[key]) || [];

if (!items.length) return null;

return Math.min(...items.map((i) => i.dist_m));

if (!state || state.phase !== "done") return { status: "loading" };

const data = state.data;

if (!data || data.status === "error") return { status: "error", message: data && data.message };

const cats = data.categories || {};

const metro = distanceDecay(nearestDistIn(cats, "metro"));

const treno = distanceDecay(nearestDistIn(cats, "stazione_ferroviaria"));

const tram = distanceDecay(nearestDistIn(cats, "tram"));

const bus = distanceDecay(nearestDistIn(cats, "bus"));

const score = Math.round(0.4 * metro + 0.25 * treno + 0.2 * tram + 0.15 * bus);

return { status: "ok", score, components: { metro, treno, tram, bus } };

if (!state || state.phase !== "done") return { status: "loading" };

const data = state.data;

if (!data || data.status === "error") return { status: "error", message: data && data.message };

const cats = data.categories || {};

let count = 0;

SERVIZI_SCORE_CATEGORIES.forEach((k) => {

(cats[k] || []).forEach((it) => { if (it.dist_m <= SERVIZI_SCORE_RADIUS_M) count++; });

});

const score = Math.min(100, Math.round((count / SERVIZI_SCORE_SATURAZIONE) * 100));

return { status: "ok", score, count };

if (!state || state.phase !== "done") return { status: "loading" };

const data = state.data;

if (!data || data.status === "error") return { status: "error", message: data && data.message };

const findings = data.findings || [];

const nearestByType = {};

findings.forEach((f) => {

if (nearestByType[f.type] == null || f.dist_m < nearestByType[f.type]) nearestByType[f.type] = f.dist_m;

});

const elettro = distanceDecay(nearestByType["elettromagnetico"] ?? null);

const aereo = distanceDecay(nearestByType["aeroportuale"] ?? null);

const ambientale = distanceDecay(nearestByType["ambientale"] ?? null);

const score = Math.round((elettro + aereo + ambientale) / 3);

return { status: "ok", score, components: { elettro, aereo, ambientale }, hydroNote: data.hydro_note };

if (!state || state.phase !== "done") return { status: "loading" };

const data = state.data;

const r06 = data && data.r06;

const rl = data && data.regione_lombardia;

const r06ok = r06 && r06.status === "ok";

const rlok = rl && rl.status === "ok";

if (!r06ok && !rlok) return { status: "error", message: "Nessuna fonte vincoli disponibile in questa ricerca." };

let count = 0;

const items = [];

if (r06ok) { count += r06.findings.length; r06.findings.forEach((f) => items.push(`${f.categoria}: ${f.valore}`)); }

if (rlok) { count += rl.vincolati.length; rl.vincolati.forEach((v) => items.push(v.nome)); }

const notes = [];

if (!rlok) notes.push("Fonte Regione Lombardia non disponibile in questa versione.");

if (!r06ok) notes.push("Fonte Tavola R06 non disponibile in questa versione.");

return { status: "ok", count, items, notes };

if (phase !== "done") {

return <span className="status-tag loading"><i className="ti ti-loader-2"></i> In caricamento…</span>;

}

if (backendStatus === "error") {

return <span className="status-tag err"><i className="ti ti-circle-x"></i> Non disponibile</span>;

}

return <span className="status-tag ok"><i className="ti ti-circle-check"></i> Disponibile</span>;

return (

<div>

<div className="skel skel-line w80"></div>

<div className="skel skel-line w60"></div>

<div className="skel skel-line w40"></div>

</div>

);

return (

<div className="dc">

<div className="dc-h">

<div className="dc-t"><i className={`ti ${icon}`}></i> {title}</div>

<StatusTag phase={phase} backendStatus={backendStatus} />

</div>

<div className="dc-b">

{phase !== "done" ? <SkeletonBody /> : children}

{phase === "done" && url && (

<a className="link-btn" href={url} target="_blank" rel="noopener noreferrer">

<i className="ti ti-external-link"></i> {urlLabel || "Verifica ufficiale"}

</a>

)}

</div>

{phase === "done" && source && (

<div className="dc-src">Fonte: {source}{attribution ? ` — ${attribution}` : ""}</div>

)}

</div>

);

const [open, setOpen] = useState(false);

return (

<div className="accordion">

<button type="button" className="accordion-head" onClick={() => setOpen((o) => !o)}>

<span>{summary}</span>

<i className={`ti ${open ? "ti-chevron-up" : "ti-chevron-down"}`}></i>

</button>

{open && <div className="accordion-body">{children}</div>}

</div>

);

const [text, setText] = useState(initialLabel || "");

const [suggestions, setSuggestions] = useState([]);

const [open, setOpen] = useState(false);

const [loading, setLoading] = useState(false);

const debouncedText = useDebounced(text, 300);

const skipNextFetch = useRef(false);

useEffect(() => {

if (skipNextFetch.current) { skipNextFetch.current = false; return; }

if (debouncedText.trim().length < 3) { setSuggestions([]); setOpen(false); return; }

setLoading(true);

fetch(`/api/autocomplete?q=${encodeURIComponent(debouncedText)}`)

.then((r) => r.json())

.then((d) => {

setSuggestions(d.suggestions || []);

setOpen(true);

})

.catch(() => setSuggestions([]))

.finally(() => setLoading(false));

}, [debouncedText]);

const pick = (s) => {

skipNextFetch.current = true;

setText(s.label);

setOpen(false);

onSelect({ lat: s.lat, lon: s.lon, label: s.label });

};

return (

<div className="srch-wrap">

<div className="srch">

<i className="ti ti-search srch-icon"></i>

<input

type="text"

placeholder="Cerca un indirizzo a Milano (es. Piazza Duomo)…"

value={text}

onChange={(e) => setText(e.target.value)}

onFocus={() => suggestions.length > 0 && setOpen(true)}

onBlur={() => setTimeout(() => setOpen(false), 150)}

/>

{loading && <i className="ti ti-loader-2"></i>}

</div>

{open && (

<div className="srch-dropdown">

{suggestions.length === 0 && <div className="srch-empty">Nessun suggerimento trovato.</div>}

{suggestions.map((s, i) => (

<div key={i} className="srch-item" onMouseDown={() => pick(s)}>{s.label}</div>

))}

</div>

)}

</div>

);

const mapDivRef = useRef(null);

const mapRef = useRef(null);

const mainMarkerRef = useRef(null);

const poiMarkersRef = useRef([]);

const [mapError, setMapError] = useState(null);

const [mapReady, setMapReady] = useState(false);

useEffect(() => {

if (!mapDivRef.current || mapRef.current) return;

try {

const map = new maplibregl.Map({

container: mapDivRef.current,

style: "https://tiles.openfreemap.org/styles/liberty",

center: [9.19, 45.4642],

zoom: 12,

attributionControl: true,

});

map.addControl(new maplibregl.NavigationControl(), "top-right");

map.on("load", () => setMapReady(true));

map.on("error", (e) => setMapError((e && e.error && e.error.message) || "errore di caricamento mappa"));

map.on("click", (e) => onMapClick({ lat: e.lngLat.lat, lon: e.lngLat.lng }));

mapRef.current = map;

} catch (err) {

setMapError(err.message);

}

}, []);

useEffect(() => {

const map = mapRef.current;

if (!map || !coords) return;

map.flyTo({ center: [coords.lon, coords.lat], zoom: 16 });

if (mainMarkerRef.current) mainMarkerRef.current.remove();

mainMarkerRef.current = new maplibregl.Marker({ color: "#1847F0" })

.setLngLat([coords.lon, coords.lat])

.setPopup(new maplibregl.Popup().setText("Immobile selezionato"))

.addTo(map);

}, [coords && coords.lat, coords && coords.lon, mapReady]);

useEffect(() => {

const map = mapRef.current;

if (!map) return;

poiMarkersRef.current.forEach((m) => m.remove());

poiMarkersRef.current = [];

(poiMarkers || []).forEach((p) => {

const m = new maplibregl.Marker({ color: "#9B9B97", scale: 0.7 })

.setLngLat([p.lon, p.lat])

.setPopup(new maplibregl.Popup().setText(p.name))

.addTo(map);

poiMarkersRef.current.push(m);

});

}, [poiMarkers, mapReady]);

return (

<div className="mc">

<div className="mc-h">

<div className="mc-t"><i className="ti ti-map-2"></i> Mappa e localizzazione</div>

{mapError

? <span className="status-tag err"><i className="ti ti-circle-x"></i> Non disponibile</span>

: <span className="status-tag ok"><i className="ti ti-circle-check"></i> Disponibile</span>}

</div>

{mapError ? (

<div className="dc-b"><p className="err-msg">La mappa non è disponibile: {mapError}</p></div>

) : (

<div id="map" ref={mapDivRef}></div>

)}

<div className="map-hint">Clicca sulla mappa per selezionare un punto (geocoding inverso). Fonte: © OpenStreetMap contributors.</div>

</div>

);

const { phase, data } = state;

const status = data ? data.status : null;

const q = data && data.quotazione;

const [tipologiaScelta, setTipologiaScelta] = useState(null);

useEffect(() => {

if (q && q.status === "ok") setTipologiaScelta(q.tipologia_default);

}, [q && q.tipologia_default]);

const vociFiltrate = q && q.status === "ok" && tipologiaScelta

? q.voci.filter((v) => v.tipologia === tipologiaScelta)

: [];

return (

<React.Fragment>

<SourceCard

icon="ti-currency-euro" title="Prezzi di zona — Zona OMI" phase={phase} backendStatus={status}

source={data && data.source}

>

{status === "error" && <p className="err-msg">{data.message}</p>}

{status === "empty" && <p className="dc-note">{data.message}</p>}

{status === "ok" && (

<div>

<div className="dr"><span className="dl">Codice zona OMI</span><span className="dv mn">{data.zona.codice}</span></div>

<div className="dr"><span className="dl">Fascia</span><span className="dv">{data.zona.fascia}</span></div>

<div className="dr"><span className="dl">Descrizione</span><span className="dv">{data.zona.descrizione}</span></div>

<div className="dr"><span className="dl">Semestre rilevazione</span><span className="dv">{data.zona.semestre}</span></div>

</div>

)}

</SourceCard>

{status === "ok" && q && (

<SourceCard

icon="ti-chart-bar" title="Quotazione €/mq" phase={phase} backendStatus={q.status}

source={q.source} attribution={q.attribution}

url={q.verifica_ufficiale && q.verifica_ufficiale[0].url}

urlLabel={q.verifica_ufficiale && `Verifica su ${q.verifica_ufficiale[0].label}`}

>

{q.status === "error" && <p className="err-msg">{q.message}</p>}

{q.status === "empty" && <p className="dc-note">{q.message}</p>}

{q.status === "ok" && (

<div>

<div className="dc-note" style={{marginBottom:8}}>

Tipologia stimata: <b>{q.categoria_rilevata}</b> (da OpenStreetMap) — cambia se non corretto.

</div>

<select

className="tipologia-select"

value={tipologiaScelta || ""}

onChange={(e) => setTipologiaScelta(e.target.value)}

>

{q.tipologie_disponibili.map((t) => <option key={t} value={t}>{t}</option>)}

</select>

<div className="dc-note" style={{margin:"10px 0 8px"}}>Semestre: {q.semestre} — valori min/max su superficie lorda, salvo indicazione diversa.</div>

{vociFiltrate.map((v, i) => (

<div key={i} style={{marginBottom:10}}>

<div className="dr" style={{borderBottom:"none", paddingBottom:0}}>

<span className="dl" style={{fontWeight:600, color:"var(--text-primary)"}}>{v.tipologia} — {v.stato.toLowerCase()}</span>

</div>

<div className="dr"><span className="dl">Compravendita</span><span className="dv mn">€ {v.compr_min.toLocaleString("it-IT")}–{v.compr_max.toLocaleString("it-IT")} /mq</span></div>

{v.loc_min != null && (

<div className="dr"><span className="dl">Locazione</span><span className="dv mn">€ {v.loc_min.toLocaleString("it-IT")}–{v.loc_max.toLocaleString("it-IT")} /mq/mese</span></div>

)}

</div>

))}

</div>

)}

</SourceCard>

)}

</React.Fragment>

);

const { phase, data } = state;

const r06 = data && data.r06;

const rl = data && data.regione_lombardia;

const sop = data && data.soprintendenza;

return (

<React.Fragment>

<SourceCard

icon="ti-shield-lock" title="Vincoli — Tavola R06 (Comune di Milano)" phase={phase}

backendStatus={r06 && r06.status} source={r06 && r06.source} attribution={r06 && r06.attribution}

>

{r06 && r06.status === "error" && <p className="err-msg">{r06.message}</p>}

{r06 && r06.status === "empty" && <p className="dc-note">{r06.note}</p>}

{r06 && r06.status === "ok" && (

<ul className="list-clean">

{r06.findings.map((f, i) => (

<li key={i} className="dr">

<span className="dl">{f.categoria}</span><span className="dv">{f.valore}</span>

</li>

))}

</ul>

)}

</SourceCard>

<SourceCard

icon="ti-map-pin-cog" title="Vincoli — Geoportale Regione Lombardia (SIRBeC)" phase={phase}

backendStatus={rl && rl.status} source={rl && rl.source}

url={rl && rl.status === "error" ? rl.url : null} urlLabel="Consulta il geoportale"

>

{rl && rl.status === "error" && <p className="err-msg">{rl.message}</p>}

{rl && rl.status === "empty" && <p className="dc-note">{rl.note}</p>}

{rl && rl.status === "ok" && (

<div>

{rl.vincolati.length > 0 && (

<div style={{marginBottom: rl.segnalati_tci.length > 0 ? 10 : 0}}>

<div className="dr" style={{borderBottom:"none", paddingBottom:0}}>

<span className="dl" style={{fontWeight:600, color:"var(--text-primary)"}}>Edifici vincolati</span>

</div>

{rl.vincolati.map((v, i) => (

<div key={i} className="dr"><span className="dl">{v.nome}</span></div>

))}

</div>

)}

{rl.segnalati_tci.length > 0 && (

<div>

<div className="dr" style={{borderBottom:"none", paddingBottom:0}}>

<span className="dl" style={{fontWeight:600, color:"var(--text-primary)"}}>Segnalati TCI (non vincolati)</span>

</div>

{rl.segnalati_tci.map((v, i) => (

<div key={i} className="dr"><span className="dl">{v.nome}</span></div>

))}

</div>

)}

</div>

)}

</SourceCard>

{sop && (

<div className="dc">

<div className="dc-h"><div className="dc-t"><i className="ti ti-building-bank"></i> {sop.titolo}</div></div>

<div className="dc-b">

<p>{sop.descrizione}</p>

<p className="dc-note">PEC: {sop.pec} — {sop.sede}</p>

<a className="link-btn" href={sop.modulo_url} target="_blank" rel="noopener noreferrer">

<i className="ti ti-external-link"></i> Modulo di richiesta ufficiale

</a>

</div>

</div>

)}

</React.Fragment>

);

const { phase, data } = state;

return (

<SourceCard icon="ti-mountain" title="Topografia" phase={phase} backendStatus={data && data.status}

source={data && data.source} attribution={data && data.attribution}>

{data && data.status === "error" && <p className="err-msg">{data.message}</p>}

{data && data.status === "ok" && (

<div className="dr"><span className="dl">Altitudine</span><span className="dv mn">{data.elevation_m} m s.l.m.</span></div>

)}

</SourceCard>

);

const { phase, data } = state;

const gruppi = useMemo(() => {

if (!data || data.status !== "ok") return [];

const byType = {};

data.findings.forEach((f) => { (byType[f.type] = byType[f.type] || []).push(f); });

return Object.keys(RISCHIO_TIPO_LABELS)

.filter((t) => byType[t] && byType[t].length > 0)

.map((t) => ({

tipo: t,

nome: RISCHIO_TIPO_LABELS[t],

items: byType[t].slice().sort((a, b) => a.dist_m - b.dist_m),

}));

}, [data]);

return (

<SourceCard icon="ti-alert-triangle" title="Rischi della location" phase={phase} backendStatus={data && data.status}

source={data && data.source} attribution={data && data.attribution}>

{data && data.status === "error" && <p className="err-msg">{data.message}</p>}

{data && data.status === "empty" && <p className="dc-note">{data.note}</p>}

{data && data.status === "ok" && gruppi.map((g) => (

<Accordion key={g.tipo} summary={`${g.nome} — ${g.items.length} rilevat${g.items.length === 1 ? "o" : "i"} nella zona, il più vicino a ${g.items[0].dist_m} m`}>

{g.items.map((f, i) => (

<div key={i} className="dr"><span className="dl">{f.label}</span><span className="dv">{walkLabel(f)}</span></div>