{% extends "base.html" %}

{% block title %}Trust Deep-Dive{% endblock %}
{% block page_title %}Trust Deep-Dive{% endblock %}

{% block head %}
<style>
  .gauge-ring {
    transition: stroke-dashoffset 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .score-value {
    transition: all 0.8s ease;
  }
  @keyframes pulseGlow {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(124, 58, 237, 0.3)); }
    50% { filter: drop-shadow(0 0 20px rgba(124, 58, 237, 0.6)); }
  }
  .gauge-container {
    animation: pulseGlow 3s ease-in-out infinite;
  }
  .event-card {
    transition: all 0.2s ease;
    animation: slideIn 0.3s ease-out forwards;
    opacity: 0;
  }
  .event-card:hover {
    border-color: rgba(124, 58, 237, 0.3);
    transform: translateX(2px);
  }
  .chart-container {
    position: relative;
  }
  .delta-positive { color: #34d399; }
  .delta-negative { color: #f87171; }
  .delta-badge-positive { background: rgba(52, 211, 153, 0.1); border-color: rgba(52, 211, 153, 0.2); color: #34d399; }
  .delta-badge-negative { background: rgba(248, 113, 113, 0.1); border-color: rgba(248, 113, 113, 0.2); color: #f87171; }
  @keyframes slideIn {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: translateX(0); }
  }
  .filter-btn.active {
    background: rgba(124, 58, 237, 0.2);
    color: #a78bfa;
    border-color: rgba(124, 58, 237, 0.3);
  }
</style>
{% endblock %}

{% block header_actions %}
<div class="flex items-center gap-1">
  <button class="filter-btn active text-[10px] px-2 py-1 rounded border border-slate-700 text-slate-400 hover:text-slate-200 transition-colors" data-filter="all" onclick="setFilter('all')">All</button>
  <button class="filter-btn text-[10px] px-2 py-1 rounded border border-slate-700 text-slate-400 hover:text-slate-200 transition-colors" data-filter="positive" onclick="setFilter('positive')">Positive</button>
  <button class="filter-btn text-[10px] px-2 py-1 rounded border border-slate-700 text-slate-400 hover:text-slate-200 transition-colors" data-filter="negative" onclick="setFilter('negative')">Negative</button>
</div>
{% endblock %}

{% block content %}
<!-- Gauge + Stats Row -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-5 mb-6">
  <!-- Trust Gauge -->
  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-6 flex flex-col items-center justify-center">
    <div class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-4">Current Trust Score</div>
    <div class="gauge-container relative" style="width: 200px; height: 200px;">
      <svg viewBox="0 0 200 200" class="w-full h-full">
        <!-- Background ring -->
        <circle cx="100" cy="100" r="85" fill="none" stroke="rgba(51,65,85,0.3)" stroke-width="10"
          stroke-dasharray="534" stroke-dashoffset="0" stroke-linecap="round"
          transform="rotate(-90 100 100)"/>
        <!-- Score ring -->
        <circle id="gauge-ring" cx="100" cy="100" r="85" fill="none" stroke="url(#gaugeGradient)" stroke-width="10"
          stroke-dasharray="534" stroke-dashoffset="534" stroke-linecap="round"
          transform="rotate(-90 100 100)" class="gauge-ring"/>
        <!-- Gradient -->
        <defs>
          <linearGradient id="gaugeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stop-color="#7C3AED"/>
            <stop offset="50%" stop-color="#a78bfa"/>
            <stop offset="100%" stop-color="#34d399"/>
          </linearGradient>
        </defs>
      </svg>
      <div class="absolute inset-0 flex flex-col items-center justify-center">
        <span id="gauge-score" class="text-5xl font-display font-bold text-white score-value">--</span>
        <span class="text-xs text-slate-500 mt-1">/ 100</span>
      </div>
    </div>
  </div>

  <!-- Weekly Stats -->
  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 flex flex-col justify-center">
    <div class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-4">This Week</div>
    <div class="space-y-4">
      <div>
        <div class="flex items-center justify-between mb-1">
          <span class="text-xs text-slate-400">Average Score</span>
          <span class="text-sm font-mono font-semibold text-slate-200" id="stat-avg">--</span>
        </div>
        <div class="h-1 bg-slate-800 rounded-full overflow-hidden">
          <div class="h-full bg-violet-500 rounded-full transition-all duration-700" id="stat-avg-bar" style="width:0%"></div>
        </div>
      </div>
      <div class="flex items-center justify-between">
        <span class="text-xs text-slate-400">Biggest Gain</span>
        <span class="text-sm font-mono font-semibold delta-positive" id="stat-gain">--</span>
      </div>
      <div class="flex items-center justify-between">
        <span class="text-xs text-slate-400">Biggest Drop</span>
        <span class="text-sm font-mono font-semibold delta-negative" id="stat-drop">--</span>
      </div>
      <div class="flex items-center justify-between">
        <span class="text-xs text-slate-400">Total Events</span>
        <span class="text-sm font-mono font-semibold text-slate-200" id="stat-events">--</span>
      </div>
    </div>
  </div>

  <!-- Score History Chart -->
  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5">
    <div class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-3">Score History</div>
    <div class="chart-container" style="height: 180px;">
      <canvas id="history-chart" width="400" height="180"></canvas>
    </div>
  </div>
</div>

<!-- Event Timeline -->
<div>
  <h2 class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-3 flex items-center gap-2">
    <svg class="w-4 h-4 text-violet-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
    Trust Events
    <span class="text-slate-600 font-mono" id="event-count"></span>
  </h2>
  <div class="space-y-2" id="event-timeline">
    <div class="text-xs text-slate-600 text-center py-8">Loading trust events...</div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  const REFRESH_MS = 60000;
  let allEvents = [];
  let currentFilter = 'all';

  function setFilter(filter) {
    currentFilter = filter;
    document.querySelectorAll('.filter-btn').forEach(b => {
      b.classList.toggle('active', b.dataset.filter === filter);
    });
    renderEvents();
  }

  function updateGauge(score) {
    const ring = document.getElementById('gauge-ring');
    const scoreEl = document.getElementById('gauge-score');
    const circumference = 534; // 2 * PI * 85
    const offset = circumference - (score / 100) * circumference;
    ring.style.strokeDashoffset = offset;
    scoreEl.textContent = Math.round(score);
  }

  function drawChart(history) {
    const canvas = document.getElementById('history-chart');
    const ctx = canvas.getContext('2d');
    const dpr = window.devicePixelRatio || 1;
    const rect = canvas.getBoundingClientRect();
    canvas.width = rect.width * dpr;
    canvas.height = rect.height * dpr;
    ctx.scale(dpr, dpr);
    const w = rect.width;
    const h = rect.height;

    ctx.clearRect(0, 0, w, h);

    if (!history || history.length < 2) {
      ctx.fillStyle = '#475569';
      ctx.font = '12px "Space Grotesk"';
      ctx.textAlign = 'center';
      ctx.fillText('Not enough data for chart', w / 2, h / 2);
      return;
    }

    const scores = history.map(h => h.score);
    const minScore = Math.max(0, Math.min(...scores) - 5);
    const maxScore = Math.min(100, Math.max(...scores) + 5);
    const range = maxScore - minScore || 1;

    const padX = 10, padY = 15;
    const chartW = w - padX * 2;
    const chartH = h - padY * 2;

    // Grid lines
    ctx.strokeStyle = 'rgba(51, 65, 85, 0.3)';
    ctx.lineWidth = 1;
    for (let i = 0; i <= 4; i++) {
      const y = padY + (chartH / 4) * i;
      ctx.beginPath();
      ctx.moveTo(padX, y);
      ctx.lineTo(w - padX, y);
      ctx.stroke();
    }

    // Gradient fill
    const gradient = ctx.createLinearGradient(0, padY, 0, h - padY);
    gradient.addColorStop(0, 'rgba(124, 58, 237, 0.15)');
    gradient.addColorStop(1, 'rgba(124, 58, 237, 0)');

    // Line path
    const points = history.map((item, i) => ({
      x: padX + (i / (history.length - 1)) * chartW,
      y: padY + chartH - ((item.score - minScore) / range) * chartH
    }));

    // Fill area
    ctx.beginPath();
    ctx.moveTo(points[0].x, h - padY);
    points.forEach(p => ctx.lineTo(p.x, p.y));
    ctx.lineTo(points[points.length - 1].x, h - padY);
    ctx.closePath();
    ctx.fillStyle = gradient;
    ctx.fill();

    // Line
    ctx.beginPath();
    ctx.moveTo(points[0].x, points[0].y);
    for (let i = 1; i < points.length; i++) {
      const prev = points[i - 1];
      const curr = points[i];
      const cpx = (prev.x + curr.x) / 2;
      ctx.bezierCurveTo(cpx, prev.y, cpx, curr.y, curr.x, curr.y);
    }
    ctx.strokeStyle = '#7C3AED';
    ctx.lineWidth = 2;
    ctx.stroke();

    // Dots
    points.forEach((p, i) => {
      if (i === points.length - 1 || history.length <= 20 || i % Math.ceil(history.length / 15) === 0) {
        ctx.beginPath();
        ctx.arc(p.x, p.y, 3, 0, Math.PI * 2);
        ctx.fillStyle = '#7C3AED';
        ctx.fill();
        ctx.strokeStyle = '#030712';
        ctx.lineWidth = 1.5;
        ctx.stroke();
      }
    });

    // Last point highlight
    const last = points[points.length - 1];
    ctx.beginPath();
    ctx.arc(last.x, last.y, 5, 0, Math.PI * 2);
    ctx.fillStyle = '#a78bfa';
    ctx.fill();
    ctx.strokeStyle = '#030712';
    ctx.lineWidth = 2;
    ctx.stroke();
  }

  function renderEvents() {
    const container = document.getElementById('event-timeline');
    const countEl = document.getElementById('event-count');

    let filtered = allEvents;
    if (currentFilter === 'positive') filtered = allEvents.filter(e => (e.delta || 0) > 0);
    else if (currentFilter === 'negative') filtered = allEvents.filter(e => (e.delta || 0) < 0);

    countEl.textContent = `(${filtered.length})`;

    if (filtered.length === 0) {
      container.innerHTML = '<div class="text-xs text-slate-600 text-center py-8">No events match filter</div>';
      return;
    }

    container.innerHTML = filtered.slice(0, 50).map((e, idx) => {
      const delta = e.delta || 0;
      const isPositive = delta >= 0;
      const deltaStr = (isPositive ? '+' : '') + delta.toFixed(2);
      const badgeClass = isPositive ? 'delta-badge-positive' : 'delta-badge-negative';
      const event = e.event || e.description || 'Trust event';
      const context = e.context || '';
      const when = e.created_at ? relativeTime(e.created_at) : '';
      const score = e.score != null ? e.score.toFixed(1) : '';
      const delay = Math.min(idx * 0.05, 1);

      return `<div class="event-card flex items-start gap-3 bg-slate-900/50 border border-slate-800/50 rounded-xl p-4" style="animation-delay:${delay}s">
        <div class="flex-shrink-0 mt-0.5">
          <span class="inline-flex items-center justify-center w-8 h-8 rounded-lg border text-xs font-mono font-bold ${badgeClass}">
            ${deltaStr}
          </span>
        </div>
        <div class="flex-1 min-w-0">
          <div class="flex items-center gap-2 mb-1">
            <span class="text-sm text-slate-200 font-medium">${escapeHtml(event)}</span>
            ${score ? `<span class="text-[10px] font-mono text-slate-500 ml-auto flex-shrink-0">${score}</span>` : ''}
          </div>
          ${context ? `<p class="text-xs text-slate-500 leading-relaxed">${escapeHtml(context)}</p>` : ''}
          <span class="text-[10px] text-slate-600 font-mono mt-1 inline-block">${escapeHtml(when)}</span>
        </div>
      </div>`;
    }).join('');
  }

  async function loadTrust() {
    const [trustData, eventsData] = await Promise.all([
      fetchJSON('/api/trust'),
      fetchJSON('/api/trust/events?limit=50')
    ]);

    if (trustData) {
      const score = trustData.current_score != null ? trustData.current_score : 0;
      updateGauge(score);

      const history = trustData.history || [];
      drawChart(history);

      // Weekly stats
      const now = new Date();
      const weekAgo = new Date(now - 7 * 86400000);
      const weekEvents = history.filter(h => new Date(h.created_at) >= weekAgo);
      const weekScores = weekEvents.map(h => h.score).filter(s => s != null);
      const weekDeltas = weekEvents.map(h => h.delta).filter(d => d != null);

      if (weekScores.length > 0) {
        const avg = weekScores.reduce((a, b) => a + b, 0) / weekScores.length;
        document.getElementById('stat-avg').textContent = avg.toFixed(1);
        document.getElementById('stat-avg-bar').style.width = avg + '%';
      }

      if (weekDeltas.length > 0) {
        const maxGain = Math.max(...weekDeltas);
        const maxDrop = Math.min(...weekDeltas);
        document.getElementById('stat-gain').textContent = maxGain > 0 ? '+' + maxGain.toFixed(2) : '0';
        document.getElementById('stat-drop').textContent = maxDrop < 0 ? maxDrop.toFixed(2) : '0';
      }

      document.getElementById('stat-events').textContent = formatNumber(history.length);
    }

    if (eventsData) {
      allEvents = eventsData.events || eventsData || [];
      renderEvents();
    }
  }

  // Handle resize for chart
  let resizeTimer;
  window.addEventListener('resize', () => {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(() => {
      // Re-fetch to redraw chart
      loadTrust();
    }, 250);
  });

  // Init
  loadTrust();
  setInterval(loadTrust, REFRESH_MS);
</script>
{% endblock %}