/*
 * Browser-side controller for the Adaptive Barrier Monitor demo (Monte Carlo showcase).
 *
 * Runs a simulation and renders each path with adaptive sampling (cyan) and
 * either an equal-budget or independently fixed-cadence baseline (grey).
 */

const state = { lastResult: null };

// ---- helpers ----

function $(id) { return document.getElementById(id); }

async function fetchJson(url, options = {}) {
  const resp = await fetch(url, options);
  const text = await resp.text();
  let payload;
  try { payload = text ? JSON.parse(text) : {}; } catch { payload = { detail: text }; }
  if (!resp.ok) {
    const detail = payload.detail ?? payload;
    throw new Error(typeof detail === "string" ? detail : JSON.stringify(detail, null, 2));
  }
  return payload;
}

function setBusy(button, busy) {
  button.disabled = busy;
  button.textContent = busy ? "Working…" : (button.dataset.label || button.textContent);
}

function showWarnings(warnings) {
  const box = $("warning-box");
  const norm = (warnings || []).filter(Boolean).map(String);
  if (norm.length === 0) { box.hidden = true; box.textContent = ""; return; }
  box.hidden = false;
  box.textContent = norm.join("\n");
}

// ---- slider ↔ number sync ----

function bindRange(id) {
  const range = $(id);
  const num = $(id + "-val");
  if (!range || !num) return;
  range.addEventListener("input", () => { num.value = parseFloat(range.value); });
  num.addEventListener("change", () => { range.value = parseFloat(num.value); });
}

function bindLogRange(id) {
  const range = $(id);
  const num = $(id + "-val");
  if (!range || !num) return;
  range.addEventListener("input", () => { num.value = Number(range.value).toExponential(4); });
  num.addEventListener("change", () => { range.value = parseFloat(num.value); });
}

function updateComparisonModeCopy() {
  const mode = $("mc-comparison-mode").value;
  const fixedCadence = mode === "fixed_cadence";
  $("mc-fixed-cadence-row").hidden = !fixedCadence;

  if (fixedCadence) {
    $("fixed-explanation").innerHTML =
      'A <strong>fixed-cadence</strong> sampler that observes every chosen number of minutes, independently of the adaptive sample count.';
    $("headline-explanation").textContent =
      'The schedules use independent sample counts. Compare detections, lag, and total observations to see the quality–cost trade-off.';
    $("comparison-note").innerHTML =
      'The fixed monitor samples at the selected cadence. The experiment compares <strong>detection quality and observation cost</strong>.';
    $("allocation-method").innerHTML =
      '<strong>Allocate samples:</strong> adaptive intervals shrink near the closest barrier; the fixed monitor samples at the selected cadence.';
    $("method-conclusion").textContent =
      'The headline compares detections, mean lag, and total observations under independent schedules.';
  } else {
    $("fixed-explanation").innerHTML =
      'An exactly equal-budget <strong>fixed-rate</strong> sampler: each path receives the same number of observations as its adaptive counterpart, spread uniformly.';
    $("headline-explanation").textContent =
      'Same paths and exactly the same sample budget. The comparison reports which schedule confirms more lower and upper barrier events before the detection deadline.';
    $("comparison-note").innerHTML =
      'The adaptive and fixed monitors receive the <strong>same number of samples on every path</strong>. The experiment therefore compares sample placement—not computational cost.';
    $("allocation-method").innerHTML =
      '<strong>Allocate samples:</strong> adaptive intervals shrink near the closest barrier; the fixed monitor receives the exact same sample count, spaced uniformly.';
    $("method-conclusion").textContent =
      'The headline compares detections and mean lag under an equal sample budget.';
  }
}

// ---- Plotly helpers ----

const PLOTLY_CONFIG = {
  displayModeBar: true,
  modeBarButtonsToRemove: ["lasso2d", "select2d"],
  displaylogo: false,
  responsive: true,
};

const PLOTLY_LAYOUT = {
  font: { color: "#A9B1D6", family: "Inter, sans-serif" },
  paper_bgcolor: "#1A1B26",
  plot_bgcolor: "#1A1B26",
  xaxis: { gridcolor: "rgba(120,124,153,0.15)", zerolinecolor: "rgba(120,124,153,0.3)" },
  yaxis: { gridcolor: "rgba(120,124,153,0.15)", zerolinecolor: "rgba(120,124,153,0.3)" },
  margin: { l: 60, r: 30, t: 20, b: 50 },
  legend: { font: { color: "#A9B1D6" }, x: 0.01, y: 0.99, bgcolor: "rgba(26,27,38,0.6)" },
};

function renderPlot(data, layoutOverrides = {}) {
  Plotly.newPlot("chart-stage", data, { ...PLOTLY_LAYOUT, ...layoutOverrides }, PLOTLY_CONFIG);
}

// ---- Monte Carlo ----

async function runMonteCarlo() {
  const button = $("mc-run-btn");
  setBusy(button, true);
  showWarnings([]);
  $("result-subtitle").textContent = "Running simulation…";

  try {
    const thresholdPct = parseFloat($("mc-threshold").value);
    const risePct = parseFloat($("mc-rise-threshold").value);
    const dtcapRaw = $("mc-dtcap").value.trim();
    const seedRaw = $("mc-seed").value.trim();
    const comparisonMode = $("mc-comparison-mode").value;
    const payload = {
      S0: 100.0,
      sigma_annual: parseFloat($("mc-sigma").value),
      mu_annual: parseFloat($("mc-mu").value),
      window_minutes: parseFloat($("mc-window").value),
      n_paths: parseInt($("mc-paths").value),
      n_steps: parseInt($("mc-steps").value),
      use_jumps: $("mc-jumps").checked,
      jump_intensity: 25.0,
      jump_mean: -0.02,
      jump_sigma: 0.05,
      eps: parseFloat($("mc-eps").value),
      drop_fraction: thresholdPct / 100.0,
      rise_fraction: risePct / 100.0,
      dt_cap_minutes: dtcapRaw ? parseFloat(dtcapRaw) : null,
      rng_seed: seedRaw ? parseInt(seedRaw) : null,
      max_detection_lag_steps: parseInt($("mc-max-lag").value),
      comparison_mode: comparisonMode,
      fixed_cadence_minutes: parseFloat($("mc-fixed-cadence").value),
    };
    const r = await fetchJson("/api/simulate", {
      method: "POST", headers: { "Content-Type": "application/json" },
      body: JSON.stringify(payload),
    });
    state.lastResult = r;

    const colors = ["#2AC3DE", "#BB9AF7", "#9ECE6A", "#0DB9D7", "#B4F9F8",
                    "#FF9E64", "#7DCFFF", "#C0CAF5", "#73DACA", "#F7768E"];
    const t = r.times_minutes;
    const t0 = t[0], t1 = t[t.length - 1];
    const traces = [];

    for (let i = 0; i < r.paths.length; i++) {
      const p = r.paths[i];
      const c = colors[i % colors.length];
      traces.push({
        x: t, y: p.prices, type: "scatter", mode: "lines",
        line: { color: c, width: 0.8, opacity: 0.5 }, name: `Path ${i + 1}`, showlegend: i < 5,
      });
      if (p.sample_times.length) {
        traces.push({
          x: p.sample_times, y: p.sample_prices, type: "scatter", mode: "markers",
          marker: { color: "#2AC3DE", size: 6, symbol: "circle-open", opacity: 0.9 },
          name: "adaptive", showlegend: i === 0,
        });
      }
      if (p.fixed_sample_times.length) {
        traces.push({
          x: p.fixed_sample_times, y: p.fixed_sample_prices, type: "scatter", mode: "markers",
          marker: { color: "#787C99", size: 3, opacity: 0.5 },
          name: r.comparison_mode === "fixed_cadence" ? "fixed cadence" : "fixed equal-budget", showlegend: i === 0,
        });
      }
    }

    // Lower barrier (drop)
    traces.push({
      x: [t0, t1], y: [r.lower_barrier_price, r.lower_barrier_price], type: "scatter", mode: "lines",
      line: { color: "#F7768E", width: 2, dash: "dash" }, name: `−${thresholdPct}% lower`,
    });

    // Upper barrier (rise)
    traces.push({
      x: [t0, t1], y: [r.upper_barrier_price, r.upper_barrier_price], type: "scatter", mode: "lines",
      line: { color: "#9ECE6A", width: 2, dash: "dash" }, name: `+${risePct}% upper`,
    });

    // Lower breach markers (red X)
    const bxDown = [], byDown = [];
    for (const p of r.paths) {
      if (p.lower_breach_idx !== null) { bxDown.push(t[p.lower_breach_idx]); byDown.push(p.prices[p.lower_breach_idx]); }
    }
    if (bxDown.length) {
      traces.push({
        x: bxDown, y: byDown, type: "scatter", mode: "markers",
        marker: { color: "#F7768E", size: 13, symbol: "x", line: { width: 3 } },
        name: `↓ breaches (${bxDown.length})`,
      });
    }

    // Upper breach markers (green triangles)
    const bxUp = [], byUp = [];
    for (const p of r.paths) {
      if (p.upper_breach_idx !== null) { bxUp.push(t[p.upper_breach_idx]); byUp.push(p.prices[p.upper_breach_idx]); }
    }
    if (bxUp.length) {
      traces.push({
        x: bxUp, y: byUp, type: "scatter", mode: "markers",
        marker: { color: "#9ECE6A", size: 13, symbol: "triangle-up", line: { width: 3 } },
        name: `↑ breaches (${bxUp.length})`,
      });
    }

    renderPlot(traces, {
      xaxis: { title: "Time (minutes)" },
      yaxis: { title: "Price ($)" },
      showlegend: r.paths.length <= 10,
    });

    // Headline tiles — use explicit event counts and method labels.
    // A barrier event is the first lower-barrier or upper-barrier crossing on a path.
    // One path can therefore contribute up to two events.
    const nEvents = r.n_barrier_events ?? r.n_breaches;
    const nLowerEvents = r.n_lower_events ?? r.n_lower_breaches;
    const nUpperEvents = r.n_upper_events ?? r.n_upper_breaches;
    const number = new Intl.NumberFormat();

    const directionSummary = (lowerCaught, upperCaught) => {
      const lower = nLowerEvents > 0
        ? `↓ ${lowerCaught} of ${nLowerEvents} lower`
        : "↓ no lower events";
      const upper = nUpperEvents > 0
        ? `↑ ${upperCaught} of ${nUpperEvents} upper`
        : "↑ no upper events";
      return `${lower} · ${upper}`;
    };

    $("hl-adaptive").textContent = nEvents > 0
      ? `${r.adaptive_detections} of ${nEvents}` : "No events";
    $("hl-fixed").textContent = nEvents > 0
      ? `${r.fixed_detections} of ${nEvents}` : "No events";
    $("hl-adaptive-sub").textContent = directionSummary(
      r.adaptive_lower_detections,
      r.adaptive_upper_detections,
    );
    $("hl-fixed-sub").textContent = directionSummary(
      r.fixed_lower_detections,
      r.fixed_upper_detections,
    );

    const equalBudgetMode = r.comparison_mode === "equal_budget";
    $("hl-samples").textContent = equalBudgetMode
      ? `${number.format(r.adaptive_total_samples)} each`
      : `A ${number.format(r.adaptive_total_samples)} · F ${number.format(r.fixed_total_samples)}`;
    $("hl-samples-sub").textContent = equalBudgetMode
      ? "same count on every path"
      : `adaptive · fixed every ${number.format(r.fixed_cadence_minutes)} min`;

    const adaptiveLag = (r.mean_detection_lag !== null && r.mean_detection_lag !== undefined)
      ? r.mean_detection_lag.toFixed(1) : "–";
    const fixedLag = (r.mean_fixed_detection_lag !== null && r.mean_fixed_detection_lag !== undefined)
      ? r.mean_fixed_detection_lag.toFixed(1) : "–";
    $("hl-lag").textContent = `${adaptiveLag} vs ${fixedLag}`;

    const breachedPaths = r.n_paths_with_any_breach ?? r.paths.filter(
      (path) => path.lower_breach_idx !== null || path.upper_breach_idx !== null,
    ).length;
    $("result-subtitle").textContent =
      `${nEvents} barrier events across ${breachedPaths} of ${r.n_paths} paths` +
      ` · ${nLowerEvents} lower, ${nUpperEvents} upper` +
      ` · deadline ≤${r.max_detection_lag_steps} grid steps` +
      (r.comparison_mode === "fixed_cadence"
        ? ` · fixed every ${r.fixed_cadence_minutes} min`
        : " · equal budget") +
      (r.use_jumps ? " · Merton jumps" : " · pure GBM");

    $("stats-json").textContent = JSON.stringify({
      threshold_pct: thresholdPct,
      rise_pct: risePct,
      seed: payload.rng_seed,
      n_paths: r.n_paths,
      n_paths_with_any_breach: r.n_paths_with_any_breach,
      n_barrier_events: r.n_barrier_events ?? r.n_breaches,
      n_lower_events: r.n_lower_events ?? r.n_lower_breaches,
      n_upper_events: r.n_upper_events ?? r.n_upper_breaches,
      adaptive_detections: r.adaptive_detections,
      adaptive_lower_detections: r.adaptive_lower_detections,
      adaptive_upper_detections: r.adaptive_upper_detections,
      fixed_detections: r.fixed_detections,
      fixed_lower_detections: r.fixed_lower_detections,
      fixed_upper_detections: r.fixed_upper_detections,
      adaptive_total_samples: r.adaptive_total_samples,
      fixed_total_samples: r.fixed_total_samples,
      mean_detection_lag: r.mean_detection_lag,
      mean_lower_detection_lag: r.mean_lower_detection_lag,
      mean_upper_detection_lag: r.mean_upper_detection_lag,
      sigma_annual: r.sigma_annual,
      mu_annual: r.mu_annual,
      eps: r.eps,
      drop_fraction: r.drop_fraction,
      rise_fraction: r.rise_fraction,
      dt_cap_minutes: r.dt_cap_minutes,
      max_detection_lag_steps: r.max_detection_lag_steps,
      comparison_mode: r.comparison_mode,
      fixed_cadence_minutes: r.fixed_cadence_minutes,
      grid_step_minutes: r.grid_step_minutes,
      model_scope: r.model_scope,
    }, null, 2);

    const warnings = [];
    if (r.use_jumps) {
      warnings.push("Jump stress test: ε is derived from a continuous diffusion and does not bound missed jump events.");
    }
    if (r.comparison_mode === "fixed_cadence" && r.fixed_cadence_minutes < r.grid_step_minutes) {
      warnings.push(`The requested fixed cadence (${r.fixed_cadence_minutes} min) is finer than the simulation grid (${r.grid_step_minutes.toFixed(2)} min), so it is limited to one sample per grid point.`);
    }
    if (r.n_breaches === 0) {
      warnings.push("No barrier events occurred in this run. Increase the horizon/volatility, lower the thresholds, or choose another seed.");
    }
    showWarnings(warnings);
  } catch (err) {
    showWarnings([err.message]);
  } finally {
    setBusy(button, false);
  }
}


/** Initialize collapsible parameter cards. */
function initCollapsibleCards() {
  document.querySelectorAll(".card.collapsible > h2").forEach((heading) => {
    const card = heading.parentElement;
    heading.addEventListener("click", () => {
      card.classList.toggle("collapsed");
    });
  });
}

// ---- init ----

async function init() {
  $("mc-run-btn").dataset.label = "Run simulation";

  try {
    await fetchJson("/api/health");
    $("health").textContent = "ready";
  } catch {
    $("health").textContent = "offline";
  }

  bindRange("mc-sigma");
  bindLogRange("mc-eps");
  updateComparisonModeCopy();
  initCollapsibleCards();

  $("mc-comparison-mode").addEventListener("change", async () => {
    updateComparisonModeCopy();
    await runMonteCarlo();
  });
  $("mc-run-btn").addEventListener("click", runMonteCarlo);

  // Enter opens on a compelling scenario immediately.
  await runMonteCarlo();
}

init().catch(err => {
  $("health").textContent = `Error: ${err.message}`;
  showWarnings(["Initialization error: " + err.message]);
  console.error(err);
});