app.js

const stations = [
  {
    id: "yuanlin",
    name: "員林轉運站",
    district: "員林生活圈",
    x: 37,
    y: 53,
    bikes: 7,
    docks: 32,
    predicted: -11,
    risk: "high",
    demand: 88,
    maintenance: 2,
    impact: 91,
    nextPeak: "08:55",
    note: "火車與客運轉乘需求重疊，預估 35 分鐘後出現缺車。",
  },
  {
    id: "baiguo",
    name: "百果山遊憩區",
    district: "觀光轉乘帶",
    x: 18,
    y: 70,
    bikes: 24,
    docks: 30,
    predicted: 10,
    risk: "low",
    demand: 32,
    maintenance: 1,
    impact: 77,
    nextPeak: "10:30",
    note: "目前車輛充足，可支援早尖峰跨區調度 8 輛。",
  },
  {
    id: "changhua",
    name: "彰化車站",
    district: "彰化通勤圈",
    x: 61,
    y: 32,
    bikes: 9,
    docks: 38,
    predicted: -8,
    risk: "high",
    demand: 82,
    maintenance: 0,
    impact: 96,
    nextPeak: "09:10",
    note: "通勤旅次上升，建議由市區次級站點分散補車。",
  },
  {
    id: "museum",
    name: "扇形車庫",
    district: "觀光轉乘帶",
    x: 78,
    y: 17,
    bikes: 18,
    docks: 24,
    predicted: 4,
    risk: "medium",
    demand: 57,
    maintenance: 3,
    impact: 83,
    nextPeak: "11:20",
    note: "週末活動會提早推升需求，今日仍以維運檢查為主。",
  },
  {
    id: "county",
    name: "縣府廣場",
    district: "彰化通勤圈",
    x: 72,
    y: 76,
    bikes: 14,
    docks: 36,
    predicted: -3,
    risk: "medium",
    demand: 62,
    maintenance: 1,
    impact: 88,
    nextPeak: "08:45",
    note: "洽公旅次穩定，需保留 6 個空柱承接還車需求。",
  },
  {
    id: "university",
    name: "師大寶山校區",
    district: "彰化通勤圈",
    x: 22,
    y: 18,
    bikes: 20,
    docks: 28,
    predicted: 6,
    risk: "low",
    demand: 39,
    maintenance: 0,
    impact: 74,
    nextPeak: "12:10",
    note: "早尖峰供給充足，午間課程切換前不需介入。",
  },
];

const scenarios = {
  morning: {
    riskCount: 5,
    available: 684,
    turnover: 6.8,
    service: 94,
    carbon: 1.8,
    headline: "員林轉運站將於 08:55 出現缺車，建議由百果山站調入 8 輛。",
  },
  midday: {
    riskCount: 2,
    available: 731,
    turnover: 4.2,
    service: 96,
    carbon: 1.1,
    headline: "午間供需大致平衡；扇形車庫有 3 支智慧樁需安排巡檢。",
  },
  evening: {
    riskCount: 6,
    available: 642,
    turnover: 7.5,
    service: 92,
    carbon: 2.1,
    headline: "彰化車站還車需求將高於空柱容量，建議先移出 10 輛。",
  },
  weekend: {
    riskCount: 4,
    available: 708,
    turnover: 5.9,
    service: 95,
    carbon: 1.6,
    headline: "觀光帶活動將推升百果山與扇形車庫需求，建議 12:30 前完成雙向調度。",
  },
};

const dispatches = [
  {
    id: "d1",
    from: "百果山",
    to: "員林轉運站",
    bikes: 8,
    duration: 24,
    avoided: 31,
    cost: 620,
    confidence: 88,
    priority: "P1",
    note: "依據近四週平日尖峰、轉運班次與目前車柱容量計算。雨勢或活動變更時需重新評估。",
    status: "pending",
  },
  {
    id: "d2",
    from: "扇形車庫",
    to: "彰化車站",
    bikes: 6,
    duration: 18,
    avoided: 24,
    cost: 480,
    confidence: 82,
    priority: "P1",
    note: "觀光站點短期有餘車；仍需保留 8 輛供 10:30 後遊客使用。",
    status: "pending",
  },
  {
    id: "d3",
    from: "縣府廣場",
    to: "民族路商圈",
    bikes: 4,
    duration: 15,
    avoided: 13,
    cost: 360,
    confidence: 71,
    priority: "P2",
    note: "信心低於 75%，建議先確認商圈臨時活動與現場空柱。",
    status: "pending",
  },
];

const riskColors = {
  low: "#67d5b5",
  medium: "#ffc34d",
  high: "#ff5b35",
};

const layerLabels = {
  demand: "依缺車風險排序",
  maintenance: "依維運事件排序",
  impact: "依減碳貢獻排序",
};

let selectedStationId = "yuanlin";
let selectedDispatchId = "d1";
let currentLayer = "demand";
let forecastRun = 0;

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

function selectedStation() {
  return stations.find((station) => station.id === selectedStationId) || stations[0];
}

function selectedDispatch() {
  return dispatches.find((dispatch) => dispatch.id === selectedDispatchId) || dispatches[0];
}

function layerValue(station) {
  if (currentLayer === "maintenance") return station.maintenance;
  if (currentLayer === "impact") return station.impact;
  return station.demand;
}

function stationRisk(station) {
  if (currentLayer === "maintenance") {
    if (station.maintenance >= 3) return "high";
    if (station.maintenance >= 1) return "medium";
    return "low";
  }
  if (currentLayer === "impact") {
    if (station.impact >= 90) return "high";
    if (station.impact >= 80) return "medium";
    return "low";
  }
  return station.risk;
}

function stationValueLabel(station) {
  if (currentLayer === "maintenance") return `${station.maintenance} 件`;
  if (currentLayer === "impact") return `${station.impact} pt`;
  return `${station.demand}%`;
}

function stationStatusLabel(station) {
  const risk = stationRisk(station);
  if (currentLayer === "maintenance") {
    return risk === "high" ? "立即巡檢" : risk === "medium" ? "排程維運" : "設備正常";
  }
  if (currentLayer === "impact") {
    return risk === "high" ? "高減碳貢獻" : risk === "medium" ? "穩定貢獻" : "待提升";
  }
  return risk === "high" ? "建議調度" : risk === "medium" ? "需關注" : "供需平衡";
}

function renderStations() {
  const sorted = [...stations].sort((a, b) => layerValue(b) - layerValue(a));
  $("#stationListLabel").textContent = layerLabels[currentLayer];
  $("#stationList").innerHTML = sorted.map((station) => {
    const risk = stationRisk(station);
    return `
      <button
        class="station-card ${station.id === selectedStationId ? "active" : ""}"
        type="button"
        data-station="${station.id}"
        style="--risk-color: ${riskColors[risk]}"
      >
        <span aria-hidden="true"></span>
        <span>
          <strong>${station.name}</strong>
          <span>${station.district}</span>
        </span>
        <b>${stationValueLabel(station)}</b>
      </button>
    `;
  }).join("");

  $("#mapStations").innerHTML = stations.map((station) => {
    const risk = stationRisk(station);
    return `
      <button
        class="map-station ${station.id === selectedStationId ? "active" : ""}"
        type="button"
        data-station="${station.id}"
        aria-label="${station.name}，${stationStatusLabel(station)}"
        title="${station.name} · ${stationValueLabel(station)}"
        style="left:${station.x}%;top:${station.y}%;--risk-color:${riskColors[risk]}"
      >${station.bikes}</button>
    `;
  }).join("");

  document.querySelectorAll("[data-station]").forEach((button) => {
    button.addEventListener("click", () => {
      selectedStationId = button.dataset.station;
      renderStations();
      renderStationDetail();
    });
  });
}

function renderStationDetail() {
  const station = selectedStation();
  const risk = stationRisk(station);
  const capacity = Math.round((station.bikes / station.docks) * 100);
  const trend = station.predicted > 0 ? `+${station.predicted}` : station.predicted;

  $("#stationDetail").innerHTML = `
    <div class="station-detail" style="--risk-color:${riskColors[risk]};--capacity:${capacity}%">
      <div>
        <div class="status-line">
          <span class="status-pill">${stationStatusLabel(station)}</span>
          <span>${station.district}</span>
        </div>
        <h3>${station.name}</h3>
        <p>${station.note}</p>
      </div>
      <div class="capacity-gauge">
        <div class="capacity-ring"></div>
        <div class="capacity-copy">
          <strong>${station.bikes}/${station.docks}</strong>
          <span>可用車 / 車柱</span>
        </div>
      </div>
      <dl class="detail-facts">
        <div><dt>90 分鐘淨變化</dt><dd>${trend} 輛</dd></div>
        <div><dt>下一波需求</dt><dd>${station.nextPeak}</dd></div>
        <div><dt>待處理維運</dt><dd>${station.maintenance} 件</dd></div>
        <div><dt>模型依據</dt><dd>旅次、班次、天氣</dd></div>
      </dl>
      <button class="station-action" id="createStationTask" type="button">
        ${currentLayer === "maintenance" ? "建立巡檢任務" : "加入人工觀察清單"}
      </button>
    </div>
  `;

  $("#createStationTask").addEventListener("click", () => {
    const action = currentLayer === "maintenance" ? "巡檢任務" : "人工觀察項目";
    addLog(`${station.name}：已建立${action}`, "由調度員手動新增，尚未派工。");
    showToast(`${station.name}已加入${action}。`);
  });
}

function renderDispatches() {
  const pending = dispatches.filter((item) => item.status === "pending");
  $("#dispatchCount").textContent = `${pending.length} 件待確認`;
  $("#dispatchQueue").innerHTML = dispatches.map((dispatch) => `
    <button
      class="dispatch-item ${dispatch.id === selectedDispatchId ? "active" : ""}"
      type="button"
      data-dispatch="${dispatch.id}"
    >
      <span class="dispatch-item-top">
        <strong>${dispatch.from} → ${dispatch.to}</strong>
        <b>${dispatch.priority}</b>
      </span>
      <span>${dispatch.status === "confirmed" ? "已建立派工單" : `${dispatch.bikes} 輛 · 避免 ${dispatch.avoided} 人次缺車`}</span>
    </button>
  `).join("");

  document.querySelectorAll("[data-dispatch]").forEach((button) => {
    button.addEventListener("click", () => {
      selectedDispatchId = button.dataset.dispatch;
      renderDispatches();
      renderRoute();
    });
  });
}

function renderRoute() {
  const dispatch = selectedDispatch();
  $("#routeTitle").textContent = `${dispatch.from} → ${dispatch.to}`;
  $("#routeConfidence").textContent = `信心 ${dispatch.confidence}%`;
  $("#routeBikes").textContent = `${dispatch.bikes} 輛`;
  $("#routeDuration").textContent = `${dispatch.duration} 分`;
  $("#routeAvoided").textContent = `${dispatch.avoided} 人次`;
  $("#routeCost").textContent = `NT$ ${dispatch.cost.toLocaleString("zh-TW")}`;
  $("#decisionNote").textContent = dispatch.note;
  $("#confirmDispatch").disabled = dispatch.status === "confirmed";
  $("#confirmDispatch").textContent =
    dispatch.status === "confirmed" ? "已建立派工單" : "人工確認並建立派工單";
}

function addLog(title, detail) {
  const now = new Date();
  const time = now.toLocaleTimeString("zh-TW", { hour: "2-digit", minute: "2-digit" });
  const item = document.createElement("li");
  item.innerHTML = `<strong>${time} · ${title}</strong>${detail}`;
  $("#opsLog").prepend(item);
}

function showToast(message) {
  const toast = $("#toast");
  toast.textContent = message;
  toast.classList.add("show");
  window.clearTimeout(showToast.timer);
  showToast.timer = window.setTimeout(() => toast.classList.remove("show"), 2600);
}

function applyScenario() {
  const scenario = scenarios[$("#timeWindow").value];
  const weather = $("#weatherMode").value;
  const weatherPenalty = weather === "rain" ? 0.78 : weather === "hot" ? 0.9 : 1;

  $("#riskStationCount").textContent = String(
    Math.max(1, Math.round(scenario.riskCount * (weather === "rain" ? 0.75 : 1))),
  ).padStart(2, "0");
  $("#availableBikeCount").textContent = Math.round(scenario.available * weatherPenalty);
  $("#turnoverRate").textContent = (scenario.turnover * weatherPenalty).toFixed(1);
  $("#serviceRate").textContent = `${scenario.service}%`;
  $("#carbonSaved").textContent = `${(scenario.carbon * weatherPenalty).toFixed(1)}t`;
  $("#forecastHeadline").textContent =
    weather === "rain"
      ? `短時陣雨使整體需求下降，但轉運站還車壓力增加。${scenario.headline}`
      : scenario.headline;
  $("#lastUpdated").textContent = "條件已更新";
}

function runForecast() {
  const button = $("#runForecast");
  button.classList.add("loading");
  button.querySelector("span").textContent = "重新計算中";

  window.setTimeout(() => {
    forecastRun += 1;
    const scenario = scenarios[$("#timeWindow").value];
    applyScenario();
    $("#riskStationDelta").textContent = forecastRun % 2
      ? "已納入天氣與轉運班次"
      : "較昨日同期 −2 站";
    $("#impactAvailability").textContent = `${(96.4 + Math.min(forecastRun, 3) * 0.3).toFixed(1)}%`;
    button.classList.remove("loading");
    button.querySelector("span").textContent = "執行 90 分鐘預測";
    $("#lastUpdated").textContent = "剛剛";
    addLog("完成 90 分鐘需求預測", `${scenario.riskCount} 個站點進入人工複核清單。`);
    showToast("預測完成。建議仍需由調度員確認後派工。");
  }, 720);
}

function confirmDispatch() {
  const dispatch = selectedDispatch();
  if (dispatch.status === "confirmed") return;
  dispatch.status = "confirmed";

  const origin = stations.find((station) => dispatch.from.includes(station.name.slice(0, 2)));
  const destination = stations.find((station) => dispatch.to.includes(station.name.slice(0, 2)));
  if (origin) origin.bikes = Math.max(0, origin.bikes - dispatch.bikes);
  if (destination) destination.bikes = Math.min(destination.docks, destination.bikes + dispatch.bikes);

  addLog(
    `派工單已建立：${dispatch.from} → ${dispatch.to}`,
    `${dispatch.bikes} 輛，預估 ${dispatch.duration} 分鐘；狀態等待車隊主管接單。`,
  );
  renderDispatches();
  renderRoute();
  renderStations();
  renderStationDetail();
  showToast("派工單已建立，並保留模型依據與人工確認紀錄。");
}

function bindEvents() {
  $("#runForecast").addEventListener("click", runForecast);
  $("#confirmDispatch").addEventListener("click", confirmDispatch);
  $("#timeWindow").addEventListener("change", applyScenario);
  $("#weatherMode").addEventListener("change", applyScenario);

  document.querySelectorAll(".layer-button").forEach((button) => {
    button.addEventListener("click", () => {
      currentLayer = button.dataset.layer;
      document.querySelectorAll(".layer-button").forEach((item) =>
        item.classList.toggle("active", item === button));
      renderStations();
      renderStationDetail();
    });
  });

  document.querySelectorAll("[data-scroll]").forEach((button) => {
    button.addEventListener("click", () => {
      const target = document.querySelector(button.dataset.scroll);
      target?.scrollIntoView({ behavior: "smooth", block: "start" });
      document.querySelectorAll(".nav-button").forEach((item) =>
        item.classList.toggle("active", item === button));
    });
  });
}

function init() {
  renderStations();
  renderStationDetail();
  renderDispatches();
  renderRoute();
  applyScenario();
  bindEvents();
  addLog("營運台載入完成", "42 個模擬站點在線，資料時間 08:20。");
  addLog("模型提出 3 件調度建議", "尚未派工，等待調度員逐筆確認。");
}

init();