{% extends "base.html" %}
{% block title %}Post-Earnings Scorecard — {{ ticker or "Augur" }}{% endblock %}
{% block content %}
<div class="scorecard-page" data-ticker="{{ ticker or '' }}">
  <div class="sc-header">
    <h1>📊 Post-Earnings Scorecard</h1>
    <p class="sc-subtitle">Compare pre-event predictions against actual outcomes. Track what Augur got right and wrong.</p>
  </div>

  <!-- Scorecard Selection -->
  <div class="sc-controls">
    <div class="form-row">
      <div class="form-group">
        <label>Ticker</label>
        <input id="sc-ticker" type="text" value="{{ ticker or '' }}" placeholder="AAPL">
      </div>
      <div class="form-group">
        <label>Event</label>
        <select id="sc-event"><option>Loading...</option></select>
      </div>
      <div class="form-group" style="align-self: flex-end;">
        <button class="btn btn-accent" onclick="loadScorecard()">Generate Scorecard</button>
      </div>
    </div>
  </div>

  <!-- Scorecard Result -->
  <div id="sc-result">
    <div class="empty-state">
      <div class="empty-state-icon">🎯</div>
      <div class="empty-state-title">Select a ticker and event to generate a scorecard</div>
      <div class="empty-state-desc">Compares pre-event Augur predictions against actual earnings results.</div>
    </div>
  </div>
</div>

<style>
.sc-header { margin-bottom: 24px; }
.sc-subtitle { color: var(--text-muted); }
.sc-controls { margin-bottom: 24px; padding: 16px; background: var(--bg-card); border-radius: 12px; border: 1px solid var(--border); }
.sc-controls .form-row { display: flex; gap: 12px; align-items: flex-end; }
.sc-controls .form-group { flex: 1; }
.sc-controls label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.sc-controls input, .sc-controls select { width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; box-sizing: border-box; }

.sc-summary { display: flex; gap: 16px; margin-bottom: 20px; }
.sc-stat { flex: 1; padding: 16px; background: var(--bg-card); border-radius: 10px; text-align: center; border: 1px solid var(--border); }
.sc-stat-value { font-size: 28px; font-weight: 700; }
.sc-stat-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.sc-stat.confirmed .sc-stat-value { color: #10b981; }
.sc-stat.refuted .sc-stat-value { color: #ef4444; }
.sc-stat.unknown .sc-stat-value { color: #f59e0b; }

.sc-item { padding: 14px 16px; margin-bottom: 8px; background: var(--bg-card); border-radius: 8px; border: 1px solid var(--border); display: flex; gap: 12px; align-items: flex-start; }
.sc-item-icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.sc-item-body { flex: 1; }
.sc-item-question { font-weight: 600; margin-bottom: 4px; }
.sc-item-pre { font-size: 13px; color: var(--text-muted); margin-bottom: 2px; }
.sc-item-actual { font-size: 13px; }
.sc-item-verdict { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 11px; font-weight: 600; margin-top: 4px; }
.sc-item-verdict.confirmed { background: #d1fae5; color: #047857; }
.sc-item-verdict.refuted { background: #fee2e2; color: #b91c1c; }
.sc-item-verdict.partial { background: #fef3c7; color: #b45309; }
.sc-item-verdict.unknown { background: #f3f4f6; color: #6b7280; }
</style>

<script>
function loadScorecard() {
  var ticker = document.getElementById('sc-ticker').value.toUpperCase();
  if (!ticker) return;
  document.getElementById('sc-result').innerHTML = '<div class="spinner spinner-center spinner-lg"></div>';
  fetch('/api/scorecard?ticker=' + ticker)
    .then(r => r.json())
    .then(renderScorecard)
    .catch(function() {
      document.getElementById('sc-result').innerHTML = '<div class="empty-state"><div class="empty-state-icon">⚠️</div><div class="empty-state-title">Failed to load scorecard</div></div>';
    });
}

function renderScorecard(data) {
  if (!data || !data.items || data.items.length === 0) {
    document.getElementById('sc-result').innerHTML = '<div class="empty-state"><div class="empty-state-icon">📭</div><div class="empty-state-title">No scorecard data available</div><div class="empty-state-desc">Run a pre-event analysis first, then come back after earnings.</div></div>';
    return;
  }
  var html = '<div class="sc-summary">'
    + '<div class="sc-stat confirmed"><div class="sc-stat-value">' + (data.items.filter(function(i){return i.verdict==="confirmed"}).length) + '</div><div class="sc-stat-label">Confirmed</div></div>'
    + '<div class="sc-stat refuted"><div class="sc-stat-value">' + (data.items.filter(function(i){return i.verdict==="refuted"}).length) + '</div><div class="sc-stat-label">Refuted</div></div>'
    + '<div class="sc-stat unknown"><div class="sc-stat-value">' + (data.items.filter(function(i){return i.verdict==="unknown"}).length) + '</div><div class="sc-stat-label">Unknown</div></div>'
    + '</div>';

  data.items.forEach(function(item) {
    var icon = item.verdict === 'confirmed' ? '✅' : item.verdict === 'refuted' ? '❌' : item.verdict === 'partially_correct' ? '⚠️' : '❓';
    html += '<div class="sc-item">'
      + '<div class="sc-item-icon">' + icon + '</div>'
      + '<div class="sc-item-body">'
      + '<div class="sc-item-question">' + escapeHtml(item.question) + '</div>'
      + '<div class="sc-item-pre">Pre-event: ' + escapeHtml(item.pre_event_answer || 'No prediction') + '</div>'
      + '<div class="sc-item-actual">Actual: ' + escapeHtml(item.actual_outcome || 'Unknown') + '</div>'
      + '<span class="sc-item-verdict ' + (item.verdict === 'partially_correct' ? 'partial' : item.verdict) + '">' + item.verdict + '</span>'
      + '</div></div>';
  });
  document.getElementById('sc-result').innerHTML = html;
}

function escapeHtml(s) { var d = document.createElement('div'); d.textContent = s; return d.innerHTML; }
</script>
{% endblock %}