/* Slipstream dashboard — fund (automated) + informational picks (no manual trading). */
const $ = (s, el = document) => el.querySelector(s);
const escapeHtml = s => String(s ?? "").replace(/[&<>"']/g,
  c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));
const usd = n => (n ?? 0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });

async function loadHealth() {
  const h = await fetch("/api/health").then(r => r.json()).catch(() => ({}));
  const b = $("#env-badge");
  if (!h.alpaca_configured) { b.textContent = "Alpaca: not configured"; return; }
  b.textContent = h.alpaca_paper ? "PAPER" : "LIVE";
  b.classList.add(h.alpaca_paper ? "paper" : "live");
}

/* ---------- status line ---------- */
async function loadStatus() {
  const el = $("#statusline"); if (!el) return;
  const s = await fetch("/api/status").then(r => r.ok ? r.json() : null).catch(() => null);
  if (!s) { el.innerHTML = `<span class="st muted">Status unavailable — add Alpaca secrets on the Space</span>`; return; }
  const open = s.market?.is_open;
  const fmt = t => t ? new Date(t).toLocaleString(undefined, { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" }) : "—";
  const next = open ? `closes ${fmt(s.market.next_close)}` : `opens ${fmt(s.market.next_open)}`;
  const done = s.rebalanced_this_month;
  el.innerHTML = `
    <span class="st"><i class="dotk ${open ? "open" : "closed"}"></i> Market <b>${open ? "open" : "closed"}</b> · ${next}</span>
    <span class="st"><i class="dotk ${done ? "yes" : "no"}"></i> This month: <b>${done ? "rebalanced" : "pending"}</b></span>
    <span class="st">Last order: <b>${s.last_order || "none yet"}</b></span>
    <span class="st">Auto-rebalance: <b>${s.rebalance_enabled ? "on" : "off (set REBALANCE_TOKEN)"}</b> · monthly, 1st trading day</span>`;
}

/* ---------- fund ---------- */
async function loadFund() {
  const resp = await fetch("/api/fund");
  const hold = $("#holdings");
  if (!resp.ok) { hold.innerHTML = `<p class="error">${(await resp.json().catch(()=>({}))).detail || "Fund unavailable — add Alpaca secrets"}</p>`; return; }
  const p = await resp.json();
  const dayPl = p.equity - p.last_equity, dayPct = p.last_equity ? dayPl / p.last_equity * 100 : 0;
  const invested = p.equity ? (1 - p.cash / p.equity) * 100 : 0;
  $("#kpis").innerHTML = [
    ["Equity", `$${usd(p.equity)}`, ""],
    ["Day P/L", `${dayPl >= 0 ? "+" : "−"}$${usd(Math.abs(dayPl))}`, dayPl >= 0 ? "pl-pos" : "pl-neg"],
    ["Day %", `${dayPct >= 0 ? "▲ +" : "▼ "}${dayPct.toFixed(2)}%`, dayPct >= 0 ? "pl-pos" : "pl-neg"],
    ["Cash", `$${usd(p.cash)}`, ""],
    ["Invested", `${invested.toFixed(0)}%`, ""],
  ].map(([l, v, c]) => `<div class="kpi"><div class="kpi-l">${l}</div><div class="kpi-v ${c}">${v}</div></div>`).join("");

  $("#holdings-n").textContent = `${p.positions.length} names`;
  const maxw = Math.max(0.01, ...p.positions.map(x => x.weight));
  hold.innerHTML = p.positions.length ? `<table><thead><tr>
    <th>Symbol</th><th>Weight</th><th>Qty</th><th>Price</th><th>P/L %</th><th>Value</th></tr></thead><tbody>
    ${p.positions.map(x => `<tr>
      <td class="sym">${escapeHtml(x.symbol)}<div class="wbar"><i style="width:${(x.weight/maxw*100).toFixed(0)}%"></i></div></td>
      <td>${(x.weight*100).toFixed(1)}%</td><td>${x.qty.toFixed(2)}</td><td>$${x.current.toFixed(2)}</td>
      <td class="${x.pl_pct>=0?"pl-pos":"pl-neg"}">${x.pl_pct>=0?"+":""}${x.pl_pct}%</td>
      <td>$${usd(x.market_value)}</td></tr>`).join("")}</tbody></table>`
    : "<p class='muted'>No open positions yet — run a rebalance to build the book.</p>";
}

/* ---------- target book ---------- */
async function loadTarget() {
  const t = await fetch("/api/target").then(r => r.json()).catch(() => null);
  if (!t) return;
  const on = t.book === "base";
  const chip = $("#regime");
  chip.textContent = t.regime;
  chip.classList.add(on ? "on" : "off");
  $("#target").innerHTML = t.holdings.map(h => `<div class="tgt-row">
    <span class="t-sym">${escapeHtml(h.ticker)}</span><span class="t-sec">${escapeHtml(h.sector)}</span>
    <span class="t-w">${(h.weight*100).toFixed(1)}%</span></div>`).join("")
    + `<p class="as-of">${t.n_holdings} holdings · signals as-of ${escapeHtml(t.signals_as_of)} · bundle prices ${escapeHtml(t.prices_through)}`
    + (t.spy_through && t.spy_through !== t.prices_through ? ` · SPY live through ${escapeHtml(t.spy_through)}` : "")
    + `<br>${escapeHtml(t.rule)}</p>`;
  renderRiskScreen(t.risk_screen);
}

/* ---------- AI event-risk screen (shows the overlay's power) ---------- */
function renderRiskScreen(rs) {
  const el = $("#riskscreen"); if (!el) return;
  if (!rs || !rs.enabled) { el.innerHTML = ""; return; }
  const ex = rs.excluded || [];
  const head = ex.length
    ? `<span class="rs-hit">${ex.length} excluded</span> · ${rs.cleared}/${rs.scanned} candidates cleared`
    : `<span class="rs-ok">all clear</span> · ${rs.scanned} candidates scanned, no material adverse events`;
  const li = e => `<li><span class="rs-sev rs-${escapeHtml(e.severity)}">${escapeHtml(e.severity)}</span>
    <b>${escapeHtml(e.ticker)}</b> — ${escapeHtml(e.event)} <span class="rs-cat">${escapeHtml(e.category)}</span>
    ${e.headline ? `<span class="rs-src">“${escapeHtml(e.headline)}”</span>` : ""}</li>`;
  const rows = ex.map(li).join("");
  const med = (rs.flags_medium || []);
  const medRows = med.map(li).join("");
  el.innerHTML = `<div class="rs-head">🛡 AI Risk Screen — ${head}</div>` +
    (rows ? `<ul class="rs-list">${rows}</ul>` : "") +
    (medRows ? `<div class="rs-sub">Monitoring (below exclusion threshold — held):</div><ul class="rs-list">${medRows}</ul>` : "") +
    `<p class="rs-note">A second-stage AI overlay scans the final candidates for <b>concrete, recent adverse events</b> —
     legal · regulatory/FDA · geopolitical/trade · operational · competitive — and hard-excludes only <b>critical</b> hits
     (threats to the company itself; replaced by the next-ranked name). High and medium events are shown above and held.
     Ongoing, already-priced risks are deliberately ignored.</p>`;
}

async function previewRebalance() {
  const out = $("#rebal-out");
  out.textContent = "Computing plan…";
  const r = await fetch("/api/rebalance?dry=1", { method: "POST" }).then(r => r.json()).catch(() => null);
  if (!r || r.detail) { out.innerHTML = `<span class="error">${r?.detail || "unavailable"}</span>`; return; }
  const cashLine = r.projected_cash != null
    ? ` · cash after: $${usd(r.projected_cash)} (buffer $${usd(r.cash_buffer_usd)})` : "";
  if (!r.n_trades) { out.textContent = `Portfolio already matches target — no trades needed${cashLine}.`; return; }
  out.innerHTML = `<div class="muted">${r.n_trades} trades to match target (min $${usd(r.min_trade_usd)})${cashLine} · dry-run</div>`
    + r.trades.slice(0, 24).map(t => `<div class="trade"><span class="t-${escapeHtml(t.action)}">${escapeHtml(t.action.toUpperCase())} ${escapeHtml(t.symbol)}</span>
      <span>${t.usd>=0?"+":"−"}$${usd(Math.abs(t.usd))}${t.note ? ` <small class="muted">${escapeHtml(t.note)}</small>` : ""}</span></div>`).join("")
    + `<p class="as-of">Execution runs monthly (or via the token-protected API). This preview places no orders.</p>`;
}

/* ---------- NAV chart ---------- */
async function loadNav() {
  const d = await fetch("/api/nav").then(r => r.json()).catch(() => null);
  const cv = $("#navchart"); if (!d || !cv) return;
  const fund = (d.fund || []).map(p => ({ t: p.t * 1000, v: p.equity })).filter(p => p.v);
  if (fund.length < 2) { $("#perf-note").textContent = "performance history builds after the first trades"; return; }
  const spyRaw = (d.spy || []).map(p => ({ t: Date.parse(p.t), v: p.c }));
  const norm = arr => { const b = arr[0].v; return arr.map(p => ({ t: p.t, v: p.v / b * 100 })); };
  const f = norm(fund), s = spyRaw.length > 1 ? norm(spyRaw) : [];
  const t0 = f[0].t, t1 = f[f.length-1].t;
  const all = f.concat(s).map(p => p.v);
  const lo = Math.min(...all) * 0.995, hi = Math.max(...all) * 1.005;
  const W = cv.clientWidth, H = 240, P = 34;
  cv.width = W * devicePixelRatio; cv.height = H * devicePixelRatio;
  cv.style.width = W + "px"; cv.style.height = H + "px";   // display size == coord space (no stretch; exact hover)
  const g = cv.getContext("2d"); g.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0);
  const X = t => P + (W-P-8) * (t-t0)/(t1-t0||1), Y = v => 12 + (H-12-22) * (1-(v-lo)/(hi-lo||1));
  const invX = px => t0 + (px - P) / ((W-P-8)||1) * (t1-t0);
  const nearest = (arr, t) => arr.reduce((b, p) => Math.abs(p.t-t) < Math.abs(b.t-t) ? p : b, arr[0]);

  function draw(hoverT) {
    g.clearRect(0,0,W,H);
    g.strokeStyle = "#1e2c42"; g.lineWidth = 1; g.font = "10px ui-monospace"; g.fillStyle = "#5d6b83";
    [100, (lo+hi)/2, hi, lo].forEach(v => { g.beginPath(); g.moveTo(P, Y(v)); g.lineTo(W-8, Y(v)); g.stroke(); g.fillText(v.toFixed(0), 6, Y(v)+3); });
    const line = (arr, col, w) => { if (arr.length<2) return; g.strokeStyle = col; g.lineWidth = w; g.beginPath();
      arr.forEach((p,i) => i?g.lineTo(X(p.t),Y(p.v)):g.moveTo(X(p.t),Y(p.v))); g.stroke(); };
    line(s, "#8ea3c0", 1.4); line(f, "#37b8a4", 2.2);
    if (hoverT != null) {
      const fx = nearest(f, hoverT), sx = s.length ? nearest(s, hoverT) : null;
      const px = X(fx.t);
      g.strokeStyle = "#37506e"; g.setLineDash([3,3]); g.beginPath(); g.moveTo(px,10); g.lineTo(px,H-22); g.stroke(); g.setLineDash([]);
      const dot = (p, col) => { if (!p) return; g.fillStyle = col; g.beginPath(); g.arc(X(p.t), Y(p.v), 3.5, 0, 7); g.fill(); };
      dot(sx, "#8ea3c0"); dot(fx, "#37b8a4");
      showTip(px, fx, sx);
    } else hideTip();
  }

  let tip = $("#navtip");
  if (!tip) { tip = document.createElement("div"); tip.id = "navtip"; tip.className = "navtip";
    cv.parentElement.style.position = "relative"; cv.parentElement.appendChild(tip); }
  const pct = v => `${v>=100?"+":""}${(v-100).toFixed(2)}%`;
  function showTip(px, fx, sx) {
    tip.innerHTML = `<div class="nt-date">${new Date(fx.t).toISOString().slice(0,10)}</div>` +
      `<div class="nt-row"><span style="color:#37b8a4">■</span> Slipstream <b>${pct(fx.v)}</b></div>` +
      (sx ? `<div class="nt-row"><span style="color:#8ea3c0">■</span> SPY <b>${pct(sx.v)}</b></div>` : "");
    tip.style.display = "block";
    tip.style.left = Math.min(Math.max(px + 12, 4), W - 132) + "px"; tip.style.top = "8px";
  }
  function hideTip() { if (tip) tip.style.display = "none"; }

  draw();
  cv.onmousemove = e => { const r = cv.getBoundingClientRect(); const mx = e.clientX - r.left;
    if (mx < P || mx > W - 8) { draw(); return; } draw(invX(mx)); };
  cv.onmouseleave = () => draw();

  const last = f[f.length-1].v, sl = s.length ? s[s.length-1].v : null;
  $("#perf-note").textContent = `since ${new Date(t0).toISOString().slice(0,10)} · Slipstream ${last>=100?"+":""}${(last-100).toFixed(1)}%` + (sl!=null?` vs SPY ${sl>=100?"+":""}${(sl-100).toFixed(1)}%`:"");
}

/* ---------- picks (no BUY) ---------- */
// The whole category card opens its dedicated top-20 page; interactive children
// (refresh button, per-ticker detail links, anchors) keep their own behavior.
document.querySelectorAll(".picks").forEach(card => {
  card.style.cursor = "pointer";
  card.addEventListener("click", e => {
    if (e.target.closest("button, a, .detail-link")) return;
    location.href = "/picks?panel=" + card.id.replace("panel-", "");
  });
});

const panelData = {};
function openDetail(panel, ticker) {
  const pick = (panelData[panel]?.picks || []).find(p => p.ticker === ticker);
  if (!pick?.details) return;
  $("#detail-title").textContent = `${ticker} — ${{superinvestor:"Super Investor Activity",insider:"Insider Activity",news:"News (30 days)"}[panel]||panel}`;
  $("#detail-body").innerHTML = pick.details.map(sec => `<section class="detail-section"><h4>${escapeHtml(sec.title)}</h4>
    <ul>${sec.items.map(it => `<li>${it.href?`<a href="${escapeHtml(it.href)}" target="_blank" rel="noopener noreferrer">${escapeHtml(it.text)} ↗</a>`:escapeHtml(it.text)}</li>`).join("")}</ul></section>`).join("");
  $("#detail-modal").showModal();
}
async function loadPanel(panel, refresh = false) {
  const body = $(`#panel-${panel} .picks-body`);
  body.textContent = refresh ? "Refreshing…" : "Loading…";
  const resp = await fetch(`/api/picks/${panel}${refresh ? "?refresh=1" : ""}`);
  if (!resp.ok) { body.innerHTML = `<p class="error">${(await resp.json().catch(()=>({}))).detail || "Unavailable"}</p>`; return; }
  const data = await resp.json(); panelData[panel] = data;
  const meta = data.as_of ? `<p class="as-of${data.stale ? " stale" : ""}">${escapeHtml(data.as_of)}${data.disclaimer?" · "+escapeHtml(data.disclaimer):""}</p>` : "";
  body.innerHTML = (data.picks.map(p => `<div class="pick">
      <div class="pick-top"><span class="pick-ticker">${escapeHtml(p.ticker)}</span><span class="quote" data-quote="${escapeHtml(p.ticker)}"></span></div>
      <span class="pick-detail">${escapeHtml(p.detail)}</span>
      ${p.llm ? `<span class="pick-llm ${escapeHtml((p.llm.verdict||"unverified").toLowerCase())}">LLM: ${escapeHtml(p.llm.verdict)}${p.llm.reason?" — "+escapeHtml(p.llm.reason):""}</span>`:""}
      ${p.details ? `<a class="detail-link" data-panel="${escapeHtml(panel)}" data-ticker="${escapeHtml(p.ticker)}">Details ›</a>`:""}
    </div>`).join("") || "<p class='muted'>No qualifying picks.</p>") + meta;
  body.querySelectorAll(".detail-link").forEach(l => l.addEventListener("click", () => openDetail(l.dataset.panel, l.dataset.ticker)));
  loadQuotes(data.picks.map(p => p.ticker));
}
async function loadQuotes(tickers) {
  if (!tickers.length) return;
  const q = await fetch(`/api/quotes?symbols=${tickers.join(",")}`).then(r => r.ok ? r.json() : null).catch(() => null);
  if (!q) return;
  for (const [sym, v] of Object.entries(q)) {
    document.querySelectorAll(`[data-quote="${CSS.escape(sym)}"]`).forEach(el => {
      const up = v.change_pct != null && v.change_pct >= 0;
      el.innerHTML = `$${v.price.toFixed(2)}` + (v.change_pct != null ? ` <span class="${up?"q-up":"q-down"}">${up?"▲ +":"▼ "}${v.change_pct}%</span>` : "");
    });
  }
}

/* ---------- init ---------- */
$("#detail-close").addEventListener("click", () => $("#detail-modal").close());
$("#detail-modal").addEventListener("click", e => { if (e.target === e.currentTarget) e.currentTarget.close(); });
$("#rebal-preview").addEventListener("click", previewRebalance);
document.querySelectorAll(".refresh").forEach(b => b.addEventListener("click", () => loadPanel(b.dataset.panel, true)));

/* tabs */
document.querySelectorAll(".tab").forEach(t => t.addEventListener("click", () => {
  document.querySelectorAll(".tab").forEach(x => x.classList.toggle("active", x === t));
  document.querySelectorAll(".tab-panel").forEach(p => p.classList.toggle("active", p.id === `tab-${t.dataset.tab}`));
  if (t.dataset.tab === "fund") loadNav();  // canvas needs a visible container to size
}));

loadHealth();
loadStatus();
loadFund();
loadTarget();
loadNav();
["superinvestor", "insider", "news"].forEach(loadPanel);
addEventListener("resize", () => loadNav());

/* ── supervisor health strip (daily flag-only monitor) ───────────────────── */
(async function healthStrip(){
  try{
    const r = await fetch('/api/supervisor').then(x=>x.json());
    const el = document.getElementById('healthstrip'); if(!el || !r.checks) return;
    const cls = s => s==='OK' ? 'hs-ok' : s==='ALERT' ? 'hs-alert' : 'hs-watch';
    const icon = s => s==='OK' ? '●' : s==='ALERT' ? '▲' : '◆';
    el.innerHTML = r.checks.map(c =>
      `<span class="hs-chip ${cls(c.status)}" title="${(c.detail||'').replace(/"/g,'&quot;')}">${icon(c.status)} ${c.name.split(' (')[0]} <b>${c.status}</b></span>`
    ).join('') + `<span class="hs-note">supervisor · ${r.computed_at} · hover for detail</span>`;
    el.hidden = false;
  }catch(e){ /* strip is optional */ }
})();