{% extends "base.html" %}

{% block content %}
  <section class="metric-grid" aria-label="Planning summary">
    <article class="metric-card metric-alert">
      <div class="metric-topline">
        <span>Overdue</span>
        <span class="metric-symbol" aria-hidden="true">!</span>
      </div>
      <strong>{{ state.aggregate.date_buckets.get("overdue", 0) }}</strong>
      <p>Past their due date</p>
    </article>
    <article class="metric-card">
      <div class="metric-topline">
        <span>Today</span>
        <span class="metric-symbol" aria-hidden="true">•</span>
      </div>
      <strong>{{ state.aggregate.date_buckets.get("today", 0) }}</strong>
      <p>Needs attention now</p>
    </article>
    <article class="metric-card">
      <div class="metric-topline">
        <span>Tomorrow</span>
        <span class="metric-symbol" aria-hidden="true">→</span>
      </div>
      <strong>{{ state.aggregate.date_buckets.get("tomorrow", 0) }}</strong>
      <p>Coming up next</p>
    </article>
    <article class="metric-card">
      <div class="metric-topline">
        <span>Next 7 days</span>
        <span class="metric-symbol" aria-hidden="true">7</span>
      </div>
      <strong>{{ state.aggregate.date_buckets.get("next_7_days", 0) }}</strong>
      <p>Near-term plans</p>
    </article>
    <article class="metric-card metric-completion">
      <div class="metric-topline">
        <span>Completion</span>
        <span class="metric-symbol" aria-hidden="true">✓</span>
      </div>
      <strong>{{ state.aggregate.completion_percent | round | int }}<small>%</small></strong>
      <p>{{ state.aggregate.completed_actions }} completed tagged items</p>
    </article>
  </section>

  <div class="dashboard-grid">
    <section class="panel panel-wide" aria-labelledby="pipeline-title">
      <div class="panel-heading">
        <div>
          <p class="section-kicker">Travel profile</p>
          <h2 id="pipeline-title">Planning pipeline</h2>
        </div>
        <span class="panel-count">{{ stage_total }} tagged items</span>
      </div>

      {% if stages %}
        <div class="stage-list">
          {% for stage in stages %}
            <div class="stage-row">
              <div class="stage-label">
                <span>{{ stage.name }}</span>
                <strong>{{ stage.count }}</strong>
              </div>
              <div
                class="stage-track"
                role="img"
                aria-label="{{ stage.name }}: {{ stage.count }} tagged items"
              >
                <span style="--stage-width: {{ stage.percent }}%"></span>
              </div>
            </div>
          {% endfor %}
        </div>
        <div class="panel-footnote">
          <span class="footnote-mark" aria-hidden="true">i</span>
          Uses the Travel Stage tag set returned by Curio.
        </div>
      {% else %}
        <div class="empty-state compact-empty">
          <span class="empty-mark" aria-hidden="true">◇</span>
          <div>
            <h3>No Travel Stage tags yet</h3>
            <p>Tagged planning items will form this project-wide pipeline.</p>
          </div>
        </div>
      {% endif %}
    </section>

    <section class="panel" aria-labelledby="upcoming-title">
      <div class="panel-heading">
        <div>
          <p class="section-kicker">Next moves</p>
          <h2 id="upcoming-title">Upcoming itinerary</h2>
        </div>
        <a class="text-link" href="/upcoming">View all</a>
      </div>

      {% if upcoming %}
        <ol class="upcoming-list">
          {% for item in upcoming[:5] %}
            <li>
              <span class="date-tile">
                <small>{{ item.bucket_label }}</small>
                <strong>{{ item.figure.due_date or "—" }}</strong>
              </span>
              <span class="upcoming-copy">
                <strong>{{ item.figure.title or "Untitled action" }}</strong>
                <small>
                  {{ item.figure.project_title }}
                  {% if item.figure.organizer_path %}
                    · {{ item.figure.organizer_path }}
                  {% endif %}
                </small>
              </span>
            </li>
          {% endfor %}
        </ol>
      {% else %}
        <div class="empty-state">
          <span class="empty-mark" aria-hidden="true">✓</span>
          <div>
            <h3>No incomplete travel items</h3>
            <p>
              Your selected Curio projects have no tagged figures below 100%
              progress. Planning tags are still summarized alongside.
            </p>
          </div>
        </div>
      {% endif %}
    </section>
  </div>

  <section class="panel overview-board-preview" aria-labelledby="board-preview-title">
    <div class="panel-heading">
      <div>
        <p class="section-kicker">Cross-project workflow</p>
        <h2 id="board-preview-title">
          {{ state.board.tag_set or "Workflow" }} board
        </h2>
      </div>
      <a class="text-link" href="/board">Open full board</a>
    </div>

    {% if board_columns %}
      <div class="overview-board-grid">
        {% for item in board_columns[:4] %}
          <article class="overview-board-column">
            <header>
              <strong>{{ item.column.label }}</strong>
              <span>{{ item.cards | length }}</span>
            </header>
            {% if item.cards %}
              <ol>
                {% for item_card in item.cards[:3] %}
                  <li class="accent-{{ item_card.accent }}">
                    <i aria-hidden="true"></i>
                    <span>
                      <strong>
                        {{ item_card.card.figure.title or "Untitled figure" }}
                      </strong>
                      <small>{{ item_card.card.figure.project_title }}</small>
                    </span>
                    {% if item_card.card.conflicting %}
                      <b title="Multiple workflow tags">!</b>
                    {% endif %}
                  </li>
                {% endfor %}
              </ol>
            {% else %}
              <p>No cards</p>
            {% endif %}
          </article>
        {% endfor %}
      </div>
      {% if state.board.columns | length > 4 %}
        <p class="preview-footnote">
          {{ state.board.columns | length - 4 }} more stages are available on
          the full board.
        </p>
      {% endif %}
    {% else %}
      <div class="empty-state compact-empty">
        <span class="empty-mark" aria-hidden="true">▥</span>
        <div>
          <h3>No workflow preview available</h3>
          <p>A populated Curio tag set will appear here after refresh.</p>
        </div>
      </div>
    {% endif %}
  </section>

  <section class="section-block" aria-labelledby="pulse-title">
    <div class="section-heading">
      <div>
        <p class="section-kicker">Across the map</p>
        <h2 id="pulse-title">Project pulse</h2>
      </div>
      <a class="text-link" href="/projects">Project details</a>
    </div>

    {% if projects %}
      <div class="project-strip">
        {% for project in projects %}
        <article class="project-pulse accent-{{ project.accent }}">
          <div class="project-identity">
            <span class="project-monogram">{{ project.initials }}</span>
            <div>
              <h3>{{ project.diagnostic.title }}</h3>
              <p>
                <span class="status-dot status-{{ project.diagnostic.refresh_state.value }}"></span>
                {{ project.diagnostic.refresh_state.value | replace("_", " ") | title }}
              </p>
            </div>
          </div>
          {% if project.metrics %}
            <dl class="project-mini-metrics">
              <div>
                <dt>Planning tags</dt>
                <dd>{{ project.metrics.tagged_figures }}</dd>
              </div>
              <div>
                <dt>Incomplete</dt>
                <dd>{{ project.metrics.open_actions }}</dd>
              </div>
              <div>
                <dt>Sections</dt>
                <dd>{{ project.metrics.section_count }}</dd>
              </div>
            </dl>
            <div class="project-progress">
              <span>
                <small>Workflow completion</small>
                <strong>{{ project.metrics.completion_percent | round | int }}%</strong>
              </span>
              <span
                class="project-progress-track"
                role="img"
                aria-label="{{ project.diagnostic.title }} workflow completion: {{ project.metrics.completion_percent | round | int }} percent"
              >
                <i style="--project-progress: {{ project.metrics.completion_percent }}%"></i>
              </span>
            </div>
          {% else %}
            <p class="muted-copy">No current snapshot in this view.</p>
          {% endif %}
        </article>
        {% endfor %}
      </div>
    {% else %}
      <div class="panel empty-state compact-empty">
        <span class="empty-mark" aria-hidden="true">▦</span>
        <div>
          <h3>No project pulse yet</h3>
          <p>Select a category containing at least one Curio project.</p>
        </div>
      </div>
    {% endif %}
  </section>

  <section class="status-ribbon" aria-label="Data status summary">
    <div>
      <span class="ribbon-icon" aria-hidden="true">◎</span>
      <span>
        <strong>{{ state.aggregate.project_count }} projects in view</strong>
        <small>{{ source_label }} · {{ freshness_label }}</small>
      </span>
    </div>
    <div class="ribbon-facts">
      <span><strong>{{ state.aggregate.tagged_figures }}</strong> tagged figures</span>
      <span><strong>{{ state.aggregate.links }}</strong> links</span>
      <span><strong>{{ state.aggregate.invalid_due_dates | length }}</strong> date warnings</span>
    </div>
  </section>
{% endblock %}