app.js

const CATS = {
  scheduling: { label: "Scheduling", color: "#F0A93A" },
  "plant-control": { label: "Plant Control", color: "#4FD1C5" },
  ventilation: { label: "Ventilation", color: "#5B9BD5" },
  "variable-speed": { label: "Variable Speed", color: "#9C7BDB" },
  operations: { label: "Operations", color: "#6FCF97" },
};
const MONTHS = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
const GROUPS = [
  ["scheduling", "Scheduling"],
  ["plant-control", "Plant Control"],
  ["ventilation", "Ventilation"],
  ["variable-speed", "Variable Speed"],
  ["operations", "Operations"],
];

let catalog = [];
let byId = {};
let tab = "ops";
let included = false;
let achieved = 70;
let annualCost = 250000;
let sliders = {};
let checks = {};
let openGroups = { scheduling: true, "plant-control": false, ventilation: false, "variable-speed": false, operations: false };

function route() {
  const raw = (location.hash || "#/overview").replace(/^#\/?/, "");
  const id = raw.split("?")[0].toUpperCase();
  if (raw.includes("view=guide")) tab = "guide";
  if (/^O\d+$/.test(id) && byId[id]) return { page: "opp", id };
  return { page: "overview" };
}

function go(path) {
  location.hash = path;
}

function esc(s) {
  return String(s ?? "")
    .replace(/&/g, "&")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;");
}

function navItem(href, label, active, oid) {
  return `<a class="nav-item ${active ? "active" : ""}" href="${href}">${

    oid ? `<span class="nav-oid">${esc(oid)}</span>` : ""

  }<span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(label)}</span></a>`;
}

function renderSidebar(current) {
  const r = route();
  let html = `<div class="nav-sec">Platform</div>${navItem("#/overview", "Fleet Overview", r.page === "overview")}`;
  html += `<div class="nav-sec">Opportunities</div>`;
  GROUPS.forEach(([sec, title]) => {
    const color = CATS[sec].color;
    const items = catalog.filter((o) => o.section === sec);
    const expanded = openGroups[sec] || items.some((o) => r.id === o.opportunity_id);
    html += `<div>

      <button class="group-btn" data-group="${sec}"><span style="color:${color}">▸</span> <span>${title}</span></button>

      <div class="group-body" style="display:${expanded ? "block" : "none"}">`;
    items.forEach((o) => {
      html += navItem(`#/${o.opportunity_id}`, o.title, r.id === o.opportunity_id, o.opportunity_id);
    });
    html += `</div></div>`;
  });
  document.getElementById("sidebar").innerHTML = html;
  document.querySelectorAll("[data-group]").forEach((btn) => {
    btn.onclick = () => {
      const g = btn.dataset.group;
      openGroups[g] = !openGroups[g];
      renderSidebar();
    };
  });
}

function drawChart(canvas, pts, color, xType) {
  if (!canvas || !pts.length) return;
  const ctx = canvas.getContext("2d");
  const w = (canvas.width = canvas.clientWidth * 2);
  const h = (canvas.height = canvas.clientHeight * 2);
  ctx.clearRect(0, 0, w, h);
  const ys = pts.flatMap((p) => [p.baseline, p.optimized]);
  const ymin = Math.min(...ys);
  const ymax = Math.max(...ys);
  const span = ymax - ymin || 1;
  const xOf = (i) => (i / Math.max(pts.length - 1, 1)) * w;
  const yOf = (v) => h - ((v - ymin) / span) * (h - 24) - 12;
  ctx.strokeStyle = "rgba(255,255,255,0.06)";
  ctx.lineWidth = 2;
  for (let i = 1; i < 4; i++) {
    ctx.beginPath();
    ctx.moveTo(0, (h / 4) * i);
    ctx.lineTo(w, (h / 4) * i);
    ctx.stroke();
  }
  const line = (key, stroke, dash) => {
    ctx.beginPath();
    ctx.strokeStyle = stroke;
    ctx.lineWidth = 4;
    ctx.setLineDash(dash || []);
    pts.forEach((p, i) => {
      const x = xOf(i);
      const y = yOf(p[key]);
      if (i === 0) ctx.moveTo(x, y);
      else ctx.lineTo(x, y);
    });
    ctx.stroke();
    ctx.setLineDash([]);
  };
  line("baseline", "#64748b", [10, 8]);
  line("optimized", color);
}

function sliderDefaults(item) {
  const v = {};
  (item.sliders || []).forEach((s) => {
    v[s.key] = sliders[s.key] ?? s.default;
  });
  return v;
}

function fmtSlider(v, unit, step) {
  const d = step < 1 ? 2 : 0;
  return `${Number(v).toFixed(d)}${unit ? ` ${unit}` : ""}`;
}

function renderOverview() {
  tab = "ops";
  const sections = GROUPS.map(([sec, title]) => {
    const cards = catalog
      .filter((o) => o.section === sec)
      .map(
        (o) => `<a class="glass-card" href="#/${o.opportunity_id}">

        <div>

          <div style="display:flex;justify-content:space-between;gap:8px">

            <span class="mono" style="font-size:10px;padding:2px 6px;border-radius:6px;border:1px solid rgba(34,211,238,0.25);background:rgba(6,182,212,0.1);color:#67e8f9">${esc(o.opportunity_id)}</span>

            <span class="badge badge-warn">AWAITING TELEMETRY</span>

          </div>

          <h3 style="font-size:15px;margin:12px 0 0;font-weight:600">${esc(o.title)}</h3>

        </div>

        <div class="muted" style="font-size:11px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,0.06)">

          GUIDE_POTENTIAL ${esc(String(o.pct))}% · ${esc(o.control_kind || "control")}

        </div>

      </a>`
      )
      .join("");
    return `<section style="margin-bottom:28px">

      <h2 class="muted" style="font-size:11px;letter-spacing:0.16em;text-transform:uppercase;margin:0 0 10px">${esc(title)}</h2>

      <div class="kpi-grid">${cards}</div>

    </section>`;
  }).join("");
  document.getElementById("root").innerHTML = `

    <div style="margin-bottom:20px">

      <div class="muted" style="font-size:10px;letter-spacing:0.18em;text-transform:uppercase">Fleet</div>

      <h1 style="margin:6px 0 0;font-size:1.55rem">Overview</h1>

      <p class="muted" style="max-width:42rem">Same Control Center as the product: O1–O20, Operations vs OEH guide. This Space has no live BMS — telemetry stays AWAITING / SIMULATED. Guide % is GUIDE_POTENTIAL, not measured kWh.</p>

    </div>${sections}`;
}

function renderGuide(item) {
  const cat = CATS[item.section] || CATS.scheduling;
  const v = sliderDefaults(item);
  const pts = window.OehPhysics.seriesFor(item.opportunity_id, v, item.x_type);
  const metrics = window.OehPhysics.metricsFor(item.opportunity_id, pts, v);
  const effectivePct = included ? (item.pct * achieved) / 100 : 0;
  const dollars = annualCost * (effectivePct / 100);
  const optWidth = included ? Math.max(100 - effectivePct, 4) : 100;
  const circ = 2 * Math.PI * 32;
  const dash = (item.pct / 100) * circ;
  const equip = String(item.equipment || "")
    .split(",")
    .map((s) => s.trim())
    .filter(Boolean);
  const sliderHtml = (item.sliders || [])
    .map(
      (sl) => `<label>

        <span class="mono muted" style="font-size:11px">${esc(sl.label)}</span>

        <div style="display:flex;align-items:center;gap:8px;margin-top:4px">

          <input type="range" data-key="${esc(sl.key)}" min="${sl.min}" max="${sl.max}" step="${sl.step}" value="${v[sl.key]}" style="accent-color:${cat.color};flex:1" />

          <span class="mono" style="width:4.5rem;text-align:right;font-size:11px;color:${cat.color}">${fmtSlider(v[sl.key], sl.unit, sl.step)}</span>

        </div>

      </label>`
    )
    .join("");
  return `

    <div class="kpi-tile" style="display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap">

      <div>

        <div class="mono" style="font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:${cat.color}">OEH guide ${esc(item.opportunity_id)} · SIMULATED — not live BMS · agent read-only</div>

        <p style="color:#cbd5e1;max-width:42rem">${esc(item.summary)}</p>

      </div>

      <div style="display:flex;align-items:center;gap:16px">

        <button type="button" id="include-btn" style="background:none;border:0;cursor:pointer;text-align:center">

          <div class="mono muted" style="font-size:9px;text-transform:uppercase">Include in savings estimate</div>

          <div style="width:3.5rem;height:1.75rem;border-radius:999px;border:1px solid ${included ? "#34d399" : "rgba(255,255,255,0.2)"};background:${included ? "rgba(16,185,129,0.2)" : "rgba(255,255,255,0.05)"};position:relative;margin:6px auto">

            <span style="position:absolute;top:2px;width:1.25rem;height:1.25rem;border-radius:999px;background:${included ? "#34d399" : "#64748b"};left:${included ? "1.95rem" : "2px"}"></span>

          </div>

          <div class="mono" style="font-size:9px;color:${included ? "#6ee7b7" : "#64748b"}">${included ? "INCLUDED" : "NOT INCLUDED"}</div>

        </button>

        <div style="position:relative;width:76px;height:76px">

          <svg width="76" height="76" viewBox="0 0 76 76" style="transform:rotate(-90deg)">

            <circle cx="38" cy="38" r="32" stroke="rgba(255,255,255,0.08)" stroke-width="6" fill="none"></circle>

            <circle cx="38" cy="38" r="32" stroke="${cat.color}" stroke-width="6" fill="none" stroke-linecap="round" stroke-dasharray="${circ}" stroke-dashoffset="${circ - dash}"></circle>

          </svg>

          <div style="position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center" class="mono">

            <strong>${item.pct}%</strong>

            <span class="muted" style="font-size:8px;text-transform:uppercase">OEH potential</span>

          </div>

        </div>

      </div>

    </div>

    <div class="kpi-tile" style="margin-top:12px">

      <div class="mono muted" style="font-size:10px;text-transform:uppercase;margin-bottom:8px">Guide comparison (simulated) — ${esc(item.scope)}</div>

      <div style="display:flex;align-items:center;gap:12px;margin-bottom:8px"><span class="mono muted" style="width:6rem;font-size:11px">Baseline</span><div style="flex:1;height:20px;border-radius:4px;background:rgba(255,255,255,0.06)"><div style="height:100%;width:100%;background:#64748b"></div></div><span class="mono" style="width:2.5rem;text-align:right;font-size:11px">100%</span></div>

      <div style="display:flex;align-items:center;gap:12px"><span class="mono muted" style="width:6rem;font-size:11px">Optimized</span><div style="flex:1;height:20px;border-radius:4px;background:rgba(255,255,255,0.06)"><div style="height:100%;width:${optWidth}%;background:${cat.color}"></div></div><span class="mono" style="width:2.5rem;text-align:right;font-size:11px;color:${cat.color}">${optWidth.toFixed(0)}%</span></div>

    </div>

    <div class="kpi-tile" style="margin-top:12px">

      <div class="mono muted" style="font-size:10px;text-transform:uppercase;margin-bottom:12px">Simulation console — ${esc(item.sim_label)}</div>

      <div class="slider-row" id="guide-sliders">${sliderHtml}</div>

      <div class="chart-wrap" style="margin-top:12px"><canvas id="guide-chart"></canvas></div>

      <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding-top:12px;margin-top:8px;border-top:1px solid rgba(255,255,255,0.06)">

        ${metrics.map((m) => `<div><div class="mono" style="font-size:18px;font-weight:700;color:${cat.color}">${esc(m.value)}</div><div class="mono muted" style="font-size:9px;text-transform:uppercase;margin-top:4px">${esc(m.label)}</div></div>`).join("")}

      </div>

    </div>

    <div class="kpi-tile" style="margin-top:12px">

      <div class="mono muted" style="font-size:10px;text-transform:uppercase;margin-bottom:8px">Savings Calculator</div>

      <p class="muted" style="font-size:11px">Not verified M&amp;V. Not a BMS result. Assumed spend only.</p>

      <div class="slider-row">

        <label><span class="mono muted" style="font-size:11px">Assumed annual ${esc(item.scope)} spend (USD)</span>

          <div style="margin-top:6px;display:flex;align-items:center;gap:4px;border:1px solid rgba(255,255,255,0.1);border-radius:6px;padding:0 8px;background:rgba(0,0,0,0.2)">

            <span class="muted">$</span>

            <input id="annual" type="number" min="0" step="1000" value="${annualCost}" style="width:100%;background:transparent;border:0;padding:8px;outline:none" class="mono" />

          </div>

        </label>

        <label><span class="mono muted" style="font-size:11px">Assumed achievement (% of OEH max ${item.pct}%)</span>

          <div style="display:flex;align-items:center;gap:8px;margin-top:10px">

            <input id="achieved" type="range" min="0" max="100" value="${achieved}" style="flex:1;accent-color:${cat.color}" />

            <span class="mono" style="color:${cat.color};width:2.5rem;text-align:right">${achieved}%</span>

          </div>

        </label>

      </div>

      <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px;padding-top:12px;border-top:1px solid rgba(255,255,255,0.06)">

        <div><div class="mono" style="font-size:18px;font-weight:700;${included ? `color:${cat.color}` : "color:#475569"}">${effectivePct.toFixed(1)}%</div><div class="mono muted" style="font-size:9px;text-transform:uppercase;margin-top:4px">Effective saving</div></div>

        <div><div class="mono" style="font-size:18px;font-weight:700;${included ? `color:${cat.color}` : "color:#475569"}">$${Math.round(dollars).toLocaleString()}</div><div class="mono muted" style="font-size:9px;text-transform:uppercase;margin-top:4px">Estimated $ / year</div></div>

        <div><div class="mono" style="font-size:18px;font-weight:700;${included ? `color:${cat.color}` : "color:#475569"}">$${Math.round(dollars * 5).toLocaleString()}</div><div class="mono muted" style="font-size:9px;text-transform:uppercase;margin-top:4px">Projected / 5 years</div></div>

      </div>

    </div>

    ${item.scenario ? `<div class="kpi-tile" style="margin-top:12px;background:${cat.color}26;border-color:${cat.color}"><div class="mono" style="font-size:10px;text-transform:uppercase;color:${cat.color};margin-bottom:6px">Field result · OEH example (not this building)</div><p style="margin:0">${esc(item.scenario)}</p></div>` : ""}

    <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px">

      <div class="kpi-tile"><div class="mono muted" style="font-size:10px;text-transform:uppercase;margin-bottom:8px">Control Principle</div><p style="margin:0;color:#cbd5e1">${esc(item.principle)}</p></div>

      <div class="kpi-tile"><div class="mono muted" style="font-size:10px;text-transform:uppercase;margin-bottom:8px">Typical current practice</div><p style="margin:0;color:#cbd5e1">${esc(item.practice)}</p></div>

      <div class="kpi-tile"><div class="mono muted" style="font-size:10px;text-transform:uppercase;margin-bottom:8px">Recommended action</div><p style="margin:0;color:#cbd5e1">${esc(item.recommendation)}</p></div>

    </div>

    <div class="kpi-tile" style="margin-top:12px">

      <div class="mono muted" style="font-size:10px;text-transform:uppercase;margin-bottom:8px">Commissioning checklist — minimum equipment</div>

      <ul style="display:grid;grid-template-columns:1fr 1fr;gap:8px;list-style:none;padding:0;margin:0">

        ${equip

          .map(

            (eq, i) => `<li><button type="button" class="check-eq" data-i="${i}" style="background:none;border:0;display:flex;gap:8px;text-align:left;cursor:pointer;color:#cbd5e1">

              <span style="width:16px;height:16px;border-radius:4px;border:1px solid ${checks[i] ? cat.color : "rgba(255,255,255,0.2)"};background:${checks[i] ? cat.color : "transparent"};flex-shrink:0;margin-top:2px"></span>

              <span style="${checks[i] ? "text-decoration:line-through;color:#64748b" : ""}">${esc(eq)}</span>

            </button></li>`

          )

          .join("")}

      </ul>

    </div>

    <div style="display:flex;gap:8px;margin-top:12px">

      ${item.prev_id ? `<a class="btn-secondary mono" style="flex:1;font-size:11px" href="#/${item.prev_id}">← ${esc(item.prev_id)}</a>` : `<div style="flex:1"></div>`}

      ${item.next_id ? `<a class="btn-secondary mono" style="flex:1;font-size:11px" href="#/${item.next_id}">${esc(item.next_id)} →</a>` : ""}

    </div>`;
}

function bindGuide(item) {
  const cat = CATS[item.section] || CATS.scheduling;
  const canvas = document.getElementById("guide-chart");
  const v = sliderDefaults(item);
  drawChart(canvas, window.OehPhysics.seriesFor(item.opportunity_id, v, item.x_type), cat.color, item.x_type);
  document.getElementById("include-btn")?.addEventListener("click", () => {
    included = !included;
    render();
  });
  document.getElementById("annual")?.addEventListener("change", (e) => {
    annualCost = Number(e.target.value) || 0;
    render();
  });
  document.getElementById("achieved")?.addEventListener("input", (e) => {
    achieved = Number(e.target.value);
    render();
  });
  document.querySelectorAll("#guide-sliders input").forEach((input) => {
    input.addEventListener("input", () => {
      sliders[input.dataset.key] = Number(input.value);
      render();
    });
  });
  document.querySelectorAll(".check-eq").forEach((btn) => {
    btn.addEventListener("click", () => {
      const i = Number(btn.dataset.i);
      checks[i] = !checks[i];
      render();
    });
  });
}

function renderOps(item) {
  const inputs = (item.required_inputs || []).map((x) => `<li>${esc(x)}</li>`).join("");
  const risks = (item.risks || []).map((x) => `<li>${esc(x)}</li>`).join("");
  return `

    <div class="kpi-tile" style="border-color:rgba(251,191,36,0.25)">

      <div class="badge badge-warn">AWAITING TELEMETRY</div>

      <p style="margin:10px 0 0;color:#cbd5e1">No live BMS in this Space. Operations KPIs stay empty on purpose — same contract as the product (NO LIVE DATA / AWAITING TELEMETRY). Open <strong>OEH guide</strong> for the teaching simulation used in the app.</p>

    </div>

    <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px">

      <div class="kpi-tile"><div class="mono muted" style="font-size:10px;text-transform:uppercase">Telemetry</div><strong>NO DATA</strong></div>

      <div class="kpi-tile"><div class="mono muted" style="font-size:10px;text-transform:uppercase">ML</div><strong>NO DATA</strong></div>

      <div class="kpi-tile"><div class="mono muted" style="font-size:10px;text-transform:uppercase">BMS</div><strong>OFFLINE</strong></div>

      <div class="kpi-tile"><div class="mono muted" style="font-size:10px;text-transform:uppercase">Dispatch</div><strong>WRITE OFF</strong></div>

    </div>

    <div class="kpi-tile" style="margin-top:12px">

      <div class="mono muted" style="font-size:10px;text-transform:uppercase;margin-bottom:8px">Recommended control logic</div>

      <p style="margin:0;color:#cbd5e1">${esc(item.recommended_control_logic || item.principle)}</p>

    </div>

    <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px">

      <div class="kpi-tile"><div class="mono muted" style="font-size:10px;text-transform:uppercase;margin-bottom:8px">Required inputs</div><ul class="muted">${inputs}</ul></div>

      <div class="kpi-tile"><div class="mono muted" style="font-size:10px;text-transform:uppercase;margin-bottom:8px">Risks</div><ul class="muted">${risks}</ul></div>

    </div>`;
}

function renderOpportunity(item) {
  const cat = CATS[item.section] || CATS.scheduling;
  const kind = item.control_kind === "advisory" ? "Advisory — no automatic plant write" : "Supervisory control (simulation)";
  document.getElementById("root").innerHTML = `

    <div class="workspace" style="border-top:3px solid ${cat.color}">

      <div style="padding:20px 20px 12px">

        <div class="muted" style="font-size:11px">${esc(CATS[item.section]?.label || item.section)} / ${esc(item.opportunity_id)}</div>

        <div class="mono" style="font-size:10px;letter-spacing:0.18em;color:#22d3ee;margin-top:8px">${esc(item.opportunity_id)}</div>

        <h1 style="margin:6px 0 0;font-size:1.55rem;font-weight:600">${esc(item.title)}</h1>

        <p class="muted" style="max-width:42rem">${esc(item.summary)}</p>

        <div style="display:flex;flex-wrap:wrap;gap:6px;margin-top:12px">

          <span class="badge badge-warn">Telemetry NO DATA</span>

          <span class="badge badge-muted">ML NO DATA</span>

          <span class="badge badge-danger">BMS OFFLINE</span>

          <span class="badge badge-muted">${esc(kind)}</span>

        </div>

      </div>

      <div style="display:flex;gap:4px;padding:0 20px 16px" role="tablist">

        <button class="tab-btn" data-tab="ops" ${tab === "ops" ? `style="border-color:${cat.color};color:${cat.color};background:${cat.color}18"` : ""}>Operations</button>

        <button class="tab-btn" data-tab="guide" ${tab === "guide" ? `style="border-color:${cat.color};color:${cat.color};background:${cat.color}18"` : ""}>OEH guide</button>

      </div>

    </div>

    <div id="studio" style="margin-top:16px">${tab === "guide" ? renderGuide(item) : renderOps(item)}</div>`;
  document.querySelectorAll(".tab-btn").forEach((btn) => {
    btn.onclick = () => {
      tab = btn.dataset.tab;
      if (tab === "guide") {
        sliders = {};
        checks = {};
      }
      render();
    };
  });
  if (tab === "guide") bindGuide(item);
}

function render() {
  renderSidebar();
  const r = route();
  if (r.page === "opp") renderOpportunity(byId[r.id]);
  else renderOverview();
}

fetch("catalog.json")
  .then((r) => r.json())
  .then((data) => {
    catalog = data;
    byId = Object.fromEntries(data.map((o) => [o.opportunity_id, o]));
    let lastId = null;
    window.addEventListener("hashchange", () => {
      const r = route();
      if (r.id !== lastId) {
        sliders = {};
        checks = {};
        lastId = r.id || null;
      }
      render();
    });
    render();
  })
  .catch(() => {
    document.getElementById("root").textContent = "Could not load catalog.json";
  });