ohmu/dev/nutikodu-web/static/app.js

"use strict";

const state = {
  from: null,
  to: null,
  agg: "hour",
  device: "",
  showTemp: true,
  showHum: true,
  showOut: true,
  meta: null,
};

let chart = null;
let currentData = { series: {} };

const $ = (sel) => document.querySelector(sel);

function cssVar(name) {
  return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
}

function pad(n) {
  return String(n).padStart(2, "0");
}

function toLocalInput(date) {
  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
}

function setStatus(ok) {  const el = $("#status");
  el.classList.toggle("ok", ok === true);
  el.classList.toggle("err", ok === false);
}

function applyPreset(days) {
  const now = new Date();
  let from;
  if (days === "all") {
    const min = state.meta && state.meta.min ? new Date(state.meta.min.replace(" ", "T")) : null;
    from = min && !isNaN(min) ? min : new Date(now.getTime() - 7 * 864e5);
  } else {
    from = new Date(now.getTime() - Number(days) * 864e5);
  }
  state.from = toLocalInput(from);
  state.to = toLocalInput(now);
  $("#from").value = state.from;
  $("#to").value = state.to;
  load();
}

// Kärbi kõik seeriad ühisesse ajavahemikku, et jooned algaksid ja lõpeksid koos.
function clipToCommonRange(series) {
  // "· täidetud" hajuvusmärgistused ei tohi ühist vahemikku määrata: viimane märge
  // võib olla varasem kui viimane mõõtmine → muidu kärbitakse telg liiga vara ja
  // kaob viimane tund (nt 17:00).
  const isMarker = (s) => String(s.name || "").endsWith("· täidetud");
  const active = series.filter((s) => Array.isArray(s.data) && s.data.length && !isMarker(s));
  if (active.length < 2) return series;
  const start = Math.max(...active.map((s) => s.data[0][0]));
  const end = Math.min(...active.map((s) => s.data[s.data.length - 1][0]));
  if (!(start < end)) return series;
  return series.map((s) => {
    if (!Array.isArray(s.data)) return s;
    return { ...s, data: s.data.filter((d) => d && d[0] >= start && d[0] <= end) };
  });
}

function buildOption(data) {
  const text = cssVar("--text");
  const muted = cssVar("--muted");
  const border = cssVar("--border");
  const tempColor = cssVar("--temp");
  const humColor = cssVar("--hum");
  const outColor = cssVar("--out");
  const series = [];
  const palette = ["#1f6feb", "#e8590c", "#2fb344", "#9c36b5", "#f08c00", "#0ca678"];
  const devices = Object.keys(data.series).sort();
  let pi = 0;

  const humAxis = state.showHum;

  for (const dev of devices) {
    const s = data.series[dev];
    const baseColor = palette[pi % palette.length];
    pi += 1;
    if (state.showTemp) {
      series.push({
        name: `${dev} · °C`,
        type: "line",
        yAxisIndex: 0,
        showSymbol: false,
        smooth: 0.25,
        lineStyle: { width: 2.4, color: tempColor },
        itemStyle: { color: tempColor },
        emphasis: { focus: "series" },
        data: s.t.map((t, i) => [t, s.temperature[i]]),
      });
      if (Array.isArray(s.taidetud) && s.taidetud.some(Boolean)) {
        series.push({
          name: `${dev} · täidetud`,
          type: "scatter",
          yAxisIndex: 0,
          symbol: "emptyCircle",
          symbolSize: 9,
          itemStyle: { color: tempColor, borderWidth: 2 },
          z: 3,
          data: s.t
            .map((t, i) => (s.taidetud[i] ? [t, s.temperature[i]] : null))
            .filter(Boolean),
        });
      }
    }
    if (state.showHum) {
      series.push({
        name: `${dev} · %`,
        type: "line",
        yAxisIndex: 1,
        showSymbol: false,
        smooth: 0.25,
        lineStyle: { width: 1.8, type: "dashed", color: humColor },
        itemStyle: { color: humColor },
        emphasis: { focus: "series" },
        data: s.t.map((t, i) => [t, s.humidity[i]]),
      });
    }
  }

  const out = data.outside;
  if (state.showOut && out && Array.isArray(out.t) && out.t.length) {
    series.push({
      name: "Väli · °C",
      type: "line",
      yAxisIndex: 0,
      showSymbol: false,
      smooth: 0.25,
      lineStyle: { width: 2, color: outColor },
      itemStyle: { color: outColor },
      emphasis: { focus: "series" },
      data: out.t.map((t, i) => [t, out.temperature[i]]),
    });
    if (Array.isArray(out.taidetud) && out.taidetud.some(Boolean)) {
      series.push({
        name: "Väli · täidetud",
        type: "scatter",
        yAxisIndex: 0,
        symbol: "emptyCircle",
        symbolSize: 9,
        itemStyle: { color: outColor, borderWidth: 2 },
        z: 3,
        data: out.t
          .map((t, i) => (out.taidetud[i] ? [t, out.temperature[i]] : null))
          .filter(Boolean),
      });
    }
  }

  return {
    backgroundColor: "transparent",
    animationDuration: 300,
    color: palette,
    grid: { left: 6, right: humAxis ? 6 : 6, top: 40, bottom: 62, containLabel: true },
    legend: {
      top: 4,
      type: "scroll",
      textStyle: { color: text, fontSize: 12 },
      inactiveColor: muted,
    },
    tooltip: {
      trigger: "axis",
      backgroundColor: cssVar("--panel"),
      borderColor: border,
      textStyle: { color: text, fontSize: 12 },
      axisPointer: { type: "cross", label: { backgroundColor: muted } },
      valueFormatter: null,
      formatter: (params) => {
        const items = (params || []).filter(
          (p) => !String(p.seriesName).endsWith("· täidetud")
        );
        if (!items.length) return "";
        const d = new Date(items[0].value[0]);
        const head = `${d.toLocaleDateString("et-EE")} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
        const lines = items.map((p) => {
          const v = p.value[1];
          const unit = p.seriesName.endsWith("°C") ? " °C" : " %";
          return `<div style="display:flex;justify-content:space-between;gap:14px">
            <span>${p.marker} ${p.seriesName}</span><b>${v == null ? "–" : v + unit}</b></div>`;
        });
        return `<div style="font-weight:600;margin-bottom:4px">${head}</div>${lines.join("")}`;
      },
    },
    xAxis: {
      type: "time",
      axisLine: { lineStyle: { color: border } },
      axisLabel: { color: muted, hideOverlap: true },
      splitLine: { show: false },
    },
    yAxis: [
      {
        type: "value",
        name: "°C",
        scale: true,
        axisLine: { show: false },
        axisLabel: { color: muted },
        splitLine: { lineStyle: { color: border, type: "dashed" } },
      },
      ...(humAxis
        ? [
            {
              type: "value",
              name: "%",
              scale: true,
              position: "right",
              axisLine: { show: false },
              axisLabel: { color: muted },
              splitLine: { show: false },
            },
          ]
        : []),
    ],
    dataZoom: [
      { type: "inside", throttle: 50 },
      { type: "slider", height: 22, bottom: 14, borderColor: border, textStyle: { color: muted }, fillColor: cssVar("--accent-soft") },
    ],
    series: clipToCommonRange(series),
  };
}

function render(data) {
  const chartEl = $("#chart");
  const hasData = Object.keys(data.series).length > 0 && Object.values(data.series).some((s) => s.t.length);
  $("#hint").hidden = hasData;
  if (!hasData) {
    $("#hint").textContent = "Valitud vahemikus andmeid ei ole. Andur salvestab andmeid alates 2026-09-17.";
  }
  if (!chart) chart = echarts.init(chartEl, null, { renderer: "canvas" });
  chart.setOption(buildOption(data), true);
  chart.resize();
}

async function load() {
  const params = new URLSearchParams({
    from: state.from,
    to: state.to,
    agg: state.agg,
  });
  if (state.device) params.set("device", state.device);
  setStatus(null);
  try {
    const [tempRes, outRes] = await Promise.all([
      fetch(`/api/temperatuur?${params}`),
      fetch(`/api/valisilm?${params}`),
    ]);
    if (!tempRes.ok) throw new Error(await tempRes.text());
    const data = await tempRes.json();
    if (outRes.ok) {
      try {
        data.outside = (await outRes.json()).series;
      } catch {
        data.outside = null;
      }
    }
    currentData = data;
    currentSeries = data.series;
    render(data);
    loadProtected();
    setStatus(true);
    const f = new Date(state.from.replace(" ", "T"));
    const t = new Date(state.to.replace(" ", "T"));
    $("#range-label").textContent = `${f.toLocaleString("et-EE")} → ${t.toLocaleString("et-EE")}`;
  } catch (err) {
    console.error(err);
    setStatus(false);
    $("#hint").hidden = false;
    $("#hint").textContent = "Andmete laadimine ebaõnnestus.";
  }
}

async function loadMeta() {
  try {
    const res = await fetch("/api/meta");
    if (!res.ok) throw new Error();
    state.meta = await res.json();
    $("#subtitle").textContent = "Zigbee andurid";
    if (state.meta.min) {
      $("#range-label").textContent = `Andmed alates ${state.meta.min}`;
    }
  } catch {
    $("#subtitle").textContent = "Zigbee andurid";
  }
}

async function loadLatest() {
  try {
    const res = await fetch("/api/latest");
    if (!res.ok) return;
    const data = await res.json();
    renderCards(data);
  } catch {
    /* vaikne */
  }
}

function renderCards(data) {
  const cards = [];
  for (const r of data.readings) {
    cards.push(`<div class="card temp"><div class="k">🌡️ ${r.device} · temperatuur</div>
      <div class="v">${r.temperature ?? "–"}<small> °C</small></div></div>`);
    cards.push(`<div class="card hum"><div class="k">💧 ${r.device} · niiskus</div>
      <div class="v">${r.humidity ?? "–"}<small> %</small></div></div>`);
  }
  if (data.outside && data.outside.temperature != null) {
    cards.push(`<div class="card out"><div class="k">🌤️ Väli · temperatuur</div>
      <div class="v">${data.outside.temperature}<small> °C</small></div></div>`);
  }
  if (data.open_faults.length) {
    const items = data.open_faults
      .map((f) => `<div>⚠️ <b>${f.device}</b> · ${f.tyyp}${f.detail ? " · " + f.detail : ""}</div>`)
      .join("");
    cards.push(`<div class="card wide"><div class="k">Lahtised häired (${data.open_faults.length})</div>
      <div style="font-size:13px;margin-top:6px;line-height:1.7">${items}</div></div>`);
  }
  $("#cards").innerHTML = cards.join("");
}

function setTheme(theme) {
  document.documentElement.setAttribute("data-theme", theme);
  localStorage.setItem("nutikodu-theme", theme);
  $("#theme-toggle").textContent = theme === "dark" ? "☀️" : "🌙";
  const meta = $("#meta-theme");
  if (meta) meta.setAttribute("content", theme === "dark" ? "#0e1116" : "#1f6feb");
  if (chart) chart.setOption(buildOption(currentData), true);
}

let currentSeries = {};

function init() {
  const saved = localStorage.getItem("nutikodu-theme");
  const prefersDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
  setTheme(saved || (prefersDark ? "dark" : "light"));
  $("#theme-toggle").addEventListener("click", () => {
    setTheme(document.documentElement.getAttribute("data-theme") === "dark" ? "light" : "dark");
  });

  document.querySelectorAll("#presets button").forEach((btn) => {
    btn.addEventListener("click", () => {
      document.querySelectorAll("#presets button").forEach((b) => b.classList.remove("active"));
      btn.classList.add("active");
      applyPreset(btn.dataset.days);
    });
  });

  document.querySelectorAll("#agg button").forEach((btn) => {
    btn.addEventListener("click", () => {
      document.querySelectorAll("#agg button").forEach((b) => b.classList.remove("active"));
      btn.classList.add("active");
      state.agg = btn.dataset.agg;
      load();
    });
  });

  $("#show-temp").addEventListener("change", (e) => { state.showTemp = e.target.checked; load(); });
  $("#show-hum").addEventListener("change", (e) => { state.showHum = e.target.checked; load(); });
  $("#show-out").addEventListener("change", (e) => { state.showOut = e.target.checked; load(); });
  $("#apply").addEventListener("click", () => {
    state.from = $("#from").value;
    state.to = $("#to").value;
    document.querySelectorAll("#presets button").forEach((b) => b.classList.remove("active"));
    load();
  });

  window.addEventListener("resize", () => chart && chart.resize());
  window.addEventListener("orientationchange", () => setTimeout(() => chart && chart.resize(), 250));
  window.addEventListener("load", () => chart && chart.resize());

  checkAuth().then(() => loadMeta().then(() => applyPreset(7)));
  loadLatest();
  setInterval(loadLatest, 60000);
  setInterval(loadProtected, 60000);
  initTabs();
}



// --- Uus67: energia + liikumine ---
let chartEnergy = null;
let chartMotion = null;

function palColors() {
  return ["#1f6feb", "#e8590c", "#2fb344", "#9c36b7", "#f08c00", "#0ca678"];
}

async function loadEnergy() {
  if (!state.from) return;
  const params = new URLSearchParams({ from: state.from, to: state.to, agg: state.agg });
  try {
    const res = await fetch(`/api/energia?${params}`);
    if (!res.ok) return;
    renderEnergy(await res.json());
  } catch (e) { console.error(e); }
}

function renderEnergy(data) {
  const el = document.getElementById("chart-energy");
  if (!el) return;
  const seriesData = data.series || {};
  const hasData = Object.keys(seriesData).length > 0 && Object.values(seriesData).some((s) => s.t.length);
  const hint = document.getElementById("hint-energy");
  if (hint) { hint.hidden = hasData; if (!hasData) hint.textContent = "Energia andmeid veel pole (koguneb tunnipõhiselt, esimene rida täistunnil)."; }
  if (!hasData) { if (chartEnergy) chartEnergy.clear(); return; }
  if (!chartEnergy) chartEnergy = echarts.init(el, null, { renderer: "canvas" });
  const pal = palColors();
  const series = Object.keys(seriesData).sort().map((dev, i) => {
    const s = seriesData[dev];
    return {
      name: `${dev} · W`,
      type: "line",
      showSymbol: false,
      smooth: 0.25,
      lineStyle: { width: 2.2, color: pal[i % pal.length] },
      itemStyle: { color: pal[i % pal.length] },
      data: s.t.map((t, k) => [t, s.power[k]]),
    };
  });
  chartEnergy.setOption({
    backgroundColor: "transparent",
    tooltip: { trigger: "axis" },
    legend: { top: 0, type: "scroll", textStyle: { color: cssVar("--text") } },
    grid: { left: 6, right: 6, top: 34, bottom: 44, containLabel: true },
    xAxis: { type: "time", axisLabel: { color: cssVar("--muted") }, axisLine: { lineStyle: { color: cssVar("--border") } } },
    yAxis: { type: "value", name: "W", scale: true, axisLabel: { color: cssVar("--muted") }, splitLine: { lineStyle: { color: cssVar("--border"), type: "dashed" } } },
    dataZoom: [{ type: "inside" }, { type: "slider", height: 18, bottom: 8, borderColor: cssVar("--border") }],
    series,
  }, true);
  chartEnergy.resize();
}

async function loadMotion() {
  if (!state.from) return;
  const params = new URLSearchParams({ from: state.from, to: state.to });
  try {
    const res = await fetch(`/api/liikumine?${params}`);
    if (!res.ok) return;
    renderMotion(await res.json());
  } catch (e) { console.error(e); }
}

function renderMotion(data) {
  const el = document.getElementById("chart-motion");
  if (!el) return;
  const ev = data.events || [];
  const hint = document.getElementById("hint-motion");
  if (hint) { hint.hidden = ev.length > 0; if (!ev.length) hint.textContent = "Liikumise sündmusi veel pole."; }
  if (!ev.length) { if (chartMotion) chartMotion.clear(); return; }
  if (!chartMotion) chartMotion = echarts.init(el, null, { renderer: "canvas" });
  const pal = palColors();
  const devices = [...new Set(ev.map((e) => e.device))].sort();
  const series = devices.map((dev, i) => ({
    name: dev,
    type: "scatter",
    symbolSize: 13,
    itemStyle: { color: pal[i % pal.length] },
    data: ev.filter((e) => e.device === dev && e.occupancy).map((e) => [e.t, 1]),
  }));
  chartMotion.setOption({
    backgroundColor: "transparent",
    tooltip: {
      trigger: "axis",
      formatter: (p) => {
        if (!p || !p.length) return "";
        const d = new Date(p[0].value[0]);
        return `${d.toLocaleString("et-EE")}<br>${p.map((x) => x.seriesName).join(", ")}`;
      },
    },
    legend: { top: 0, textStyle: { color: cssVar("--text") } },
    grid: { left: 6, right: 6, top: 34, bottom: 44, containLabel: true },
    xAxis: { type: "time", axisLabel: { color: cssVar("--muted") }, axisLine: { lineStyle: { color: cssVar("--border") } } },
    yAxis: { type: "value", min: 0, max: 1.4, axisLabel: { show: false }, splitLine: { show: false } },
    dataZoom: [{ type: "inside" }, { type: "slider", height: 18, bottom: 8, borderColor: cssVar("--border") }],
    series,
  }, true);
  chartMotion.resize();
}

async function loadUus67Latest() {
  try {
    const res = await fetch("/api/uus67_latest");
    if (!res.ok) return;
    const data = await res.json();
    renderUus67Cards(data);
  } catch (e) { console.error(e); }
}

function renderUus67Cards(data) {
  const host = document.getElementById("cards-uus67");
  if (!host) return;
  const cards = [];
  for (const e of data.energy || []) {
    cards.push(`<div class="card"><div class="k">⚡ ${e.device} · võimsus</div>
      <div class="v">${e.power ?? "–"}<small> W</small></div></div>`);
    if (e.energy != null) {
      cards.push(`<div class="card"><div class="k">🔌 ${e.device} · kWh</div>
        <div class="v">${e.energy}<small> kWh</small></div></div>`);
    }
  }
  for (const m of data.motion || []) {
    cards.push(`<div class="card ${m.occupancy ? "temp" : ""}"><div class="k">🚶 ${m.device}</div>
      <div class="v">${m.occupancy ? "liikumine" : "rahu"}</div></div>`);
  }
  host.innerHTML = cards.join("");
}



// --- Autentimine ---
function ensureAwayButton() {
  if (document.getElementById("away-toggle")) return;
  const actions = document.querySelector(".header-actions");
  const authLink = document.getElementById("auth-link");
  if (!actions || !authLink) return;
  const btn = document.createElement("button");
  btn.type = "button";
  btn.id = "away-toggle";
  btn.className = "away-pill";
  btn.setAttribute("aria-label", "Kodust eemal lüliti");
  btn.innerHTML = '<span class="away-ico">\ud83c\udfe0</span><span id="away-title">Kodus</span>';
  btn.addEventListener("click", toggleAway);
  actions.insertBefore(btn, authLink);
}

function applyAuth(authed) {
  state.authed = authed;
  if (authed) {
    ensureAwayButton();
    loadAway();
  } else {
    const awayBtn = document.getElementById("away-toggle");
    if (awayBtn) awayBtn.remove();
  }
  const prot = document.getElementById("protected");
  if (prot) prot.hidden = !authed;
  const link = document.getElementById("auth-link");
  if (link) {
    link.href = authed ? "/logout" : "/login";
    link.title = authed ? "Logi välja" : "Sisselogimine";
    link.textContent = authed ? "\ud83d\udd13" : "\ud83d\udd12";
  }
}

async function checkAuth() {
  try {
    const res = await fetch("/api/me");
    if (!res.ok) { applyAuth(false); return; }
    const data = await res.json();
    applyAuth(!!data.authed);
  } catch { applyAuth(false); }
}

async function loadProtected() {
  if (!state.authed) return;
  loadEnergy();
  loadMotion();
  loadUus67Latest();
}



// --- Kodust eemal (HA input_boolean) ---
let awayState = null;

async function loadAway() {
  if (!state.authed) return;
  try {
    const res = await fetch("/api/away");
    if (!res.ok) return;
    const d = await res.json();
    awayState = d.away;
    renderAway(d.away, d.available);
  } catch (e) { console.error(e); }
}

function renderAway(away, available) {
  const btn = document.getElementById("away-toggle");
  if (!btn) return;
  const ico = btn.querySelector(".away-ico");
  const title = document.getElementById("away-title");
  if (away === true) {
    btn.classList.add("away-on");
    if (ico) ico.textContent = "🚨";
    if (title) title.textContent = "Eemal";
  } else {
    btn.classList.remove("away-on");
    if (ico) ico.textContent = "🏠";
    if (title) title.textContent = "Kodus";
    if (available === false && title) title.textContent = "HA offline";
  }
}

async function toggleAway() {
  const on = !(awayState === true);
  awayState = on;
  renderAway(on, true);
  try {
    const res = await fetch("/api/away", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ on }),
    });
    if (!res.ok) throw new Error("HTTP " + res.status);
    const d = await res.json();
    awayState = d.away;
    renderAway(d.away, true);
  } catch (e) {
    console.error(e);
    loadAway();
  }
}

// --- Vahelehed (tabid): Andurid | Transport ---
const transport = { active: false, days: 1 };

function switchView(view) {
  const isTransport = view === "transport";
  document.querySelectorAll("#tabs .tab").forEach((b) => {
    b.classList.toggle("active", b.dataset.view === view);
  });
  const vAnd = document.getElementById("view-andurid");
  const vTr = document.getElementById("view-transport");
  if (vAnd) vAnd.hidden = isTransport;
  if (vTr) vTr.hidden = !isTransport;
  transport.active = isTransport;
  if (location.hash !== "#" + view) history.replaceState(null, "", "#" + view);
  if (isTransport) {
    loadTransport();
  } else {
    if (chart) chart.resize();
    if (chartEnergy) chartEnergy.resize();
    if (chartMotion) chartMotion.resize();
  }
}

function initTabs() {
  document.querySelectorAll("#tabs .tab").forEach((btn) => {
    btn.addEventListener("click", () => switchView(btn.dataset.view));
  });
  const days = document.getElementById("praam-days");
  if (days) {
    days.querySelectorAll("button").forEach((b) => {
      b.addEventListener("click", () => {
        days.querySelectorAll("button").forEach((x) => x.classList.remove("active"));
        b.classList.add("active");
        transport.days = Number(b.dataset.days) || 1;
        loadPraam();
      });
    });
  }
  setInterval(() => {
    if (transport.active) loadTransport();
  }, 60000);
  switchView(location.hash === "#transport" ? "transport" : "andurid");
}

function loadTransport() {
  loadBus();
  loadPraam();
}

function fmtDayLabel(iso, today) {
  if (!iso || iso === today) return "";
  const d = new Date(iso + "T00:00:00");
  const t = new Date((today || iso) + "T00:00:00");
  const diff = Math.round((d - t) / 864e5);
  if (diff === 1) return "homme";
  return d.toLocaleDateString("et-EE", { weekday: "short", day: "numeric", month: "short" });
}

function setTransportUpdated(updated) {
  const el = document.getElementById("transport-updated");
  if (el && updated) el.textContent = `Uuendatud ${updated}`;
}

async function loadBus() {
  const hint = document.getElementById("bus-hint");
  try {
    const res = await fetch("/api/buss?limit=12");
    if (!res.ok) throw new Error("HTTP " + res.status);
    renderBus(await res.json());
  } catch (e) {
    console.error(e);
    if (hint) { hint.hidden = false; hint.textContent = "Bussiaegade laadimine ebaõnnestus."; }
  }
}

function renderBus(data) {
  const list = document.getElementById("bus-list");
  const hint = document.getElementById("bus-hint");
  if (!list) return;
  const rows = data.departures || [];
  if (!rows.length) {
    list.innerHTML = "";
    if (hint) { hint.hidden = false; hint.textContent = "Täna enam busse ei välju."; }
    return;
  }
  if (hint) hint.hidden = true;
  list.innerHTML = rows.map((d) => {
    const day = fmtDayLabel(d.date, data.today);
    const dayBadge = day ? `<span class="badge muted">${day}</span>` : "";
    let rt = "";
    if (d.realtime && d.delay_min != null && d.delay_min !== 0) {
      rt = d.delay_min > 0
        ? `<span class="badge warn">+${d.delay_min} min</span>`
        : `<span class="badge ok">${d.delay_min} min</span>`;
    }
    return `<div class="dep">
      <span class="dep-time">${d.time}</span>
      <span class="dep-route">${d.route || ""}</span>
      <span class="dep-dest">→ ${d.headsign || "?"}</span>
      ${rt}${dayBadge}
    </div>`;
  }).join("");
}

async function loadPraam() {
  const hint = document.getElementById("praam-hint");
  try {
    const res = await fetch(`/api/praam?days=${transport.days}`);
    if (!res.ok) throw new Error("HTTP " + res.status);
    renderPraam(await res.json());
  } catch (e) {
    console.error(e);
    if (hint) { hint.hidden = false; hint.textContent = "Praamiaegade laadimine ebaõnnestus."; }
  }
}

function renderPraam(data) {
  const list = document.getElementById("praam-list");
  const hint = document.getElementById("praam-hint");
  const warn = document.getElementById("praam-warning");
  const rows = data.departures || [];

  if (warn) {
    if (Array.isArray(data.warnings) && data.warnings.length) {
      warn.hidden = false;
      warn.innerHTML = "⚠️ <b>Ilmahoiatuse kontekst (Väinameri)</b>" +
        data.warnings.map((w) => `<div>• ${w.area}: ${w.valid || w.text}</div>`).join("") +
        `<div class="warn-sub">Praamiliiklus võib häiruda — kontrolli ` +
        `<a href="https://praamid.ee" target="_blank" rel="noopener">praamid.ee</a>.</div>`;
    } else {
      warn.hidden = true;
    }
  }

  if (!rows.length) {
    list.innerHTML = "";
    if (hint) { hint.hidden = false; hint.textContent = "Väljumisi ei leitud."; }
    return;
  }
  if (hint) hint.hidden = true;
  setTransportUpdated(data.updated);

  const groups = {};
  for (const d of rows) (groups[d.direction] = groups[d.direction] || []).push(d);
  list.innerHTML = ["HR", "RH"].filter((k) => groups[k]).map((k) => {
    const items = groups[k].map((d) => {
      const day = fmtDayLabel(d.date, data.today);
      const dayBadge = day ? `<span class="badge muted">${day}</span>` : "";
      const st = d.disrupted
        ? `<span class="badge err">${d.status_et}</span>`
        : `<span class="badge ok">${d.status_et}</span>`;
      return `<div class="dep">
        <span class="dep-time">${d.time}</span>
        <span class="dep-ship">${d.ship || ""}</span>
        <span class="dep-dest"></span>
        ${st}${dayBadge}
      </div>`;
    }).join("");
    return `<div class="dep-group"><div class="dep-group-title">${groups[k][0].direction_name}</div>${items}</div>`;
  }).join("");
}

document.addEventListener("DOMContentLoaded", init);