{% extends "journal/base.html" %}
{% load static %}
{% block title %}{{ trade.symbol }} — Setup Log Pro{% endblock %}
{% block content %}
<p>
  <a href="{{ back_url }}">&larr; Back to trades</a>
  {% if prev_trade_url %}&nbsp;|&nbsp;<a href="{{ prev_trade_url }}">&larr; Prev trade</a>{% endif %}
  {% if next_trade_url %}&nbsp;|&nbsp;<a href="{{ next_trade_url }}">Next trade &rarr;</a>{% endif %}
</p>
<h1>{{ trade.symbol }} {{ trade.direction }}</h1>

<div class="field-group">
  <div><label>Entry</label>{{ trade.entry_time|date:"Y-m-d H:i:s" }} @ {{ trade.avg_entry_price }}</div>
  <div><label>Exit</label>{% if trade.exit_time %}{{ trade.exit_time|date:"Y-m-d H:i:s" }} @ {{ trade.avg_exit_price }}{% else %}—{% endif %}</div>
  <div><label>Qty</label>{{ trade.qty|floatformat:"-4" }}</div>
  <div><label>P&amp;L</label>{% if trade.pnl is not None %}${{ trade.pnl }}{% else %}—{% endif %}</div>
  <div><label>R</label>{% if r_value is not None %}{{ r_value|floatformat:2 }}R{% else %}—{% endif %}</div>
  {% if trade.commission is not None %}
  <div><label>Commission</label>${{ trade.commission }}</div>
  {% endif %}
  <div><label>Outcome</label>
    {% if trade.is_open %}<span class="open">OPEN</span>
    {% elif effective_outcome == "WIN" %}<span class="win">WIN</span>
    {% elif effective_outcome == "LOSS" %}<span class="loss">LOSS</span>
    {% else %}<span class="breakeven">B/E</span>{% endif %}
  </div>
  <div><label>Max move</label>{% if max_move is not None %}{% if max_move_r is not None %}{{ max_move_r|floatformat:2 }}R (${{ max_move }}){% else %}${{ max_move }}{% endif %}{% else %}—{% endif %}</div>
  <div><label>Max pullback</label>{% if max_pullback is not None %}{% if max_pullback_r is not None %}{{ max_pullback_r|floatformat:2 }}R (${{ max_pullback }}){% else %}${{ max_pullback }}{% endif %}{% else %}—{% endif %}</div>
</div>

<form method="post" style="display:flex; gap:0.75rem; align-items:end; margin-bottom:1rem;">
  {% csrf_token %}
  <input type="hidden" name="action" value="save_portfolio">
  <input type="hidden" name="next" value="{{ next_param }}">
  <label style="display:flex; flex-direction:column; font-size:0.8rem; gap:0.25rem;">
    Portfolio
    <select name="portfolio" id="portfolio-select" onchange="syncPortfolioColor(this)">
      <option value="" data-color="#8FA0BE" style="background-color:var(--surface); color:#fff;" {% if not trade.portfolio_id %}selected{% endif %}>No portfolio</option>
      {% for p in portfolio_choices %}
      <option value="{{ p.id }}" data-color="{{ p.display_color }}" style="background-color:{{ p.display_color }}; color:#fff;" {% if trade.portfolio_id == p.id %}selected{% endif %}>{{ p.name }}</option>
      {% endfor %}
    </select>
  </label>
  <button type="submit">Save portfolio</button>
</form>
<script>syncPortfolioColor(document.getElementById("portfolio-select"));</script>

<h2>Chart</h2>
<div id="trade-chart" style="width:100%; height:420px; position:relative; resize:vertical; overflow:hidden; min-height:200px; max-height:900px; border:1px solid #263E61;"></div>
<div style="display:flex; gap:0.5rem; align-items:center; margin-top:0.5rem;">
  <label style="display:flex; align-items:center; gap:0.35rem; font-size:0.85rem;">
    Timeframe
    <select id="chart-timeframe">
      <option value="1m">1 min</option>
      <option value="5m">5 min</option>
      <option value="15m">15 min</option>
      <option value="30m">30 min</option>
      <option value="1h">1 hour</option>
    </select>
  </label>
  <button type="button" id="chart-zoom-in">Zoom in</button>
  <button type="button" id="chart-zoom-out">Zoom out</button>
  <button type="button" id="chart-zoom-trade">Zoom to trade</button>
  <button type="button" id="chart-fit-all">Fit all</button>
  <form method="post" style="display:inline" title="Re-fetch this trade's chart bars from the market data provider (e.g. after enabling pre-market data)">
    {% csrf_token %}
    <input type="hidden" name="action" value="refresh_bars">
    <input type="hidden" name="next" value="{{ next_param }}">
    <button type="submit">Refresh chart data</button>
  </form>
  <span id="chart-note" style="font-size:0.8rem; opacity:0.7;"></span>
</div>
<div style="display:flex; gap:1rem; align-items:center; margin-top:0.5rem; flex-wrap:wrap;">
  <label style="display:flex; align-items:center; gap:0.35rem; font-size:0.85rem;">
    <input type="checkbox" id="chart-show-volume"> Volume
  </label>
  {% for indicator in chart_indicators %}
  <label style="display:flex; align-items:center; gap:0.35rem; font-size:0.85rem;" class="chart-indicator-toggle"
      data-indicator-id="{{ indicator.id }}" data-type="{{ indicator.type }}" data-period="{{ indicator.period }}"
      data-color="{{ indicator.color }}" data-default-visible="{% if indicator.default_visible %}1{% else %}0{% endif %}">
    <input type="checkbox"> <span style="color:{{ indicator.color }};">{{ indicator.type }}{{ indicator.period }}</span>
  </label>
  {% endfor %}
  <label style="display:flex; align-items:center; gap:0.35rem; font-size:0.85rem;">
    <input type="checkbox" id="chart-show-vwap"> VWAP
  </label>
  {% if not chart_indicators %}
  <span style="opacity:0.6; font-size:0.8rem;">No moving averages configured — add some in <a href="{% url 'settings_view' %}?section=charts">Settings &gt; Charts</a>.</span>
  {% endif %}
</div>

{{ chart_colors|json_script:"chart-colors" }}
<script src="{% static 'journal/js/lightweight-charts.standalone.production.js' %}"></script>
<script>
(function () {
  const container = document.getElementById("trade-chart");
  const note = document.getElementById("chart-note");
  const timeframeSelect = document.getElementById("chart-timeframe");
  const TIMEFRAME_KEY = "pbjournal_chart_timeframe";
  const COLORS = JSON.parse(document.getElementById("chart-colors").textContent);
  const SYMBOL = "{{ trade.symbol|escapejs }}";

  // Native CSS resize (the container's own drag handle, bottom-right corner) only
  // changes the element's box size - restoring/persisting it is on us, same as every
  // other chart preference here (timeframe, volume, indicators).
  const HEIGHT_KEY = "pbjournal_chart_height";
  const savedHeight = localStorage.getItem(HEIGHT_KEY);
  if (savedHeight) container.style.height = savedHeight + "px";

  const volumeCheckbox = document.getElementById("chart-show-volume");
  const vwapCheckbox = document.getElementById("chart-show-vwap");
  const VOLUME_KEY = "pbjournal_chart_volume";
  const VWAP_KEY = "pbjournal_chart_vwap";

  // One toggle per indicator configured in Settings > Charts (computeSMA/computeEMA
  // are shared, defined once in base.html so the Settings preview chart can reuse
  // the exact same math). Each toggle's own localStorage key is keyed by indicator id
  // so newly added/removed indicators in Settings don't collide with old keys.
  const indicatorToggles = Array.prototype.slice.call(document.querySelectorAll(".chart-indicator-toggle")).map((el) => ({
    el,
    checkbox: el.querySelector("input[type=checkbox]"),
    id: el.dataset.indicatorId,
    type: el.dataset.type,
    period: parseInt(el.dataset.period, 10),
    color: el.dataset.color,
    storageKey: "pbjournal_chart_indicator_" + el.dataset.indicatorId,
    defaultVisible: el.dataset.defaultVisible === "1",
  }));

  // Session VWAP, anchored to the start of whatever bars are currently loaded —
  // correct as a real session VWAP since a trade's cached bars are always scoped to
  // its own single trading day (see get_bars_for_trade), never spanning multiple days.
  function computeVWAP(bars) {
    const out = [];
    let cumPV = 0, cumVol = 0;
    for (const b of bars) {
      const typical = (b.high + b.low + b.close) / 3;
      const vol = b.volume || 0;
      cumPV += typical * vol;
      cumVol += vol;
      out.push({ time: b.time, value: cumVol > 0 ? cumPV / cumVol : typical });
    }
    return out;
  }

  // Chart timestamps are true UTC instants; always render them as US/Eastern (the
  // exchange timezone DAS Trader's export uses) regardless of the viewer's browser
  // locale, so times shown here always match the original CSV.
  const NY_TZ = "America/New_York";
  function nyTickFormat(time, tickMarkType) {
    const date = new Date(time * 1000);
    const TM = LightweightCharts.TickMarkType;
    let options;
    if (tickMarkType === TM.Year) options = { year: "numeric", timeZone: NY_TZ };
    else if (tickMarkType === TM.Month) options = { month: "short", year: "numeric", timeZone: NY_TZ };
    else if (tickMarkType === TM.DayOfMonth) options = { month: "short", day: "numeric", timeZone: NY_TZ };
    else options = { hour: "2-digit", minute: "2-digit", hour12: false, timeZone: NY_TZ };
    return new Intl.DateTimeFormat("en-US", options).format(date);
  }
  function nyFullFormat(time) {
    const date = new Date(time * 1000);
    return new Intl.DateTimeFormat("en-US", {
      timeZone: NY_TZ, year: "numeric", month: "2-digit", day: "2-digit",
      hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false,
    }).format(date);
  }

  // A fill belongs to whichever candle's interval actually contains its timestamp
  // (the last bar whose start time is <= the fill time), not whichever bar's start
  // time happens to be numerically closest — comparing raw distances puts fills in
  // the second half of a candle (e.g. a :33s fill in a :00-:59s 1m candle) into the
  // *next* candle instead, since that candle's start is nominally closer.
  function barIndexForTime(bars, targetTime) {
    let idx = 0;
    for (let i = 0; i < bars.length; i++) {
      if (bars[i].time <= targetTime) idx = i;
      else break;
    }
    return idx;
  }

  // Waits for the container to have a real, laid-out width before building the chart.
  // Building it at width 0 (which happens if this runs before layout settles) leaves
  // the chart's internal coordinate space wrong for the lifetime of the instance —
  // later applyOptions({width}) calls don't retroactively fix a zoom set beforehand.
  function whenSized(el, cb) {
    let settled = false;
    function poll() {
      if (settled) return;
      if (el.clientWidth > 0) { settled = true; cb(); return; }
      requestAnimationFrame(poll);
    }
    poll();
    // Backstop: browsers can throttle or fully pause requestAnimationFrame for a
    // backgrounded/occluded tab, which would otherwise leave the chart stuck on
    // "Loading…" forever waiting for a frame that never comes. setTimeout keeps
    // firing regardless, so force the build after ~1s with whatever width exists.
    setTimeout(() => {
      if (!settled) { settled = true; cb(); }
    }, 1000);
  }

  // placement -> lightweight-charts' own horz/vertAlign pair for the built-in watermark.
  const WATERMARK_ALIGN = {
    middle: { horz: "center", vert: "center" },
    top: { horz: "center", vert: "top" },
    bottom: { horz: "center", vert: "bottom" },
    left: { horz: "left", vert: "center" },
    right: { horz: "right", vert: "center" },
  };

  function buildChart(data) {
    const watermarkAlign = WATERMARK_ALIGN[COLORS.watermarkPlacement] || WATERMARK_ALIGN.middle;
    const chart = LightweightCharts.createChart(container, {
      width: container.clientWidth,
      height: container.clientHeight,
      layout: { background: { color: COLORS.background }, textColor: COLORS.text, attributionLogo: false },
      grid: { vertLines: { color: "#263E6166" }, horzLines: { color: "#263E6166" } },
      // <input type="color"> (Settings > Chart Colors) can't produce an alpha channel,
      // so the chosen color is always drawn at a fixed, faint opacity here - a plain
      // solid watermark this large would otherwise sit on top of the candles instead
      // of behind them.
      watermark: {
        visible: true, text: SYMBOL, color: COLORS.watermarkColor + "33",
        fontSize: 64, fontFamily: COLORS.watermarkFont,
        horzAlign: watermarkAlign.horz, vertAlign: watermarkAlign.vert,
      },
      // Default (Magnet) snaps the crosshair to the nearest candle's price - Normal
      // follows the cursor exactly, so any price on the chart can be read off directly.
      crosshair: { mode: LightweightCharts.CrosshairMode.Normal },
      timeScale: {
        timeVisible: true, secondsVisible: false, tickMarkFormatter: nyTickFormat,
        lockVisibleTimeRangeOnResize: true,
      },
      localization: { timeFormatter: nyFullFormat },
    });

    // yRange is an explicit, mutable price window: seeded on the initial view, then
    // scaled by the zoom buttons just like the X (logical) range is. autoscale only
    // takes over once yRange is cleared (Fit all). Only entry/exit are real traded
    // prices (always inside the candle range anyway) — stop/target are hypothetical
    // and can sit far from where price actually went, so they're excluded here to
    // avoid leaving a lot of dead vertical space with tiny candles. They're still
    // drawn as price lines, just not used to size the initial zoom.
    const tradedLevels = [data.entry_price, data.exit_price].filter((v) => v !== null && v !== undefined);
    let yRange = null;
    const series = chart.addCandlestickSeries({
      upColor: COLORS.candleUp, downColor: COLORS.candleDown,
      borderVisible: true, borderUpColor: COLORS.borderUp, borderDownColor: COLORS.borderDown,
      wickUpColor: COLORS.wickUp, wickDownColor: COLORS.wickDown,
      autoscaleInfoProvider: (original) => {
        if (yRange) {
          return { priceRange: { minValue: yRange.min, maxValue: yRange.max } };
        }
        return original();
      },
    });
    series.setData(data.bars.map((b) => ({ time: b.time, open: b.open, high: b.high, low: b.low, close: b.close })));

    series.createPriceLine({ price: data.entry_price, color: "#F59E0B", lineWidth: 1, lineStyle: LightweightCharts.LineStyle.Dashed, title: "Avg. cost" });
    if (data.stop_loss !== null) {
      series.createPriceLine({ price: data.stop_loss, color: COLORS.stop, lineWidth: 1, lineStyle: LightweightCharts.LineStyle.Dashed, title: "Stop" });
    }
    if (data.target !== null) {
      series.createPriceLine({ price: data.target, color: COLORS.target, lineWidth: 1, lineStyle: LightweightCharts.LineStyle.Dashed, title: "Target" });
    }
    if (data.exit_price !== null) {
      series.createPriceLine({ price: data.exit_price, color: "#8FA0BE99", lineWidth: 1, lineStyle: LightweightCharts.LineStyle.Dotted, title: "Exit" });
    }

    // Volume: an overlay histogram pinned to its own price scale confined to the
    // bottom 20% of the chart, rather than a separate pane — simplest way to get a
    // volume strip under the candles with this chart library. Bar color echoes the
    // candle color convention (up/down vs. that bar's own open) at reduced opacity so
    // it doesn't compete visually with the candles themselves.
    const volumeSeries = chart.addHistogramSeries({ priceFormat: { type: "volume" }, priceScaleId: "volume" });
    chart.priceScale("volume").applyOptions({ scaleMargins: { top: 0.82, bottom: 0 } });
    volumeSeries.setData(
      data.bars.map((b) => ({
        time: b.time, value: b.volume || 0,
        color: b.close >= b.open ? COLORS.candleUp + "80" : COLORS.candleDown + "80",
      }))
    );
    volumeSeries.applyOptions({ visible: volumeCheckbox.checked });

    // Moving averages and VWAP overlay the main price scale directly (unlike volume,
    // these are prices, not a separate unit) — recomputed from the same bars already
    // on screen, no extra data fetched. One line series per configured indicator,
    // each in its own color, visibility keyed off that indicator's own checkbox.
    // autoscaleInfoProvider returning null excludes each from the price scale's own
    // autoscale computation — without it, a series whose values run outside the
    // candlestick series' own fixed yRange (e.g. VWAP anchored back to the session
    // open) drags the y-axis to include it too, silently overriding "Zoom to trade"'s
    // deliberately narrow window the moment that series is turned visible.
    indicatorToggles.forEach((ind) => {
      const compute = ind.type === "EMA" ? computeEMA : computeSMA;
      ind.series = chart.addLineSeries({
        color: ind.color, lineWidth: 1.5, priceLineVisible: false, lastValueVisible: false, crosshairMarkerVisible: false,
        autoscaleInfoProvider: () => null,
      });
      ind.series.setData(compute(data.bars, ind.period));
      ind.series.applyOptions({ visible: ind.checkbox.checked });
    });

    const vwapSeries = chart.addLineSeries({
      color: "#17A2B8", lineWidth: 1.5, priceLineVisible: false, lastValueVisible: false, crosshairMarkerVisible: false,
      autoscaleInfoProvider: () => null,
    });
    vwapSeries.setData(computeVWAP(data.bars));
    vwapSeries.applyOptions({ visible: vwapCheckbox.checked });

    note.textContent = data.requested_interval && data.requested_interval !== data.interval
      ? "Interval: " + data.interval + " (finest cached; " + data.requested_interval + " not available) — scroll to zoom, drag to pan."
      : "Interval: " + data.interval + " — scroll to zoom, drag to pan.";

    const entryIdx = barIndexForTime(data.bars, data.entry_time);
    const exitIdx = data.exit_time !== null ? barIndexForTime(data.bars, data.exit_time) : entryIdx;
    const lo = Math.min(entryIdx, exitIdx);
    const hi = Math.max(entryIdx, exitIdx);
    // "Zoom to trade" shows this many candles (at the current timeframe) before the
    // entry and after the exit - a fixed count rather than a fraction of the trade's
    // own length, so a very short trade still gets enough surrounding context. 60 is
    // roughly the 20-candle view scrolled out 10 mouse-wheel clicks (each click widens
    // the visible range by ~11%, so 10 clicks is ~3x).
    const pad = 60;

    function computeInitialYRange() {
      const from = Math.max(0, Math.floor(lo - pad));
      const to = Math.min(data.bars.length - 1, Math.ceil(hi + pad));
      const visible = data.bars.slice(from, to + 1);
      const values = visible.length
        ? [...tradedLevels, ...visible.map((b) => b.low), ...visible.map((b) => b.high)]
        : tradedLevels;
      const min = Math.min(...values), max = Math.max(...values);
      const margin = (max - min) * 0.08 || Math.abs(min) * 0.01 || 1;
      return { min: min - margin, max: max + margin };
    }

    // Long -> up triangle, short -> down triangle (shape still encodes direction).
    // Entry/exit marker colors are user-configurable (Settings > Chart Colors), applied
    // the same regardless of direction. Series markers can't be pinned to an exact price
    // (only "above/below bar"), so the tip position is drawn manually as an SVG overlay
    // using priceToCoordinate/timeToCoordinate, kept in sync with pan/zoom/resize.
    const isLong = data.direction === "LONG";
    const entryColor = COLORS.entry;
    const exitColor = COLORS.exit;

    // The library's own canvas layers use explicit z-index (1/2), which beats an
    // unset z-index:auto on this overlay regardless of DOM order — without a
    // higher explicit z-index here, the triangles are drawn but always hidden
    // behind those canvases.
    const svgNS = "http://www.w3.org/2000/svg";
    const overlay = document.createElementNS(svgNS, "svg");
    overlay.setAttribute("id", "trade-markers-overlay");
    overlay.setAttribute("style", "position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:10;");
    container.appendChild(overlay);

    function makeTriangle(tipX, tipY, pointingUp, color) {
      const halfW = 6, h = 11;
      const points = pointingUp
        ? `${tipX},${tipY} ${tipX - halfW},${tipY + h} ${tipX + halfW},${tipY + h}`
        : `${tipX},${tipY} ${tipX - halfW},${tipY - h} ${tipX + halfW},${tipY - h}`;
      const poly = document.createElementNS(svgNS, "polygon");
      poly.setAttribute("points", points);
      poly.setAttribute("fill", color);
      poly.setAttribute("stroke", "#00000066");
      poly.setAttribute("stroke-width", "1");
      return poly;
    }

    let markerDrawAttempts = 0;
    let markerDrawSuccesses = 0;
    function drawTradeMarkers() {
      markerDrawAttempts++;
      try {
        overlay.innerHTML = "";
        let anySuccess = false;
        // One triangle per individual fill (every add and partial, not just the
        // averaged entry/exit) — entry-side fills point the trade's own direction
        // (up for long, down for short) in the entry color; exit-side fills point
        // the opposite way in the exit color, same convention the single markers
        // used before, just applied per fill.
        (data.fills || []).forEach((fill) => {
          const idx = barIndexForTime(data.bars, fill.time);
          const x = chart.timeScale().timeToCoordinate(data.bars[idx].time);
          const y = series.priceToCoordinate(fill.price);
          if (x !== null && y !== null) {
            const pointingUp = fill.is_entry ? isLong : !isLong;
            const color = fill.is_entry ? entryColor : exitColor;
            overlay.appendChild(makeTriangle(x, y, pointingUp, color));
            anySuccess = true;
          }
        });
        if (anySuccess) markerDrawSuccesses++;
        if (markerDrawAttempts === 90 && markerDrawSuccesses === 0) {
          note.textContent += " [markers: fills=" + (data.fills || []).length + " overlayInDOM=" + document.body.contains(overlay) + "]";
        }
      } catch (e) {
        note.textContent = "Marker error: " + e.message;
      }
    }

    function zoomToTrade() {
      yRange = computeInitialYRange();
      chart.timeScale().setVisibleLogicalRange({ from: lo - pad, to: hi + pad });
    }
    zoomToTrade();

    // Event-driven redraws (range-change subscription, resize handlers, frame-count
    // retries) all turned out unreliable here for reasons that didn't reproduce
    // consistently. A continuous per-frame redraw sidesteps the whole question of
    // "did the right event fire at the right time" — it just keeps recomputing the
    // two triangle positions every frame for as long as this page is open. The work
    // (two coordinate lookups + two tiny SVG elements) is trivial at 60fps.
    let stopped = false;
    function renderLoop() {
      if (stopped) return;
      drawTradeMarkers();
      requestAnimationFrame(renderLoop);
    }
    renderLoop();
    window.__pbChart = chart; // debug hook
    window.__pbSeries = series; // debug hook

    function scaleYRange(factor) {
      if (!yRange) return;
      const center = (yRange.min + yRange.max) / 2;
      const half = ((yRange.max - yRange.min) / 2) * factor;
      yRange = { min: center - half, max: center + half };
    }

    // The zoom/timeframe controls are static buttons outside this function, so their
    // click listeners are attached once (below) and call through this object instead
    // of re-attaching a new listener (and leaking the old chart's closure) every time
    // buildChart() runs on a timeframe switch.
    controls = {
      zoomToTrade,
      fitAll: () => {
        yRange = null;
        chart.timeScale().fitContent();
      },
      zoomIn: () => {
        const r = chart.timeScale().getVisibleLogicalRange();
        if (!r) return;
        const center = (r.from + r.to) / 2, half = (r.to - r.from) / 4;
        scaleYRange(0.5);
        chart.timeScale().setVisibleLogicalRange({ from: center - half, to: center + half });
      },
      zoomOut: () => {
        const r = chart.timeScale().getVisibleLogicalRange();
        if (!r) return;
        const center = (r.from + r.to) / 2, half = (r.to - r.from);
        scaleYRange(2);
        chart.timeScale().setVisibleLogicalRange({ from: center - half, to: center + half });
      },
      // Fires on a window resize (width only) and on the container's own CSS resize
      // handle being dragged (height, or both) - lockVisibleTimeRangeOnResize keeps
      // the current zoom either way, this just keeps the chart's pixel size matched
      // to its container.
      onResize: () => {
        chart.applyOptions({ width: container.clientWidth, height: container.clientHeight });
        drawTradeMarkers();
      },
      setVolumeVisible: (v) => volumeSeries.applyOptions({ visible: v }),
      setIndicatorVisible: (id, v) => {
        const ind = indicatorToggles.find((i) => i.id === id);
        if (ind) ind.series.applyOptions({ visible: v });
      },
      setVWAPVisible: (v) => vwapSeries.applyOptions({ visible: v }),
    };

    teardown = () => {
      stopped = true;
      overlay.remove();
      chart.remove();
    };
  }

  let controls = null;
  let teardown = null;

  document.getElementById("chart-zoom-trade").addEventListener("click", () => controls && controls.zoomToTrade());
  document.getElementById("chart-fit-all").addEventListener("click", () => controls && controls.fitAll());
  document.getElementById("chart-zoom-in").addEventListener("click", () => controls && controls.zoomIn());
  document.getElementById("chart-zoom-out").addEventListener("click", () => controls && controls.zoomOut());
  // Covers both a window resize (container's width changes) and the container's own
  // drag handle (height, or both) - a plain "resize" window-event listener never
  // fires for the latter, since dragging the handle doesn't resize the window itself.
  new ResizeObserver(() => {
    if (controls) controls.onResize();
    localStorage.setItem(HEIGHT_KEY, Math.round(container.clientHeight));
  }).observe(container);

  function loadChart(interval) {
    if (teardown) {
      teardown();
      teardown = null;
      controls = null;
    }
    note.textContent = "Loading…";
    fetch("{% url 'trade_chart_data' trade.pk %}?interval=" + encodeURIComponent(interval))
      .then((r) => r.json())
      .then((data) => {
        if (!data.bars || data.bars.length === 0) {
          container.innerHTML = '<p style="opacity:0.6;">No chart data available for ' + data.symbol + '.</p>';
          note.textContent = "";
          return;
        }
        whenSized(container, () => buildChart(data));
      })
      .catch(() => {
        container.innerHTML = '<p style="opacity:0.6;">Failed to load chart.</p>';
        note.textContent = "";
      });
  }

  // Indicator toggles persist across trades and reloads the same way the timeframe
  // already does. Volume defaults on (doesn't compete for the same price scale as
  // candles, so it's low-clutter); each MA/EMA indicator defaults to whatever its own
  // Settings > Charts "default visible" says; VWAP defaults off since it overlays
  // price directly and not everyone wants it on every chart.
  volumeCheckbox.checked = localStorage.getItem(VOLUME_KEY) !== "0";
  indicatorToggles.forEach((ind) => {
    const stored = localStorage.getItem(ind.storageKey);
    ind.checkbox.checked = stored !== null ? stored === "1" : ind.defaultVisible;
  });
  vwapCheckbox.checked = localStorage.getItem(VWAP_KEY) === "1";

  volumeCheckbox.addEventListener("change", () => {
    localStorage.setItem(VOLUME_KEY, volumeCheckbox.checked ? "1" : "0");
    if (controls) controls.setVolumeVisible(volumeCheckbox.checked);
  });
  indicatorToggles.forEach((ind) => {
    ind.checkbox.addEventListener("change", () => {
      localStorage.setItem(ind.storageKey, ind.checkbox.checked ? "1" : "0");
      if (controls) controls.setIndicatorVisible(ind.id, ind.checkbox.checked);
    });
  });
  vwapCheckbox.addEventListener("change", () => {
    localStorage.setItem(VWAP_KEY, vwapCheckbox.checked ? "1" : "0");
    if (controls) controls.setVWAPVisible(vwapCheckbox.checked);
  });

  const savedTimeframe = localStorage.getItem(TIMEFRAME_KEY) || "1m";
  timeframeSelect.value = savedTimeframe;
  timeframeSelect.addEventListener("change", () => {
    localStorage.setItem(TIMEFRAME_KEY, timeframeSelect.value);
    loadChart(timeframeSelect.value);
  });

  loadChart(savedTimeframe);
})();
</script>

<div style="display:flex; gap:2.5rem; align-items:flex-start; margin-top:0.5rem;">
  <div style="flex:2; min-width:0;">
    <form method="post">
      {% csrf_token %}
      {% comment %}
      The browser's "default button" for implicit submission (pressing Enter in a
      text field) is the FIRST submit control in the form, tree order - without this,
      that's whichever tag chip renders first (each one IS a submit button, see
      remove_tag_id below), so pressing Enter after typing a new tag name silently
      removed an unrelated existing tag instead of just adding the new one. This
      invisible, harmless button (submits with no remove_tag_id at all, so the view
      just adds/saves normally) intercepts that instead.
      {% endcomment %}
      <button type="submit" tabindex="-1" aria-hidden="true"
        style="position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;"></button>
      <input type="hidden" name="action" value="save_tags_and_comment">
      <input type="hidden" name="next" value="{{ next_param }}">
      <div class="card">
        <h2>Tags</h2>
        <div class="tag-row-container">
          {% for value, label, tags, trade_tag_ids in tags_by_category %}
          <div class="tag-row">
            <h3>{{ label }}</h3>
            {# Every category can accumulate a lot of distinct values after a big import — a search-as-you-type add via <datalist> beats dumping every tag as a giant chip grid. Only tags actually attached to this trade show as chips. Setup/Mistake/Custom and the comment below all share one form, so typing into several boxes and clicking Save applies all of them together. #}
            <div class="tag-chips">
              {% for tag in tags %}
              {% if tag.id in trade_tag_ids %}
              <button type="submit" name="remove_tag_id" value="{{ tag.id }}" class="tag-chip active" {% if tag.color %}style="background-color:{{ tag.color }}; border-color:{{ tag.color }}; color:#fff;"{% endif %} title="Click to remove">{{ tag.name }} &times;</button>
              {% endif %}
              {% empty %}
              <span style="opacity:0.6; font-size:0.85rem;">No {{ label|lower }} tags yet.</span>
              {% endfor %}
            </div>
            <datalist id="{{ value|lower }}-tag-options">
              {% for tag in tags %}<option value="{{ tag.name }}">{% endfor %}
            </datalist>
            <input type="text" name="new_tag_name_{{ value }}" list="{{ value|lower }}-tag-options" autocomplete="off" placeholder="Search or add {{ label|lower }}…">
          </div>
          {% endfor %}
        </div>
      </div>

      <div class="card">
        <h2>Comment</h2>
        <textarea name="comment" rows="4" style="width:100%; box-sizing:border-box;">{{ trade.comment }}</textarea>
        <div style="margin-top:0.5rem;"><button type="submit">Save</button></div>
      </div>
    </form>
  </div>

  <div style="flex:1; min-width:320px;">
    <div class="card">
      <h2>Stop loss / target / commission</h2>
      <form method="post" style="display:flex; flex-wrap:wrap; gap:1rem; align-items:end;">
        {% csrf_token %}
        <input type="hidden" name="action" value="save_levels">
        <input type="hidden" name="next" value="{{ next_param }}">
        <input type="hidden" name="baseline_stop" value="{% if baseline_stop is not None %}{{ baseline_stop }}{% endif %}">
        <input type="hidden" name="baseline_stop_dollars" value="{% if baseline_stop_dollars is not None %}{{ baseline_stop_dollars }}{% endif %}">
        <label style="display:flex; flex-direction:column; font-size:0.8rem; gap:0.25rem; width:6.5rem;">Stop loss {{ levels_form.stop_loss }}</label>
        <label style="display:flex; flex-direction:column; font-size:0.8rem; gap:0.25rem; width:5.5rem;" title="This trade's own dollar risk (entry-to-stop distance × shares) — becomes this trade's own 1R everywhere. Edit either this or the $ stop loss — saving recalculates the other.">
          Risk ($)
          <input type="number" step="0.01" name="stop_dollars" value="{% if stop_dollars is not None %}{{ stop_dollars }}{% endif %}" style="width:100%;">
        </label>
        <label style="display:flex; flex-direction:column; font-size:0.8rem; gap:0.25rem; width:6.5rem;">Target {{ levels_form.target }}</label>
        <label style="display:flex; flex-direction:column; font-size:0.8rem; gap:0.25rem; width:6.5rem;" title="Total commission paid on this trade. Leave blank if unknown.">Commission ($) {{ levels_form.commission }}</label>
        <button type="submit">Save</button>
      </form>
    </div>

    <div class="card">
      <h2>Fills</h2>
      <table>
        <thead><tr><th>Time</th><th>Side</th><th>Qty</th><th>Price</th><th>Route</th><th>Broker</th><th>Type</th><th></th></tr></thead>
        <tbody>
          {% for fill in fills %}
          <tr>
            <td>{{ fill.time|date:"H:i:s" }}</td>
            <td>{{ fill.side }}</td>
            <td>{{ fill.qty|floatformat:"-4" }}</td>
            <td>{{ fill.price }}</td>
            <td>{{ fill.route }}</td>
            <td>{{ fill.broker }}</td>
            <td>{{ fill.type }}</td>
            <td>
              <form method="post" class="delete-x-form" onsubmit="return confirm('Delete this fill? The trade will be recalculated from its remaining fills{% if fills|length == 1 %}, or removed entirely since this is its only fill{% endif %}. This cannot be undone.');">
                {% csrf_token %}
                <input type="hidden" name="action" value="delete_fill">
                <input type="hidden" name="fill_id" value="{{ fill.pk }}">
                <input type="hidden" name="next" value="{{ next_param }}">
                <button type="submit" class="delete-x" title="Delete fill">&times;</button>
              </form>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>

      <h3 style="margin-top:1rem;">Add a fill</h3>
      <form method="post" style="display:flex; flex-direction:column; gap:0.6rem; align-items:stretch;">
        {% csrf_token %}
        <input type="hidden" name="action" value="add_fill">
        <input type="hidden" name="next" value="{{ next_param }}">
        <label style="display:flex; flex-direction:column; font-size:0.8rem; gap:0.25rem;">
          Type
          <select name="fill_kind" required>
            <option value="entry">Entry (add to position)</option>
            <option value="exit">Exit (reduce/close position)</option>
          </select>
        </label>
        <label style="display:flex; flex-direction:column; font-size:0.8rem; gap:0.25rem;">Time <input type="datetime-local" step="1" name="fill_time" required></label>
        <label style="display:flex; flex-direction:column; font-size:0.8rem; gap:0.25rem;">Price <input type="number" step="0.0001" name="fill_price" required></label>
        <label style="display:flex; flex-direction:column; font-size:0.8rem; gap:0.25rem;">Qty <input type="number" step="0.0001" min="0.0001" name="fill_qty" required></label>
        <button type="submit" style="align-self:start;">Add fill</button>
      </form>
      <p style="opacity:0.65; font-size:0.75rem;">Adding an exit fill that fully or partially closes the position recalculates avg exit price, P&amp;L, and Open/Closed automatically. If it overshoots and flips the position, a new trade is created for the remainder.</p>
    </div>
  </div>
</div>
{% endblock %}