{% extends "base.html" %}

{% block title %}{{ page_title }}{% endblock %}
{% block meta_description %}{{ meta_description }}{% endblock %}

{% block content %}
<div class="subpage-shell">
  <div class="container py-5">
    {% if messages %}
    <div class="message-stack mb-4">
      {% for message in messages %}
      <div class="alert alert-{{ message.tags|default:'info' }} custom-alert mb-0" role="alert">{{ message }}</div>
      {% endfor %}
    </div>
    {% endif %}

    <div class="subpage-header glass-panel mb-4">
      <div>
        <span class="eyebrow">History</span>
        <h1>{% if is_demo_mode %}Demo momentum entries{% else %}Your momentum entries{% endif %}</h1>
        <p>{% if is_demo_mode %}Browse the seeded sample history, then create an account when you want private tracking.{% else %}Filter your private check-ins, spot patterns faster, and open any entry for the full detail view.{% endif %}</p>
      </div>
      <div class="d-flex flex-wrap gap-2 align-items-center">
        <a class="btn btn-ghost" href="{% url 'home' %}">Back to dashboard</a>
        {% if request.user.is_authenticated %}
        <a class="btn btn-accent" href="{% url 'home' %}#check-in">New check-in</a>
        <form method="post" action="{% url 'logout' %}" class="inline-form">
          {% csrf_token %}
          <button class="btn btn-ghost" type="submit">Log out</button>
        </form>
        {% else %}
        <a class="btn btn-ghost" href="{% url 'login' %}">Log in</a>
        <a class="btn btn-accent" href="{% url 'signup' %}">Create account</a>
        {% endif %}
      </div>
    </div>

    <div class="row g-3 mb-4">
      <div class="col-sm-6 col-xl-3">
        <article class="glass-panel summary-stat-card h-100">
          <span>Total check-ins</span>
          <strong>{{ history_overview.total_entries }}</strong>
          <p>{% if history_overview.latest_entry %}Latest: {{ history_overview.latest_entry.entry_date|date:"M j, Y" }}{% else %}No entries yet{% endif %}</p>
        </article>
      </div>
      <div class="col-sm-6 col-xl-3">
        <article class="glass-panel summary-stat-card h-100">
          <span>Avg. momentum</span>
          <strong>{{ history_overview.avg_momentum }}/10</strong>
          <p>Focus {{ history_overview.avg_focus }}/10 · Energy {{ history_overview.avg_energy }}/10</p>
        </article>
      </div>
      <div class="col-sm-6 col-xl-3">
        <article class="glass-panel summary-stat-card h-100">
          <span>Current streak</span>
          <strong>{{ history_overview.streak }} day{{ history_overview.streak|pluralize }}</strong>
          <p>Top lane: {{ history_overview.top_category }}</p>
        </article>
      </div>
      <div class="col-sm-6 col-xl-3">
        <article class="glass-panel summary-stat-card h-100">
          <span>Deep work total</span>
          <strong>{{ history_overview.total_minutes }}m</strong>
          <p>{% if is_demo_mode %}Sample time invested{% else %}Time protected for focused work{% endif %}</p>
        </article>
      </div>
    </div>

    <div class="filter-row mb-4">
      <a class="filter-chip {% if not selected_slug %}active{% endif %}" href="{% url 'entry_list' %}">All categories</a>
      {% for category in categories %}
      <a class="filter-chip {% if selected_slug == category.slug %}active{% endif %}" href="{% url 'entry_list' %}?category={{ category.slug }}">{{ category.name }} · {{ category.entry_total }}</a>
      {% endfor %}
    </div>

    {% if entries %}
    <div class="row g-4 mb-4">
      <div class="col-xl-7">
        <section class="glass-panel chart-panel h-100">
          <div class="chart-panel-top">
            <div>
              <span class="panel-label">Recent pattern</span>
              <h2 class="h3 mb-2">Last {{ recent_activity|length }} check-ins at a glance</h2>
              <p class="mb-0">Quick comparison bars make it easier to notice whether focus, energy, or deep work is drifting.</p>
            </div>
          </div>
          <div class="activity-list">
            {% for item in recent_activity %}
            <article class="activity-row">
              <div class="activity-row-head">
                <div>
                  <span class="category-badge">{{ item.entry.category.name }}</span>
                  <h3><a href="{% url 'entry_detail' item.entry.pk %}">{{ item.entry.title }}</a></h3>
                </div>
                <span class="entry-date">{{ item.entry.entry_date|date:"M j" }}</span>
              </div>
              <div class="score-track-group">
                <div class="score-track-item">
                  <span>Focus</span>
                  <div class="score-track"><div class="score-fill focus" style="width: {{ item.focus_width }}%"></div></div>
                  <strong>{{ item.entry.focus_score }}/10</strong>
                </div>
                <div class="score-track-item">
                  <span>Energy</span>
                  <div class="score-track"><div class="score-fill energy" style="width: {{ item.energy_width }}%"></div></div>
                  <strong>{{ item.entry.energy_score }}/10</strong>
                </div>
                <div class="score-track-item minutes">
                  <span>Deep work</span>
                  <div class="score-track"><div class="score-fill minutes" style="width: {{ item.minutes_width }}%"></div></div>
                  <strong>{{ item.entry.deep_work_minutes }}m</strong>
                </div>
              </div>
            </article>
            {% endfor %}
          </div>
        </section>
      </div>
      <div class="col-xl-5">
        <aside class="glass-panel chart-panel h-100">
          <div class="chart-panel-top">
            <div>
              <span class="panel-label">Category lanes</span>
              <h2 class="h3 mb-2">Where your momentum shows up most</h2>
              <p class="mb-0">These lanes rank the strongest categories in the current filtered history.</p>
            </div>
          </div>
          <div class="lane-list">
            {% for lane in category_breakdown %}
            <article class="lane-card">
              <div class="lane-card-top">
                <div>
                  <strong>{{ lane.name }}</strong>
                  <span>{{ lane.entry_total }} entry{{ lane.entry_total|pluralize }}</span>
                </div>
                <span>{{ lane.avg_momentum }}/10 avg</span>
              </div>
              <div class="lane-track" aria-hidden="true">
                <div class="lane-fill" style="width: {{ lane.share_percent }}%; background: linear-gradient(135deg, {{ lane.accent_color }}, var(--brand-highlight));"></div>
              </div>
              <div class="lane-meta">
                <span>{{ lane.total_minutes }} minutes tracked</span>
                <a href="{% url 'entry_list' %}?category={{ lane.slug }}">Open lane</a>
              </div>
            </article>
            {% endfor %}
          </div>
        </aside>
      </div>
    </div>

    <div class="row g-4">
      {% for entry in entries %}
      <div class="col-lg-4 col-md-6">
        <article class="glass-panel entry-card entry-card-enhanced h-100" style="--entry-accent: {{ entry.category.accent_color }};">
          <div class="entry-card-top">
            <span class="category-badge">{{ entry.category.name }}</span>
            <span class="entry-date">{{ entry.entry_date|date:"M j, Y" }}</span>
          </div>
          <h2 class="h4"><a href="{% url 'entry_detail' entry.pk %}">{{ entry.title }}</a></h2>
          <p>{{ entry.takeaway }}</p>
          <div class="entry-stats">
            <span>Focus {{ entry.focus_score }}/10</span>
            <span>Energy {{ entry.energy_score }}/10</span>
            <span>{{ entry.deep_work_minutes }} min</span>
          </div>
          <div class="entry-card-footer">
            <div class="mini-meter">
              <span>Momentum score</span>
              <strong>{{ entry.momentum_score }}/10</strong>
            </div>
            <a class="text-link" href="{% url 'entry_detail' entry.pk %}">View details</a>
          </div>
        </article>
      </div>
      {% endfor %}
    </div>
    {% else %}
    <div class="glass-panel empty-state">
      <h2>{% if is_demo_mode %}No demo entries for this filter{% else %}No private entries for this filter{% endif %}</h2>
      <p>{% if is_demo_mode %}Try a different category or create an account to start tracking your own days.{% else %}Try a different category or create a new check-in from the dashboard.{% endif %}</p>
      {% if request.user.is_authenticated %}
      <a class="btn btn-accent mt-3" href="{% url 'home' %}#check-in">Create an entry</a>
      {% else %}
      <a class="btn btn-accent mt-3" href="{% url 'signup' %}">Create your account</a>
      {% endif %}
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}