{% extends "base.html" %}
{% block title %}Übersicht | {{ app_name }}{% endblock %}
{% block content %}
  {% from "_ui.html" import avatar %}
  <section class="page-hero">
    <div>
      <div class="eyebrow">Aktueller Monat</div>
      <h1>{{ month.label }}</h1>
      <p class="muted">
        {% if month.auto_created %}
          Monat wurde automatisch vorbereitet und kann jetzt angepasst werden.
        {% else %}
          Planung, Vorschläge und externe Beteiligungen auf einen Blick.
        {% endif %}
      </p>
    </div>
    <a href="{{ url_for('planning.detail', label=month.label) }}" class="primary-button">Planung öffnen</a>
  </section>

  <section class="cards-grid">
    <article class="metric-card">
      <span>Einkommen</span>
      <strong>{{ summary.total_income|currency }}</strong>
      <small>Delta zum Vormonat {{ summary.deltas.income_delta|currency }}</small>
    </article>
    <article class="metric-card">
      <span>Kosten</span>
      <strong>{{ summary.total_costs|currency }}</strong>
      <small>Delta zum Vormonat {{ summary.deltas.cost_delta|currency }}</small>
    </article>
    <article class="metric-card highlight">
      <span>Restbetrag</span>
      <strong>{{ summary.remainder|currency }}</strong>
      <small>Delta zum Vormonat {{ summary.deltas.remainder_delta|currency }}</small>
    </article>
    <article class="metric-card">
      <span>Vorgeschlagene Verteilung</span>
      <strong>{{ summary.suggestion_total|currency }}</strong>
      <small>{{ summary.suggestions|length }} Zielkonten vorbereitet</small>
    </article>
  </section>

  <section class="spotlight-grid split-layout">
    <article class="panel featured-panel">
      <div class="panel-head">
        <div>
          <h2>Daueraufträge prüfen</h2>
          <small>Welche Unterkonten sich gegenüber dem Vormonat geändert haben.</small>
        </div>
      </div>
      {% if shared_account_changes %}
        {% for account in shared_account_changes %}
          <div class="list-row">
            <div>
              <strong>{{ account.community_account.name }}</strong>
              <small>{{ account.current_total|currency }} geplant · bisher {{ account.previous_total|currency }}</small>
            </div>
            <span class="badge badge-warn">{{ account.delta|currency }}</span>
          </div>
        {% endfor %}
      {% else %}
        <div class="empty-state">Alle Unterkonten passen zum Vormonat. Daueraufträge müssen gerade nicht angepasst werden.</div>
      {% endif %}
    </article>

    <article class="panel">
      <div class="panel-head">
        <div>
          <h2>Persönliche Auszahlung</h2>
          <small>Automatisch aus dem aktuellen Restbetrag verteilt.</small>
        </div>
      </div>
      <div class="participant-card-grid">
        <div class="participant-manage-card">
          <div class="list-row-main">
            {{ avatar(personal_payouts.first.name, personal_payouts.first.avatar_url, personal_payouts.first.avatar_initials, "md") }}
            <strong>{{ personal_payouts.first.name }}</strong>
          </div>
          <span>{{ personal_payouts.first.amount|currency }}</span>
        </div>
        <div class="participant-manage-card">
          <div class="list-row-main">
            {{ avatar(personal_payouts.second.name, personal_payouts.second.avatar_url, personal_payouts.second.avatar_initials, "md") }}
            <strong>{{ personal_payouts.second.name }}</strong>
          </div>
          <span>{{ personal_payouts.second.amount|currency }}</span>
        </div>
      </div>
    </article>
  </section>

  <section class="split-layout">
    <article class="panel">
      <div class="panel-head">
        <h2>Extern mitzuteilen</h2>
      </div>
      {% if summary.external_totals %}
        {% for person in summary.external_totals %}
            <button type="button" class="list-row clickable-list-row" data-open-dialog="external-person-{{ person.participant_id }}">
              <div class="list-row-main">
                {{ avatar(person.participant_name, person.participant_avatar_url, person.participant_avatar_initials, "sm") }}
                <div>
                <strong>{{ person.participant_name }}</strong>
                <small>{{ person["items"]|length }} Positionen</small>
                </div>
              </div>
              <strong>{{ person.total|currency }}</strong>
            </button>
        {% endfor %}
      {% else %}
        <div class="empty-state">Für diesen Monat gibt es keine externen Anteile.</div>
      {% endif %}
    </article>

    <article class="panel">
      <div class="panel-head">
        <h2>Offene Hinweise</h2>
      </div>
      {% if notifications %}
        {% for note in notifications %}
          <div class="note-card">
            <strong>{{ note.title }}</strong>
            <p>{{ note.body }}</p>
          </div>
        {% endfor %}
      {% else %}
        <div class="empty-state">Keine offenen Hinweise. Das sieht gut aus.</div>
      {% endif %}
    </article>
  </section>

  <section class="split-layout">
    <article class="panel">
      <div class="panel-head">
        <h2>Größte Änderungen</h2>
      </div>
      {% if summary.top_changes %}
        {% for item in summary.top_changes %}
          <div class="list-row">
            <div>
              <strong>{{ item.entry_name }}</strong>
              <small>{{ item.category_name }}</small>
            </div>
            <strong>{{ item.delta|currency }}</strong>
          </div>
        {% endfor %}
      {% else %}
        <div class="empty-state">Noch keine Vergleichsdaten zum Vormonat vorhanden.</div>
      {% endif %}
    </article>
    <article class="panel">
      <div class="panel-head">
        <h2>Letzte 6 Monate</h2>
      </div>
      {% for item in recent_months %}
        <a class="list-row link-row" href="{{ url_for('planning.detail', label=item.label) }}">
          <div>
            <strong>{{ item.label }}</strong>
            <small>{% if item.auto_created %}automatisch erstellt{% else %}manuell gepflegt{% endif %}</small>
          </div>
          <span>Öffnen</span>
        </a>
      {% endfor %}
    </article>
  </section>

  {% for person in summary.external_totals %}
    <dialog id="external-person-{{ person.participant_id }}" class="app-dialog">
      <form method="dialog" class="dialog-close-row">
        <button class="dialog-close-button" type="submit" aria-label="Schließen">×</button>
      </form>
      <div class="stack-form">
        <div class="dialog-section-head">
          <div class="list-row-main">
            {{ avatar(person.participant_name, person.participant_avatar_url, person.participant_avatar_initials, "md") }}
            <div>
              <h3>{{ person.participant_name }}</h3>
              <small>{{ person.total|currency }} gesamt</small>
            </div>
          </div>
        </div>
        <div class="dialog-entry-list">
          {% for item in person["items"] %}
            <div class="dialog-entry-row static-entry-row">
              <div>
                <strong>{{ item.entry_name }}</strong>
                <small>Extern mitzuteilen</small>
              </div>
              <span>{{ item.amount|currency }}</span>
            </div>
          {% endfor %}
        </div>
      </div>
    </dialog>
  {% endfor %}
{% endblock %}