{% extends "base.html" %}
{% block title %}Insights{% endblock %}
{% block content %}
<div class="page-head"><div><h1>Insights</h1><p class="muted">Trends from everything {{ product.name }} has sent. This page fills in over time.</p></div></div>

<div class="stats">
  {% for s in data.stats %}<div class="card stat"><span>{{ s.label|capitalize }}</span><b>{{ s.value }}</b></div>{% endfor %}
</div>

{% for t in data.trends %}
<div class="card">
  <div class="page-head" style="margin-bottom:6px">
    <h2 style="margin:0">{{ t.label }}</h2>
    <div class="stat" style="text-align:right"><b style="font-size:1.4rem">{{ h.fmt_value(t.latest) }}</b>
      {% if t.change is not none %}<span>{{ '▲' if t.change > 0 else '▼' if t.change < 0 else '■' }} {{ '%.1f'|format(t.change|abs) }}% vs previous</span>{% endif %}</div>
  </div>
  <div class="chart-wrap">{{ t.chart }}</div>
  {% if t.new or t.gone %}<p class="small" style="margin:8px 0 0">
    {% if t.new %}<span class="pill on">New since {{ t.previous }}</span> {{ t.new|join(', ') }}{% endif %}
    {% if t.gone %}{% if t.new %}<br>{% endif %}<span class="pill review">Not in {{ t.points[-1][0] }}</span> {{ t.gone|join(', ') }}{% endif %}</p>{% endif %}
  <details class="small"><summary>Show as table</summary>
    <table class="people"><tr><th>Date</th><th style="text-align:right">Value</th></tr>
    {% for name, v in t.points %}<tr><td>{{ name }}</td><td style="text-align:right">{{ h.fmt_value(v) }}</td></tr>{% endfor %}</table></details>
</div>
{% else %}
<div class="card empty">Charts appear once automations have sent a few emails with data.</div>
{% endfor %}

<div class="grid grid-2">
  {% if data.weekly %}
  <div class="card"><h2>Emails Sent per Week</h2><div class="chart-wrap">{{ data.weekly.chart }}</div>
    <details class="small"><summary>Show as table</summary>
      <table class="people"><tr><th>Week of</th><th style="text-align:right">Emails</th></tr>
      {% for name, v in data.weekly.rows %}<tr><td>{{ name }}</td><td style="text-align:right">{{ v }}</td></tr>{% endfor %}</table></details></div>
  {% endif %}
  {% for r in data.recurring %}
  <div class="card"><h2>Keeps Coming Up: {{ r.label }}</h2>
    <p class="muted small">Appeared in more than one of the last {{ r.periods }} reports.</p>
    <ul class="list">{% for name, n in r.rows %}<li><div class="body">{{ name }}</div><span class="pill {{ 'review' if n >= 3 }}">{{ n }} times</span></li>{% endfor %}</ul></div>
  {% endfor %}
</div>
<div id="tip" class="tip" hidden></div>
{% endblock %}
{% block scripts %}
<script>
// Hover: nearest point (line) or bar band shows a tooltip; line charts also get a crosshair.
const tip = document.getElementById('tip');
document.querySelectorAll('svg[data-chart]').forEach(svg => {
  const marks = [...svg.querySelectorAll('[data-tip]')], cross = svg.querySelector('.crosshair');
  svg.addEventListener('mousemove', e => {
    const pt = svg.createSVGPoint(); pt.x = e.clientX; pt.y = e.clientY;
    const p = pt.matrixTransform(svg.getScreenCTM().inverse());
    let best = null, dist = Infinity;
    marks.forEach(m => { const mx = m.tagName === 'circle' ? +m.getAttribute('cx') : +m.getAttribute('x') + m.getAttribute('width') / 2;
      const d = Math.abs(mx - p.x); if (d < dist) { dist = d; best = m; } });
    if (!best) return;
    tip.textContent = best.dataset.tip; tip.hidden = false;
    tip.style.left = (e.pageX + 12) + 'px'; tip.style.top = (e.pageY - 28) + 'px';
    if (cross && best.tagName === 'circle') { cross.setAttribute('x1', best.getAttribute('cx')); cross.setAttribute('x2', best.getAttribute('cx')); cross.setAttribute('visibility', 'visible'); }
  });
  svg.addEventListener('mouseleave', () => { tip.hidden = true; if (cross) cross.setAttribute('visibility', 'hidden'); });
});
</script>
{% endblock %}