{% extends "base.html" %}

{% block title %}Reports{% endblock %}

{% block content %}
<section class="rounded-3xl border border-slate-200/80 bg-white/80 p-6 shadow-sm backdrop-blur">
  <h1 class="text-3xl font-bold tracking-tight">Reports</h1>
  <p class="mt-3 text-sm text-slate-600">Averages include days with no entries as 0 calories.</p>
  <p class="mt-1 text-xs text-slate-500">Generated for {{ page.generated_for_date }} (local date)</p>
  <p class="mt-1 text-xs text-slate-500">BMR for estimate: {{ page.bmr_label }}</p>
</section>

<section class="mt-5 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
  {% for card in page.cards %}
  <article class="rounded-2xl border border-slate-200/90 bg-white p-4 shadow-sm">
    <h2 class="text-base font-bold text-slate-900">{{ card.title }}</h2>
    <p class="mt-1 text-xs text-slate-500">{{ card.range_label }}</p>
    <p class="mt-4 text-3xl font-bold tracking-tight text-slate-900">{{ card.average_calories_per_day }}</p>
    <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">avg cal/day</p>
    <dl class="mt-4 space-y-1 text-sm text-slate-700">
      <div class="flex justify-between">
        <dt>Total</dt>
        <dd class="font-semibold">{{ card.total_calories }} cal</dd>
      </div>
      <div class="flex justify-between">
        <dt>Days</dt>
        <dd class="font-semibold">{{ card.day_count }}</dd>
      </div>
    </dl>
  </article>
  {% endfor %}
</section>

<section class="mt-5 rounded-3xl border border-slate-200/80 bg-white/80 p-6 shadow-sm backdrop-blur">
  <h2 class="text-xl font-bold tracking-tight text-slate-900">Rolling 3-Day Trends</h2>
  <p class="mt-1 text-sm text-slate-600">Weight uses available weigh-ins in each 3-day window. Calories include zero-entry days.</p>
  <div class="mt-4 grid gap-4 lg:grid-cols-2">
    <article class="rounded-2xl border border-slate-200 bg-white p-4">
      <h3 class="text-sm font-semibold uppercase tracking-wide text-slate-600">Calories (3-day average)</h3>
      <div class="mt-3 h-72">
        <canvas id="calorie-trend-chart"></canvas>
      </div>
    </article>
    <article class="rounded-2xl border border-slate-200 bg-white p-4">
      <h3 class="text-sm font-semibold uppercase tracking-wide text-slate-600">Weight (3-day average, lbs)</h3>
      <div class="mt-3 h-72">
        <canvas id="weight-trend-chart"></canvas>
      </div>
    </article>
    <article class="rounded-2xl border border-slate-200 bg-white p-4 lg:col-span-2">
      <h3 class="text-sm font-semibold uppercase tracking-wide text-slate-600">Estimated Daily Weight Change (lbs/day)</h3>
      <p class="mt-1 text-xs text-slate-500">Formula: (rolling 3-day avg calories - BMR) / 3500. Negative = loss, positive = gain.</p>
      <div class="mt-3 h-72">
        <canvas id="loss-trend-chart"></canvas>
      </div>
    </article>
  </div>
</section>
{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  const labels = {{ page.chart_labels_js|safe }};
  const rollingCalories = {{ page.calories_rolling_js|safe }};
  const rollingWeight = {{ page.weight_rolling_js|safe }};
  const rollingLoss = {{ page.loss_rolling_js|safe }};

  new Chart(
    document.getElementById("calorie-trend-chart"),
    {
      type: "line",
      data: {
        labels,
        datasets: [
          {
            label: "Rolling 3-day calories",
            data: rollingCalories,
            borderColor: "#0f766e",
            backgroundColor: "rgba(15, 118, 110, 0.15)",
            fill: true,
            tension: 0.25,
            pointRadius: 1.5
          }
        ]
      },
      options: {
        maintainAspectRatio: false,
        scales: { y: { beginAtZero: true } }
      }
    }
  );

  new Chart(
    document.getElementById("weight-trend-chart"),
    {
      type: "line",
      data: {
        labels,
        datasets: [
          {
            label: "Rolling 3-day weight (lbs)",
            data: rollingWeight,
            borderColor: "#2563eb",
            backgroundColor: "rgba(37, 99, 235, 0.15)",
            fill: true,
            tension: 0.25,
            pointRadius: 1.5,
            spanGaps: true
          }
        ]
      },
      options: {
        maintainAspectRatio: false
      }
    }
  );

  new Chart(
    document.getElementById("loss-trend-chart"),
    {
      type: "line",
      data: {
        labels,
        datasets: [
          {
            label: "Estimated lbs/day",
            data: rollingLoss,
            borderColor: "#7c3aed",
            backgroundColor: "rgba(124, 58, 237, 0.15)",
            fill: true,
            tension: 0.25,
            pointRadius: 1.5
          }
        ]
      },
      options: {
        maintainAspectRatio: false
      }
    }
  );
</script>
{% endblock %}