{% extends "base.html" %}
{% block title %}Options — {{ ticker }}{% endblock %}
{% block page_title %}Options Chain{% endblock %}

{% block extra_css %}
<style>
  .opt-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #161b22;
    border-bottom: 1px solid #30363d;
    flex-wrap: wrap;
  }
  .opt-ticker-input {
    background: #0d1117;
    border: 1px solid #30363d;
    color: #c9d1d9;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    width: 90px;
  }
  .opt-ticker-input:focus { outline: 2px solid #58a6ff; }

  /* IVR badge */
  .ivr-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: default;
    white-space: nowrap;
    position: relative;
  }
  .ivr-badge.ivr-low {
    background: rgba(63,185,80,0.12);
    color: #3fb950;
    border-color: rgba(63,185,80,0.3);
  }
  .ivr-badge.ivr-neutral {
    background: rgba(210,153,34,0.12);
    color: #d29922;
    border-color: rgba(210,153,34,0.3);
  }
  .ivr-badge.ivr-high {
    background: rgba(248,81,73,0.12);
    color: #f85149;
    border-color: rgba(248,81,73,0.3);
  }
  .ivr-badge.ivr-loading {
    background: rgba(139,148,158,0.1);
    color: #8b949e;
    border-color: rgba(139,148,158,0.2);
  }

  /* Tooltip */
  .ivr-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #21262d;
    border: 1px solid #30363d;
    border-radius: 6px;
    color: #c9d1d9;
    font-size: 11px;
    font-weight: 400;
    padding: 6px 10px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 100;
    max-width: 260px;
    white-space: normal;
    text-align: center;
    line-height: 1.4;
  }
  .ivr-badge:hover .ivr-tooltip { opacity: 1; }

  .opt-header-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
  }
  .opt-ticker-label {
    font-size: 20px;
    font-weight: 700;
    color: #e6edf3;
    letter-spacing: 0.03em;
  }

  /* Greek Targets Panel */
  .greek-header-row {
    display: grid;
    grid-template-columns: 72px 1fr 90px 90px 14px;
    gap: 12px;
    padding: 4px 0 10px 0;
    border-bottom: 1px solid #30363d;
    font-size: 11px;
    color: #8b949e;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .greek-row {
    display: grid;
    grid-template-columns: 72px 1fr 90px 90px 14px;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #21262d;
  }
  .greek-row:last-child { border-bottom: none; }
  .greek-label {
    font-size: 13px;
    font-weight: 600;
    color: #8b949e;
  }
  .greek-slider-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .greek-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: #30363d;
    border-radius: 2px;
    outline: none;
    cursor: pointer;
  }
  .greek-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #58a6ff;
    cursor: pointer;
    border: 2px solid #0d1117;
  }
  .greek-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #58a6ff;
    cursor: pointer;
    border: 2px solid #0d1117;
  }
  .greek-slider-val {
    font-size: 11px;
    color: #8b949e;
    min-width: 34px;
    text-align: right;
  }
  .greek-current {
    font-size: 13px;
    color: #c9d1d9;
    text-align: right;
  }
  .greek-target {
    font-size: 13px;
    color: #58a6ff;
    text-align: right;
    font-weight: 600;
  }
  .greek-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #30363d;
    justify-self: center;
  }
  .greek-indicator.ind-within  { background: #3fb950; }
  .greek-indicator.ind-outside { background: #f85149; }
  .greek-section-divider {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8b949e;
    padding: 8px 0 4px;
    border-top: 1px solid #30363d;
    margin-top: 4px;
  }

  /* IV Skew + Term Structure charts */
  .iv-charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 8px;
  }
  @media (max-width: 700px) { .iv-charts-grid { grid-template-columns: 1fr; } }
  .iv-chart-wrap {
    background: #0d1117;
    border-radius: 8px;
    padding: 12px;
    border: 1px solid #21262d;
  }
  .iv-chart-title {
    font-size: 12px;
    font-weight: 600;
    color: #8b949e;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  canvas.iv-canvas { width: 100% !important; height: 180px !important; }

  /* Greek P&L Attribution Panel */
  .greek-attr-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 8px;
  }
  @media (max-width: 600px) { .greek-attr-grid { grid-template-columns: 1fr; } }
  .greek-attr-card {
    background: #0d1117;
    border: 1px solid #21262d;
    border-radius: 8px;
    padding: 12px 14px;
  }
  .greek-attr-label {
    font-size: 11px;
    font-weight: 700;
    color: #8b949e;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
  }
  .greek-attr-value {
    font-size: 18px;
    font-weight: 700;
    color: #c9d1d9;
  }
  .greek-attr-value.positive { color: #3fb950; }
  .greek-attr-value.negative { color: #f85149; }
  .greek-attr-unit {
    font-size: 11px;
    color: #8b949e;
    margin-top: 2px;
  }
</style>
{% endblock %}

{% block content %}
<!-- Options Toolbar -->
<div class="opt-toolbar">
  <form method="get" action="/options" style="display:flex;align-items:center;gap:8px">
    <label for="opt-ticker" style="font-size:12px;color:#8b949e">Ticker</label>
    <input id="opt-ticker" class="opt-ticker-input" type="text" name="ticker"
           value="{{ ticker }}" placeholder="SPY" maxlength="10" autocomplete="off"
           onkeydown="if(event.key==='Enter'){this.form.submit()}">
    <button type="submit"
            style="background:#238636;border:1px solid #2ea043;color:#fff;border-radius:6px;
                   padding:5px 14px;font-size:12px;cursor:pointer">Load</button>
  </form>

  <!-- IVR Badge (populated by JS) -->
  <div class="opt-header-row">
    <span class="opt-ticker-label" id="opt-ticker-display">{{ ticker }}</span>
    <div id="ivr-badge" class="ivr-badge ivr-loading" aria-label="IV Rank and Percentile">
      <span id="ivr-text">Loading IV…</span>
      <div class="ivr-tooltip" id="ivr-tooltip">
        High IVR favors premium-selling strategies (condors, covered calls).
        Low IVR favors debit spreads and long options.
      </div>
    </div>
  </div>
</div>

<!-- Greek Targets Panel -->
<div class="card" style="margin-top:16px">
  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px">
    <h3 style="margin:0">Greek Targets</h3>
    <span style="font-size:11px;color:#8b949e">Persisted per ticker · localStorage</span>
  </div>
  <div class="greek-header-row">
    <div>Greek</div>
    <div>Set Target</div>
    <div style="text-align:right">Current</div>
    <div style="text-align:right">Target</div>
    <div></div>
  </div>
  <!-- Delta -->
  <div class="greek-row">
    <div class="greek-label">Delta</div>
    <div class="greek-slider-wrap">
      <input type="range" class="greek-slider" id="slider-delta" min="-500" max="500" step="1" value="0">
      <span class="greek-slider-val" id="slv-delta">0</span>
    </div>
    <div class="greek-current" id="cur-delta">—</div>
    <div class="greek-target"  id="tgt-delta">0</div>
    <div class="greek-indicator" id="ind-delta"></div>
  </div>
  <!-- Theta -->
  <div class="greek-row">
    <div class="greek-label">Theta</div>
    <div class="greek-slider-wrap">
      <input type="range" class="greek-slider" id="slider-theta" min="-100" max="100" step="1" value="0">
      <span class="greek-slider-val" id="slv-theta">0</span>
    </div>
    <div class="greek-current" id="cur-theta">—</div>
    <div class="greek-target"  id="tgt-theta">0</div>
    <div class="greek-indicator" id="ind-theta"></div>
  </div>
  <!-- Vega -->
  <div class="greek-row">
    <div class="greek-label">Vega</div>
    <div class="greek-slider-wrap">
      <input type="range" class="greek-slider" id="slider-vega" min="-500" max="500" step="1" value="0">
      <span class="greek-slider-val" id="slv-vega">0</span>
    </div>
    <div class="greek-current" id="cur-vega">—</div>
    <div class="greek-target"  id="tgt-vega">0</div>
    <div class="greek-indicator" id="ind-vega"></div>
  </div>
  <!-- Gamma -->
  <div class="greek-row">
    <div class="greek-label">Gamma</div>
    <div class="greek-slider-wrap">
      <input type="range" class="greek-slider" id="slider-gamma" min="-100" max="100" step="0.1" value="0">
      <span class="greek-slider-val" id="slv-gamma">0</span>
    </div>
    <div class="greek-current" id="cur-gamma">—</div>
    <div class="greek-target"  id="tgt-gamma">0</div>
    <div class="greek-indicator" id="ind-gamma"></div>
  </div>
  <!-- Second-order Greeks divider -->
  <div class="greek-section-divider" style="grid-column:1/-1">Second-order Greeks</div>
  <!-- Vanna -->
  <div class="greek-row">
    <div class="greek-label">Vanna</div>
    <div class="greek-slider-wrap">
      <input type="range" class="greek-slider" id="slider-vanna" min="-50" max="50" step="0.1" value="0">
      <span class="greek-slider-val" id="slv-vanna">0</span>
    </div>
    <div class="greek-current" id="cur-vanna">—</div>
    <div class="greek-target"  id="tgt-vanna">0</div>
    <div class="greek-indicator" id="ind-vanna"></div>
  </div>
  <!-- Charm -->
  <div class="greek-row">
    <div class="greek-label">Charm</div>
    <div class="greek-slider-wrap">
      <input type="range" class="greek-slider" id="slider-charm" min="-50" max="50" step="0.1" value="0">
      <span class="greek-slider-val" id="slv-charm">0</span>
    </div>
    <div class="greek-current" id="cur-charm">—</div>
    <div class="greek-target"  id="tgt-charm">0</div>
    <div class="greek-indicator" id="ind-charm"></div>
  </div>
  <!-- Volga -->
  <div class="greek-row">
    <div class="greek-label">Volga</div>
    <div class="greek-slider-wrap">
      <input type="range" class="greek-slider" id="slider-volga" min="-50" max="50" step="0.1" value="0">
      <span class="greek-slider-val" id="slv-volga">0</span>
    </div>
    <div class="greek-current" id="cur-volga">—</div>
    <div class="greek-target"  id="tgt-volga">0</div>
    <div class="greek-indicator" id="ind-volga"></div>
  </div>
</div>

<!-- Greek P&L Attribution Panel -->
<div class="card" style="margin-top:16px">
  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;flex-wrap:wrap;gap:8px">
    <h3 style="margin:0">Greek P&amp;L Attribution</h3>
    <div style="display:flex;align-items:center;gap:8px">
      <label for="attr-underlying-move" style="font-size:11px;color:#8b949e">&#916; Underlying ($)</label>
      <input id="attr-underlying-move" type="number" value="1" step="0.5" min="-100" max="100"
             style="width:70px;background:#0d1117;border:1px solid #30363d;color:#c9d1d9;
                    padding:4px 8px;border-radius:6px;font-size:12px;text-align:right">
      <span id="attr-status" style="font-size:11px;color:#8b949e">Loading…</span>
    </div>
  </div>
  <div class="greek-attr-grid">
    <div class="greek-attr-card">
      <div class="greek-attr-label">Delta Contribution</div>
      <div class="greek-attr-value" id="attr-delta-val">—</div>
      <div class="greek-attr-unit">net_delta &times; $<span id="attr-delta-move">1</span> move</div>
    </div>
    <div class="greek-attr-card">
      <div class="greek-attr-label">Theta Daily Burn</div>
      <div class="greek-attr-value" id="attr-theta-val">—</div>
      <div class="greek-attr-unit">$/day decay</div>
    </div>
    <div class="greek-attr-card">
      <div class="greek-attr-label">Vega Dollar Risk</div>
      <div class="greek-attr-value" id="attr-vega-val">—</div>
      <div class="greek-attr-unit">net_vega &times; 1% IV move</div>
    </div>
    <div class="greek-attr-card">
      <div class="greek-attr-label">Gamma Convexity</div>
      <div class="greek-attr-value" id="attr-gamma-val">—</div>
      <div class="greek-attr-unit">share-equiv per $1 move</div>
    </div>
  </div>
</div>

<!-- IV Skew + Term Structure -->
<div class="card" style="margin-top:16px">
  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px">
    <h3 style="margin:0">IV Skew &amp; Term Structure</h3>
    <span style="font-size:11px;color:#8b949e" id="iv-chart-status">Loading…</span>
  </div>
  <div class="iv-charts-grid">
    <div class="iv-chart-wrap">
      <div class="iv-chart-title">IV Smile — <span id="iv-smile-expiry">—</span></div>
      <canvas id="iv-smile-canvas" class="iv-canvas"></canvas>
    </div>
    <div class="iv-chart-wrap">
      <div class="iv-chart-title">ATM IV Term Structure</div>
      <canvas id="iv-term-canvas" class="iv-canvas"></canvas>
    </div>
  </div>
</div>

<!-- Options Content Placeholder -->
<div class="card" style="margin-top:16px">
  <h3 style="display:flex;align-items:center;gap:10px">
    <span>Options Chain — <span id="chain-ticker">{{ ticker }}</span></span>
    <span id="chain-status" style="font-size:12px;color:#8b949e;font-weight:400"></span>
  </h3>
  <div id="chain-body" style="color:#8b949e;padding:8px;font-size:0.9rem">
    Select a ticker and press Load to view the options chain.
  </div>
</div>
{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
<script>
(function () {
  const TICKER = {{ ticker | tojson }};

  function applyIvrBadge(data) {
    const badge  = document.getElementById('ivr-badge');
    const text   = document.getElementById('ivr-text');
    const tip    = document.getElementById('ivr-tooltip');

    if (data.error) {
      badge.className = 'ivr-badge ivr-loading';
      text.textContent = 'IV N/A';
      return;
    }

    const rank   = data.iv_rank    != null ? Math.round(data.iv_rank)        : null;
    const pctile = data.iv_percentile != null ? Math.round(data.iv_percentile) : null;

    if (rank === null) {
      badge.className = 'ivr-badge ivr-loading';
      text.textContent = 'IV N/A';
      return;
    }

    let tier = 'ivr-neutral';
    if (rank < 30)  tier = 'ivr-low';
    if (rank > 70)  tier = 'ivr-high';

    badge.className = 'ivr-badge ' + tier;

    const pctileStr = pctile != null ? pctile + '%' : '—';
    text.textContent = 'IV Rank: ' + rank + ' | IV%ile: ' + pctileStr;

    const tierLabel = rank < 30 ? 'Low IV' : rank > 70 ? 'High IV' : 'Neutral IV';
    tip.textContent =
      tierLabel + ' — ' +
      (rank > 70
        ? 'High IVR favors premium-selling strategies (condors, covered calls).'
        : rank < 30
        ? 'Low IVR favors debit spreads and long options.'
        : 'Neutral IV — monitor for expansion or contraction.') +
      ' IVR measures where current IV sits in its 52-week range (0=low, 100=high).';
  }

  function loadIvr(ticker) {
    const badge = document.getElementById('ivr-badge');
    const text  = document.getElementById('ivr-text');
    badge.className = 'ivr-badge ivr-loading';
    text.textContent = 'Loading IV…';

    fetch('/api/options/ivr/' + encodeURIComponent(ticker))
      .then(r => r.json())
      .then(applyIvrBadge)
      .catch(() => {
        badge.className = 'ivr-badge ivr-loading';
        text.textContent = 'IV unavailable';
      });
  }

  document.addEventListener('DOMContentLoaded', function () {
    loadIvr(TICKER);
  });
})();

// Greek Targets — localStorage-persisted sliders with current vs target comparison
(function () {
  const TICKER  = {{ ticker | tojson }};
  const LS_KEY  = 'greek_targets_v1_' + TICKER.toUpperCase();

  const GREEKS = [
    { key: 'delta', range: 1000 },
    { key: 'theta', range: 200  },
    { key: 'vega',  range: 1000 },
    { key: 'gamma', range: 200  },
    { key: 'vanna', range: 100  },
    { key: 'charm', range: 100  },
    { key: 'volga', range: 100  },
  ];

  const _defaults = {};
  GREEKS.forEach(function (g) { _defaults[g.key] = 0; });
  let targets  = Object.assign({}, _defaults);
  let currents = Object.assign({}, _defaults);
  GREEKS.forEach(function (g) { currents[g.key] = null; });

  function loadTargets() {
    try {
      const raw = localStorage.getItem(LS_KEY);
      if (raw) Object.assign(targets, JSON.parse(raw));
    } catch (_) {}
  }

  function saveTargets() {
    try { localStorage.setItem(LS_KEY, JSON.stringify(targets)); } catch (_) {}
  }

  function renderAll() {
    GREEKS.forEach(function (g) {
      const t = targets[g.key];
      const c = currents[g.key];
      const sliderEl = document.getElementById('slider-' + g.key);
      if (!sliderEl) return;

      sliderEl.value = t;
      document.getElementById('slv-' + g.key).textContent = t;
      document.getElementById('tgt-' + g.key).textContent = t;

      const curEl = document.getElementById('cur-' + g.key);
      const indEl = document.getElementById('ind-' + g.key);

      if (c !== null && c !== undefined) {
        curEl.textContent = c.toFixed(2);
        const within = Math.abs(c - t) <= g.range * 0.20;
        indEl.className = 'greek-indicator ' + (within ? 'ind-within' : 'ind-outside');
      } else {
        curEl.textContent = '—';
        indEl.className = 'greek-indicator';
      }
    });
  }

  function bindSliders() {
    GREEKS.forEach(function (g) {
      const el = document.getElementById('slider-' + g.key);
      if (!el) return;
      el.addEventListener('input', function () {
        targets[g.key] = parseFloat(this.value);
        saveTargets();
        renderAll();
      });
    });
  }

  function fetchCurrentGreeks() {
    fetch('/api/options/net_greeks/' + encodeURIComponent(TICKER))
      .then(function (r) { return r.json(); })
      .then(function (data) {
        if (data && !data.error) {
          GREEKS.forEach(function (g) {
            if (data[g.key] != null) currents[g.key] = parseFloat(data[g.key]);
          });
        }
        renderAll();
      })
      .catch(function () { renderAll(); });
  }

  document.addEventListener('DOMContentLoaded', function () {
    loadTargets();
    bindSliders();
    renderAll();
    fetchCurrentGreeks();
  });
})();

// IV Skew + Term Structure charts
(function () {
  const TICKER = {{ ticker | tojson }};
  let smileChart = null;
  let termChart  = null;

  const CHART_DEFAULTS = {
    responsive: true,
    maintainAspectRatio: false,
    animation: false,
    plugins: { legend: { display: false } },
    scales: {
      x: { ticks: { color: '#8b949e', font: { size: 10 } }, grid: { color: '#21262d' } },
      y: { ticks: { color: '#8b949e', font: { size: 10 } }, grid: { color: '#21262d' } },
    },
  };

  function renderSmile(data) {
    const ctx = document.getElementById('iv-smile-canvas').getContext('2d');
    const calls = data.skew.filter(function (d) { return d.type === 'call'; });
    const puts  = data.skew.filter(function (d) { return d.type === 'put';  });
    if (smileChart) smileChart.destroy();
    smileChart = new Chart(ctx, {
      type: 'line',
      data: {
        datasets: [
          {
            label: 'Calls IV',
            data: calls.map(function (d) { return { x: d.strike, y: d.iv }; }),
            borderColor: '#3fb950',
            backgroundColor: 'rgba(63,185,80,0.08)',
            tension: 0.3,
            pointRadius: 3,
            fill: false,
          },
          {
            label: 'Puts IV',
            data: puts.map(function (d) { return { x: d.strike, y: d.iv }; }),
            borderColor: '#f85149',
            backgroundColor: 'rgba(248,81,73,0.08)',
            tension: 0.3,
            pointRadius: 3,
            fill: false,
          },
        ],
      },
      options: Object.assign({}, CHART_DEFAULTS, {
        plugins: { legend: { display: true, labels: { color: '#8b949e', font: { size: 10 } } } },
        scales: Object.assign({}, CHART_DEFAULTS.scales, {
          x: Object.assign({}, CHART_DEFAULTS.scales.x, { type: 'linear', title: { display: true, text: 'Strike', color: '#8b949e', font: { size: 10 } } }),
          y: Object.assign({}, CHART_DEFAULTS.scales.y, { title: { display: true, text: 'IV %', color: '#8b949e', font: { size: 10 } } }),
        }),
      }),
    });
  }

  function renderTerm(data) {
    const ctx = document.getElementById('iv-term-canvas').getContext('2d');
    if (termChart) termChart.destroy();
    termChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: data.term.map(function (d) { return d.expiry; }),
        datasets: [{
          label: 'ATM IV %',
          data: data.term.map(function (d) { return d.atm_iv; }),
          borderColor: '#58a6ff',
          backgroundColor: 'rgba(88,166,255,0.08)',
          tension: 0.3,
          pointRadius: 4,
          fill: true,
        }],
      },
      options: Object.assign({}, CHART_DEFAULTS, {
        scales: Object.assign({}, CHART_DEFAULTS.scales, {
          x: Object.assign({}, CHART_DEFAULTS.scales.x, { title: { display: true, text: 'Expiry', color: '#8b949e', font: { size: 10 } } }),
          y: Object.assign({}, CHART_DEFAULTS.scales.y, { title: { display: true, text: 'ATM IV %', color: '#8b949e', font: { size: 10 } } }),
        }),
      }),
    });
  }

  function loadIvCharts() {
    const statusEl = document.getElementById('iv-chart-status');
    fetch('/api/options/iv-skew/' + encodeURIComponent(TICKER))
      .then(function (r) { return r.json(); })
      .then(function (data) {
        if (data.error) { statusEl.textContent = 'Unavailable'; return; }
        const expEl = document.getElementById('iv-smile-expiry');
        if (expEl) expEl.textContent = data.expiry || '—';
        statusEl.textContent = 'Live · spot $' + (data.spot ? data.spot.toFixed(2) : '—');
        if (data.skew && data.skew.length) renderSmile(data);
        if (data.term && data.term.length) renderTerm(data);
      })
      .catch(function () { statusEl.textContent = 'Unavailable'; });
  }

  document.addEventListener('DOMContentLoaded', function () {
    if (typeof Chart !== 'undefined') {
      loadIvCharts();
    }
  });
})();

// Greek P&L Attribution
(function () {
  const USER_ID = 'default';
  let pgData = null;

  function fmtDollar(v) {
    if (v == null || isNaN(v)) return '—';
    const abs = Math.abs(v);
    const s = abs >= 1000 ? '$' + (abs / 1000).toFixed(1) + 'k' : '$' + abs.toFixed(2);
    return (v < 0 ? '-' : '+') + s;
  }

  function applyColor(el, v) {
    el.classList.remove('positive', 'negative');
    if (v != null && !isNaN(v)) el.classList.add(v >= 0 ? 'positive' : 'negative');
  }

  function renderAttribution() {
    if (!pgData) return;
    const moveEl = document.getElementById('attr-underlying-move');
    const underlyingMove = parseFloat(moveEl ? moveEl.value : 1) || 1;

    const moveSpan = document.getElementById('attr-delta-move');
    if (moveSpan) moveSpan.textContent = underlyingMove;

    const deltaContrib = pgData.net_delta * underlyingMove;
    const thetaBurn    = pgData.net_theta;
    const vegaRisk     = pgData.net_vega * 0.01;
    const gammaConvex  = pgData.net_gamma;

    const dEl = document.getElementById('attr-delta-val');
    const tEl = document.getElementById('attr-theta-val');
    const vEl = document.getElementById('attr-vega-val');
    const gEl = document.getElementById('attr-gamma-val');

    if (dEl) { dEl.textContent = fmtDollar(deltaContrib); applyColor(dEl, deltaContrib); }
    if (tEl) { tEl.textContent = fmtDollar(thetaBurn);    applyColor(tEl, thetaBurn);    }
    if (vEl) { vEl.textContent = fmtDollar(vegaRisk);     applyColor(vEl, vegaRisk);     }
    if (gEl) {
      gEl.textContent = gammaConvex != null ? (gammaConvex >= 0 ? '+' : '') + gammaConvex.toFixed(4) : '—';
      applyColor(gEl, gammaConvex);
    }
  }

  function fetchPortfolioGreeks() {
    const statusEl = document.getElementById('attr-status');
    fetch('/api/options/portfolio-greeks/' + encodeURIComponent(USER_ID))
      .then(function (r) { return r.json(); })
      .then(function (data) {
        if (data.error) { if (statusEl) statusEl.textContent = 'Unavailable'; return; }
        pgData = data;
        if (statusEl) statusEl.textContent = data.as_of ? 'As of ' + data.as_of.slice(0, 16) : 'Live';
        renderAttribution();
      })
      .catch(function () { if (statusEl) statusEl.textContent = 'Unavailable'; });
  }

  document.addEventListener('DOMContentLoaded', function () {
    fetchPortfolioGreeks();
    const moveEl = document.getElementById('attr-underlying-move');
    if (moveEl) moveEl.addEventListener('input', renderAttribution);
  });
})();
</script>
{% endblock %}