{% extends "base.html" %}
{% block title %}FathomDesk — {{ ticker }} Volume Profile{% endblock %}
{% block extra_css %}
<style>
  .fd-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-card, #16213e);
    border-bottom: 1px solid var(--border-color, #2a2a40);
    flex-wrap: wrap;
  }
  .fd-ticker-input {
    background: var(--bg-input, #0f1829);
    border: 1px solid var(--border-color, #2a2a40);
    color: var(--text-primary, #e0e0f0);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    width: 90px;
  }
  .fd-ticker-input:focus { outline: 2px solid var(--accent-blue, #4a90d9); }
  .fd-tf-btn {
    background: var(--bg-input, #0f1829);
    border: 1px solid var(--border-color, #2a2a40);
    color: var(--text-secondary, #a0a0b8);
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
  }
  .fd-tf-btn.active, .fd-tf-btn:hover {
    background: var(--accent-blue, #4a90d9);
    color: #fff;
    border-color: var(--accent-blue, #4a90d9);
  }
  .fd-stats {
    display: flex;
    gap: 20px;
    font-size: 12px;
    color: var(--text-muted, #6c6c80);
    margin-left: auto;
    flex-wrap: wrap;
  }
  .fd-stat-item { display: flex; flex-direction: column; }
  .fd-stat-label { font-size: 10px; color: var(--text-dim, #4a4a60); }
  .fd-stat-val { font-weight: 600; color: var(--text-secondary, #a0a0b8); }
  .fd-stat-val.up   { color: var(--status-green, #28a745); }
  .fd-stat-val.down { color: var(--status-red, #dc3545); }

  .fd-chart-wrap {
    position: relative;
    width: 100%;
    overflow-x: auto;
    background: var(--bg-page, #0d1526);
    padding: 0;
  }
  .fd-chart-wrap svg { display: block; }

  .fd-legend {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 6px 16px;
    font-size: 11px;
    color: var(--text-muted, #6c6c80);
    background: var(--bg-card, #16213e);
    border-top: 1px solid var(--border-color, #2a2a40);
    flex-wrap: wrap;
  }
  .fd-legend-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 2px;
    margin-right: 4px;
    vertical-align: middle;
  }
  .fd-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 420px;
    color: var(--text-muted, #6c6c80);
    font-size: 13px;
    gap: 8px;
  }
  @keyframes fd-spin { to { transform: rotate(360deg); } }
  .fd-spinner {
    width: 18px; height: 18px;
    border: 2px solid var(--border-color, #2a2a40);
    border-top-color: var(--accent-blue, #4a90d9);
    border-radius: 50%;
    animation: fd-spin .6s linear infinite;
  }

  /* Pattern detail modal */
  #fd-pattern-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,.55);
    display: none;
    align-items: center;
    justify-content: center;
  }
  #fd-modal-card {
    background: var(--bg-card, #16213e);
    border: 1px solid var(--border-color, #2a2a40);
    border-radius: 8px;
    padding: 20px 24px;
    min-width: 280px;
    max-width: 400px;
    box-shadow: 0 8px 32px rgba(0,0,0,.6);
    position: relative;
  }
  #fd-modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    color: var(--text-muted, #6c6c80);
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
  }
  #fd-modal-close:hover { color: var(--text-primary, #e0e0f0); }

  /* Trap History panel */
  .fd-trap-panel {
    margin: 16px;
    background: var(--bg-card, #16213e);
    border: 1px solid var(--border-color, #2a2a40);
    border-radius: 8px;
    overflow: hidden;
  }
  .fd-trap-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color, #2a2a40);
    background: var(--bg-input, #0f1829);
  }
  .fd-trap-panel-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #a0a0b8);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .fd-trap-panel-count {
    font-size: 11px;
    color: var(--text-muted, #6c6c80);
  }
  .fd-trap-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
  }
  .fd-trap-table thead th {
    padding: 7px 12px;
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim, #4a4a60);
    border-bottom: 1px solid var(--border-color, #2a2a40);
    background: var(--bg-input, #0f1829);
  }
  .fd-trap-table tbody tr {
    border-bottom: 1px solid rgba(42,42,64,0.5);
    cursor: pointer;
    transition: background .12s;
  }
  .fd-trap-table tbody tr:last-child { border-bottom: none; }
  .fd-trap-table tbody tr:hover { background: rgba(74,144,217,0.06); }
  .fd-trap-table td {
    padding: 7px 12px;
    color: var(--text-secondary, #a0a0b8);
    vertical-align: top;
  }
  .fd-trap-sev {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .fd-trap-sev.critical { background: rgba(220,53,69,0.18); color: #e05260; border: 1px solid rgba(220,53,69,0.35); }
  .fd-trap-sev.high     { background: rgba(255,140,0,0.15);  color: #e8943a; border: 1px solid rgba(255,140,0,0.3); }
  .fd-trap-sev.medium   { background: rgba(245,197,24,0.12); color: #c8aa18; border: 1px solid rgba(245,197,24,0.3); }
  .fd-trap-ticker { font-weight: 700; color: var(--text-primary, #e0e0f0); }
  .fd-trap-type   { font-family: monospace; color: var(--accent-blue, #4a90d9); }
  .fd-trap-ctx {
    display: none;
    padding: 8px 12px 10px 12px;
    background: rgba(15,24,41,0.6);
    border-top: 1px solid rgba(42,42,64,0.6);
    font-size: 11px;
    color: var(--text-muted, #6c6c80);
    line-height: 1.7;
  }
  .fd-trap-ctx.open { display: block; }
  .fd-trap-expand { font-size: 10px; color: var(--text-dim, #4a4a60); transition: transform .15s; }
  .fd-trap-expand.open { transform: rotate(90deg); }
  .fd-trap-empty {
    padding: 28px 16px;
    text-align: center;
    color: var(--text-muted, #6c6c80);
    font-size: 12px;
  }
</style>
{% endblock %}
{% block content %}
<div class="fd-toolbar">
  <form id="fd-form" style="display:flex;gap:8px;align-items:center;" onsubmit="return fdSubmit(event)">
    <input id="fd-ticker" class="fd-ticker-input" value="{{ ticker }}" placeholder="SPY" autocomplete="off" spellcheck="false">
    <button type="submit" class="fd-tf-btn active">Load</button>
  </form>
  <div style="display:flex;gap:6px;">
    <button class="fd-tf-btn active" data-tf="1D" onclick="fdSetTf(this,'1D')">1D</button>
    <button class="fd-tf-btn" data-tf="1H" onclick="fdSetTf(this,'1H')">1H</button>
    <button class="fd-tf-btn" data-tf="15M" onclick="fdSetTf(this,'15M')">15M</button>
  </div>
  <div class="fd-stats" id="fd-stats"></div>
</div>

<div class="fd-chart-wrap" id="fd-chart-wrap">
  <div class="fd-loading" id="fd-loading"><div class="fd-spinner"></div> Loading chart…</div>
</div>

<div class="fd-legend">
  <span><span class="fd-legend-dot" style="background:#28a745;"></span>Bullish candle</span>
  <span><span class="fd-legend-dot" style="background:#dc3545;"></span>Bearish candle</span>
  <span><span class="fd-legend-dot" style="background:#f5c518;height:3px;border-radius:0;"></span>POC</span>
  <span><span class="fd-legend-dot" style="background:#4a90d9;opacity:.45;"></span>Value Area</span>
  <span><span class="fd-legend-dot" style="background:#4a90d9;"></span>VP Bucket</span>
  <span><span class="fd-legend-dot" style="background:#e8a838;"></span>HVN lines</span>
  <span><span class="fd-legend-dot" style="background:#dc3545;opacity:.6;"></span>Resistance S/R</span>
  <span><span class="fd-legend-dot" style="background:#28a745;opacity:.6;"></span>Support S/R</span>
  <span><span class="fd-legend-dot" style="background:#f5a623;"></span>Rising Wedge</span>
  <span><span class="fd-legend-dot" style="background:#7b68ee;"></span>Falling Wedge</span>
  <span style="cursor:help;" title="Click a pattern badge on the chart for details">▼▲ Patterns (click)</span>
</div>

<!-- Trap History panel -->
<div class="fd-trap-panel" id="fd-trap-panel">
  <div class="fd-trap-panel-header">
    <span class="fd-trap-panel-title">&#9888; Trap History</span>
    <span class="fd-trap-panel-count" id="fd-trap-count">Loading…</span>
  </div>
  <div id="fd-trap-body">
    <table id="fd-trap-table" class="fd-trap-table">
      <thead><tr>
        <th>Ticker</th><th>Pattern</th><th>Confidence</th><th>Timeframe</th><th>Detected</th>
      </tr></thead>
      <tbody id="fd-trap-tbody"><tr><td colspan="5" style="padding:8px;text-align:center;color:var(--text-muted,#6c6c80);">Loading&#8230;</td></tr></tbody>
    </table>
  </div>
</div>

<!-- Limit Order Form -->
<div id="fd-order-panel" style="margin-top:12px;padding:12px;background:var(--bg-card,#14142a);border:1px solid var(--border-color,#2a2a40);border-radius:8px;">
  <div style="font-size:13px;font-weight:600;color:var(--text-primary,#e0e0f0);margin-bottom:8px;">Place Limit Order</div>
  <form id="fd-order-form" style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;" onsubmit="return false;">
    <input id="order-ticker" placeholder="Ticker" style="width:80px;padding:4px 8px;background:var(--bg-input,#1a1a2e);border:1px solid var(--border-color,#2a2a40);border-radius:4px;color:var(--text-primary,#e0e0f0);font-size:12px;" autocomplete="off">
    <input id="order-qty" type="number" placeholder="Qty" min="1" style="width:70px;padding:4px 8px;background:var(--bg-input,#1a1a2e);border:1px solid var(--border-color,#2a2a40);border-radius:4px;color:var(--text-primary,#e0e0f0);font-size:12px;">
    <input id="order-price" type="number" placeholder="Price" step="0.01" min="0.01" style="width:80px;padding:4px 8px;background:var(--bg-input,#1a1a2e);border:1px solid var(--border-color,#2a2a40);border-radius:4px;color:var(--text-primary,#e0e0f0);font-size:12px;">
    <button type="submit" id="order-submit" style="padding:4px 12px;background:var(--accent-blue,#4a90d9);border:none;border-radius:4px;color:#fff;font-size:12px;cursor:pointer;">Submit</button>
  </form>
</div>

<!-- Pattern detail modal -->
<div id="fd-pattern-modal">
  <div id="fd-modal-card">
    <button id="fd-modal-close" onclick="window.fdHideModal()">×</button>
    <div id="fd-modal-body"></div>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script>
(function () {
  'use strict';

  var _currentTf = '1D';
  var _currentTicker = {{ ticker | tojson }};
  var _highlightId = new URLSearchParams(window.location.search).get('highlight');
  var _chartGeom = null;

  // ── SVG helpers ─────────────────────────────────────────────────────────────
  function svgEl(tag, attrs) {
    var el = document.createElementNS('http://www.w3.org/2000/svg', tag);
    if (attrs) Object.keys(attrs).forEach(function (k) { el.setAttribute(k, attrs[k]); });
    return el;
  }

  function cssVar(name, fb) {
    var v = getComputedStyle(document.documentElement).getPropertyValue(name);
    return (v && v.trim()) ? v.trim() : fb;
  }

  // ── Tooltip ──────────────────────────────────────────────────────────────────
  var _tip = null;
  function tip() {
    if (_tip) return _tip;
    _tip = document.createElement('div');
    _tip.style.cssText =
      'position:fixed;pointer-events:none;z-index:99999;padding:6px 10px;' +
      'border-radius:4px;font-size:12px;line-height:1.6;white-space:nowrap;' +
      'opacity:0;transition:opacity .12s;' +
      'background:' + cssVar('--bg-card','#16213e') + ';' +
      'border:1px solid ' + cssVar('--border-color','#2a2a40') + ';' +
      'color:' + cssVar('--text-secondary','#a0a0b8') + ';box-shadow:0 2px 8px rgba(0,0,0,.5);';
    document.body.appendChild(_tip);
    return _tip;
  }
  function showTip(html, e) { tip().innerHTML = html; tip().style.opacity='1'; moveTip(e); }
  function moveTip(e) {
    var t = tip();
    var x = e.clientX + 14, y = e.clientY - 8;
    var r = t.getBoundingClientRect();
    if (x + r.width  > window.innerWidth  - 8) x = e.clientX - r.width  - 14;
    if (y + r.height > window.innerHeight - 8) y = e.clientY - r.height - 8;
    if (y < 4) y = 4;
    t.style.left = x + 'px'; t.style.top = y + 'px';
  }
  function hideTip() { tip().style.opacity = '0'; }

  // ── Modal ────────────────────────────────────────────────────────────────────
  window.fdHideModal = function () {
    document.getElementById('fd-pattern-modal').style.display = 'none';
  };

  document.getElementById('fd-pattern-modal').addEventListener('click', function (e) {
    if (e.target === this) window.fdHideModal();
  });

  // ── Number formatting ────────────────────────────────────────────────────────
  function fmtVol(v) {
    if (v >= 1e6) return (v / 1e6).toFixed(2) + 'M';
    if (v >= 1e3) return (v / 1e3).toFixed(1) + 'K';
    return v.toFixed(0);
  }
  function fmtPx(v) { return (+v).toFixed(2); }

  // ── Pattern badge text (short) ───────────────────────────────────────────────
  var BADGE_TEXT = {
    'double_top':    '▼ DTop',
    'double_bottom': '▲ DBot',
    'triple_top':    '▼ TTop',
    'triple_bottom': '▲ TBot',
    'rising_wedge':  '⋀ R.Wdg',
    'falling_wedge': '⋁ F.Wdg',
  };
  var PATTERN_COLORS = {
    'double_top':    '#dc3545',
    'double_bottom': '#28a745',
    'triple_top':    '#dc3545',
    'triple_bottom': '#28a745',
    'rising_wedge':  '#f5a623',
    'falling_wedge': '#7b68ee',
  };

  // ── Main render ──────────────────────────────────────────────────────────────
  function render(ticker, tf) {
    var wrap = document.getElementById('fd-chart-wrap');
    wrap.innerHTML = '<div class="fd-loading"><div class="fd-spinner"></div> Loading ' + ticker + '…</div>';

    fetch('/api/trading/chart/' + encodeURIComponent(ticker) + '?tf=' + tf + '&limit=120')
      .then(function (r) { return r.json(); })
      .then(function (d) {
        if (d.error) {
          wrap.innerHTML = '<div class="fd-loading" style="color:var(--status-red,#dc3545);">Error: ' + d.error + '</div>';
          return;
        }
        drawChart(wrap, d.bars, d.volume_profile, d.patterns || [], d.sr_levels || [], ticker, tf);
        drawStats(d.bars);
        if (_highlightId) maybeAnnotateNews();
      })
      .catch(function (err) {
        wrap.innerHTML = '<div class="fd-loading" style="color:var(--status-red,#dc3545);">Fetch error: ' + err + '</div>';
      });
  }

  function drawStats(bars) {
    if (!bars || !bars.length) return;
    var last  = bars[bars.length - 1];
    var prev  = bars.length > 1 ? bars[bars.length - 2] : last;
    var chg   = last.c - prev.c;
    var chgPct = prev.c ? (chg / prev.c * 100) : 0;
    var dir   = chg >= 0 ? 'up' : 'down';
    var html  =
      '<div class="fd-stat-item"><span class="fd-stat-label">CLOSE</span><span class="fd-stat-val ' + dir + '">' + fmtPx(last.c) + '</span></div>' +
      '<div class="fd-stat-item"><span class="fd-stat-label">CHG</span><span class="fd-stat-val ' + dir + '">' + (chg >= 0 ? '+' : '') + fmtPx(chg) + ' (' + (chgPct >= 0 ? '+' : '') + chgPct.toFixed(2) + '%)</span></div>' +
      '<div class="fd-stat-item"><span class="fd-stat-label">HIGH</span><span class="fd-stat-val">' + fmtPx(last.h) + '</span></div>' +
      '<div class="fd-stat-item"><span class="fd-stat-label">LOW</span><span class="fd-stat-val">' + fmtPx(last.l) + '</span></div>' +
      '<div class="fd-stat-item"><span class="fd-stat-label">VOL</span><span class="fd-stat-val">' + fmtVol(last.v) + '</span></div>';
    document.getElementById('fd-stats').innerHTML = html;
  }

  function drawChart(wrap, bars, vp, patterns, srLevels, ticker, tf) {
    wrap.innerHTML = '';
    if (!bars || !bars.length) {
      wrap.innerHTML = '<div class="fd-loading">No data</div>';
      return;
    }

    var W        = wrap.clientWidth || 900;
    var H        = 420;
    var padL     = 56;
    var padR     = 12;
    var padT     = 16;
    var padB     = 40;
    var plotW    = W - padL - padR;
    var plotH    = H - padT - padB;

    var vpFrac   = 0.15;
    var vpW      = plotW * vpFrac;
    var candleW  = plotW - vpW;
    var vpLeft   = padL + candleW;

    // ── Price range ────────────────────────────────────────────────────────────
    var priceMin = Infinity, priceMax = -Infinity;
    bars.forEach(function (b) {
      if (b.l < priceMin) priceMin = b.l;
      if (b.h > priceMax) priceMax = b.h;
    });
    var pad = (priceMax - priceMin) * 0.02 || 1;
    priceMin -= pad; priceMax += pad;
    var priceRange = priceMax - priceMin;

    function py(price) {
      return padT + plotH - ((price - priceMin) / priceRange) * plotH;
    }

    var n  = bars.length;
    var cw = candleW / n;

    // ── Build SVG ──────────────────────────────────────────────────────────────
    var svg = svgEl('svg', {
      width: W, height: H,
      viewBox: '0 0 ' + W + ' ' + H,
      'aria-label': ticker + ' volume profile chart'
    });
    svg.style.display = 'block';
    svg.style.background = cssVar('--bg-page', '#0d1526');

    // ── Clipping region for candles & overlays ─────────────────────────────────
    var defs = svgEl('defs');
    var clip = svgEl('clipPath', { id: 'fd-candle-clip' });
    clip.appendChild(svgEl('rect', { x: padL, y: padT, width: candleW, height: plotH }));
    defs.appendChild(clip);
    svg.appendChild(defs);

    // ── Y-axis grid + price labels ─────────────────────────────────────────────
    var yTicks = 6;
    for (var t = 0; t <= yTicks; t++) {
      var price = priceMin + (t / yTicks) * priceRange;
      var yy    = py(price);
      svg.appendChild(svgEl('line', {
        x1: padL, y1: yy, x2: W - padR, y2: yy,
        stroke: cssVar('--border-color', '#2a2a40'), 'stroke-width': '1', opacity: '0.5'
      }));
      var lbl = svgEl('text', {
        x: padL - 5, y: yy + 4,
        fill: cssVar('--text-muted', '#6c6c80'),
        'font-size': '10', 'text-anchor': 'end'
      });
      lbl.textContent = fmtPx(price);
      svg.appendChild(lbl);
    }

    // ── X-axis date labels ─────────────────────────────────────────────────────
    var labelEvery = Math.max(1, Math.ceil(n / 10));
    bars.forEach(function (b, i) {
      if (i % labelEvery !== 0 && i !== n - 1) return;
      var cx = padL + (i + 0.5) * cw;
      var t2 = String(b.t || '').slice(0, 10);
      var lbl = svgEl('text', {
        x: cx, y: H - 8,
        fill: cssVar('--text-muted', '#6c6c80'),
        'font-size': '9', 'text-anchor': 'middle'
      });
      lbl.textContent = t2.slice(5);
      svg.appendChild(lbl);
    });

    // ── Value area band ────────────────────────────────────────────────────────
    if (vp && vp.value_area) {
      var vaY1  = py(vp.value_area.high);
      var vaY2  = py(vp.value_area.low);
      var vaH   = vaY2 - vaY1;
      svg.appendChild(svgEl('rect', {
        x: padL, y: vaY1, width: candleW + vpW, height: vaH,
        fill: cssVar('--accent-blue', '#4a90d9'), opacity: '0.07'
      }));
    }

    // ── S/R horizontal lines (before candles — behind them) ───────────────────
    if (srLevels && srLevels.length) {
      srLevels.forEach(function (sr) {
        var ysr = py(sr.price);
        if (ysr < padT || ysr > padT + plotH) return;
        var isRes  = sr.type === 'resistance';
        var color  = isRes ? '#dc3545' : '#28a745';
        var opacity = (0.15 + sr.strength * 0.55).toFixed(2);
        var sw      = (0.8 + sr.strength * 1.8).toFixed(1);
        var dash    = isRes ? '4 3' : '3 4';
        var srLine = svgEl('line', {
          x1: padL, y1: ysr, x2: vpLeft, y2: ysr,
          stroke: color, 'stroke-width': sw,
          opacity: opacity, 'stroke-dasharray': dash
        });
        srLine.addEventListener('mouseenter', function (e) {
          showTip(
            '<b>' + (isRes ? 'Resistance' : 'Support') + '</b><br>' +
            'Price: <b>' + fmtPx(sr.price) + '</b><br>' +
            'Touches: ' + sr.touches + ' &middot; Strength: ' + Math.round(sr.strength * 100) + '%',
            e
          );
        });
        srLine.addEventListener('mousemove', moveTip);
        srLine.addEventListener('mouseleave', hideTip);
        svg.appendChild(srLine);
      });
    }

    // ── HVN horizontal lines ───────────────────────────────────────────────────
    if (vp && vp.hvns) {
      vp.hvns.forEach(function (hvn) {
        var yh = py(+hvn);
        svg.appendChild(svgEl('line', {
          x1: padL, y1: yh, x2: W - padR, y2: yh,
          stroke: '#e8a838', 'stroke-width': '1',
          'stroke-dasharray': '3 4', opacity: '0.15'
        }));
      });
    }

    // ── POC horizontal line ────────────────────────────────────────────────────
    if (vp && vp.poc != null) {
      var pocY = py(vp.poc);
      svg.appendChild(svgEl('line', {
        x1: padL, y1: pocY, x2: W - padR, y2: pocY,
        stroke: '#f5c518', 'stroke-width': '1.5',
        'stroke-dasharray': '5 3', opacity: '0.85'
      }));
      var pocLbl = svgEl('text', {
        x: padL - 5, y: pocY - 3,
        fill: '#f5c518', 'font-size': '9', 'text-anchor': 'end'
      });
      pocLbl.textContent = 'POC';
      svg.appendChild(pocLbl);
    }

    // ── Wedge trend lines (before candles) ────────────────────────────────────
    if (patterns && patterns.length) {
      patterns.forEach(function (pat) {
        if (pat.type !== 'rising_wedge' && pat.type !== 'falling_wedge') return;
        var color = PATTERN_COLORS[pat.type] || '#a0a0b8';
        var sb = pat.start_bar, eb = pat.end_bar;
        var sh = pat.slope_high || 0, ih = pat.intercept_high || 0;
        var sl = pat.slope_low  || 0, il = pat.intercept_low  || 0;

        var x1 = padL + (sb + 0.5) * cw;
        var x2 = padL + (eb + 0.5) * cw;

        // Resistance (upper) line
        svg.appendChild(svgEl('line', {
          x1: x1, y1: py(sh * sb + ih),
          x2: x2, y2: py(sh * eb + ih),
          stroke: color, 'stroke-width': '1.5', opacity: '0.75',
          'clip-path': 'url(#fd-candle-clip)'
        }));
        // Support (lower) line — dashed
        svg.appendChild(svgEl('line', {
          x1: x1, y1: py(sl * sb + il),
          x2: x2, y2: py(sl * eb + il),
          stroke: color, 'stroke-width': '1.5', opacity: '0.75',
          'stroke-dasharray': '5 3',
          'clip-path': 'url(#fd-candle-clip)'
        }));
      });
    }

    // ── VP histogram (right 15%) ───────────────────────────────────────────────
    if (vp && vp.buckets && vp.buckets.length) {
      var maxVol = 0;
      vp.buckets.forEach(function (b) { if (b.volume > maxVol) maxVol = b.volume; });
      if (maxVol <= 0) maxVol = 1;

      var hvnPrices = {};
      if (vp.hvns) vp.hvns.forEach(function (h) { hvnPrices[(+h).toFixed(4)] = true; });

      vp.buckets.forEach(function (bkt) {
        var bktMid    = (bkt.price_low + bkt.price_high) / 2;
        var barTopY   = py(bkt.price_high);
        var barBotY   = py(bkt.price_low);
        var barHeight = Math.max(1, barBotY - barTopY);
        var barWidth  = (bkt.volume / maxVol) * vpW;

        var isPOC = vp.poc != null && Math.abs(bktMid - vp.poc) < (bkt.price_high - bkt.price_low) * 0.5;
        var isHVN = hvnPrices[bktMid.toFixed(4)];
        var color = isPOC ? '#f5c518' : (isHVN ? '#e8a838' : cssVar('--accent-blue', '#4a90d9'));
        var opacity = isPOC ? '0.9' : (isHVN ? '0.65' : '0.45');

        var rect = svgEl('rect', {
          x: vpLeft, y: barTopY,
          width: barWidth, height: barHeight,
          fill: color, opacity: opacity, rx: '1'
        });

        rect.addEventListener('mouseenter', function (e) {
          showTip(
            '<b>' + fmtPx(bkt.price_low) + ' \u2013 ' + fmtPx(bkt.price_high) + '</b><br>' +
            'Vol: <b>' + fmtVol(bkt.volume) + '</b>' +
            (isPOC ? '<br><b style="color:#f5c518">POC</b>' : '') +
            (isHVN && !isPOC ? '<br><b style="color:#e8a838">HVN</b>' : ''),
            e
          );
        });
        rect.addEventListener('mousemove', moveTip);
        rect.addEventListener('mouseleave', hideTip);
        svg.appendChild(rect);
      });

      svg.appendChild(svgEl('line', {
        x1: vpLeft, y1: padT, x2: vpLeft, y2: padT + plotH,
        stroke: cssVar('--border-color', '#2a2a40'), 'stroke-width': '1', opacity: '0.4'
      }));
    }

    // ── Candlestick candles ────────────────────────────────────────────────────
    var bodyW = Math.max(1, cw * 0.6);
    var grp = svgEl('g', { 'clip-path': 'url(#fd-candle-clip)' });

    bars.forEach(function (b, i) {
      var cx   = padL + (i + 0.5) * cw;
      var oY   = py(b.o);
      var cY   = py(b.c);
      var hY   = py(b.h);
      var lY   = py(b.l);
      var bull = b.c >= b.o;
      var color = bull ? cssVar('--status-green', '#28a745') : cssVar('--status-red', '#dc3545');
      var bodyTop = Math.min(oY, cY);
      var bodyH   = Math.max(1, Math.abs(cY - oY));

      grp.appendChild(svgEl('line', {
        x1: cx, y1: hY, x2: cx, y2: lY,
        stroke: color, 'stroke-width': '1'
      }));
      var rect = svgEl('rect', {
        x: cx - bodyW / 2, y: bodyTop,
        width: bodyW, height: bodyH,
        fill: color, opacity: bull ? '0.85' : '0.9'
      });
      rect.addEventListener('mouseenter', function (e) {
        showTip(
          '<b>' + String(b.t || '').slice(0, 10) + '</b><br>' +
          'O: ' + fmtPx(b.o) + '  H: ' + fmtPx(b.h) + '<br>' +
          'L: ' + fmtPx(b.l) + '  C: <b>' + fmtPx(b.c) + '</b><br>' +
          'Vol: ' + fmtVol(b.v),
          e
        );
      });
      rect.addEventListener('mousemove', moveTip);
      rect.addEventListener('mouseleave', hideTip);
      grp.appendChild(rect);
    });
    svg.appendChild(grp);

    // ── Pattern markers (on top of candles) ───────────────────────────────────
    if (patterns && patterns.length) {
      var markerGrp = svgEl('g', { 'clip-path': 'url(#fd-candle-clip)' });

      patterns.forEach(function (pat) {
        var bb = pat.breakout_bar;
        if (bb < 0 || bb >= n) return;

        var cx = padL + (bb + 0.5) * cw;
        var bar = bars[bb];
        if (!bar) return;

        var isTop    = pat.type.indexOf('top') >= 0 || pat.type === 'rising_wedge';
        var color    = PATTERN_COLORS[pat.type] || '#a0a0b8';
        var badgeTxt = BADGE_TEXT[pat.type] || pat.type;

        // Badge y: above high for tops, below low for bottoms
        var anchorY  = isTop ? py(bar.h) : py(bar.l);
        var badgeH   = 14;
        var badgeW   = Math.max(30, badgeTxt.length * 5.8 + 10);
        var badgeY   = isTop ? anchorY - badgeH - 4 : anchorY + 4;

        var mg = svgEl('g', { style: 'cursor:pointer' });

        // Connector line
        mg.appendChild(svgEl('line', {
          x1: cx, y1: isTop ? anchorY - 2 : anchorY + 2,
          x2: cx, y2: isTop ? badgeY + badgeH : badgeY,
          stroke: color, 'stroke-width': '1', opacity: '0.5',
          'stroke-dasharray': '2 2'
        }));

        // Badge background
        mg.appendChild(svgEl('rect', {
          x: cx - badgeW / 2, y: badgeY,
          width: badgeW, height: badgeH,
          fill: color, opacity: '0.88', rx: '3'
        }));

        // Badge text
        var txt = svgEl('text', {
          x: cx, y: badgeY + badgeH - 3,
          fill: '#fff', 'font-size': '8.5',
          'font-weight': '600', 'text-anchor': 'middle',
          style: 'pointer-events:none'
        });
        txt.textContent = badgeTxt;
        mg.appendChild(txt);

        // Click → modal
        (function (p, b_ref) {
          mg.addEventListener('click', function () {
            showPatternModal(p, bars);
          });
        }(pat, bar));

        mg.addEventListener('mouseenter', function (e) {
          showTip('<b>' + (pat.label || pat.type) + '</b><br>Confidence: ' +
            Math.round((pat.confidence || 0) * 100) + '%<br>Click for details', e);
        });
        mg.addEventListener('mousemove', moveTip);
        mg.addEventListener('mouseleave', hideTip);

        markerGrp.appendChild(mg);
      });

      svg.appendChild(markerGrp);
    }

    _chartGeom = { svg: svg, bars: bars, padL: padL, padT: padT, plotH: plotH, candleW: candleW, n: n, cw: cw };
    wrap.appendChild(svg);

    // ── Pattern modal ─────────────────────────────────────────────────────────
    function showPatternModal(pat, barsRef) {
      var modal = document.getElementById('fd-pattern-modal');
      var body  = document.getElementById('fd-modal-body');

      var conf     = pat.confidence || 0;
      var confPct  = Math.round(conf * 100);
      var confClr  = confPct >= 75 ? '#28a745' : confPct >= 50 ? '#f5c518' : '#dc3545';

      var bbIdx    = Math.min(pat.breakout_bar, barsRef.length - 1);
      var startBar = barsRef[pat.start_bar] || {};
      var endBar   = barsRef[bbIdx] || {};
      var dateStart = String(startBar.t || '').slice(0, 10) || '\u2014';
      var dateEnd   = String(endBar.t   || '').slice(0, 10) || '\u2014';

      var color = PATTERN_COLORS[pat.type] || '#a0a0b8';

      var html = '<h3 style="margin:0 0 14px;font-size:15px;color:var(--text-primary,#e0e0f0);' +
        'border-bottom:1px solid var(--border-color,#2a2a40);padding-bottom:8px;">' +
        '<span style="display:inline-block;width:10px;height:10px;background:' + color +
        ';border-radius:2px;margin-right:6px;vertical-align:middle;"></span>' +
        (pat.label || pat.type) + '</h3>';

      // Confidence bar
      html += '<div style="margin-bottom:12px;">';
      html += '<div style="font-size:11px;color:var(--text-muted,#6c6c80);margin-bottom:4px;">Confidence</div>';
      html += '<div style="display:flex;align-items:center;gap:8px;">';
      html += '<div style="flex:1;height:6px;background:var(--border-color,#2a2a40);border-radius:3px;">';
      html += '<div style="width:' + confPct + '%;height:100%;background:' + confClr + ';border-radius:3px;"></div>';
      html += '</div><span style="font-size:12px;font-weight:700;color:' + confClr + ';">' + confPct + '%</span>';
      html += '</div></div>';

      // Detail table
      html += '<table style="width:100%;font-size:12px;border-collapse:collapse;">';
      function row(label, val) {
        return '<tr><td style="color:var(--text-muted,#6c6c80);padding:3px 0;white-space:nowrap;">' +
          label + '</td><td style="text-align:right;font-weight:600;color:var(--text-secondary,#a0a0b8);' +
          'padding-left:12px;">' + val + '</td></tr>';
      }

      if (pat.price_low != null && pat.price_high != null) {
        html += row('Price range', fmtPx(pat.price_low) + ' \u2013 ' + fmtPx(pat.price_high));
      }
      html += row('Breakout bar', dateEnd + ' (bar ' + pat.breakout_bar + ')');
      html += row('Pattern span', dateStart + ' \u2192 ' + dateEnd);
      html += row('Bar width', (pat.end_bar - pat.start_bar) + ' bars');

      if (pat.avg_price) {
        html += row('Avg price', fmtPx(pat.avg_price));
      }
      if (pat.neckline) {
        html += row('Neckline', fmtPx(pat.neckline.price));
      }
      if (pat.slope_high !== undefined) {
        html += row('Resistance slope', pat.slope_high.toFixed(5));
        html += row('Support slope',    pat.slope_low.toFixed(5));
      }

      html += '</table>';
      body.innerHTML = html;
      modal.style.display = 'flex';
    }
  }

  // ── News annotation ───────────────────────────────────────────────────────────
  function maybeAnnotateNews() {
    if (!_highlightId || !_chartGeom) return;
    fetch('/api/news/' + encodeURIComponent(_highlightId))
      .then(function (r) { return r.json(); })
      .then(function (item) {
        if (!item || item.error) return;
        var geom = _chartGeom;
        var pubAt = item.published_at;
        var cx;
        if (pubAt) {
          var newsTs = new Date(pubAt).getTime();
          var bestIdx = 0, bestDiff = Infinity;
          geom.bars.forEach(function (b, i) {
            var diff = Math.abs(new Date(String(b.t)).getTime() - newsTs);
            if (diff < bestDiff) { bestDiff = diff; bestIdx = i; }
          });
          cx = geom.padL + (bestIdx + 0.5) * geom.cw;
        } else {
          cx = geom.padL + geom.candleW / 2;
        }
        var y1 = geom.padT, y2 = geom.padT + geom.plotH;
        var headline = item.title || '';
        var dispTime = pubAt ? new Date(pubAt).toLocaleString() : '';
        var grp = svgEl('g', { style: 'cursor:crosshair' });
        grp.appendChild(svgEl('line', {
          x1: cx, y1: y1, x2: cx, y2: y2,
          stroke: '#f5c518', 'stroke-width': '1.5',
          'stroke-dasharray': '4 3', opacity: '0.9'
        }));
        grp.appendChild(svgEl('circle', {
          cx: cx, cy: String(y1 + 8), r: '7',
          fill: '#f5c518', opacity: '0.95'
        }));
        var lbl = svgEl('text', {
          x: cx, y: String(y1 + 12),
          fill: '#000', 'font-size': '8', 'font-weight': '800',
          'text-anchor': 'middle', style: 'pointer-events:none'
        });
        lbl.textContent = 'N';
        grp.appendChild(lbl);
        grp.addEventListener('mouseenter', function (e) {
          showTip('<b>News Event</b><br>' + headline +
            '<br><span style="opacity:0.6;font-size:11px">' + dispTime + '</span>', e);
        });
        grp.addEventListener('mousemove', moveTip);
        grp.addEventListener('mouseleave', hideTip);
        geom.svg.appendChild(grp);
      })
      .catch(function () {});
  }

  // ── Controls ──────────────────────────────────────────────────────────────────
  window.fdSubmit = function (e) {
    e.preventDefault();
    var t = document.getElementById('fd-ticker').value.trim().toUpperCase();
    if (!t) return false;
    _currentTicker = t;
    render(_currentTicker, _currentTf);
    return false;
  };

  window.fdSetTf = function (btn, tf) {
    _currentTf = tf;
    document.querySelectorAll('.fd-tf-btn[data-tf]').forEach(function (b) { b.classList.remove('active'); });
    btn.classList.add('active');
    render(_currentTicker, _currentTf);
  };

  render(_currentTicker, _currentTf);

  var _resizeTimer;
  window.addEventListener('resize', function () {
    clearTimeout(_resizeTimer);
    _resizeTimer = setTimeout(function () { render(_currentTicker, _currentTf); }, 200);
  });

  // ── Trap History panel ───────────────────────────────────────────────────────
  (function () {
    var TRAP_LABELS = {
      'bull_trap': 'Bull Trap',
      'bear_trap': 'Bear Trap',
      'macro_liquidity_trap': 'Macro Liq.',
      'trap_against_position': 'Pos. Trap',
    };

    function fmtDate(s) {
      if (!s) return '—';
      try {
        var d = new Date(s);
        return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) +
               ' ' + d.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
      } catch (e) { return s; }
    }

    function buildContext(ev) {
      var lines = [];
      if (ev.broken_level != null) lines.push('<b>Broken level:</b> ' + (+ev.broken_level).toFixed(2));
      if (ev.volume_ratio != null) lines.push('<b>Volume ratio:</b> ' + (+ev.volume_ratio).toFixed(2));
      if (ev.confidence != null)   lines.push('<b>Confidence:</b> '   + Math.round(ev.confidence * 100) + '%');
      if (ev.timeframe)            lines.push('<b>Timeframe:</b> '    + ev.timeframe);
      if (ev.evidence_json) {
        try {
          var ev2 = JSON.parse(ev.evidence_json);
          Object.keys(ev2).forEach(function (k) {
            lines.push('<b>' + k + ':</b> ' + ev2[k]);
          });
        } catch (e) {}
      }
      return lines.length ? lines.join(' &nbsp;·&nbsp; ') : 'No additional context.';
    }

    function renderTraps(events) {
      var tbody = document.getElementById('fd-trap-tbody');
      var countEl = document.getElementById('fd-trap-count');
      if (!events || !events.length) {
        if (tbody) tbody.innerHTML = '<tr><td colspan="5" style="padding:8px;text-align:center;color:var(--text-muted,#6c6c80);">No trap events recorded yet.</td></tr>';
        if (countEl) countEl.textContent = '0 events';
        return;
      }
      if (countEl) countEl.textContent = events.length + ' event' + (events.length !== 1 ? 's' : '');
      var html = '';
      events.forEach(function (ev, i) {
        var conf = ev.confidence != null ? (parseFloat(ev.confidence) * 100).toFixed(0) + '%' : '—';
        var label = TRAP_LABELS[ev.pattern] || ev.pattern || '—';
        html += '<tr>' +
          '<td class="fd-trap-ticker">' + (ev.ticker || '—') + '</td>' +
          '<td class="fd-trap-type">'   + label + '</td>' +
          '<td>' + conf + '</td>' +
          '<td>' + (ev.timeframe || '—') + '</td>' +
          '<td>' + fmtDate(ev.created_at) + '</td>' +
          '</tr>';
      });
      if (tbody) tbody.innerHTML = html;
    }

    window.fdToggleTrap = function (idx) {
      var ctxRow = document.getElementById('fd-trap-ctx-row-' + idx);
      var ctxDiv = document.getElementById('fd-trap-ctx-' + idx);
      var expEl  = document.getElementById('fd-trap-exp-' + idx);
      if (!ctxRow) return;
      var open = ctxRow.style.display !== 'none';
      ctxRow.style.display = open ? 'none' : '';
      if (ctxDiv)  ctxDiv.classList.toggle('open', !open);
      if (expEl)   expEl.classList.toggle('open', !open);
    };

    fetch('/fathomdesk/api/traps')
      .then(function (r) { return r.json(); })
      .then(function (data) { renderTraps(data.traps || []); })
      .catch(function () {
        var body = document.getElementById('fd-trap-body');
        if (body) body.innerHTML = '<div class="fd-trap-empty">Failed to load trap events.</div>';
        var c = document.getElementById('fd-trap-count');
        if (c) c.textContent = 'error';
      });
  })();

})();
</script>
{% endblock %}