# -*- coding: utf-8 -*-
"""Generira preview/trase-za-potvrdu.html — ČISTA verzija za Naručitelja (Grad).
Bez uređivanja, bez internih oznaka; pregled trasa + potvrda/primjedbe po ruti."""
import json, os, datetime

BASE = os.path.dirname(os.path.abspath(__file__))
places = json.load(open(os.path.join(BASE, "places.json"), encoding="utf-8"))
cfg = json.load(open(os.path.join(BASE, "rute.json"), encoding="utf-8"))

COLORS = {"R1": "#d62728", "R2": "#2ca02c", "R3": "#1f77b4", "R4": "#ff7f0e",
          "R5": "#9467bd", "R6": "#0e8585", "R7": "#8c564b", "R8": "#d63384"}
DATUM = datetime.date.today().strftime("%-d.%-m.%Y.")

routes = []
for r in cfg["rute"]:
    p = os.path.join(BASE, "geojson", f"{r['id'].lower()}.geojson")
    if os.path.exists(p):
        gj = json.load(open(p, encoding="utf-8"))
        pr = gj["features"][0]["properties"]
        routes.append({"id": r["id"], "color": COLORS[r["id"]], "geojson": gj,
                       "naziv": r["naziv"], "tip": r["tip"], "prekogranicna": r["prekogranicna"],
                       "km": pr["duljina_km"], "uspon": pr["uspon_m"],
                       "napomena": r.get("napomena", "")})

pl = [{"key": k, "lat": v["lat"], "lon": v["lon"]} for k, v in places.items() if v["lat"]]

html = """<!DOCTYPE html>
<html lang="hr"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BIKE CROSS — prijedlog biciklističkih trasa</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<style>
  html,body{margin:0;height:100%;font-family:-apple-system,'Segoe UI',Roboto,sans-serif;background:#fff}
  body{display:flex;flex-direction:column}
  #top{flex:none;background:#1a3e5c;color:#fff;padding:9px 16px}
  #top b{font-size:16px}
  #top .sub{font-size:12.5px;opacity:.85;margin-top:2px}
  #routes{flex:none;background:#ecf1f5;border-bottom:1px solid #c9d4de;padding:6px 14px;display:flex;gap:4px 14px;flex-wrap:wrap;font-size:13px}
  #routes label{display:flex;gap:6px;align-items:center;cursor:pointer;white-space:nowrap}
  .sw{display:inline-block;width:16px;height:5px;border-radius:2px}
  #map{flex:1;min-height:0}
  #note{flex:none;background:#fff8e6;border-top:1px solid #e6d9a8;padding:6px 14px;font-size:12.5px;color:#5c4a00}
  .leaflet-popup-content{font-size:13px;line-height:1.55}
</style></head><body>
<div id="top"><b>BIKE CROSS — prijedlog biciklističkih trasa (8 ruta)</b>
<div class="sub">Digitalizacija prema Prilogu 1 projektne dokumentacije · WebLink, vl. Antonio Novak · __DATUM__</div></div>
<div id="routes"></div>
<div id="map"></div>
<div id="note">Molimo potvrdu ocrtane trase za svaku rutu, odnosno primjedbe (npr. „R3 — drugom cestom između X i Y"). Klik na rutu prikazuje detalje; podloge (karta/topo/satelit) mijenjaju se gore desno.</div>
<script>
const ROUTES = __ROUTES__;
const PLACES = __PLACES__;
const map = L.map('map', {zoomSnap: 0.25, zoomDelta: 0.25, wheelPxPerZoomLevel: 120}).setView([46.20, 17.05], 11);
const carto = L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png',
  {maxZoom:19, subdomains:'abcd', attribution:'&copy; OpenStreetMap contributors &copy; CARTO'});
const esriTopo = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}',
  {maxZoom:19, attribution:'Esri, HERE, Garmin, &copy; OpenStreetMap contributors'});
const esriSat = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
  {maxNativeZoom:18, maxZoom:19, attribution:'Esri, Maxar, Earthstar Geographics'});
const satLabels = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/tile/{z}/{y}/{x}',
  {maxNativeZoom:18, maxZoom:19, attribution:''});
carto.addTo(map);
L.control.layers({'Karta': carto, 'Topografska': esriTopo, 'Satelit': esriSat},
                 {'Nazivi mjesta (uz satelit)': satLabels}, {position:'topright'}).addTo(map);
const all = L.featureGroup().addTo(map);
ROUTES.forEach(r => {
  const lay = L.geoJSON(r.geojson, {style: {color: r.color, weight: 4, opacity: 0.85}})
    .bindPopup('<b>' + r.id + ' — ' + r.naziv + '</b><br>' + r.km + ' km · uspon ' + r.uspon + ' m · ' +
      (r.tip === 'kruzna' ? 'kružna' : 'linijska') + (r.prekogranicna ? ' · prelazi u Mađarsku' : '') +
      (r.napomena ? '<br><i>Napomena: itinerar u dodatnoj provjeri.</i>' : ''))
    .on('mouseover', () => lay.setStyle({weight: 7}))
    .on('mouseout', () => lay.setStyle({weight: 4}));
  lay.addTo(all);
  const lb = document.createElement('label');
  lb.innerHTML = '<input type="checkbox" checked><span class="sw" style="background:' + r.color + '"></span><b>' +
    r.id + '</b> ' + r.km + ' km';
  lb.title = r.naziv;
  lb.querySelector('input').onchange = e => e.target.checked ? lay.addTo(all) : all.removeLayer(lay);
  document.getElementById('routes').appendChild(lb);
});
PLACES.forEach(p => {
  L.circleMarker([p.lat, p.lon], {radius: 3.5, color: '#1a3e5c', weight: 1.5,
    fillColor: '#fff', fillOpacity: 0.95, opacity: 0.75, interactive: false}).addTo(map);
});
function fit(){ map.invalidateSize(); map.fitBounds(all.getBounds().pad(0.06)); }
window.addEventListener('load', () => requestAnimationFrame(fit));
window.addEventListener('resize', () => map.invalidateSize());
setTimeout(fit, 400);
</script></body></html>
"""
html = html.replace("__ROUTES__", json.dumps(routes, ensure_ascii=False))
html = html.replace("__PLACES__", json.dumps(pl, ensure_ascii=False))
html = html.replace("__DATUM__", DATUM)
out = os.path.join(BASE, "preview", "trase-za-potvrdu.html")
with open(out, "w", encoding="utf-8") as f:
    f.write(html)
print("OK ->", out, f"({os.path.getsize(out)//1024} KB)")
