#!/usr/bin/env python3
"""
Generira mapa-skole-2026.html direktno iz schools_geocoded.json
Ne treba template fajl.
"""
import json

TOKEN = "pk.eyJ1IjoidHJhZmZpYzI0c2F0YSIsImEiOiJjbG02MzExcG8yajRsM2pwNjhiOWw4YTF5In0.xt5_tl8a0MML-Lrok7c9XQ"

with open("schools_geocoded.json", encoding="utf-8") as f:
    schools = json.load(f)

geocoded = sum(1 for s in schools if s.get("lat"))
print(f"Škola ukupno: {len(schools)}, s koordinatama: {geocoded}")

data_json = json.dumps(schools, ensure_ascii=False)

html = f"""<!DOCTYPE html>
<html lang="hr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Upisi u škole 2026. – Interaktivna karta</title>
  <link href="https://api.mapbox.com/mapbox-gl-js/v3.4.0/mapbox-gl.css" rel="stylesheet">
  <script src="https://api.mapbox.com/mapbox-gl-js/v3.4.0/mapbox-gl.js"></script>
  <style>
    *,*::before,*::after{{box-sizing:border-box;margin:0;padding:0}}
    :root{{
      --orange:#f99c1b;--orange-bg:rgba(254,196,144,0.52);--blue:#297af6;
      --text:#000;--gray:#4f4f4f;--border-r:3px;--sidebar-w:420px;
      --font:'Arial Black',Impact,sans-serif;--font-reg:Arial,sans-serif;
    }}
    html,body{{height:100%;font-family:var(--font-reg);background:#f4f4f0}}
    .app{{display:flex;height:100vh;overflow:hidden}}
    #map{{flex:1}}

    /* SIDEBAR */
    .sidebar{{width:var(--sidebar-w);min-width:var(--sidebar-w);background:#fff;border-left:1px solid var(--orange);display:flex;flex-direction:column;overflow:hidden;z-index:10}}
    .sidebar__header{{padding:20px 20px 12px;background:#fff;border-bottom:1px solid #eee;flex-shrink:0}}
    .sidebar__title{{font-family:var(--font);font-size:18px;font-weight:900;color:var(--text);margin-bottom:12px;line-height:1.2}}

    .search-wrap{{position:relative;margin-bottom:10px}}
    .search-wrap input{{width:100%;padding:10px 36px 10px 12px;border:1px solid var(--orange);border-radius:var(--border-r);background:var(--orange-bg);font-size:15px;font-family:var(--font-reg);color:var(--text);outline:none}}
    .search-wrap input::placeholder{{color:#999}}
    .search-wrap input:focus{{border-color:var(--blue);background:#fff}}
    .search-wrap svg{{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:18px;height:18px;stroke:var(--gray);fill:none;stroke-width:2;pointer-events:none}}

    .filters{{display:flex;flex-direction:column;gap:8px}}
    .filter-row{{display:flex;gap:8px;align-items:center}}
    .filter-row label{{font-size:12px;font-weight:700;color:var(--gray);min-width:100px;flex-shrink:0}}
    .filter-row select{{flex:1;padding:6px 8px;border:1px solid #ddd;border-radius:var(--border-r);font-size:13px;font-family:var(--font-reg);outline:none;background:#fff;color:var(--text)}}
    .filter-row select:focus{{border-color:var(--blue)}}

    .bodovi-row{{display:flex;gap:6px;align-items:center}}
    .bodovi-row label{{font-size:12px;font-weight:700;color:var(--gray);min-width:100px;flex-shrink:0}}
    .bodovi-row input[type="number"]{{width:72px;padding:6px;border:1px solid #ddd;border-radius:var(--border-r);font-size:13px;text-align:center;outline:none}}
    .bodovi-row input[type="number"]:focus{{border-color:var(--blue)}}
    .bodovi-row span{{font-size:12px;color:var(--gray)}}

    .btn-filter{{display:flex;align-items:center;justify-content:center;width:100%;height:36px;background:var(--blue);border:none;border-radius:var(--border-r);font-family:var(--font);font-size:14px;font-weight:900;color:#fff;cursor:pointer;margin-top:8px;transition:background .15s}}
    .btn-filter:hover{{background:#1a6ae0}}

    .count-bar{{padding:8px 20px;background:#f8f8f8;border-bottom:1px solid #eee;font-size:12px;color:var(--gray);flex-shrink:0}}
    .count-bar strong{{color:var(--text)}}

    .results{{flex:1;overflow-y:auto;padding:8px 0}}

    .school-card{{padding:12px 20px;cursor:pointer;border-bottom:1px solid #f0f0f0;transition:background .1s}}
    .school-card:hover{{background:#fff8f0}}
    .school-card.active{{background:#fff3e0;border-left:3px solid var(--orange)}}
    .school-card__name{{font-family:var(--font);font-size:13px;font-weight:900;color:var(--text);margin-bottom:2px;line-height:1.3}}
    .school-card__meta{{font-size:11px;color:var(--gray);margin-bottom:4px}}
    .school-card__bodovi{{display:flex;gap:8px;flex-wrap:wrap}}

    .badge{{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:10px;font-size:11px;font-weight:700}}
    .badge--min{{background:#fef3e2;color:#b45309}}
    .badge--max{{background:#dbeafe;color:#1d4ed8}}
    .badge--avg{{background:#dcfce7;color:#166534}}

    .no-results{{padding:40px 20px;text-align:center;color:var(--gray);font-size:14px}}

    /* POPUP */
    .mapboxgl-popup-content{{border-radius:6px!important;padding:0!important;box-shadow:0 4px 20px rgba(0,0,0,.18)!important;min-width:280px;max-width:340px;font-family:var(--font-reg)}}
    .popup{{padding:14px 16px}}
    .popup__name{{font-family:var(--font);font-size:14px;font-weight:900;color:var(--text);margin-bottom:4px;line-height:1.3}}
    .popup__zupanija{{font-size:11px;color:var(--blue);font-weight:700;margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}}
    .popup__adresa{{font-size:12px;color:var(--gray);margin-bottom:8px}}
    .popup__badges{{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}}
    .popup__programi-title{{font-size:12px;font-weight:700;color:var(--text);margin-bottom:6px;border-top:1px solid #f0f0f0;padding-top:8px}}
    .popup__programi{{max-height:180px;overflow-y:auto}}
    .popup__program-row{{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;padding:4px 0;border-bottom:1px solid #f8f8f8;font-size:11px}}
    .popup__program-row:last-child{{border-bottom:none}}
    .popup__program-name{{color:var(--text);flex:1;line-height:1.3}}
    .popup__program-bodovi{{color:var(--blue);font-weight:700;white-space:nowrap;flex-shrink:0}}
    .popup__links{{display:flex;gap:8px;margin-top:10px;border-top:1px solid #f0f0f0;padding-top:8px}}
    .popup__link{{font-size:11px;color:var(--blue);text-decoration:none;padding:3px 8px;border:1px solid var(--blue);border-radius:3px}}
    .popup__link:hover{{background:var(--blue);color:#fff}}
  </style>
</head>
<body>
<div class="app">
  <div id="map"></div>
  <aside class="sidebar">
    <div class="sidebar__header">
      <div class="sidebar__title">🎓 Upisi u škole 2026.<br>Karta programa</div>
      <div class="search-wrap">
        <input type="text" id="searchInput" placeholder="Pretraži školu, program, grad…">
        <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><line x1="16.5" y1="16.5" x2="22" y2="22"/></svg>
      </div>
      <div class="filters">
        <div class="filter-row">
          <label>Županija</label>
          <select id="filterZupanija"><option value="">— sve —</option></select>
        </div>
        <div class="bodovi-row">
          <label>Bodovi (zadnji)</label>
          <input type="number" id="bodoviMin" placeholder="od" min="0" max="100" step="0.5">
          <span>–</span>
          <input type="number" id="bodoviMax" placeholder="do" min="0" max="100" step="0.5">
        </div>
        <button class="btn-filter" id="btnFilter">Filtriraj</button>
      </div>
    </div>
    <div class="count-bar" id="countBar">Učitavanje…</div>
    <div class="results" id="resultsList"></div>
  </aside>
</div>

<script>
const SCHOOLS_RAW = {data_json};

mapboxgl.accessToken = '{TOKEN}';
const map = new mapboxgl.Map({{
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v11',
  center: [16.44, 44.54],
  zoom: 7
}});
map.addControl(new mapboxgl.NavigationControl(), 'top-left');

let schools = SCHOOLS_RAW.map((s,i) => ({{...s, id:i}}));
let markers = [];
let activeCard = null;
let currentPopup = null;

const COLORS = {{
  'Grad Zagreb':'#e63946','Zagrebačka':'#e76f51','Krapinsko-zagorska':'#f4a261',
  'Varaždinska':'#e9c46a','Koprivničko-križevačka':'#2a9d8f','Bjelovarsko-bilogorska':'#264653',
  'Primorsko-goranska':'#0096c7','Ličko-senjska':'#48cae4','Karlovačka':'#a8dadc',
  'Sisačko-moslavačka':'#457b9d','Brodsko-posavska':'#6a4c93','Požeško-slavonska':'#9b5de5',
  'Osječko-baranjska':'#c77dff','Vukovarsko-srijemska':'#ff70a6','Dubrovačko-neretvanska':'#06d6a0',
  'Splitsko-dalmatinska':'#118ab2','Šibensko-kninska':'#ffd166','Zadarska':'#ef476f',
  'Istarska':'#26a269','Međimurska':'#fb8500','Virovitičko-podravska':'#8338ec'
}};
const getColor = z => COLORS[z] || '#297af6';

// populate county filter
const zupanije = [...new Set(schools.map(s=>s.zupanija))].sort();
const selZ = document.getElementById('filterZupanija');
zupanije.forEach(z => {{
  const o = document.createElement('option');
  o.value = z; o.textContent = z;
  selZ.appendChild(o);
}});

function addMarker(school) {{
  if (!school.lat || !school.lng) return;
  const el = document.createElement('div');
  el.style.cssText = `width:28px;height:28px;border-radius:50%;background:${{getColor(school.zupanija)}};border:2.5px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;color:#fff;font-family:Arial Black,sans-serif;transition:transform .1s`;
  el.textContent = school.programi ? school.programi.length : '';
  el.dataset.id = school.id;
  el.addEventListener('mouseenter', () => el.style.transform = 'scale(1.3)');
  el.addEventListener('mouseleave', () => el.style.transform = '');
  const marker = new mapboxgl.Marker({{element:el, anchor:'center'}})
    .setLngLat([school.lng, school.lat])
    .addTo(map);
  el.addEventListener('click', () => openSchool(school));
  markers.push({{marker, school, el}});
}}

function openSchool(school) {{
  if (currentPopup) currentPopup.remove();
  if (activeCard) activeCard.classList.remove('active');
  const card = document.querySelector(`.school-card[data-id="${{school.id}}"]`);
  if (card) {{ card.classList.add('active'); activeCard = card; card.scrollIntoView({{behavior:'smooth',block:'nearest'}}); }}
  if (!school.lat) return;

  const prHtml = school.programi.map(p => `
    <div class="popup__program-row">
      <span class="popup__program-name">${{p.naziv}}</span>
      <span class="popup__program-bodovi">${{p.min_bodova !== null ? p.min_bodova+'–'+p.max_bodova : '–'}}</span>
    </div>`).join('');

  const links = [
    school.web && school.web !== '0' ? `<a class="popup__link" href="${{school.web}}" target="_blank">Web</a>` : '',
    school.mail ? `<a class="popup__link" href="mailto:${{school.mail.split(';')[0].trim()}}">Mail</a>` : ''
  ].filter(Boolean).join('');

  currentPopup = new mapboxgl.Popup({{maxWidth:'340px'}})
    .setLngLat([school.lng, school.lat])
    .setHTML(`
      <div class="popup">
        <div class="popup__zupanija">${{school.zupanija}}</div>
        <div class="popup__name">${{school.skola}}</div>
        <div class="popup__adresa">📍 ${{school.adresa}}, ${{school.grad}}</div>
        <div class="popup__badges">
          ${{school.min_bodova !== null ? `<span class="badge badge--min">min: ${{school.min_bodova}}</span>` : ''}}
          ${{school.max_bodova !== null ? `<span class="badge badge--max">max: ${{school.max_bodova}}</span>` : ''}}
          ${{school.avg_bodova !== null ? `<span class="badge badge--avg">avg: ${{school.avg_bodova}}</span>` : ''}}
        </div>
        <div class="popup__programi-title">Programi (${{school.programi.length}})</div>
        <div class="popup__programi">${{prHtml}}</div>
        ${{links ? `<div class="popup__links">${{links}}</div>` : ''}}
      </div>`)
    .addTo(map);
  map.flyTo({{center:[school.lng, school.lat], zoom:Math.max(map.getZoom(),13), speed:1.2}});
}}

function getFiltered() {{
  const q = document.getElementById('searchInput').value.trim().toLowerCase();
  const z = document.getElementById('filterZupanija').value;
  const bMin = parseFloat(document.getElementById('bodoviMin').value) || 0;
  const bMax = parseFloat(document.getElementById('bodoviMax').value) || 999;
  return schools.filter(s => {{
    if (z && s.zupanija !== z) return false;
    if (s.min_bodova !== null && s.min_bodova > bMax) return false;
    if (s.max_bodova !== null && s.max_bodova < bMin) return false;
    if (q) {{
      const h = `${{s.skola}} ${{s.grad}} ${{s.zupanija}} ${{s.programi.map(p=>p.naziv).join(' ')}}`.toLowerCase();
      if (!h.includes(q)) return false;
    }}
    return true;
  }});
}}

function updateMarkers(filtered) {{
  const ids = new Set(filtered.map(s => s.id));
  markers.forEach(({{school, el}}) => {{ el.style.display = ids.has(school.id) && school.lat ? '' : 'none'; }});
}}

function updateCount() {{
  const f = getFiltered();
  document.getElementById('countBar').innerHTML = `Prikazano: <strong>${{f.length}}</strong> škola`;
}}

function renderList(filtered) {{
  const list = document.getElementById('resultsList');
  if (!filtered.length) {{ list.innerHTML = '<div class="no-results">Nema rezultata.</div>'; return; }}
  list.innerHTML = filtered.map(s => `
    <div class="school-card" data-id="${{s.id}}">
      <div class="school-card__name">${{s.skola}}</div>
      <div class="school-card__meta">${{s.grad}} · ${{s.zupanija}} · ${{s.programi.length}} programa</div>
      <div class="school-card__bodovi">
        ${{s.min_bodova !== null ? `<span class="badge badge--min">min: ${{s.min_bodova}}</span>` : ''}}
        ${{s.max_bodova !== null ? `<span class="badge badge--max">max: ${{s.max_bodova}}</span>` : ''}}
        ${{s.avg_bodova !== null ? `<span class="badge badge--avg">avg: ${{s.avg_bodova}}</span>` : ''}}
      </div>
    </div>`).join('');
  list.querySelectorAll('.school-card').forEach(card => {{
    card.addEventListener('click', () => {{
      const s = schools.find(x => x.id === parseInt(card.dataset.id));
      if (s) openSchool(s);
    }});
  }});
}}

function applyFilter() {{
  const f = getFiltered();
  updateMarkers(f);
  updateCount();
  renderList(f);
}}

document.getElementById('btnFilter').addEventListener('click', applyFilter);
document.getElementById('filterZupanija').addEventListener('change', applyFilter);
let t; document.getElementById('searchInput').addEventListener('input', () => {{ clearTimeout(t); t = setTimeout(applyFilter, 250); }});
document.getElementById('bodoviMin').addEventListener('change', applyFilter);
document.getElementById('bodoviMax').addEventListener('change', applyFilter);

map.on('load', () => {{
  schools.forEach(s => {{ if (s.lat && s.lng) addMarker(s); }});
  updateCount();
  renderList(getFiltered());
}});
</script>
</body>
</html>"""

with open("mapa-skole-2026.html", "w", encoding="utf-8") as f:
    f.write(html)

size_kb = len(html.encode("utf-8")) // 1024
print(f"✓ Generirano: mapa-skole-2026.html ({size_kb} KB)")