{% extends "base.html" %}

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

{% block content %}
<div class="site-shell">
  <header class="site-header">
    <nav class="navbar navbar-expand-lg navbar-dark main-nav">
      <div class="container py-3">
        <a class="navbar-brand brand-mark" href="{% url 'home' %}">Momentum Atlas</a>
        <button class="navbar-toggler border-0 shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="mainNav">
          <ul class="navbar-nav ms-auto align-items-lg-center gap-lg-2">
            <li class="nav-item"><a class="nav-link" href="#check-in">New check-in</a></li>
            <li class="nav-item"><a class="nav-link" href="#weekly-trend">Weekly trend</a></li>
            <li class="nav-item"><a class="nav-link" href="{% url 'entry_list' %}">All entries</a></li>
            <li class="nav-item"><a class="nav-link nav-pill" href="/admin/">Admin</a></li>
          </ul>
        </div>
      </div>
    </nav>

    <section class="hero-section">
      <div class="hero-orb hero-orb-one"></div>
      <div class="hero-orb hero-orb-two"></div>
      <div class="container py-5 position-relative">
        <div class="row align-items-center g-5">
          <div class="col-lg-6">
            <span class="eyebrow">Interesting Python project · daily tracker MVP</span>
            <h1 class="hero-title">Track your momentum like a product, not a spreadsheet.</h1>
            <p class="hero-copy">Log a single daily check-in, watch your focus and energy trend over time, and turn a simple Django app into a polished personal dashboard you can actually share.</p>
            <div class="hero-actions d-flex flex-wrap gap-3">
              <a class="btn btn-accent btn-lg" href="#check-in">Log today’s momentum</a>
              <a class="btn btn-ghost btn-lg" href="{% url 'entry_list' %}">Browse history</a>
            </div>
            <div class="hero-meta d-flex flex-wrap gap-4 mt-4">
              <div>
                <span class="hero-meta-label">Runtime</span>
                <strong>Django {{ django_version }} · Python {{ python_version }}</strong>
              </div>
              <div>
                <span class="hero-meta-label">Updated</span>
                <strong>{{ current_time|date:"M j, Y · H:i" }} UTC</strong>
              </div>
            </div>
          </div>
          <div class="col-lg-6">
            <div class="glass-panel insight-panel">
              <div class="panel-label">30-day snapshot</div>
              <div class="row g-3">
                <div class="col-6">
                  <article class="metric-card">
                    <span>Total check-ins</span>
                    <strong>{{ stats.total_entries }}</strong>
                  </article>
                </div>
                <div class="col-6">
                  <article class="metric-card">
                    <span>Active days</span>
                    <strong>{{ stats.active_days }}</strong>
                  </article>
                </div>
                <div class="col-6">
                  <article class="metric-card">
                    <span>Avg. focus</span>
                    <strong>{{ stats.avg_focus }}/10</strong>
                  </article>
                </div>
                <div class="col-6">
                  <article class="metric-card">
                    <span>Deep work</span>
                    <strong>{{ stats.total_minutes }}m</strong>
                  </article>
                </div>
              </div>
              <div class="spotlight-note mt-4">
                <span class="panel-label">Momentum spotlight</span>
                <p>{{ stats.spotlight }}</p>
                <div class="chip-row">
                  <span class="trend-chip">Top lane: {{ stats.top_category }}</span>
                  <span class="trend-chip">Avg. energy: {{ stats.avg_energy }}/10</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </header>

  <main>
    <section class="section-block" id="check-in">
      <div class="container">
        {% 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="row g-4 align-items-start">
          <div class="col-xl-7">
            <div class="section-heading">
              <span class="eyebrow">Workflow widget</span>
              <h2>Capture one meaningful check-in.</h2>
              <p>Each entry becomes a usable artifact: you log the day, land on a confirmation detail view, and keep building a real momentum history.</p>
            </div>
            <div class="glass-panel form-panel">
              <form method="post" novalidate>
                {% csrf_token %}
                <div class="row g-3">
                  {% for field in form %}
                  <div class="col-12 {% if field.name == 'entry_date' or field.name == 'focus_score' or field.name == 'energy_score' or field.name == 'deep_work_minutes' %}col-md-6{% endif %}">
                    <label class="form-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
                    {{ field }}
                    {% if field.help_text %}
                    <div class="form-hint">{{ field.help_text }}</div>
                    {% endif %}
                    {% if field.errors %}
                    <div class="invalid-feedback d-block">
                      {% for error in field.errors %}{{ error }}{% endfor %}
                    </div>
                    {% endif %}
                  </div>
                  {% endfor %}
                </div>
                <div class="d-flex flex-wrap gap-3 align-items-center mt-4">
                  <button type="submit" class="btn btn-accent btn-lg">Save check-in</button>
                  <span class="form-hint mb-0">Default categories are ready, and you can manage them later from Django Admin.</span>
                </div>
              </form>
            </div>
          </div>
          <div class="col-xl-5">
            <div class="section-heading compact">
              <span class="eyebrow">What this MVP already does</span>
              <h2>Thin slice, real workflow.</h2>
            </div>
            <div class="stack-grid">
              <article class="glass-panel feature-card">
                <h3>Create</h3>
                <p>Submit a structured daily entry with validation, categories, and tangible metrics.</p>
              </article>
              <article class="glass-panel feature-card">
                <h3>Confirm</h3>
                <p>Each new entry opens its own detail page with a success state and related history.</p>
              </article>
              <article class="glass-panel feature-card">
                <h3>Review</h3>
                <p>Use weekly bars and the history page to notice patterns instead of collecting dead data.</p>
              </article>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="section-block section-muted" id="weekly-trend">
      <div class="container">
        <div class="d-flex flex-wrap justify-content-between align-items-end gap-3 mb-4">
          <div class="section-heading compact mb-0">
            <span class="eyebrow">7-day insight</span>
            <h2>Focus and energy trend</h2>
          </div>
          <a class="text-link" href="{% url 'entry_list' %}">Open full history</a>
        </div>
        <div class="glass-panel chart-panel">
          <div class="trend-chart">
            {% for day in weekly_trend %}
            <article class="trend-day">
              <div class="trend-bars">
                <div class="trend-bar focus level-{{ day.focus_level }}" aria-label="Focus {{ day.focus }} out of 10"></div>
                <div class="trend-bar energy level-{{ day.energy_level }}" aria-label="Energy {{ day.energy }} out of 10"></div>
              </div>
              <div class="trend-values">{{ day.focus }}/{{ day.energy }}</div>
              <strong>{{ day.label }}</strong>
              <span>{{ day.minutes }}m</span>
            </article>
            {% endfor %}
          </div>
        </div>
      </div>
    </section>

    <section class="section-block">
      <div class="container">
        <div class="d-flex flex-wrap justify-content-between align-items-end gap-3 mb-4">
          <div class="section-heading compact mb-0">
            <span class="eyebrow">Recent check-ins</span>
            <h2>Momentum history preview</h2>
          </div>
          <a class="text-link" href="{% url 'entry_list' %}">See every entry</a>
        </div>
        {% if recent_entries %}
        <div class="row g-4">
          {% for entry in recent_entries %}
          <div class="col-lg-4 col-md-6">
            <article class="glass-panel entry-card h-100">
              <div class="entry-card-top">
                <span class="category-badge">{{ entry.category.name }}</span>
                <span class="entry-date">{{ entry.entry_date|date:"M j" }}</span>
              </div>
              <h3><a href="{% url 'entry_detail' entry.pk %}">{{ entry.title }}</a></h3>
              <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>
            </article>
          </div>
          {% endfor %}
        </div>
        {% else %}
        <div class="glass-panel empty-state">
          <h3>No entries yet</h3>
          <p>Start with one check-in above and this dashboard will instantly become your first useful Python product demo.</p>
        </div>
        {% endif %}
      </div>
    </section>
  </main>
</div>
{% endblock %}