/**
 * PolyWeather legacy dashboard client
 * Leaflet map + detail panel + Chart.js charts
 */

// ------------------------------------------------------------
// State
// ------------------------------------------------------------
let map = null;
let markers = {}; // cityName -> Leaflet marker
let cityDataCache = {}; // cityName -> API response
const CACHE_KEY = "polyWeather_v1";

try {
  const cachedStr = sessionStorage.getItem(CACHE_KEY);
  if (cachedStr) {
    const parsed = JSON.parse(cachedStr);
    if (Date.now() - parsed.timestamp < 5 * 60 * 1000) {
      cityDataCache = parsed.data || {};
    } else {
      sessionStorage.removeItem(CACHE_KEY);
    }
  }
} catch (e) {
  console.warn("Restore cache failed", e);
}

function saveCache() {
  try {
    sessionStorage.setItem(
      CACHE_KEY,
      JSON.stringify({ timestamp: Date.now(), data: cityDataCache }),
    );
  } catch (e) {}
}

let selectedCity = null;
let tempChart = null;
let futureForecastChart = null;
const AUTO_REFRESH_MS = 60 * 60 * 1000; // 1 hour
let selectedForecastDate = null;
let nearbyLayerGroup = null;
let autoNearbyCity = null;
let autoNearbyLoading = false;
const AUTO_NEARBY_MIN_ZOOM = 8;
const AUTO_NEARBY_MAX_DISTANCE_M = 120000;

// ------------------------------------------------------------
// Map setup
// ------------------------------------------------------------
function initMap() {
  map = L.map("map", {
    center: [30, 10],
    zoom: 3,
    minZoom: 2,
    maxZoom: 12,
    zoomControl: false,
    attributionControl: true,
  });

  // Move zoom control to bottom right to avoid overlapping with city list
  L.control.zoom({ position: "bottomright" }).addTo(map);

  // CartoDB Dark Matter tiles (free, dark theme)
  L.tileLayer("https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png", {
    attribution:
      '&copy; <a href="https://www.openstreetmap.org/">OSM</a> &copy; <a href="https://carto.com/">CARTO</a>',
    subdomains: "abcd",
    maxZoom: 19,
  }).addTo(map);

  nearbyLayerGroup = L.layerGroup().addTo(map);

  // Close panel and clear selection when clicking on empty map space
  map.on("click", () => {
    closePanel();
  });

  // Handle zoom-based visibility for local stations and minor cities
  map.on("zoomend", updateMapVisibility);
  map.on("moveend", maybeAutoShowNearbyStations);
}

function updateMapVisibility() {
  if (!map) return;
  const zoom = map.getZoom();

  // 1. Handle Nearby Individual Stations (very high zoom only)
  // These are the "Ankara-style" local station markers
  if (zoom < 7) {
    if (map.hasLayer(nearbyLayerGroup)) map.removeLayer(nearbyLayerGroup);
  } else {
    if (!map.hasLayer(nearbyLayerGroup)) map.addLayer(nearbyLayerGroup);
  }

  // 2. Keep all primary city markers visible at all zoom levels.
  // This avoids cities like Ankara disappearing when zoomed out.
  Object.values(markers).forEach(({ marker }) => {
    if (!map.hasLayer(marker)) map.addLayer(marker);
  });

  maybeAutoShowNearbyStations();
}

function getNearestCityForCenter() {
  if (!map) return null;
  const center = map.getCenter();
  let best = null;

  Object.entries(markers).forEach(([cityName, entry]) => {
    const city = entry.city;
    if (city?.lat == null || city?.lon == null) return;
    const distance = map.distance(center, L.latLng(city.lat, city.lon));
    if (distance > AUTO_NEARBY_MAX_DISTANCE_M) return;
    if (!best || distance < best.distance) {
      best = { cityName, distance };
    }
  });

  return best?.cityName || null;
}

async function maybeAutoShowNearbyStations() {
  if (!map || !nearbyLayerGroup) return;
  if (map.getZoom() < AUTO_NEARBY_MIN_ZOOM) {
    autoNearbyCity = null;
    nearbyLayerGroup.clearLayers();
    return;
  }

  const targetCity = getNearestCityForCenter();
  if (!targetCity) {
    autoNearbyCity = null;
    nearbyLayerGroup.clearLayers();
    return;
  }

  if (
    autoNearbyCity === targetCity &&
    nearbyLayerGroup.getLayers().length > 0
  ) {
    return;
  }

  autoNearbyCity = targetCity;

  if (cityDataCache[targetCity]) {
    renderNearbyStations(cityDataCache[targetCity], true);
    return;
  }

  if (autoNearbyLoading) return;
  autoNearbyLoading = true;
  try {
    const data = await fetchCityDetail(targetCity, false);
    cityDataCache[targetCity] = data;
    saveCache();
    renderNearbyStations(data, true);
    if (data.current?.temp != null) {
      updateMarkerTemp(targetCity, data.current.temp);
      updateCityListInfo(data);
    }
  } catch (e) {
    console.error(`Auto nearby load failed for ${targetCity}:`, e);
  } finally {
    autoNearbyLoading = false;
  }
}

// ------------------------------------------------------------
//  Markers
// ------------------------------------------------------------
function createMarkerIcon(city) {
  const riskClass = `risk-${city.risk_level}`;
  const label = city.display_name;
  const unitSym = city.temp_unit === "fahrenheit" ? "°F" : "°C";
  const shortName = label.length > 10 ? `${label.substring(0, 8)}…` : label;
  const tempText = city._temp !== undefined ? `${city._temp}${unitSym}` : "--";

  const html = `
        <div class="city-marker" data-city="${city.name}">
            <div class="marker-bubble ${riskClass}">${tempText}</div>
            <div class="marker-name">${shortName}</div>
        </div>
    `;
  return L.divIcon({
    html,
    className: "",
    iconSize: [80, 44],
    iconAnchor: [40, 22],
  });
}

function addCityMarkers(cities) {
  cities.forEach((city) => {
    const icon = createMarkerIcon(city);
    const marker = L.marker([city.lat, city.lon], { icon })
      .addTo(map)
      .on("click", () => {
        focusCityMarker(city);
        loadCityDetail(city.name);
      });

    markers[city.name] = { marker, city };
  });

  document.getElementById("cityCount").textContent = cities.length;
  updateMapVisibility();
}

function focusCityMarker(city) {
  if (city?.lat == null || city?.lon == null) return;
  map.flyTo([city.lat, city.lon], 6, {
    animate: true,
    duration: 1.05,
    easeLinearity: 0.2,
  });
}

function updateMarkerTemp(cityName, temp) {
  const entry = markers[cityName];
  if (!entry) return;
  entry.city._temp = temp;
  entry.marker.setIcon(createMarkerIcon(entry.city));
}

function setSelectedMarker(cityName) {
  // Remove previous selection
  Object.values(markers).forEach(({ marker }) => {
    const el = marker.getElement();
    if (el) el.querySelector(".city-marker")?.classList.remove("selected");
  });
  // Add selection
  const entry = markers[cityName];
  if (entry) {
    const el = entry.marker.getElement();
    if (el) el.querySelector(".city-marker")?.classList.add("selected");
  }
}

// ------------------------------------------------------------
//  City List Sidebar
// ------------------------------------------------------------
function buildCityList(cities) {
  const container = document.getElementById("cityListItems");
  if (!container) return;

  container.innerHTML = "";
  const countEl = document.getElementById("cityCount");
  if (countEl) countEl.textContent = String(cities.length);

  const order = { high: 0, medium: 1, low: 2 };
  const sorted = [...cities].sort(
    (a, b) => (order[a.risk_level] ?? 3) - (order[b.risk_level] ?? 3),
  );

  sorted.forEach((city) => {
    const div = document.createElement("div");
    div.className = "city-item";
    const cityId = city.name.replace(/\s/g, "-");
    div.id = `city-item-${cityId}`;
    div.innerHTML = `
      <div class="city-item-main">
        <span class="risk-dot ${city.risk_level}"></span>
        <span class="city-name-text">${city.display_name}</span>
        <span class="city-temp" id="temp-${cityId}">--</span>
      </div>
      <div class="city-item-info">
        <span class="city-local-time" id="time-${cityId}"></span>
        <span class="city-max-info" id="max-${cityId}"></span>
      </div>
    `;
    div.addEventListener("click", () => {
      focusCityMarker(city);
      loadCityDetail(city.name);
    });
    container.appendChild(div);
  });
}

function setActiveCityItem(cityName) {
  document
    .querySelectorAll(".city-item")
    .forEach((el) => el.classList.remove("active"));
  const id = `city-item-${cityName.replace(/\s/g, "-")}`;
  const el = document.getElementById(id);
  if (el) {
    el.classList.add("active");
    el.scrollIntoView({ behavior: "smooth", block: "nearest" });
  }
}

function updateCityListInfo(cityData) {
  const cityName = cityData.name;
  const cityId = cityName.replace(/\s/g, "-");
  const temp = cityData.current?.temp;

  const tempEl = document.getElementById(`temp-${cityId}`);
  if (tempEl) {
    tempEl.textContent =
      temp != null ? `${temp}${cityData.temp_symbol || "\u00B0C"}` : "--";
    if (temp != null) tempEl.classList.add("loaded");
  }

  const timeEl = document.getElementById(`time-${cityId}`);
  if (timeEl && cityData.local_time) {
    timeEl.textContent = `\u23f0 ${cityData.local_time}`;
  }

  const maxEl = document.getElementById(`max-${cityId}`);
  if (maxEl && cityData.current?.max_temp_time) {
    maxEl.textContent = `\u5cf0\u503c @${cityData.current.max_temp_time}`;
  }
}

async function fetchCities() {
  try {
    const res = await fetch("/api/cities");
    const data = await res.json();
    return data.cities || [];
  } catch (e) {
    console.error("Failed to fetch cities:", e);
    return [];
  }
}

async function fetchCityDetail(cityName, force = false) {
  const urlName = cityName.replace(/\s/g, "-");
  const res = await fetch(
    `/api/city/${encodeURIComponent(urlName)}?force_refresh=${force}`,
  );
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return await res.json();
}

function pickAnkaraNearbyStations(allNearby) {
  const preferredNames = [
    "Airport (MGM/17128)",
    "Ankara (B\u00f6lge/Center)",
    "Ankara (Bolge/Center)",
    "Etimesgut",
    "Pursaklar",
    "Cubuk",
    "\u00c7ubuk",
    "Kalecik",
  ];

  const picks = preferredNames
    .map((name) => allNearby.find((st) => st?.name === name))
    .filter(Boolean);

  return picks.length ? picks : allNearby;
}

function renderNearbyStations(data, preserveView = false) {
  if (!nearbyLayerGroup) return;
  nearbyLayerGroup.clearLayers();

  const allNearby = Array.isArray(data.mgm_nearby) ? data.mgm_nearby : [];
  const isAnkara = String(data.name || "").toLowerCase() === "ankara";
  const nearbyStations = isAnkara
    ? pickAnkaraNearbyStations(allNearby)
    : allNearby;

  if (!nearbyStations.length) {
    if (!preserveView && data.lat != null && data.lon != null) {
      map.flyTo([data.lat, data.lon], 10, {
        animate: true,
        duration: 1.5,
        easeLinearity: 0.25,
      });
    }
    return;
  }

  const latLngs = [];
  if (data.lat != null && data.lon != null) {
    latLngs.push([data.lat, data.lon]);
  }

  nearbyStations.forEach((st) => {
    const sym = data.temp_symbol || "\u00b0C";
    let windHtml = "";
    if (st.wind_dir != null) {
      const rot = (parseFloat(st.wind_dir) + 180) % 360;
      const speedRaw = parseFloat(st.wind_speed ?? st.wind_speed_kt);
      const speed = !Number.isNaN(speedRaw)
        ? `${speedRaw.toFixed(1)}k`
        : "";
      windHtml = `
        <div class="wind-info">
          <span class="wind-arrow" style="transform: rotate(${rot}deg)">&#8599;</span>
          <span class="wind-speed">${speed}</span>
        </div>
      `;
    }

    const iconHtml = `
      <div class="nearby-marker">
        <span class="nearby-name">${st.name}</span>
        <span class="nearby-temp">${st.temp}</span><span class="nearby-unit">${sym}</span>
        ${windHtml}
      </div>
    `;

    const icon = L.divIcon({
      html: iconHtml,
      className: "",
      iconSize: null,
      iconAnchor: [0, 0],
    });

    L.marker([st.lat, st.lon], { icon }).addTo(nearbyLayerGroup);
    latLngs.push([st.lat, st.lon]);
  });

  if (preserveView) return;

  if (latLngs.length > 1) {
    map.flyToBounds(L.latLngBounds(latLngs), {
      padding: [40, 40],
      duration: 1.5,
      easeLinearity: 0.25,
      maxZoom: 10,
    });
  } else if (data.lat != null && data.lon != null) {
    map.flyTo([data.lat, data.lon], 10, {
      animate: true,
      duration: 1.5,
      easeLinearity: 0.25,
    });
  }
}

async function loadCityDetail(cityName, force = false) {
  selectedCity = cityName;
  selectedForecastDate = null;
  setActiveCityItem(cityName);
  setSelectedMarker(cityName);

  if (!force && cityDataCache[cityName]) {
    const cachedData = cityDataCache[cityName];
    renderPanel(cachedData);
    renderNearbyStations(cachedData);
    return;
  }

  showLoading(true);

  try {
    const data = await fetchCityDetail(cityName, force);
    cityDataCache[cityName] = data;
    saveCache();
    renderPanel(data);
    renderNearbyStations(data);

    if (data.current?.temp != null) {
      updateMarkerTemp(cityName, data.current.temp);
      updateCityListInfo(data);
    }
  } catch (e) {
    console.error(`Failed to load ${cityName}:`, e);
    alert(`\u52a0\u8f7d ${cityName} \u6570\u636e\u5931\u8d25\uff1a${e.message}`);
  } finally {
    showLoading(false);
  }
}

function showLoading(show) {
  const loading = document.getElementById("loading");
  if (loading) loading.classList.toggle("hidden", !show);
}

const METAR_WX_MAP = {
  RA: { label: "\u964d\u96e8", icon: "\ud83c\udf27\ufe0f" },
  "-RA": { label: "\u5c0f\u96e8", icon: "\ud83c\udf26\ufe0f" },
  "+RA": { label: "\u5f3a\u964d\u96e8", icon: "\u26c8\ufe0f" },
  SN: { label: "\u964d\u96ea", icon: "\u2744\ufe0f" },
  "-SN": { label: "\u5c0f\u96ea", icon: "\ud83c\udf28\ufe0f" },
  "+SN": { label: "\u5927\u96ea", icon: "\ud83c\udf28\ufe0f" },
  DZ: { label: "\u6bdb\u6bdb\u96e8", icon: "\ud83c\udf26\ufe0f" },
  FG: { label: "\u96fe", icon: "\ud83c\udf2b\ufe0f" },
  BR: { label: "\u8584\u96fe", icon: "\ud83c\udf2b\ufe0f" },
  HZ: { label: "\u973e", icon: "\ud83c\udf2b\ufe0f" },
  TS: { label: "\u96f7\u66b4", icon: "\u26c8\ufe0f" },
  VCTS: { label: "\u9644\u8fd1\u96f7\u66b4", icon: "\u26c8\ufe0f" },
  SQ: { label: "\u98d1", icon: "\ud83d\udca8" },
  GS: { label: "\u51b0\u96f9", icon: "\ud83c\udf28\ufe0f" },
};

function translateMETAR(code) {
  if (!code) return null;
  for (const [key, val] of Object.entries(METAR_WX_MAP)) {
    if (String(code).includes(key)) return val;
  }
  return { label: code, icon: "\ud83c\udf24\ufe0f" };
}

function renderPanel(data) {
  const panel = document.getElementById("panel");
  if (!panel) return;

  panel.classList.remove("hidden");
  requestAnimationFrame(() => panel.classList.add("visible"));

  const panelCityName = document.getElementById("panelCityName");
  const panelLocalTime = document.getElementById("panelLocalTime");
  const badge = document.getElementById("panelRiskBadge");

  if (panelCityName) {
    panelCityName.textContent = `${data.risk?.emoji || "\ud83c\udfd9\ufe0f"} ${data.display_name}`;
  }
  if (panelLocalTime) {
    panelLocalTime.textContent = `\u23f0 ${data.local_time || "--:--"} \u5f53\u5730\u65f6\u95f4`;
  }
  if (badge) {
    badge.textContent =
      {
        high: "\ud83d\udd34 \u9ad8\u5371",
        medium: "\ud83d\udfe1 \u4e2d\u5371",
        low: "\ud83d\udfe2 \u4f4e\u5371",
      }[data.risk?.level] || "\u672a\u77e5";
    badge.className = `risk-badge ${data.risk?.level || "low"}`;
  }

  renderHero(data);
  renderChart(data);
  if (!selectedForecastDate) selectedForecastDate = data.local_date;
  renderProbabilities(data);
  renderModels(data);
  renderForecast(data);
  renderAI(data);
  renderRisk(data);
}

function renderHero(data) {
  const cur = data.current || {};
  const sym = data.temp_symbol || "\u00b0C";
  const displayTemp = cur.temp;

  let weatherText = cur.cloud_desc || "\u672a\u77e5";
  let weatherIcon =
    {
      "\u591a\u4e91": "\u2601\ufe0f",
      "\u9634\u5929": "\u2601\ufe0f",
      "\u5c11\u4e91": "\ud83c\udf24\ufe0f",
      "\u6563\u4e91": "\u2601\ufe0f",
      "\u6674": "\u2600\ufe0f",
      "\u6674\u6717": "\u2600\ufe0f",
    }[cur.cloud_desc] || "\ud83c\udf24\ufe0f";

  if (cur.wx_desc) {
    const translated = translateMETAR(cur.wx_desc);
    if (translated) {
      weatherText = translated.label;
      weatherIcon = translated.icon;
    }
  }

  const heroWeather = document.getElementById("heroWeather");
  const heroTemp = document.getElementById("heroTemp");
  const heroUnit = document.getElementById("heroUnit");
  const maxTimeEl = document.getElementById("heroMaxTime");
  const heroCurrent = document.getElementById("heroCurrent");
  const heroWU = document.getElementById("heroWU");
  const heroDEB = document.getElementById("heroDEB");
  const heroSub = document.getElementById("heroSub");

  if (heroWeather) heroWeather.innerHTML = `<span>${weatherIcon} ${weatherText}</span>`;
  if (heroTemp) heroTemp.textContent = displayTemp != null ? displayTemp.toFixed(1) : "--";
  if (heroUnit) heroUnit.textContent = sym;

  const isMax = cur.max_so_far != null && cur.temp != null && cur.max_so_far <= cur.temp;
  if (maxTimeEl) {
    maxTimeEl.textContent =
      isMax && cur.max_temp_time
        ? `\u8be5\u57ce\u5e02\u4eca\u65e5\u6700\u9ad8\u6e29\u51fa\u73b0\u4e8e\u5f53\u5730\u65f6\u95f4 ${cur.max_temp_time}`
        : "";
  }

  if (heroCurrent) {
    heroCurrent.textContent =
      cur.temp != null ? `${cur.temp}${sym} @${cur.obs_time || "--:--"}` : "--";
  }
  if (heroWU) {
    heroWU.textContent = cur.wu_settlement != null ? `${cur.wu_settlement}${sym}` : "--";
  }
  if (heroDEB) {
    heroDEB.textContent =
      data.deb?.prediction != null ? `${data.deb.prediction}${sym}` : "--";
  }

  const parts = [];
  if (cur.obs_time) {
    const ageStr =
      cur.obs_age_min != null && cur.obs_age_min >= 30
        ? ` (${cur.obs_age_min}\u5206\u949f\u524d)`
        : "";
    parts.push(`<span>\u2708\ufe0f METAR ${cur.obs_time}${ageStr}</span>`);
  }
  if (cur.wx_desc) {
    const trans = translateMETAR(cur.wx_desc);
    parts.push(`<span>${trans.icon} ${trans.label}</span>`);
  } else if (cur.cloud_desc) {
    parts.push(`<span>\u2601\ufe0f ${cur.cloud_desc}</span>`);
  }
  if (cur.wind_speed_kt != null) {
    parts.push(`<span>\ud83d\udca8 ${cur.wind_speed_kt}kt</span>`);
  }
  if (cur.visibility_mi != null) {
    parts.push(`<span>\ud83d\udc41\ufe0f ${cur.visibility_mi}mi</span>`);
  }
  if (data.mgm?.temp != null) {
    let mgmTimeStr = "";
    if (data.mgm.time && data.mgm.time.includes(":")) {
      const match = data.mgm.time.match(/T?(\d{2}:\d{2})/);
      if (match) mgmTimeStr = ` @${match[1]}`;
    }
    parts.push(
      `<span style="color:#eab308;font-weight:600;background:rgba(234, 179, 8, 0.1);padding:2px 8px;border-radius:12px;border:1px solid rgba(234, 179, 8, 0.3);">\u2b50 MGM \u5b9e\u6d4b: ${data.mgm.temp}${sym}${mgmTimeStr}</span>`,
    );
  }

  const trend = data.trend || {};
  if (trend.is_dead_market) {
    parts.push('<span class="dead-market">\u2620\ufe0f \u6b7b\u76d8</span>');
  } else if (trend.direction && trend.direction !== "unknown") {
    const labels = {
      rising: "\ud83d\udcc8 \u5347\u6e29\u4e2d",
      falling: "\ud83d\udcc9 \u964d\u6e29\u4e2d",
      stagnant: "\u23f8 \u5df2\u505c\u6ede",
      mixed: "\ud83d\udcca \u6ce2\u52a8\u4e2d",
    };
    parts.push(
      `<span class="trend-badge ${trend.direction}">${labels[trend.direction] || trend.direction}</span>`,
    );
  }

  if (heroSub) heroSub.innerHTML = parts.join("");
}

function renderChart(data) {
  const hourly = data.hourly || {};
  const times = hourly.times || [];
  const temps = hourly.temps || [];
  const chartLegend = document.getElementById("chartLegend");

  if (!times.length) {
    if (chartLegend) chartLegend.textContent = "\u6682\u65e0\u5c0f\u65f6\u6570\u636e";
    return;
  }

  const curHour = data.local_time ? `${data.local_time.split(":")[0]}:00` : null;
  const curIdx = curHour ? times.indexOf(curHour) : -1;
  const omMax = data.forecast?.today_high;
  const debMax = data.deb?.prediction;
  const offset = debMax != null && omMax != null ? debMax - omMax : 0;
  const debTemps = temps.map((t) => (t != null ? +(t + offset).toFixed(1) : null));
  const debPast = debTemps.map((t, i) => (curIdx >= 0 && i <= curIdx ? t : null));
  const debFuture = debTemps.map((t, i) => (curIdx < 0 || i >= curIdx ? t : null));

  const metarPoints = new Array(times.length).fill(null);
  const metarSrc = data.metar_today_obs?.length
    ? data.metar_today_obs
    : data.trend?.recent || [];
  metarSrc.forEach((r) => {
    const parts = String(r.time || "").split(":");
    let h = parseInt(parts[0], 10);
    const m = parseInt(parts[1] || "0", 10);
    if (Number.isNaN(h)) return;
    if (m >= 30) h = (h + 1) % 24;
    const hourKey = `${String(h).padStart(2, "0")}:00`;
    const idx = times.indexOf(hourKey);
    if (idx >= 0 && metarPoints[idx] === null) metarPoints[idx] = r.temp;
  });

  const mgmPoints = new Array(times.length).fill(null);
  if (data.mgm?.temp != null && data.mgm?.time) {
    const timeMatch = data.mgm.time.match(/T?(\d{2}):(\d{2})/);
    if (timeMatch) {
      let h = parseInt(timeMatch[1], 10);
      const m = parseInt(timeMatch[2], 10);
      if (m >= 30) h = (h + 1) % 24;
      const hourKey = `${String(h).padStart(2, "0")}:00`;
      const idx = times.indexOf(hourKey);
      if (idx >= 0) mgmPoints[idx] = data.mgm.temp;
    }
  }

  const ctxEl = document.getElementById("tempChart");
  if (!ctxEl) return;
  const ctx = ctxEl.getContext("2d");
  if (tempChart) tempChart.destroy();

  const mgmHourlyPoints = new Array(times.length).fill(null);
  let hasMgmHourly = false;
  if (Array.isArray(data.mgm?.hourly)) {
    data.mgm.hourly.forEach((hData) => {
      const match = String(hData.time || "").match(/T?(\d{2}):(\d{2})/);
      if (!match) return;
      const hourKey = `${match[1]}:00`;
      const idx = times.indexOf(hourKey);
      if (idx >= 0) {
        mgmHourlyPoints[idx] = hData.temp;
        hasMgmHourly = true;
      }
    });
  }

  const allVals = [
    ...debTemps.filter((t) => t != null),
    ...metarPoints.filter((t) => t != null),
    ...mgmPoints.filter((t) => t != null),
    ...mgmHourlyPoints.filter((t) => t != null),
  ];

  if (!allVals.length) {
    if (chartLegend) chartLegend.textContent = "\u6682\u65e0\u56fe\u8868\u6570\u636e";
    return;
  }

  const minTemp = Math.floor(Math.min(...allVals)) - 1;
  const maxTemp = Math.ceil(Math.max(...allVals)) + 1;
  const datasets = [];

  if (hasMgmHourly) {
    datasets.push({
      label: "MGM\u9884\u62a5",
      data: mgmHourlyPoints,
      borderColor: "rgba(234, 179, 8, 0.8)",
      backgroundColor: "rgba(234, 179, 8, 0.05)",
      borderWidth: 2,
      pointRadius: 3,
      pointHoverRadius: 6,
      fill: false,
      tension: 0.3,
      spanGaps: true,
    });
  } else {
    datasets.push({
      label: "DEB\u9884\u671f",
      data: debPast,
      borderColor: "rgba(52, 211, 153, 0.6)",
      backgroundColor: "rgba(52, 211, 153, 0.05)",
      borderWidth: 1.5,
      pointRadius: 0,
      pointHoverRadius: 3,
      fill: true,
      tension: 0.3,
      spanGaps: false,
      skipTooltip: true,
    });
    datasets.push({
      label: "DEB\u9884\u62a5",
      data: debFuture,
      borderColor: "rgba(52, 211, 153, 0.35)",
      borderWidth: 1.5,
      borderDash: [5, 3],
      pointRadius: 0,
      fill: false,
      tension: 0.3,
      spanGaps: false,
    });
  }

  datasets.push({
    label: "METAR\u5b9e\u6d4b",
    data: metarPoints,
    borderColor: "#22d3ee",
    backgroundColor: "#22d3ee",
    borderWidth: 0,
    pointRadius: 5,
    pointHoverRadius: 7,
    pointStyle: "circle",
    fill: false,
    order: 0,
  });

  if (mgmPoints.some((t) => t != null)) {
    datasets.push({
      label: "MGM\u5b9e\u6d4b",
      data: mgmPoints,
      borderColor: "#facc15",
      backgroundColor: "#facc15",
      borderWidth: 0,
      pointRadius: 7,
      pointHoverRadius: 9,
      pointStyle: "star",
      fill: false,
      showLine: false,
      order: -1,
    });
  }

  if (!hasMgmHourly && Math.abs(offset) > 0.3) {
    datasets.push({
      label: "OM\u539f\u59cb",
      data: temps,
      borderColor: "rgba(99, 102, 241, 0.2)",
      borderWidth: 1,
      borderDash: [2, 4],
      pointRadius: 0,
      fill: false,
      tension: 0.3,
    });
  }

  tempChart = new Chart(ctx, {
    type: "line",
    data: { labels: times, datasets },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      interaction: { intersect: false, mode: "index" },
      plugins: {
        legend: { display: false },
        tooltip: {
          backgroundColor: "rgba(15, 23, 42, 0.9)",
          borderColor: "rgba(52, 211, 153, 0.3)",
          borderWidth: 1,
          titleFont: { family: "Inter", size: 12 },
          bodyFont: { family: "Inter", size: 12 },
          filter: (item) => item.parsed.y != null && !item.dataset.skipTooltip,
          callbacks: {
            label: (ctx) =>
              `${ctx.dataset.label}: ${ctx.parsed.y?.toFixed(1)}${data.temp_symbol || "\u00B0C"}`,
          },
        },
      },
      scales: {
        x: {
          grid: { color: "rgba(255,255,255,0.04)" },
          ticks: {
            color: "#64748b",
            font: { size: 10, family: "Inter" },
            maxRotation: 0,
            callback: (val, idx) => (idx % 3 === 0 ? times[idx] : ""),
          },
        },
        y: {
          min: minTemp,
          max: maxTemp,
          grid: { color: "rgba(255,255,255,0.04)" },
          ticks: {
            color: "#64748b",
            font: { size: 10, family: "Inter" },
            callback: (v) => `${v}${data.temp_symbol || "\u00B0C"}`,
          },
        },
      },
    },
  });

  const legendParts = [];
  if (data.mgm?.temp != null)
    legendParts.push(`MGM: ${data.mgm.temp}${data.temp_symbol || "\u00B0C"}`);
  if (!hasMgmHourly && debMax != null && omMax != null && Math.abs(offset) > 0.3) {
    const sign = offset > 0 ? "+" : "";
    legendParts.push(`DEB\u504f\u79fb ${sign}${offset.toFixed(1)}\u00b0 vs OM`);
  }
  if (hasMgmHourly) legendParts.push("\u5df2\u4f7f\u7528 MGM \u5c0f\u65f6\u9884\u62a5\u66ff\u4ee3 DEB \u66f2\u7ebf");
  if (data.trend?.recent?.length) {
    const recentStr = [...data.trend.recent]
      .slice(0, 4)
      .reverse()
      .map((r) => `${r.temp}${data.temp_symbol || "\u00B0C"}@${r.time}`)
      .join(" \u2192 ");
    legendParts.push(`METAR: ${recentStr}`);
  }
  if (chartLegend) chartLegend.textContent = legendParts.join(" | ") || "";
}

function renderProbabilities(data) {
  const container = document.getElementById("probBars");
  if (!container) return;

  const targetDate = selectedForecastDate || data.local_date;
  let probs = [];
  let mu = null;

  if (targetDate === data.local_date) {
    probs = data.probabilities?.distribution || [];
    mu = data.probabilities?.mu;
  } else if (data.multi_model_daily && data.multi_model_daily[targetDate]) {
    probs = data.multi_model_daily[targetDate].probabilities || [];
    mu = data.multi_model_daily[targetDate].deb?.prediction;
  }

  if (!probs.length) {
    container.innerHTML = '<div style="color:var(--text-muted);font-size:13px;">\u6682\u65e0\u6982\u7387\u6570\u636e</div>';
    return;
  }

  let html = "";
  if (mu != null) {
    html += `<div style="font-size:11px;color:var(--text-muted);margin-bottom:6px;">\u52a8\u6001\u5206\u5e03\u4e2d\u5fc3 \u03bc = ${mu}${data.temp_symbol || "\u00b0C"}</div>`;
  }

  probs.forEach((p, i) => {
    const pct = Math.round(Number(p.probability || 0) * 100);
    html += `
        <div class="prob-row">
        <div class="prob-label">${p.value}${data.temp_symbol || "\u00B0C"}</div>
        <div class="prob-bar-track">
          <div class="prob-bar-fill rank-${i}" style="width:0%">${pct}%</div>
        </div>
      </div>
    `;
  });

  container.innerHTML = html;
  requestAnimationFrame(() => {
    container.querySelectorAll(".prob-bar-fill").forEach((bar, i) => {
      const pct = Math.round(Number(probs[i].probability || 0) * 100);
      bar.style.width = `${Math.max(pct, 8)}%`;
    });
  });
}

function escapeHtml(value) {
  return String(value ?? "").replace(/[&<>"']/g, (ch) => {
    return (
      {
        "&": "&amp;",
        "<": "&lt;",
        ">": "&gt;",
        '"': "&quot;",
        "'": "&#39;",
      }[ch] || ch
    );
  });
}

function formatCents(price) {
  const n = Number(price);
  if (!Number.isFinite(n)) return "--";
  const cents = Math.round(n * 1000) / 10;
  return Number.isInteger(cents) ? `${cents.toFixed(0)}c` : `${cents.toFixed(1)}c`;
}

function renderModels(data) {
  const container = document.getElementById("modelBars");
  if (!container) return;

  const targetDate = selectedForecastDate || data.local_date;
  let models = {};
  let deb = null;

  if (data.multi_model_daily && data.multi_model_daily[targetDate]) {
    models = data.multi_model_daily[targetDate].models || {};
    deb = data.multi_model_daily[targetDate].deb?.prediction;
  } else {
    models = data.multi_model || {};
    deb = data.deb?.prediction;
  }

  if (!Object.keys(models).length) {
    container.innerHTML = '<div style="color:var(--text-muted);font-size:13px;">\u6682\u65e0\u591a\u6a21\u578b\u6570\u636e</div>';
    return;
  }

  const values = Object.values(models).filter((v) => v != null).map(Number);
  const minVal = Math.min(...values) - 1;
  const maxVal = Math.max(...values) + 1;
  const range = Math.max(maxVal - minVal, 1);

  let html = "";
  Object.entries(models)
    .sort((a, b) => Number(b[1] || 0) - Number(a[1] || 0))
    .forEach(([name, val]) => {
      if (val == null) return;
      const pct = ((Number(val) - minVal) / range) * 100;
      html += `
        <div class="model-row">
          <div class="model-name" title="${escapeHtml(name)}">${escapeHtml(name)}</div>
          <div class="model-bar-track">
            <div class="model-bar-fill" style="width:${pct}%">${val}${data.temp_symbol || "?C"}</div>
            <div class="model-bar-fill" style="width:${pct}%">${val}${data.temp_symbol || "\u00B0C"}</div>
            ${deb != null ? `<div class="model-deb-line" style="left:${((Number(deb) - minVal) / range) * 100}%"></div>` : ""}
          </div>
        </div>
      `;
    });

  if (deb != null) {
    const pct = ((Number(deb) - minVal) / range) * 100;
    html += `
      <div class="model-row" style="margin-top:6px;border-top:1px solid rgba(255,255,255,0.06);padding-top:6px;">
        <div class="model-name" style="color:var(--accent-cyan);font-weight:700;">DEB</div>
        <div class="model-bar-track">
          <div class="model-bar-fill deb" style="width:${pct}%">${deb}${data.temp_symbol || "\u00B0C"}</div>
        </div>
      </div>
    `;
  }

  container.innerHTML = html;
}

function renderForecast(data) {
  const container = document.getElementById("forecastTable");
  const daily = data.forecast?.daily || [];
  const sym = data.temp_symbol || "\u00B0C";
  const todayDate = data.local_date;

  if (daily.length === 0) {
    container.innerHTML =
      '<div style="color:var(--text-muted);font-size:13px;">\u6682\u65e0\u591a\u65e5\u9884\u62a5</div>';
    return;
  }

  let html = "";
  daily.forEach((d, i) => {
    const isToday = d.date === todayDate || i === 0;
    const isSelected = isToday;
    const dateLabel = isToday
      ? "\u4eca\u5929"
      : d.date.substring(5).replace("-", "/");

    html += `
            <div class="forecast-day ${isToday ? "today" : ""} ${isSelected ? "selected" : ""}"
                 onclick="switchForecastDate('${data.name}', '${d.date}')"
                 style="cursor:pointer;">
                <div class="f-date">${dateLabel}</div>
                <div class="f-temp">${d.max_temp}${sym}</div>
            </div>
        `;
  });
  container.innerHTML = html;

  const sunEl = document.getElementById("sunInfo");
  const parts = [];
  if (data.forecast?.sunrise) parts.push(`\u{1F305} ${data.forecast.sunrise}`);
  if (data.forecast?.sunset) parts.push(`\u{1F307} ${data.forecast.sunset}`);
  if (data.forecast?.sunshine_hours) parts.push(`\u2600\uFE0F ${data.forecast.sunshine_hours}h`);
  sunEl.innerHTML = parts.map((p) => `<span>${p}</span>`).join("");
}

function switchForecastDate(cityName, dateStr) {
  if (selectedCity !== cityName) return;

  const data = cityDataCache[cityName];
  if (!data) return;

  if (dateStr === data.local_date) {
    selectedForecastDate = dateStr;
    renderModels(data);
    renderProbabilities(data);
    renderForecast(data);
    return;
  }

  openFutureForecastModal(data, dateStr);
}

function buildProbabilityBarsHtml(probabilities) {
  if (!probabilities || probabilities.length === 0) {
    return '<div style="color:var(--text-muted);font-size:13px;">\u6682\u65e0\u8be5\u65e5\u671f\u7ed3\u7b97\u6982\u7387\u5206\u5e03</div>';
  }

  return probabilities
    .slice(0, 6)
    .map((p, i) => {
      const label = p.label ?? p.bucket ?? (p.range ? `${p.value}${p.unit || ""} ${p.range}` : `${p.value}`);
      const pct = Math.round(Number(p.probability || 0) * 100);
      return `
        <div class="prob-row">
          <div class="prob-label">${escapeHtml(String(label))}</div>
          <div class="prob-bar-track">
            <div class="prob-bar-fill rank-${i}" style="width:${Math.max(pct, 8)}%">${pct}%</div>
          </div>
        </div>
      `;
    })
    .join("");
}

function buildModelBarsHtml(models, deb, sym) {
  if (!models || Object.keys(models).length === 0) {
    return '<div style="color:var(--text-muted);font-size:13px;">\u6682\u65e0\u591a\u6a21\u578b\u9884\u62a5</div>';
  }

  const numericValues = Object.values(models)
    .filter((v) => Number.isFinite(Number(v)))
    .map(Number);
  if (!numericValues.length) {
    return '<div style="color:var(--text-muted);font-size:13px;">\u6682\u65e0\u591a\u6a21\u578b\u9884\u62a5</div>';
  }

  const comparisonValues = deb != null ? [...numericValues, Number(deb)] : numericValues;
  const minVal = Math.min(...comparisonValues) - 1;
  const maxVal = Math.max(...comparisonValues) + 1;
  const range = Math.max(maxVal - minVal, 1);

  let html = "";
  Object.entries(models)
    .sort((a, b) => Number(b[1] || 0) - Number(a[1] || 0))
    .forEach(([name, val]) => {
      if (!Number.isFinite(Number(val))) return;
      const numVal = Number(val);
      const pct = ((numVal - minVal) / range) * 100;
      html += `
        <div class="model-row">
          <div class="model-name" title="${escapeHtml(name)}">${escapeHtml(name)}</div>
          <div class="model-bar-track">
            <div class="model-bar-fill" style="width:${pct}%">${numVal}${sym}</div>
            ${deb != null ? `<div class="model-deb-line" style="left:${((Number(deb) - minVal) / range) * 100}%"></div>` : ""}
          </div>
        </div>
      `;
    });

  if (deb != null && Number.isFinite(Number(deb))) {
    const pct = ((Number(deb) - minVal) / range) * 100;
    html += `
      <div class="model-row" style="margin-top:6px;border-top:1px solid rgba(255,255,255,0.06);padding-top:6px;">
        <div class="model-name" style="color:var(--accent-cyan);font-weight:700;">DEB</div>
        <div class="model-bar-track">
          <div class="model-bar-fill deb" style="width:${pct}%">${Number(deb)}${sym}</div>
        </div>
      </div>
    `;
  }

  return html;
}

function getFutureSlice(data, dateStr) {
  const hourly = data.hourly_next_48h || {};
  const times = hourly.times || [];
  const out = [];

  for (let i = 0; i < times.length; i += 1) {
    const ts = times[i];
    if (!ts || !String(ts).startsWith(dateStr)) continue;
    out.push({
      time: ts,
      label: String(ts).split("T")[1]?.slice(0, 5) || ts,
      temp: hourly.temps?.[i] ?? null,
      dewPoint: hourly.dew_point?.[i] ?? null,
      pressure: hourly.pressure_msl?.[i] ?? null,
      windSpeed: hourly.wind_speed_10m?.[i] ?? null,
      windDir: hourly.wind_direction_10m?.[i] ?? null,
      precipProb: hourly.precipitation_probability?.[i] ?? null,
      cloudCover: hourly.cloud_cover?.[i] ?? null,
      radiation: hourly.radiation?.[i] ?? null,
    });
  }

  return out;
}

function trendBucketFromDir(dir) {
  const n = Number(dir);
  if (!Number.isFinite(n)) return null;
  if (n >= 135 && n <= 240) return "southerly";
  if (n >= 290 || n <= 45) return "northerly";
  if (n > 45 && n < 135) return "easterly";
  return "westerly";
}

function bucketLabel(bucket) {
  return {
    southerly: "\u5357 / \u897f\u5357\u98ce",
    northerly: "\u5317 / \u897f\u5317\u98ce",
    easterly: "\u4e1c\u98ce",
    westerly: "\u897f\u98ce",
  }[bucket] || "\u98ce\u5411\u4e0d\u660e";
}

function formatDelta(value, suffix = "") {
  const n = Number(value);
  if (!Number.isFinite(n)) return "--";
  const sign = n > 0 ? "+" : "";
  return `${sign}${n.toFixed(1)}${suffix}`;
}

function buildTrendCards(metrics) {
  return metrics
    .map((metric) => {
      const toneClass = metric.tone ? ` ${metric.tone}` : "";
      return `
        <div class="future-trend-card">
          <div class="future-trend-label">${escapeHtml(metric.label)}</div>
          <div class="future-trend-value${toneClass}">${escapeHtml(metric.value)}</div>
          <div class="future-trend-note">${escapeHtml(metric.note)}</div>
        </div>
      `;
    })
    .join("");
}

function computeProbabilityMu(probabilities) {
  if (!Array.isArray(probabilities) || !probabilities.length) return null;
  let weighted = 0;
  let total = 0;
  probabilities.forEach((item) => {
    const value = Number(item.value);
    const prob = Number(item.probability);
    if (!Number.isFinite(value) || !Number.isFinite(prob)) return;
    weighted += value * prob;
    total += prob;
  });
  if (!total) return null;
  return weighted / total;
}

function getForecastTextForDate(data, dateStr) {
  const weatherGov = data.source_forecasts?.weather_gov || {};
  const periods = Array.isArray(weatherGov.forecast_periods)
    ? weatherGov.forecast_periods
    : [];

  return periods.filter((period) =>
    String(period.start_time || "").startsWith(dateStr),
  );
}

function computeFrontTrendSignal(data, dateStr) {
  const slice = getFutureSlice(data, dateStr);
  const currentTemp = Number(data.current?.temp);
  const currentDew = Number(data.current?.dewpoint);

  if (!slice.length) {
    return {
      score: 0,
      label: "\u76d1\u63a7\u4e2d",
      confidence: "low",
      summary:
        "\u672a\u6765 48 \u5c0f\u65f6\u7ed3\u6784\u5316\u6570\u636e\u4e0d\u8db3\uff0c\u6682\u65f6\u53ea\u4fdd\u7559\u57fa\u7840\u76d1\u63a7\u3002",
      metrics: [],
      directionLabel: "\u98ce\u5411\u4e0d\u660e",
      precipMax: 0,
      weatherGovPeriods: [],
    };
  }

  const first = slice[0];
  const last = slice[slice.length - 1];
  const firstTemp = Number.isFinite(first.temp) ? Number(first.temp) : currentTemp;
  const lastTemp = Number.isFinite(last.temp) ? Number(last.temp) : firstTemp;
  const tempDelta =
    Number.isFinite(firstTemp) && Number.isFinite(lastTemp)
      ? lastTemp - firstTemp
      : 0;

  const firstDew = Number.isFinite(first.dewPoint)
    ? Number(first.dewPoint)
    : currentDew;
  const lastDew = Number.isFinite(last.dewPoint)
    ? Number(last.dewPoint)
    : firstDew;
  const dewDelta =
    Number.isFinite(firstDew) && Number.isFinite(lastDew)
      ? lastDew - firstDew
      : 0;

  const firstPressure = Number.isFinite(first.pressure)
    ? Number(first.pressure)
    : null;
  const lastPressure = Number.isFinite(last.pressure)
    ? Number(last.pressure)
    : firstPressure;
  const pressureDelta =
    Number.isFinite(firstPressure) && Number.isFinite(lastPressure)
      ? lastPressure - firstPressure
      : 0;

  const firstCloud = Number.isFinite(first.cloudCover)
    ? Number(first.cloudCover)
    : null;
  const lastCloud = Number.isFinite(last.cloudCover)
    ? Number(last.cloudCover)
    : firstCloud;
  const cloudDelta =
    Number.isFinite(firstCloud) && Number.isFinite(lastCloud)
      ? lastCloud - firstCloud
      : 0;

  const precipMax = slice.reduce(
    (max, point) => Math.max(max, Number(point.precipProb) || 0),
    0,
  );
  const firstBucket = trendBucketFromDir(first.windDir);
  const lastBucket = trendBucketFromDir(last.windDir);
  const weatherGovPeriods = getForecastTextForDate(data, dateStr);
  const weatherGovText = weatherGovPeriods
    .map(
      (period) =>
        `${period.short_forecast || ""} ${period.detailed_forecast || ""}`.toLowerCase(),
    )
    .join(" ");

  let warmScore = 0;
  let coldScore = 0;

  if (tempDelta >= 2) warmScore += 24;
  else if (tempDelta >= 0.8) warmScore += 12;
  if (tempDelta <= -2) coldScore += 24;
  else if (tempDelta <= -0.8) coldScore += 12;

  if (dewDelta >= 1.2) warmScore += 14;
  if (dewDelta <= -1.2) coldScore += 10;

  if (Number.isFinite(pressureDelta) && pressureDelta >= 1.2) coldScore += 16;
  if (Number.isFinite(pressureDelta) && pressureDelta <= -1.0) warmScore += 8;

  if (lastBucket === "southerly") warmScore += 14;
  if (firstBucket !== lastBucket && lastBucket === "southerly") warmScore += 10;
  if (lastBucket === "northerly") coldScore += 14;
  if (firstBucket !== lastBucket && lastBucket === "northerly") coldScore += 10;

  if (cloudDelta >= 15 && tempDelta >= 0) warmScore += 6;
  if (cloudDelta >= 15 && tempDelta < 0) coldScore += 8;
  if (precipMax >= 40) coldScore += 8;

  if (
    weatherGovText.includes("cold front") ||
    weatherGovText.includes("temperatures falling")
  ) {
    coldScore += 18;
  }
  if (weatherGovText.includes("warm front") || weatherGovText.includes("warmer")) {
    warmScore += 18;
  }
  if (weatherGovText.includes("thunder") || weatherGovText.includes("snow")) {
    coldScore += 8;
  }

  const score = Math.max(-100, Math.min(100, warmScore - coldScore));
  let label = "\u76d1\u63a7\u4e2d";
  if (score >= 18) label = "\u6696\u950b / \u6696\u5e73\u6d41\u503e\u5411";
  else if (score <= -18) label = "\u51b7\u950b / \u51b7\u5e73\u6d41\u503e\u5411";

  const absScore = Math.abs(score);
  const confidence = absScore >= 45 ? "high" : absScore >= 22 ? "medium" : "low";

  const metrics = [
    {
      label: "\u6e29\u5ea6\u53d8\u5316",
      value: formatDelta(tempDelta, data.temp_symbol || "\u00B0C"),
      note: "Open-Meteo \u672a\u6765\u5c0f\u65f6\u6e29\u5ea6\u53d8\u5316",
      tone: tempDelta >= 0.8 ? "warm" : tempDelta <= -0.8 ? "cold" : "",
    },
    {
      label: "\u9732\u70b9\u53d8\u5316",
      value: formatDelta(dewDelta, data.temp_symbol || "\u00B0C"),
      note: "\u9732\u70b9\u4e0a\u5347\u66f4\u504f\u5411\u6696\u6e7f\u5e73\u6d41",
      tone: dewDelta >= 0.8 ? "warm" : dewDelta <= -0.8 ? "cold" : "",
    },
    {
      label: "\u6c14\u538b\u53d8\u5316",
      value: formatDelta(pressureDelta, " hPa"),
      note: "\u6c14\u538b\u56de\u5347\u66f4\u504f\u5411\u51b7\u7a7a\u6c14\u5165\u4fb5",
      tone: pressureDelta >= 1 ? "cold" : pressureDelta <= -1 ? "warm" : "",
    },
    {
      label: "\u98ce\u5411\u6f14\u53d8",
      value: `${bucketLabel(firstBucket)} \u2192 ${bucketLabel(lastBucket)}`,
      note: "\u5173\u6ce8\u662f\u5426\u8f6c\u5357\u98ce\u6216\u8f6c\u5317\u98ce",
    },
    {
      label: "\u964d\u6c34\u6982\u7387",
      value: `${Math.round(precipMax)}%`,
      note: "weather.gov / Open-Meteo \u964d\u6c34\u63d0\u793a",
      tone: precipMax >= 50 ? "cold" : "",
    },
    {
      label: "\u4e91\u91cf\u53d8\u5316",
      value: formatDelta(cloudDelta, "%"),
      note: "\u4e91\u91cf\u62ac\u5347\u4f46\u672a\u964d\u6e29\uff0c\u5e38\u89c1\u4e8e\u6696\u5e73\u6d41\u524d\u6bb5",
      tone:
        cloudDelta >= 15 && tempDelta >= 0
          ? "warm"
          : cloudDelta >= 15 && tempDelta < 0
            ? "cold"
            : "",
    },
  ];

    const usesMeteoblue = data.name !== "ankara" && Boolean(data.source_forecasts?.meteoblue);
    let summary = usesMeteoblue
      ? "\u7ed3\u6784\u5316\u6765\u6e90\u4ee5 weather.gov\u3001Open-Meteo\u3001Meteoblue \u4e3a\u4e3b\uff0c\u7528\u4e8e\u5224\u65ad\u672a\u6765 6-48 \u5c0f\u65f6\u51b7\u6696\u5e73\u6d41\u8d8b\u52bf\u3002"
      : "\u7ed3\u6784\u5316\u6765\u6e90\u4ee5 weather.gov \u4e0e Open-Meteo \u4e3a\u4e3b\uff0c\u7528\u4e8e\u5224\u65ad\u672a\u6765 6-48 \u5c0f\u65f6\u51b7\u6696\u5e73\u6d41\u8d8b\u52bf\u3002";
  if (label === "\u6696\u950b / \u6696\u5e73\u6d41\u503e\u5411") {
    summary =
      "\u98ce\u5411\u66f4\u504f\u5357 / \u897f\u5357\uff0c\u9732\u70b9\u4e0e\u6e29\u5ea6\u6574\u4f53\u62ac\u5347\uff0c\u672a\u6765 6-48 \u5c0f\u65f6\u504f\u5411\u6696\u5e73\u6d41\u3002";
  } else if (label === "\u51b7\u950b / \u51b7\u5e73\u6d41\u503e\u5411") {
    summary =
      "\u6e29\u5ea6\u4e0b\u6ed1\u3001\u6c14\u538b\u56de\u5347\u6216\u98ce\u5411\u8f6c\u5317\uff0c\u672a\u6765 6-48 \u5c0f\u65f6\u66f4\u50cf\u51b7\u950b\u6216\u51b7\u5e73\u6d41\u538b\u5236\u3002";
  }

  return {
    score,
    label,
    confidence,
    summary,
    metrics,
    directionLabel: bucketLabel(lastBucket),
    precipMax,
    weatherGovPeriods,
  };
}

function buildShortTermNowcast(data, dateStr) {
  if (dateStr && dateStr !== data.local_date) {
    return `
      <div><strong>适用范围：</strong>近 0-2 小时临近判断只适用于当前日期，不适用于未来日期。</div>
      <div><strong>目标日期：</strong>${escapeHtml(dateStr)}</div>
      <div><strong>当前主站：</strong>${data.current?.temp ?? "--"}${data.temp_symbol || "\u00B0C"} @ ${data.current?.obs_time || "--"}</div>
      <div><strong>说明：</strong>未来日期请主要参考上方温度走势、结算概率分布、多模型预报，以及未来 6-48 小时趋势。</div>
    `;
  }

  const current = data.current || {};
  const recent = Array.isArray(data.metar_recent_obs)
    ? data.metar_recent_obs.slice(-4)
    : [];
  const nearby = Array.isArray(data.mgm_nearby) ? data.mgm_nearby : [];
  const sourceLabel =
    data.name === "ankara"
      ? "MGM \u5468\u8fb9\u7ad9"
      : "METAR \u5468\u8fb9\u7ad9";
  const nearbyCount = nearby.length;
  const currentTemp = Number(current.temp);
  const recentTemps = recent
    .map((point) => Number(point.temp))
    .filter((v) => Number.isFinite(v));
  const baseline = recentTemps.length ? recentTemps[0] : currentTemp;
  const shortDelta =
    Number.isFinite(currentTemp) && Number.isFinite(baseline)
      ? currentTemp - baseline
      : 0;

  let nearbyLead = null;
  nearby.forEach((station) => {
    const temp = Number(station.temp);
    if (!Number.isFinite(temp) || !Number.isFinite(currentTemp)) return;
    const diff = temp - currentTemp;
    if (!nearbyLead || Math.abs(diff) > Math.abs(nearbyLead.diff)) {
      nearbyLead = {
        name: station.name || station.icao || "\u5468\u8fb9\u7ad9",
        diff,
        temp,
      };
    }
  });

  const lines = [];
  lines.push(
    `<div><strong>\u5f53\u524d\u4e3b\u7ad9\uff1a</strong>${current.temp ?? "--"}${data.temp_symbol || "\u00B0C"} @ ${current.obs_time || "--"}</div>`,
  );
  lines.push(
    `<div><strong>\u539f\u59cb METAR\uff1a</strong>${escapeHtml(current.raw_metar || "\u6682\u65e0")}</div>`,
  );
  lines.push(
    `<div><strong>\u8fd1 0-2 \u5c0f\u65f6\uff1a</strong>${formatDelta(shortDelta, data.temp_symbol || "\u00B0C")}\uff0c\u4f9d\u636e\u6700\u8fd1 METAR \u5e8f\u5217\u5224\u65ad\u77ed\u65f6\u52a8\u91cf\u3002</div>`,
  );
  lines.push(
    `<div><strong>${sourceLabel}\uff1a</strong>${nearbyCount} \u4e2a\u7ad9\u70b9\u53c2\u4e0e\u90bb\u8fd1\u76d1\u63a7\u3002</div>`,
  );

  if (nearbyLead) {
    const tone =
      nearbyLead.diff > 0
        ? "\u504f\u6696"
        : nearbyLead.diff < 0
          ? "\u504f\u51b7"
          : "\u6301\u5e73";
    lines.push(
      `<div><strong>\u9886\u5148\u7ad9\uff1a</strong>${escapeHtml(nearbyLead.name)} ${nearbyLead.temp}${data.temp_symbol || "\u00B0C"}\uff0c\u76f8\u5bf9\u4e3b\u7ad9 ${formatDelta(nearbyLead.diff, data.temp_symbol || "\u00B0C")}\uff08${tone}\uff09\u3002</div>`,
    );
  }

  lines.push(
    "<div><strong>\u5de5\u7a0b\u53e3\u5f84\uff1a</strong>\u77ed\u65f6\u5224\u65ad\u4ee5 METAR \u4e3b\u7ad9\u4e3a\u51c6\uff1bAnkara \u53e0\u52a0 MGM \u5468\u8fb9\u7ad9\uff0c\u7f8e\u56fd\u57ce\u5e02\u540e\u7eed\u53ef\u53e0\u52a0 Mesonet \u4f5c\u4e3a\u589e\u5f3a\u5c42\u3002</div>",
  );
  return lines.join("");
}

function renderFutureForecastChart(data, dateStr, slice) {
  const canvas = document.getElementById("futureForecastChart");
  if (!canvas) return;

  if (futureForecastChart) {
    futureForecastChart.destroy();
    futureForecastChart = null;
  }

  const ctx = canvas.getContext("2d");
  const labels = slice.map((point) => point.label);
  const sym = data.temp_symbol || "\u00B0C";

  futureForecastChart = new Chart(ctx, {
    type: "line",
    data: {
      labels,
      datasets: [
        {
          label: "Open-Meteo \u6e29\u5ea6",
          data: slice.map((point) => point.temp),
          borderColor: "#22d3ee",
          backgroundColor: "rgba(34, 211, 238, 0.08)",
          tension: 0.28,
          pointRadius: 2,
          fill: false,
        },
        {
          label: "\u9732\u70b9",
          data: slice.map((point) => point.dewPoint),
          borderColor: "#a78bfa",
          backgroundColor: "transparent",
          borderDash: [5, 4],
          tension: 0.24,
          pointRadius: 0,
          fill: false,
        },
      ],
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      interaction: { intersect: false, mode: "index" },
      plugins: {
        legend: {
          labels: {
            color: "#94a3b8",
            font: { family: "Inter", size: 11 },
          },
        },
        tooltip: {
          backgroundColor: "rgba(15, 23, 42, 0.96)",
          borderColor: "rgba(34, 211, 238, 0.2)",
          borderWidth: 1,
          callbacks: {
            label: (ctx) =>
              `${ctx.dataset.label}: ${ctx.parsed.y?.toFixed(1)}${sym}`,
          },
        },
      },
      scales: {
        x: {
          grid: { color: "rgba(255,255,255,0.04)" },
          ticks: {
            color: "#64748b",
            font: { family: "Inter", size: 10 },
            maxRotation: 0,
          },
        },
        y: {
          grid: { color: "rgba(255,255,255,0.04)" },
          ticks: {
            color: "#64748b",
            font: { family: "Inter", size: 10 },
            callback: (value) => `${value}${sym}`,
          },
        },
      },
    },
  });
}

function openFutureForecastModal(data, dateStr) {
  const modal = document.getElementById("futureForecastModal");
  const title = document.getElementById("futureForecastTitle");
  const stats = document.getElementById("futureForecastStats");
  const probBars = document.getElementById("futureProbBars");
  const modelBars = document.getElementById("futureModelBars");
  const trendGrid = document.getElementById("futureTrendGrid");
  const nowcast = document.getElementById("futureNowcast");
  const sym = data.temp_symbol || "\u00B0C";

  const forecastEntry = (data.forecast?.daily || []).find((item) => item.date === dateStr) || null;
  const dailyModel = data.multi_model_daily?.[dateStr] || {};
  const probabilities = dailyModel.probabilities || [];
  const mu = computeProbabilityMu(probabilities);
  const deb = dailyModel.deb?.prediction ?? forecastEntry?.max_temp ?? null;
  const models = dailyModel.models || {};
  const slice = getFutureSlice(data, dateStr);
  const front = computeFrontTrendSignal(data, dateStr);
  const weatherGovPeriods = front.weatherGovPeriods || [];
  const meteoblueHighs = data.source_forecasts?.meteoblue?.daily_highs || [];
  const meteoblueIndex = (data.forecast?.daily || []).findIndex((item) => item.date === dateStr);
  const meteoblueHigh = meteoblueIndex >= 0 ? meteoblueHighs[meteoblueIndex] : null;
  const hasMeteoblue =
    data.name !== "ankara" &&
    meteoblueHigh != null &&
    Number.isFinite(Number(meteoblueHigh));
  title.textContent = `${data.display_name.toUpperCase()} \u00B7 ${dateStr} \u672a\u6765\u65e5\u671f\u5206\u6790`;

  stats.innerHTML = `
      <div class="h-stat-card"><span class="label">\u76ee\u6807\u65e5\u9884\u62a5</span><span class="val">${forecastEntry?.max_temp ?? "--"}${sym}</span></div>
      <div class="h-stat-card"><span class="label">DEB \u9884\u62a5</span><span class="val">${deb ?? "--"}${sym}</span></div>
      <div class="h-stat-card"><span class="label">\u52a8\u6001\u5206\u5e03\u4e2d\u5fc3</span><span class="val">${mu != null ? `${mu.toFixed(1)}${sym}` : "--"}</span></div>
      <div class="h-stat-card"><span class="label">\u8d8b\u52bf\u8bc4\u5206</span><span class="val">${front.score > 0 ? "+" : ""}${front.score}</span></div>
  `;

  probBars.innerHTML = buildProbabilityBarsHtml(probabilities);
  modelBars.innerHTML = buildModelBarsHtml(models, deb, sym);
  trendGrid.innerHTML = buildTrendCards(front.metrics);
  nowcast.innerHTML = buildShortTermNowcast(data, dateStr);

  renderFutureForecastChart(data, dateStr, slice);
  modal.classList.remove("hidden");
}

function closeFutureForecastModal() {
  document.getElementById("futureForecastModal")?.classList.add("hidden");
  if (futureForecastChart) {
    futureForecastChart.destroy();
    futureForecastChart = null;
  }
}

function renderRisk(data) {
  const container = document.getElementById("riskInfo");
  const risk = data.risk || {};

  if (!risk.airport) {
    container.innerHTML =
      '<span style="color:var(--text-muted)">暂无风险档案</span>';
    return;
  }

  container.innerHTML = `
        <div class="risk-row"><span class="risk-label">\u{1F4CD} 机场</span><span>${risk.airport} (${risk.icao})</span></div>
        <div class="risk-row"><span class="risk-label">\u{1F4CF} 距离</span><span>${risk.distance_km}km</span></div>
        ${risk.warning ? `<div class="risk-row"><span class="risk-label">\u26A0\uFE0F 注意</span><span>${risk.warning}</span></div>` : ""}
    `;
}

// ------------------------------------------------------------
// Panel controls
// ------------------------------------------------------------
function closePanel() {
  const panel = document.getElementById("panel");
  panel.classList.remove("visible");
  setTimeout(() => panel.classList.add("hidden"), 400);

  selectedCity = null;
  setSelectedMarker(null);
  document
    .querySelectorAll(".city-item")
    .forEach((el) => el.classList.remove("active"));
  maybeAutoShowNearbyStations();
}

// ------------------------------------------------------------
// Auto refresh
// ------------------------------------------------------------
function startAutoRefresh() {
  setInterval(async () => {
    if (selectedCity) {
      // Invalidate cache
      delete cityDataCache[selectedCity];
      try {
        const data = await fetchCityDetail(selectedCity);
        cityDataCache[selectedCity] = data;
        renderPanel(data);
        if (data.current?.temp != null) {
          updateMarkerTemp(selectedCity, data.current.temp);
          updateCityListInfo(data);
        }
        flashLiveBadge();
      } catch (e) {
        console.warn("Auto-refresh failed:", e);
      }
    }
  }, AUTO_REFRESH_MS);
}

function flashLiveBadge() {
  const badge = document.getElementById("liveBadge");
  badge.style.transform = "scale(1.1)";
  setTimeout(() => {
    badge.style.transform = "scale(1)";
  }, 300);
}

// ------------------------------------------------------------
//  Background Progressive Loading
// ------------------------------------------------------------
async function loadAllCitiesProgressively(cities) {
  // 寤惰繜 1 绉掑悗寮€濮嬪悗鍙板姞杞斤紝閬垮厤闃诲鍒濆娓叉煋
  await new Promise((r) => setTimeout(r, 1000));

  for (const city of cities) {
    // Skip if already clicked/loaded or selected
    if (!cityDataCache[city.name]) {
      try {
        const urlName = city.name.replace(/\s/g, "-");
        const res = await fetch(`/api/city/${encodeURIComponent(urlName)}`);
        if (res.ok) {
          const data = await res.json();
          cityDataCache[city.name] = data;
          saveCache();

          // If the user is not focused on this city, only refresh marker and list info
          if (data.current?.temp != null) {
            updateMarkerTemp(city.name, data.current.temp);
            updateCityListInfo(data);
          }

          // If the user is currently focused on this city, refresh the panel too
          if (selectedCity === city.name) {
            renderPanel(data);
          }
        }
      } catch (e) {
        console.warn(`Background load failed for ${city.name}`, e);
      }
      // Delay 2000ms to avoid bursty background API requests and keep the UI responsive
      await new Promise((r) => setTimeout(r, 2000));
    }
  }
}

// ------------------------------------------------------------
//  History Chart Logic
// ------------------------------------------------------------
let historyChartInst = null;

async function openHistoryModal() {
  if (!selectedCity) return;

  const modal = document.getElementById("historyModal");
  const title = document.getElementById("historyModalTitle");
  const statsDiv = document.getElementById("historyStats");

  modal.classList.remove("hidden");
  title.textContent = `\u5386\u53f2\u51c6\u786e\u7387\u5bf9\u8d26 - ${selectedCity.toUpperCase()}`;
  statsDiv.innerHTML =
    '<span style="color:var(--text-muted)">\u6b63\u5728\u83b7\u53d6\u5386\u53f2\u6570\u636e...</span>';

  try {
    const res = await fetch(`/api/history/${encodeURIComponent(selectedCity)}`);
    const json = await res.json();
    const data = json.history || [];
    const cutoff = new Date();
    cutoff.setHours(0, 0, 0, 0);
    cutoff.setDate(cutoff.getDate() - 14);
    const recentData = data.filter((row) => {
      if (!row?.date) return false;
      const rowDate = new Date(`${row.date}T00:00:00`);
      return !Number.isNaN(rowDate.getTime()) && rowDate >= cutoff;
    });

    if (recentData.length === 0) {
      statsDiv.innerHTML =
        '<span style="color:var(--text-muted)">\u8fd115\u5929\u6682\u65e0\u8be5\u57ce\u5e02\u5386\u53f2\u6570\u636e</span>';
      if (historyChartInst) historyChartInst.destroy();
      return;
    }

    let hits = 0;
    const debErrors = [];
    const dates = [];
    const actuals = [];
    const debs = [];
    const mgms = [];
    const cityLocalDate = cityDataCache?.[selectedCity]?.local_date || null;
    const settledData = recentData.filter((row) => {
      if (!row?.date) return false;
      return cityLocalDate
        ? row.date < cityLocalDate
        : row.date < new Date().toISOString().slice(0, 10);
    });

    recentData.forEach((row) => {
      dates.push(row.date);
      actuals.push(row.actual);
      debs.push(row.deb);
      mgms.push(row.mgm);
    });

    settledData.forEach((row) => {
      if (row.actual != null && row.deb != null) {
        debErrors.push(Math.abs(row.actual - row.deb));
        if (Math.round(row.actual) === Math.round(row.deb)) {
          hits++;
        }
      }
    });

    const hitRate = debErrors.length
      ? ((hits / debErrors.length) * 100).toFixed(0)
      : "--";
    const debMae = debErrors.length
      ? (debErrors.reduce((a, b) => a + b, 0) / debErrors.length).toFixed(1)
      : "--";
    const hasMgm =
      selectedCity === "ankara" && mgms.some((value) => value != null);

    statsDiv.innerHTML = `
      <div class="h-stat-card"><span class="label">DEB \u7ed3\u7b97\u80dc\u7387 (WU)</span><span class="val">${hitRate === "--" ? "--" : `${hitRate}%`}</span></div>
      <div class="h-stat-card"><span class="label">DEB MAE</span><span class="val">${debMae}&deg;</span></div>
      <div class="h-stat-card"><span class="label">\u8fd115\u5929\u5df2\u7ed3\u7b97\u6837\u672c</span><span class="val">${settledData.length}\u5929</span></div>
    `;

    const datasets = [
      {
        label: "\u5b9e\u6d4b\u6700\u9ad8\u6e29",
        data: actuals,
        borderColor: "#f87171",
        backgroundColor: "rgba(248, 113, 113, 0.1)",
        borderWidth: 2,
        tension: 0.2,
        pointRadius: 4,
        pointBackgroundColor: "#f87171",
        pointBorderColor: "#fff",
        zIndex: 10,
      },
      {
        label: "DEB \u878d\u5408",
        data: debs,
        borderColor: "#34d399",
        backgroundColor: "transparent",
        borderWidth: 2,
        borderDash: [5, 4],
        tension: 0.2,
        pointRadius: 3,
      },
    ];

    if (hasMgm) {
      datasets.push({
        label: "MGM \u5b98\u65b9\u9884\u62a5",
        data: mgms,
        borderColor: "#fb923c",
        backgroundColor: "transparent",
        borderWidth: 2,
        tension: 0.2,
        pointRadius: 3,
      });
    }

    if (historyChartInst) historyChartInst.destroy();
    const ctx = document.getElementById("historyChart").getContext("2d");

    historyChartInst = new Chart(ctx, {
      type: "line",
      data: {
        labels: dates,
        datasets,
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        interaction: { mode: "index", intersect: false },
        plugins: {
          legend: {
            labels: { color: "#94a3b8", font: { family: "Inter", size: 12 } },
          },
          tooltip: {
            backgroundColor: "rgba(15, 23, 42, 0.9)",
            borderColor: "rgba(255, 255, 255, 0.1)",
            borderWidth: 1,
            titleFont: { family: "Inter" },
            bodyFont: { family: "Inter" },
            callbacks: {
              label: (ctx) =>
                `${ctx.dataset.label}: ${ctx.parsed.y?.toFixed(1)}°`,
            },
          },
        },
        scales: {
          x: {
            grid: { color: "rgba(255,255,255,0.04)" },
            ticks: { color: "#64748b", font: { family: "Inter", size: 10 } },
          },
          y: {
            grid: { color: "rgba(255,255,255,0.04)" },
            ticks: { color: "#64748b", font: { family: "Inter", size: 10 } },
          },
        },
      },
    });
  } catch (e) {
    console.error("Failed to load history", e);
    statsDiv.innerHTML =
          '<span style="color:var(--text-danger)">\u83b7\u53d6\u5386\u53f2\u4fe1\u606f\u5931\u8d25</span>';
  }
}

function closeHistoryModal() {
  document.getElementById("historyModal").classList.add("hidden");
}

document.addEventListener("DOMContentLoaded", async () => {
  initMap();

  // Panel close
  document.getElementById("panelClose").addEventListener("click", closePanel);

  // Escape key
  document.addEventListener("keydown", (e) => {
    if (e.key === "Escape") closePanel();
  });

  // Modal Event Listeners
  const histModal = document.getElementById("historyModal");
  const futureModal = document.getElementById("futureForecastModal");
  const guideModal = document.getElementById("guideModal");
  document
    .getElementById("btnShowHistory")
    .addEventListener("click", openHistoryModal);
  document
    .getElementById("historyModalClose")
    .addEventListener("click", closeHistoryModal);
  histModal.addEventListener("click", (e) => {
    if (e.target.id === "historyModal") closeHistoryModal();
  });
  document
    .getElementById("futureForecastClose")
    .addEventListener("click", closeFutureForecastModal);
  futureModal.addEventListener("click", (e) => {
    if (e.target.id === "futureForecastModal") closeFutureForecastModal();
  });

  document.getElementById("btnShowGuide").addEventListener("click", () => {
    guideModal.classList.remove("hidden");
  });
  document.getElementById("guideModalClose").addEventListener("click", () => {
    guideModal.classList.add("hidden");
  });
  guideModal.addEventListener("click", (e) => {
    if (e.target.id === "guideModal") guideModal.classList.add("hidden");
  });

  // Refresh all button
  document
    .getElementById("refreshAllBtn")
    .addEventListener("click", async () => {
      const btn = document.getElementById("refreshAllBtn");
      btn.classList.add("spinning");
      cityDataCache = {};
      saveCache();
      if (selectedCity) {
        await loadCityDetail(selectedCity, true);
      }
      btn.classList.remove("spinning");
    });

  // Load cities
  const cities = await fetchCities();
  if (cities.length > 0) {
    cities.forEach((c) => {
      const cached = cityDataCache[c.name];
      if (cached && cached.current?.temp != null) {
        c._temp = cached.current.temp;
      }
    });

    addCityMarkers(cities);
    buildCityList(cities);

    cities.forEach((c) => {
      if (cityDataCache[c.name]) {
        updateCityListInfo(cityDataCache[c.name]);
      }
    });

    // Fit map to show all markers
    const bounds = cities.map((c) => [c.lat, c.lon]);
    map.fitBounds(bounds, { padding: [60, 60], maxZoom: 4 });

    // Warm cache in the background after boot
    loadAllCitiesProgressively(cities);
  }

  startAutoRefresh();
});