{% extends 'base.html' %}
{% block title %}{{ zbiorka.nazwa }}{% endblock %}

{% block content %}
<div class="container my-4">

  {# Wyliczenia postępu finansowego #}
  {% set has_cel = (zbiorka.cel is defined and zbiorka.cel and zbiorka.cel > 0) %}
  {% set progress = (zbiorka.stan / zbiorka.cel * 100) if has_cel else 0 %}
  {% set progress_clamped = 100 if progress > 100 else (0 if progress < 0 else progress) %} {% set
    is_done=(progress_clamped>= 100) %}

    <!-- Nagłówek -->
    <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
      <h2 class="mb-0">{{ zbiorka.nazwa }}</h2>
      <div class="d-flex flex-wrap align-items-center gap-2">
        {% if is_done %}
        <span class="badge rounded-pill" style="background: var(--accent); color:#111;">Zrealizowana</span>
        {% endif %}
        {% if zbiorka.ukryj_kwote %}
        <span class="badge bg-secondary">Kwoty niepubliczne</span>
        {% else %}
        <span class="badge bg-success">Kwoty widoczne</span>
        {% endif %}
      </div>
    </div>

    <div class="row g-4">
      <!-- Kolumna lewa: Opis + (opcjonalnie) Lista zakupów + Postęp -->
      <div class="col-md-8">

        <!-- Card: Opis -->
        <div class="card shadow-sm mb-4">
          <div class="card-body">
            <h5 class="mb-2">Opis</h5>
            <div class="mb-0">
              {{ zbiorka.opis | markdown }}
            </div>
          </div>
        </div>

        {# Czy są produkty? #}
        {% set items = zbiorka.przedmioty or [] %}
        {% set has_items = (items|length > 0) %}

        <!-- Card: Lista zakupów (tylko gdy są produkty) -->
        {% if has_items %}
        <div class="card shadow-sm mb-4">
          <div class="card-body">
            <h5 class="mb-2">Lista zakupów</h5>

            {% set posortowane = items|sort(attribute='kupione') %}
            <ul class="list-group list-group-flush">
              {% for it in posortowane %}
              <li class="list-group-item bg-transparent d-flex flex-wrap justify-content-between align-items-center">
                <div class="d-flex align-items-center gap-2">
                  {% if it.kupione %}
                  <span class="badge bg-success">Kupione</span>
                  {% else %}
                  <span class="badge bg-warning text-dark">Do kupienia</span>
                  {% endif %}
                  <span class="fw-semibold">{{ it.nazwa }}</span>
                  {% if it.link %}
                  <a href="{{ it.link }}" target="_blank" rel="noopener"
                    class="btn btn-sm btn-outline-light border ms-2">Sklep ↗</a>
                  {% endif %}
                </div>
                <div>
                  {% if not zbiorka.ukryj_kwote %}
                  {% if it.cena is not none %}
                  <span class="badge bg-dark border" style="border-color: var(--border);">
                    {{ it.cena|round(2) }} PLN
                  </span>
                  {% else %}
                  <span class="text-muted">—</span>
                  {% endif %}
                  {% else %}
                  <span class="text-muted">—</span>
                  {% endif %}
                </div>
              </li>
              {% endfor %}
            </ul>
          </div>
        </div>
        {% endif %}

        <!-- Card: Postęp (POD listą zakupów) -->
        {# Dodatkowe wyliczenia do postępu zakupów #}
        {% set total_cnt = items|length %}
        {% set kupione_cnt = (items|selectattr('kupione')|list|length) %}
        {% set items_pct = (kupione_cnt / total_cnt * 100) if total_cnt > 0 else 0 %}
        {% if not zbiorka.ukryj_kwote %}
        {% set suma_all = (items|selectattr('cena')|map(attribute='cena')|sum) or 0 %}
        {% set suma_kupione = (items|selectattr('kupione')|selectattr('cena')|map(attribute='cena')|sum) or 0 %}
        {% set suma_pct = (suma_kupione / suma_all * 100) if suma_all > 0 else 0 %}
        {% endif %}

        <div class="card shadow-sm">
          <div class="card-body">
            <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-2">
              <h5 class="mb-0">Postęp</h5>
              <div class="d-flex flex-wrap align-items-center gap-2">
                {% if has_cel and not zbiorka.ukryj_kwote %}
                <span class="badge bg-dark border" style="border-color: var(--border);">
                  Finanse: {{ zbiorka.stan|round(2) }} / {{ zbiorka.cel|round(2) }} PLN
                </span>
                {% endif %}
                {% if has_items %}
                <span class="badge bg-secondary">Pozycje: {{ kupione_cnt }}/{{ total_cnt }}</span>
                {% if not zbiorka.ukryj_kwote and (suma_all or 0) > 0 %}
                <span class="badge bg-secondary">Zakupy (kwotowo):
                  {{ (suma_kupione or 0)|round(2) }} / {{ (suma_all or 0)|round(2) }} PLN
                </span>
                {% endif %}
                {% endif %}
              </div>
            </div>

            <!-- Pasek: Finanse (zawsze) -->
            <div class="mb-3">
              <small class="text-muted">Finanse</small>
              <div class="progress" role="progressbar" aria-valuenow="{{ progress_clamped|round(2) }}" aria-valuemin="0"
                aria-valuemax="100">
                <div class="progress-bar" style="width: {{ progress_clamped }}%;"></div>
              </div>
              <small class="text-muted">
                {% if zbiorka.ukryj_kwote %}—{% else %}{{ progress|round(1) }}%{% endif %}
              </small>
            </div>

            {% if has_items %}
            <!-- Pasek: Zakupy sztukami -->
            <div class="mb-3">
              <small class="text-muted">Zakupy (liczba pozycji)</small>
              <div class="progress" role="progressbar" aria-valuenow="{{ items_pct|round(2) }}" aria-valuemin="0"
                aria-valuemax="100">
                <div class="progress-bar" style="width: {{ items_pct }}%;"></div>
              </div>
              <small class="text-muted">{{ items_pct|round(1) }}%</small>
            </div>

            {% if not zbiorka.ukryj_kwote and (suma_all or 0) > 0 %}
            <!-- Pasek: Zakupy kwotowo -->
            <div>
              <small class="text-muted">Zakupy (kwotowo)</small>
              <div class="progress" role="progressbar" aria-valuenow="{{ suma_pct|round(2) }}" aria-valuemin="0"
                aria-valuemax="100">
                <div class="progress-bar" style="width: {{ suma_pct }}%;"></div>
              </div>
              <small class="text-muted">{{ suma_pct|round(1) }}%</small>
            </div>
            {% endif %}
            {% endif %}
          </div>
        </div>

      </div>

      <!-- Kolumna prawa: płatności (sticky) -->
      <div class="col-md-4">
        <div class="card shadow-sm wspomoz-card position-sticky" style="top: 1rem;">
          <div class="card-body">
            <div class="mb-3">
              <div class="d-flex align-items-center justify-content-between">
                <strong>Numer konta</strong>
                <button class="btn btn-sm btn-outline-light border" type="button"
                  data-copy-target="#ibanDisplay">Kopiuj</button>
              </div>
              <div class="fs-5" id="ibanDisplay">{{ zbiorka.numer_konta }}</div>
            </div>
            <div class="mb-3">
              <div class="d-flex align-items-center justify-content-between">
                <strong>Telefon BLIK</strong>
                <button class="btn btn-sm btn-outline-light border" type="button"
                  data-copy-target="#blikDisplay">Kopiuj</button>
              </div>
              <div class="fs-5" id="blikDisplay">{{ zbiorka.numer_telefonu_blik }}</div>
            </div>

            {% if not zbiorka.ukryj_kwote %}
            <hr class="my-3">
            <div class="d-flex flex-column gap-1">
              {% if has_cel %}
              <div><strong>Cel:</strong> <span class="fs-6">{{ zbiorka.cel|round(2) }} PLN</span></div>
              {% endif %}
              <div><strong>Stan:</strong> <span class="fs-6">{{ zbiorka.stan|round(2) }} PLN</span></div>
              {% if has_cel %}
              {% set brak = (zbiorka.cel - zbiorka.stan) %}
              <small class="text-muted">
                {% if brak > 0 %}
                Do celu brakuje: {{ brak|round(2) }} PLN
                {% elif brak == 0 %}
                Cel osiągnięty.
                {% else %}
                Przekroczono cel o: {{ (brak * -1)|round(2) }} PLN
                {% endif %}
              </small>
              {% endif %}
            </div>
            {% endif %}

            {% if current_user.is_authenticated and current_user.is_admin %}
            <div class="d-grid mt-3">
              <a href="{{ url_for('dodaj_wplate', zbiorka_id=zbiorka.id) }}" class="btn btn-primary">Dodaj wpłatę</a>
            </div>
            <div class="d-grid mt-2">
              <a href="{{ url_for('dodaj_wydatek', zbiorka_id=zbiorka.id) }}" class="btn btn-outline-light border">Dodaj
                wydatek</a>
            </div>
            {% endif %}
          </div>
        </div>
      </div>
    </div>

    <!-- Aktywność -->
    <div class="card shadow-sm mt-4">
      <div class="card-header d-flex align-items-center justify-content-between">
        <h5 class="card-title mb-0">Aktywność / Transakcje</h5>
        {% if aktywnosci and aktywnosci|length > 0 %}
        <small class="text-muted">Łącznie pozycji: {{ aktywnosci|length }}</small>
        {% endif %}
      </div>
      <div class="card-body">
        {% if aktywnosci and aktywnosci|length > 0 %}
        <ul class="list-group list-group-flush">
          {% for a in aktywnosci %}
          <li class="list-group-item bg-transparent d-flex flex-wrap justify-content-between align-items-center">
            <div class="me-3">
              <strong>{{ a.data|dt("%d.%m.%Y %H:%M") }}</strong>
              <span class="badge {% if a.typ == 'wpłata' %}bg-success{% else %}bg-danger{% endif %} ms-2">
                {{ a.typ|capitalize }}
              </span>
              {% if a.opis %}
              <span class="text-muted">— {{ a.opis }}</span>
              {% endif %}
            </div>
            {% if not zbiorka.ukryj_kwote %}
            <span class="badge bg-dark border ms-auto" style="border-color: var(--border);">
              {% if a.typ == 'wpłata' %}+{% else %}-{% endif %} {{ a.kwota|round(2) }} PLN
            </span>
            {% endif %}
          </li>
          {% endfor %}
        </ul>
        {% else %}
        <div class="text-center py-4">
          <h6 class="mb-1">Brak aktywności</h6>
          <p class="text-muted mb-0">Gdy pojawią się pierwsze wpłaty lub wydatki, zobaczysz je tutaj.</p>
        </div>
        {% endif %}
      </div>
    </div>

    <!-- Akcje dolne -->
    <div class="d-flex gap-2 justify-content-between mt-3">
      <div></div>
      <a href="{{ url_for('index') }}" class="btn btn-outline-light border">Powrót do listy</a>
    </div>

</div>
{% endblock %}

{% block extra_scripts %}
{{ super() }}
<script src="{{ url_for('static', filename='js/zbiorka.js') }}?v={{ APP_VERSION }}"></script>
<script src="{{ url_for('static', filename='js/progress.js') }}?v={{ APP_VERSION }}"></script>
{% endblock %}