{% extends "journal/base.html" %}
{% load static %}
{% block title %}Graphs — Setup Log Pro{% endblock %}
{% block content %}
<h1>Graphs</h1>

<style>
  .graphs-tabs { display: flex; gap: 1.5rem; border-bottom: 1px solid var(--border); margin-bottom: 1.25rem; }
  .graphs-tabs a {
    text-decoration: none; font-weight: 600; opacity: 0.6; padding: 0.5rem 0.1rem;
    border-bottom: 2px solid transparent; color: var(--text);
  }
  .graphs-tabs a.active { opacity: 1; border-bottom-color: var(--accent); }
</style>

<div class="graphs-tabs">
  {% for tab in view_tabs %}
  <a href="{{ tab.url }}" class="{% if view == tab.key %}active{% endif %}">{{ tab.label }}</a>
  {% endfor %}
</div>

<form class="filters" method="get">
  <input type="hidden" name="pnl_unit" value="{{ pnl_unit }}">
  <input type="hidden" name="commissions" value="{{ commissions }}">
  <input type="hidden" name="view" value="{{ view }}">

  <div class="top-filter-row">
    <div class="portfolio-bar">
      <label for="portfolio-select">Portfolio</label>
      <select id="portfolio-select" class="chip-picker" data-field="portfolio">
        <option value="">+ Add portfolio…</option>
        <option value="none" data-color="#8FA0BE">Unassigned</option>
        {% for p in portfolio_choices %}
        <option value="{{ p.id }}" data-color="{{ p.display_color }}">{{ p.name }}</option>
        {% endfor %}
      </select>
    </div>

    <div class="date-bar">
      <label for="date-from-input">Date</label>
      <input type="date" name="date_from" id="date-from-input" value="{{ filters.date_from }}" onchange="this.form.submit()">
      <span style="opacity:0.5;">&ndash;</span>
      <input type="date" name="date_to" id="date-to-input" value="{{ filters.date_to }}" onchange="this.form.submit()">
      {% for label, from_date, to_date in date_presets %}
      <button type="button" class="date-preset-chip" onclick="setDateRange('{{ from_date }}', '{{ to_date }}')">{{ label }}</button>
      {% endfor %}
    </div>
  </div>
  <div class="filter-row">
    <label>Symbol
      <select class="chip-picker" data-field="symbol">
        <option value="">+ Add symbol…</option>
        {% for s in all_symbols %}
        <option value="{{ s }}">{{ s }}</option>
        {% endfor %}
      </select>
    </label>
    <label>Direction
      <select name="direction">
        <option value="">All</option>
        <option value="LONG" {% if filters.direction == "LONG" %}selected{% endif %}>Long</option>
        <option value="SHORT" {% if filters.direction == "SHORT" %}selected{% endif %}>Short</option>
      </select>
    </label>
    <label>Outcome
      <select class="chip-picker" data-field="outcome">
        <option value="">+ Add outcome…</option>
        <option value="WIN">Win</option>
        <option value="LOSS">Loss</option>
        <option value="BREAKEVEN">Breakeven</option>
      </select>
    </label>
    <label>Setup
      <select class="chip-picker" data-field="setup_tag">
        <option value="">+ Add setup…</option>
        {% for t, color in setup_tag_rows %}
        <option value="{{ t }}" {% if color %}data-color="{{ color }}"{% endif %}>{{ t }}</option>
        {% endfor %}
      </select>
    </label>
    <label>Mistake
      <select class="chip-picker" data-field="mistake_tag">
        <option value="">+ Add mistake…</option>
        {% for t, color in mistake_tag_rows %}
        <option value="{{ t }}" {% if color %}data-color="{{ color }}"{% endif %}>{{ t }}</option>
        {% endfor %}
      </select>
    </label>
    <label>Custom tag
      <select class="chip-picker" data-field="custom_tag">
        <option value="">+ Add custom tag…</option>
        {% for t, color in custom_tag_rows %}
        <option value="{{ t }}" {% if color %}data-color="{{ color }}"{% endif %}>{{ t }}</option>
        {% endfor %}
      </select>
    </label>
  </div>

  <div class="chip-store" style="display:none" aria-hidden="true">
    {% if "none" in filters.portfolio %}
    <input type="hidden" name="portfolio" value="none" data-field="portfolio" data-label="Unassigned" data-color="#8FA0BE">
    {% endif %}
    {% for p in portfolio_choices %}
    {% if p.id|stringformat:"s" in filters.portfolio %}
    <input type="hidden" name="portfolio" value="{{ p.id }}" data-field="portfolio" data-label="{{ p.name }}" data-color="{{ p.display_color }}">
    {% endif %}
    {% endfor %}
    {% for s in filters.symbol %}
    <input type="hidden" name="symbol" value="{{ s }}" data-field="symbol" data-label="{{ s }}">
    {% endfor %}
    {% for o in filters.outcome %}
    <input type="hidden" name="outcome" value="{{ o }}" data-field="outcome" data-label="{{ o|title }}">
    {% endfor %}
    {% for t in filters.setup_tag %}
    <input type="hidden" name="setup_tag" value="{{ t }}" data-field="setup_tag" data-label="{{ t }}">
    {% endfor %}
    {% for t in filters.mistake_tag %}
    <input type="hidden" name="mistake_tag" value="{{ t }}" data-field="mistake_tag" data-label="{{ t }}">
    {% endfor %}
    {% for t in filters.custom_tag %}
    <input type="hidden" name="custom_tag" value="{{ t }}" data-field="custom_tag" data-label="{{ t }}">
    {% endfor %}
  </div>

  <div class="filter-row">
    <label>Entry time <span class="range"><input type="time" name="entry_time_from" value="{{ filters.entry_time_from }}"><span>&ndash;</span><input type="time" name="entry_time_to" value="{{ filters.entry_time_to }}"></span></label>
    <label>Duration (min) <span class="range"><input type="number" step="5" min="0" name="duration_min" value="{{ filters.duration_min }}"><span>&ndash;</span><input type="number" step="5" min="0" name="duration_max" value="{{ filters.duration_max }}"></span></label>
  </div>

  <div class="filter-row">
    <label>Qty <span class="range"><input type="number" step="0.0001" name="qty_min" value="{{ filters.qty_min }}"><span>&ndash;</span><input type="number" step="0.0001" name="qty_max" value="{{ filters.qty_max }}"></span></label>
    <label>Entry price <span class="range"><input type="number" step="0.0001" name="entry_price_min" value="{{ filters.entry_price_min }}"><span>&ndash;</span><input type="number" step="0.0001" name="entry_price_max" value="{{ filters.entry_price_max }}"></span></label>
    <label>P&amp;L <span class="range"><input type="number" step="0.01" name="pnl_min" value="{{ filters.pnl_min }}"><span>&ndash;</span><input type="number" step="0.01" name="pnl_max" value="{{ filters.pnl_max }}"></span></label>
    <label>R <span class="range"><input type="number" step="0.01" name="r_min" value="{{ filters.r_min }}"><span>&ndash;</span><input type="number" step="0.01" name="r_max" value="{{ filters.r_max }}"></span></label>
    <label>Max move ($) <span class="range"><input type="number" step="0.01" name="max_move_min" value="{{ filters.max_move_min }}"><span>&ndash;</span><input type="number" step="0.01" name="max_move_max" value="{{ filters.max_move_max }}"></span></label>
    <label>Max pullback ($) <span class="range"><input type="number" step="0.01" name="max_pullback_min" value="{{ filters.max_pullback_min }}"><span>&ndash;</span><input type="number" step="0.01" name="max_pullback_max" value="{{ filters.max_pullback_max }}"></span></label>
    <div class="filter-actions">
      <button type="submit">Filter</button>
      <a href="{% url 'graphs_view' %}?clear=1">Clear</a>
    </div>
  </div>
</form>
<div class="filter-chips-row"></div>

<div class="summary">
  <div>
    <a href="{{ pnl_unit_toggle_url }}" title="Click to switch between $ and R" style="color:inherit; text-decoration:none; border-bottom:1px dotted currentColor; cursor:pointer;">
      Total P&amp;L ({{ pnl_unit }})
      {% if pnl_unit == "$" %}
      <b class="{% if total_pnl > 0 %}win{% elif total_pnl < 0 %}loss{% endif %}">${{ total_pnl|floatformat:2 }}</b>
      {% else %}
      <b class="{% if total_r > 0 %}win{% elif total_r < 0 %}loss{% endif %}">{{ total_r|floatformat:2 }}R</b>
      {% endif %}
    </a>
  </div>
  <div>Win rate <b>{% if win_rate is not None %}{{ win_rate|floatformat:1 }}%{% else %}—{% endif %}</b></div>
  <div>Average R <b class="{% if avg_r > 0 %}win{% elif avg_r < 0 %}loss{% endif %}">{% if avg_r is not None %}{{ avg_r|floatformat:2 }}R{% else %}—{% endif %}</b></div>
  <div title="Gross profit / gross loss — above 1 means you made more than you lost">Profit factor <b class="{% if profit_factor > 1 %}win{% elif profit_factor < 1 %}loss{% endif %}">{% if profit_factor is not None %}{{ profit_factor|floatformat:2 }}{% else %}—{% endif %}</b></div>
  <div>Trades <b>{{ trades_count }}</b></div>
  <div>
    <a href="{{ commissions_toggle_url }}" title="Click to switch between gross and net of commission" style="color:inherit; text-decoration:none; border-bottom:1px dotted currentColor; cursor:pointer;">
      Total commission ({% if commissions == "net" %}net{% else %}gross{% endif %})
      <b>${{ total_commission|floatformat:2 }}</b>
    </a>
  </div>
</div>

{% if view == "month" %}
<h2>Results by month ({{ pnl_unit }})</h2>
{% elif view == "week" %}
<h2>Results by week ({{ pnl_unit }})</h2>
{% elif view == "duration" %}
<h2>Results by duration ({{ pnl_unit }})</h2>
{% elif view == "setup" %}
<h2>Results by setup ({{ pnl_unit }})</h2>
{% else %}
<h2>Equity curve ({{ pnl_unit }})</h2>
{% endif %}
<p style="opacity:0.6; font-size:0.8rem; margin:-0.5rem 0 0.5rem;">
  Solid = {% if commissions == "net" %}net of commission{% else %}gross{% endif %} (the current selection above) &middot;
  faded/dashed overlay = {% if commissions == "net" %}gross{% else %}net of commission{% endif %}
</p>
<div id="graph-chart" style="width:100%; height:420px; position:relative;"></div>
{% if view == "equity" and not points %}
<p style="opacity:0.7; margin-top:0.5rem;">No closed trades match the current filters.</p>
{% elif view != "equity" and not bars %}
<p style="opacity:0.7; margin-top:0.5rem;">No closed trades match the current filters.</p>
{% endif %}

{{ points|json_script:"equity-points" }}
{{ points_shadow|json_script:"equity-points-shadow" }}
{{ bars|json_script:"chart-bars" }}
{{ bars_shadow|json_script:"chart-bars-shadow" }}
{{ duration_labels|json_script:"duration-labels" }}
{{ chart_colors|json_script:"chart-colors" }}
<script src="{% static 'journal/js/lightweight-charts.standalone.production.js' %}"></script>
<script>
(function () {
  const COLORS = JSON.parse(document.getElementById("chart-colors").textContent);
  const container = document.getElementById("graph-chart");

  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);
  }

  function whenSized(el, cb) {
    let settled = false;
    function poll() {
      if (settled) return;
      if (el.clientWidth > 0) { settled = true; cb(); return; }
      requestAnimationFrame(poll);
    }
    poll();
    setTimeout(() => { if (!settled) { settled = true; cb(); } }, 1000);
  }

  function buildChart(tickFormatter, timeFormatter) {
    return LightweightCharts.createChart(container, {
      width: container.clientWidth,
      height: 420,
      layout: { background: { color: COLORS.background }, textColor: COLORS.text, attributionLogo: false },
      grid: { vertLines: { color: "#263E6166" }, horzLines: { color: "#263E6166" } },
      crosshair: { mode: LightweightCharts.CrosshairMode.Normal },
      timeScale: { timeVisible: true, secondsVisible: false, tickMarkFormatter: tickFormatter },
      localization: { timeFormatter: timeFormatter },
    });
  }

  // Neutral, sign-independent color for the "shadow" overlay — the other gross/net
  // basis than whatever the commissions toggle currently selects. Deliberately not
  // win/loss colored (unlike the main series): it reads as "the other reference
  // line," not as a second win/loss judgment competing with the main one.
  const SHADOW_COLOR = "#8FA0BE";

  {% if view == "duration" or view == "setup" %}
  // Not a time series — each bar is a duration bucket (or a setup tag) in a fixed
  // order, so the x-axis uses plain sequential indices with a label lookup instead
  // of dates.
  const bars = JSON.parse(document.getElementById("chart-bars").textContent);
  const barsShadow = JSON.parse(document.getElementById("chart-bars-shadow").textContent);
  const labels = JSON.parse(document.getElementById("duration-labels").textContent);
  if (!container || !bars.length) return;

  whenSized(container, function () {
    const chart = buildChart((i) => labels[i] || "", (i) => labels[i] || "");
    // Shadow added first so the main series' opaque bars draw on top of it — only
    // the portion where the shadow bar is taller than the main one peeks through.
    const shadowSeries = chart.addHistogramSeries({ priceFormat: { type: "price", precision: 2 } });
    shadowSeries.setData(barsShadow.map((b) => ({ time: b.time, value: b.value, color: SHADOW_COLOR + "55" })));
    const series = chart.addHistogramSeries({ priceFormat: { type: "price", precision: 2 } });
    series.setData(bars.map((b) => ({ time: b.time, value: b.value, color: b.value >= 0 ? COLORS.up : COLORS.down })));
    chart.timeScale().fitContent();
    window.addEventListener("resize", function () { chart.applyOptions({ width: container.clientWidth }); });
  });
  {% elif view == "month" or view == "week" %}
  const bars = JSON.parse(document.getElementById("chart-bars").textContent);
  const barsShadow = JSON.parse(document.getElementById("chart-bars-shadow").textContent);
  if (!container || !bars.length) return;

  whenSized(container, function () {
    const chart = buildChart(nyTickFormat, nyFullFormat);
    const shadowSeries = chart.addHistogramSeries({ priceFormat: { type: "price", precision: 2 } });
    shadowSeries.setData(barsShadow.map((b) => ({ time: b.time, value: b.value, color: SHADOW_COLOR + "55" })));
    const series = chart.addHistogramSeries({ priceFormat: { type: "price", precision: 2 } });
    series.setData(bars.map((b) => ({ time: b.time, value: b.value, color: b.value >= 0 ? COLORS.up : COLORS.down })));
    chart.timeScale().fitContent();
    window.addEventListener("resize", function () { chart.applyOptions({ width: container.clientWidth }); });
  });
  {% else %}
  const points = JSON.parse(document.getElementById("equity-points").textContent);
  const pointsShadow = JSON.parse(document.getElementById("equity-points-shadow").textContent);
  if (!container || !points.length) return;

  whenSized(container, function () {
    const finalValue = points[points.length - 1].value;
    const lineColor = finalValue >= 0 ? COLORS.up : COLORS.down;

    const chart = buildChart(nyTickFormat, nyFullFormat);
    // Shadow drawn first (behind), thinner and dashed, so the main line reads as the
    // primary series and the shadow as clearly secondary/reference-only.
    const shadowSeries = chart.addAreaSeries({
      lineColor: SHADOW_COLOR,
      topColor: SHADOW_COLOR + "22",
      bottomColor: SHADOW_COLOR + "00",
      lineWidth: 1,
      lineStyle: LightweightCharts.LineStyle.Dashed,
    });
    shadowSeries.setData(pointsShadow);
    const series = chart.addAreaSeries({
      lineColor: lineColor,
      topColor: lineColor + "33",
      bottomColor: lineColor + "00",
      lineWidth: 2,
    });
    series.setData(points);
    chart.timeScale().fitContent();

    window.addEventListener("resize", function () {
      chart.applyOptions({ width: container.clientWidth });
    });
  });
  {% endif %}
})();
</script>
{% endblock %}