{% extends "base.html" %}
{% load i18n %}

{% block title %}{{ watcher.name }} — {% trans "Price History" %}{% endblock %}

{% block content %}
<div class="max-w-5xl mx-auto px-4 py-6">

  <div class="flex items-center gap-3 mb-2">
    <a href="{% url 'pricemon-dashboard' %}"
       class="text-gray-400 hover:text-gray-600 transition">
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
      </svg>
    </a>
    <h1 class="text-xl font-bold text-gray-900">{{ watcher.name }}</h1>
  </div>
  <a href="{{ watcher.url }}" target="_blank" rel="noopener"
     class="text-sm text-indigo-500 hover:underline ml-8 mb-6 block">{{ watcher.url|truncatechars:80 }}</a>

  <!-- Price Chart -->
  <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-4 mb-6">
    <div class="text-sm font-semibold text-gray-700 mb-3">{% trans "Price History" %}</div>
    <div id="priceChart" style="height: 300px;"></div>
  </div>

  <!-- Snapshot Table -->
  <div class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden">
    <div class="px-4 py-3 border-b border-gray-100 text-sm font-semibold text-gray-700">
      {% trans "Recent Checks" %}
    </div>
    {% if snapshots %}
    <table class="min-w-full divide-y divide-gray-100 text-sm">
      <thead class="bg-gray-50">
        <tr>
          <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{% trans "Checked At" %}</th>
          <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">{% trans "Price" %}</th>
          <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{% trans "Raw Text" %}</th>
          <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{% trans "Error" %}</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-gray-50">
        {% for snap in snapshots %}
        <tr>
          <td class="px-4 py-2 text-gray-500">{{ snap.checked_at|date:"Y-m-d H:i" }}</td>
          <td class="px-4 py-2 text-right font-medium {% if snap.price %}text-gray-900{% else %}text-gray-300{% endif %}">
            {% if snap.price %}${{ snap.price }}{% else %}—{% endif %}
          </td>
          <td class="px-4 py-2 text-gray-500 font-mono text-xs">{{ snap.raw_text|truncatechars:40 }}</td>
          <td class="px-4 py-2 text-red-500 text-xs">{{ snap.error|truncatechars:60 }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% else %}
    <div class="py-10 text-center text-gray-400 text-sm">{% trans "No price checks yet." %}</div>
    {% endif %}
  </div>

</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>
<script>
(function () {
  const chart = echarts.init(document.getElementById('priceChart'));
  chart.showLoading();

  fetch('{% url "pricemon-chart-data" watcher.pk %}')
    .then(r => r.json())
    .then(data => {
      chart.hideLoading();
      if (!data.labels.length) {
        chart.setOption({ title: { text: 'No data yet', left: 'center', top: 'center', textStyle: { color: '#9ca3af', fontSize: 14 } } });
        return;
      }
      chart.setOption({
        tooltip: { trigger: 'axis', formatter: p => `${p[0].axisValue}<br/>$${p[0].value}` },
        grid: { left: 60, right: 20, top: 20, bottom: 40 },
        xAxis: { type: 'category', data: data.labels, axisLabel: { rotate: 30, fontSize: 11 } },
        yAxis: {
          type: 'value',
          axisLabel: { formatter: v => '$' + v },
          scale: true,
        },
        series: [{
          name: data.name,
          type: 'line',
          data: data.prices,
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          lineStyle: { color: '#6366f1', width: 2 },
          itemStyle: { color: '#6366f1' },
          areaStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'rgba(99,102,241,0.18)' }, { offset: 1, color: 'rgba(99,102,241,0)' }] } },
        }],
      });
    });

  window.addEventListener('resize', () => chart.resize());
})();
</script>
{% endblock %}