{% extends "base.html" %}
{# CUI // SP-CTI #}
{% block title %}FathomDesk — Trap Event History{% endblock %}
{% block extra_css %}
<style>
  .te-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--bg-card, #16213e);
    border-bottom: 1px solid var(--border-color, #2a2a40);
    flex-wrap: wrap;
  }
  .te-header h1 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary, #e0e0f0);
  }
  .te-back-link {
    font-size: 12px;
    color: var(--text-secondary, #a0a0b8);
    text-decoration: none;
  }
  .te-back-link:hover { color: var(--accent-blue, #4a90d9); }
  .te-stats {
    display: flex;
    gap: 16px;
    margin-left: auto;
    flex-wrap: wrap;
  }
  .te-stat {
    text-align: center;
    background: var(--bg-input, #0f1829);
    border: 1px solid var(--border-color, #2a2a40);
    border-radius: 6px;
    padding: 6px 14px;
  }
  .te-stat-val {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary, #e0e0f0);
  }
  .te-stat-lbl {
    font-size: 10px;
    color: var(--text-secondary, #a0a0b8);
    text-transform: uppercase;
    letter-spacing: .5px;
  }
  .te-filters {
    display: flex;
    gap: 8px;
    padding: 10px 20px;
    background: var(--bg-card, #16213e);
    border-bottom: 1px solid var(--border-color, #2a2a40);
    flex-wrap: wrap;
    align-items: center;
  }
  .te-filters label { font-size: 12px; color: var(--text-secondary, #a0a0b8); }
  .te-input {
    background: var(--bg-input, #0f1829);
    border: 1px solid var(--border-color, #2a2a40);
    color: var(--text-primary, #e0e0f0);
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 13px;
  }
  .te-input:focus { outline: 2px solid var(--accent-blue, #4a90d9); }
  .te-btn {
    padding: 5px 14px;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
  }
  .te-btn-primary { background: var(--accent-blue, #4a90d9); color: #fff; }
  .te-btn-secondary { background: var(--bg-input, #0f1829); border: 1px solid var(--border-color, #2a2a40); color: var(--text-secondary, #a0a0b8); }
  .te-body { padding: 20px; }
  .te-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border-color, #2a2a40);
    border-radius: 8px;
  }
  .te-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }
  .te-table th {
    background: var(--bg-input, #0f1829);
    color: var(--text-secondary, #a0a0b8);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 9px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color, #2a2a40);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
  }
  .te-table th:hover { color: var(--text-primary, #e0e0f0); }
  .te-table th.sorted-asc::after  { content: " ▲"; }
  .te-table th.sorted-desc::after { content: " ▼"; }
  .te-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--border-color, #2a2a40);
    color: var(--text-primary, #e0e0f0);
    vertical-align: top;
  }
  .te-table tr:last-child td { border-bottom: none; }
  .te-table tr:hover td { background: rgba(74,144,217,.06); }
  .te-ticker-link {
    color: var(--accent-blue, #4a90d9);
    font-weight: 700;
    text-decoration: none;
    font-family: monospace;
  }
  .te-ticker-link:hover { text-decoration: underline; }
  .badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
  }
  .badge-critical { background: #7f1d1d; color: #fca5a5; }
  .badge-high     { background: #78350f; color: #fcd34d; }
  .badge-medium   { background: #1e3a5f; color: #93c5fd; }
  .badge-pattern  { background: #1e1b4b; color: #a5b4fc; }
  .te-evidence-btn {
    font-size: 11px;
    color: var(--text-secondary, #a0a0b8);
    background: none;
    border: 1px solid var(--border-color, #2a2a40);
    border-radius: 3px;
    padding: 1px 6px;
    cursor: pointer;
  }
  .te-evidence-btn:hover { color: var(--text-primary, #e0e0f0); }
  .te-evidence-row td {
    background: var(--bg-input, #0f1829);
    font-family: monospace;
    font-size: 12px;
    padding: 8px 16px;
    white-space: pre-wrap;
    word-break: break-all;
    color: #94a3b8;
  }
  .te-empty {
    text-align: center;
    color: var(--text-muted, #6c6c80);
    padding: 40px 20px;
  }
  .te-loading {
    text-align: center;
    color: var(--text-secondary, #a0a0b8);
    padding: 30px 20px;
    font-size: 14px;
  }
  .te-export-btn {
    margin-left: auto;
    padding: 5px 14px;
    background: #065f46;
    color: #6ee7b7;
    border: 1px solid #064e3b;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
  }
  .te-export-btn:hover { background: #047857; }
</style>
{% endblock %}
{% block content %}
<div class="te-header">
  <div>
    <a class="te-back-link" href="/fathomdesk">← FathomDesk</a>
    <h1>&#9888; Trap Event History</h1>
  </div>
  <div class="te-stats">
    <div class="te-stat">
      <div class="te-stat-val" id="stat-total">—</div>
      <div class="te-stat-lbl">Total Events</div>
    </div>
    <div class="te-stat">
      <div class="te-stat-val" id="stat-critical" style="color:#f87171;">—</div>
      <div class="te-stat-lbl">Critical (≥0.8)</div>
    </div>
    <div class="te-stat">
      <div class="te-stat-val" id="stat-top-ticker" style="color:#60a5fa;font-size:15px;">—</div>
      <div class="te-stat-lbl">Most Trapped</div>
    </div>
    <div class="te-stat">
      <div class="te-stat-val" id="stat-latest" style="font-size:13px;">—</div>
      <div class="te-stat-lbl">Latest</div>
    </div>
  </div>
</div>

<div class="te-filters">
  <label>Ticker</label>
  <input id="f-ticker" class="te-input" placeholder="e.g. AAPL" style="width:90px;text-transform:uppercase;" maxlength="10">
  <label>Pattern</label>
  <select id="f-pattern" class="te-input" style="width:150px;">
    <option value="">All patterns</option>
    <option value="bull_trap">Bull Trap</option>
    <option value="bear_trap">Bear Trap</option>
  </select>
  <label>Min confidence</label>
  <input id="f-conf" class="te-input" type="number" min="0" max="1" step="0.1" placeholder="0.0" style="width:70px;">
  <label>Limit</label>
  <select id="f-limit" class="te-input" style="width:80px;">
    <option value="50">50</option>
    <option value="100">100</option>
    <option value="200">200</option>
  </select>
  <button class="te-btn te-btn-primary" onclick="loadTraps()">Apply</button>
  <button class="te-btn te-btn-secondary" onclick="resetFilters()">Reset</button>
  <button class="te-export-btn" onclick="exportCSV()">&#8659; CSV</button>
</div>

<div class="te-body">
  <div class="te-table-wrap">
    <table class="te-table" id="te-table">
      <thead>
        <tr>
          <th onclick="sortTable('ticker')">Ticker</th>
          <th onclick="sortTable('pattern')">Pattern</th>
          <th onclick="sortTable('confidence')">Confidence</th>
          <th onclick="sortTable('broken_level')">Broken Level</th>
          <th onclick="sortTable('volume_ratio')">Vol Ratio</th>
          <th onclick="sortTable('timeframe')">Timeframe</th>
          <th onclick="sortTable('created_at')">Detected</th>
          <th>Evidence</th>
        </tr>
      </thead>
      <tbody id="te-tbody">
        <tr><td colspan="8" class="te-loading">Loading trap events…</td></tr>
      </tbody>
    </table>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script>
(function () {
  'use strict';

  var _rows = [];
  var _sortCol = 'created_at';
  var _sortDir = 'desc';

  function fmt(v, decimals) {
    if (v === null || v === undefined) return '—';
    return Number(v).toFixed(decimals !== undefined ? decimals : 2);
  }

  function fmtDate(iso) {
    if (!iso) return '—';
    try {
      var d = new Date(iso);
      return d.toLocaleDateString() + ' ' + d.toLocaleTimeString([], {hour:'2-digit',minute:'2-digit'});
    } catch (e) { return iso; }
  }

  function severityBadge(conf) {
    if (conf === null || conf === undefined) return '<span class="badge badge-medium">—</span>';
    var c = parseFloat(conf);
    if (c >= 0.8) return '<span class="badge badge-critical">' + c.toFixed(2) + '</span>';
    if (c >= 0.6) return '<span class="badge badge-high">' + c.toFixed(2) + '</span>';
    return '<span class="badge badge-medium">' + c.toFixed(2) + '</span>';
  }

  function patternBadge(pat) {
    var label = (pat || '—').replace(/_/g, ' ');
    return '<span class="badge badge-pattern">' + label + '</span>';
  }

  function updateStats(rows) {
    document.getElementById('stat-total').textContent = rows.length;
    var critCount = rows.filter(function(r) { return parseFloat(r.confidence) >= 0.8; }).length;
    document.getElementById('stat-critical').textContent = critCount;

    var tickerCounts = {};
    rows.forEach(function(r) {
      tickerCounts[r.ticker] = (tickerCounts[r.ticker] || 0) + 1;
    });
    var topTicker = '—';
    var topCount = 0;
    Object.keys(tickerCounts).forEach(function(t) {
      if (tickerCounts[t] > topCount) { topCount = tickerCounts[t]; topTicker = t; }
    });
    document.getElementById('stat-top-ticker').textContent = topTicker;

    var latest = '—';
    if (rows.length > 0) {
      var sorted = rows.slice().sort(function(a, b) {
        return (b.created_at || '').localeCompare(a.created_at || '');
      });
      latest = fmtDate(sorted[0].created_at);
    }
    document.getElementById('stat-latest').textContent = latest;
  }

  function render(rows) {
    _rows = rows;
    updateStats(rows);

    var tbody = document.getElementById('te-tbody');
    if (!rows.length) {
      tbody.innerHTML = '<tr><td colspan="8" class="te-empty">No trap events found. The Genesis reflex runs every 4 hours — check back after markets open.</td></tr>';
      return;
    }

    var sorted = rows.slice().sort(function(a, b) {
      var av = a[_sortCol], bv = b[_sortCol];
      if (av === null || av === undefined) av = '';
      if (bv === null || bv === undefined) bv = '';
      if (typeof av === 'number' || !isNaN(parseFloat(av))) {
        av = parseFloat(av) || 0; bv = parseFloat(bv) || 0;
      } else {
        av = String(av); bv = String(bv);
      }
      if (av < bv) return _sortDir === 'asc' ? -1 : 1;
      if (av > bv) return _sortDir === 'asc' ? 1 : -1;
      return 0;
    });

    var html = '';
    sorted.forEach(function(r, i) {
      var evJson = '';
      try {
        var parsed = typeof r.evidence_json === 'string' ? JSON.parse(r.evidence_json) : r.evidence_json;
        evJson = JSON.stringify(parsed, null, 2);
      } catch (e) { evJson = r.evidence_json || ''; }

      html += '<tr>';
      html += '<td><a class="te-ticker-link" href="/fathomdesk?ticker=' + encodeURIComponent(r.ticker) + '">' + r.ticker + '</a></td>';
      html += '<td>' + patternBadge(r.pattern) + '</td>';
      html += '<td>' + severityBadge(r.confidence) + '</td>';
      html += '<td style="font-family:monospace;">' + fmt(r.broken_level, 4) + '</td>';
      html += '<td style="font-family:monospace;">' + fmt(r.volume_ratio, 2) + '</td>';
      html += '<td>' + (r.timeframe || '—') + '</td>';
      html += '<td style="white-space:nowrap;font-size:12px;">' + fmtDate(r.created_at) + '</td>';
      if (evJson) {
        html += '<td><button class="te-evidence-btn" onclick="toggleEvidence(' + i + ')">JSON</button></td>';
        html += '</tr><tr class="te-evidence-row" id="ev-' + i + '" style="display:none;"><td colspan="8">' + escHtml(evJson) + '</td></tr>';
      } else {
        html += '<td style="color:var(--text-muted,#6c6c80);font-size:11px;">—</td></tr>';
      }
    });

    tbody.innerHTML = html;

    document.querySelectorAll('.te-table th').forEach(function(th) {
      th.classList.remove('sorted-asc', 'sorted-desc');
    });
    var ths = document.querySelectorAll('.te-table th');
    var cols = ['ticker','pattern','confidence','broken_level','volume_ratio','timeframe','created_at','evidence_json'];
    var idx = cols.indexOf(_sortCol);
    if (idx >= 0 && ths[idx]) ths[idx].classList.add(_sortDir === 'asc' ? 'sorted-asc' : 'sorted-desc');
  }

  function escHtml(s) {
    return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
  }

  window.toggleEvidence = function(i) {
    var el = document.getElementById('ev-' + i);
    if (el) el.style.display = el.style.display === 'none' ? '' : 'none';
  };

  window.sortTable = function(col) {
    if (_sortCol === col) {
      _sortDir = _sortDir === 'asc' ? 'desc' : 'asc';
    } else {
      _sortCol = col;
      _sortDir = col === 'created_at' ? 'desc' : 'asc';
    }
    render(_rows);
  };

  window.loadTraps = function() {
    var ticker  = document.getElementById('f-ticker').value.trim().toUpperCase();
    var pattern = document.getElementById('f-pattern').value;
    var conf    = document.getElementById('f-conf').value;
    var limit   = document.getElementById('f-limit').value;

    var url = '/fathomdesk/api/traps?limit=' + encodeURIComponent(limit);
    if (ticker)  url += '&ticker='    + encodeURIComponent(ticker);
    if (pattern) url += '&trap_type=' + encodeURIComponent(pattern);

    document.getElementById('te-tbody').innerHTML =
      '<tr><td colspan="8" class="te-loading">Loading…</td></tr>';

    fetch(url)
      .then(function(r) { return r.json(); })
      .then(function(data) {
        var rows = data.events || data.traps || [];
        if (conf) {
          var minConf = parseFloat(conf);
          rows = rows.filter(function(r) { return parseFloat(r.confidence) >= minConf; });
        }
        render(rows);
      })
      .catch(function(err) {
        document.getElementById('te-tbody').innerHTML =
          '<tr><td colspan="8" class="te-empty">Failed to load: ' + err.message + '</td></tr>';
      });
  };

  window.resetFilters = function() {
    document.getElementById('f-ticker').value  = '';
    document.getElementById('f-pattern').value = '';
    document.getElementById('f-conf').value    = '';
    document.getElementById('f-limit').value   = '50';
    loadTraps();
  };

  window.exportCSV = function() {
    if (!_rows.length) return;
    var cols = ['ticker','pattern','confidence','broken_level','volume_ratio','timeframe','created_at'];
    var lines = [cols.join(',')];
    _rows.forEach(function(r) {
      lines.push(cols.map(function(c) {
        var v = r[c];
        if (v === null || v === undefined) return '';
        v = String(v);
        if (v.includes(',') || v.includes('"') || v.includes('\n')) v = '"' + v.replace(/"/g,'""') + '"';
        return v;
      }).join(','));
    });
    var blob = new Blob([lines.join('\n')], {type:'text/csv'});
    var a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = 'trap_events_' + new Date().toISOString().slice(0,10) + '.csv';
    a.click();
  };

  document.getElementById('f-ticker').addEventListener('keydown', function(e) {
    if (e.key === 'Enter') loadTraps();
  });

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