{% 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">
      <div>
        <h2 class="mb-0">
          {% if zbiorka.typ_zbiorki == 'rezerwa' %}
          <i class="bi bi-wallet2"></i>
          {% endif %}
          {{ zbiorka.nazwa }}
        </h2>
        {% if zbiorka.typ_zbiorki == 'rezerwa' %}
        <p class="text-muted mb-0 small">Lista rezerwowa środków</p>
        {% elif is_done %}
        <p class="text-muted mb-0 small">Zbiórka zrealizowana</p>
        {% else %}
        <p class="text-muted mb-0 small">Aktywna zbiórka</p>
        {% endif %}
      </div>
      <div class="d-flex flex-wrap align-items-center gap-2">
        {% if zbiorka.typ_zbiorki == 'rezerwa' %}
        <span class="badge bg-info">Lista rezerwowa</span>
        {% endif %}
        {% if is_done and zbiorka.typ_zbiorki != 'rezerwa' %}
        <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-3">
      <!-- Kolumna lewa: Opis + (opcjonalnie) Lista zakupów + Postęp -->
      <div class="col-md-8">

        <!-- Card: Opis -->
        <div class="card shadow-sm mb-3">
          <div class="card-body">
            <h5 class="mb-2">Opis</h5>
            <hr class="hr-bw my-2">
            <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-3">
          <div class="card-body">
            <div class="d-flex align-items-center justify-content-between mb-2">
              <h5 class="mb-0">Lista zakupów</h5>
              <span class="badge bg-secondary">{{ items|length }} pozycji</span>
            </div>
            <hr class="hr-bw my-2">
            {% 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 py-2">
                <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 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 %}

        {# Pokazuj sekcję postępu TYLKO dla standardowych zbiórek, NIE dla rezerwowych #}
        {% if zbiorka.typ_zbiorki != 'rezerwa' %}
        <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 and zbiorka.pokaz_postep_finanse %}
                <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 and zbiorka.pokaz_postep_pozycje %}
                <span class="badge bg-secondary">Pozycje: {{ kupione_cnt }}/{{ total_cnt }}</span>
                {% endif %}

                {% if has_items and not zbiorka.ukryj_kwote and (suma_all or 0) > 0 and zbiorka.pokaz_postep_kwotowo %}
                <span class="badge bg-secondary">
                  Zakupy (kwotowo): {{ (suma_kupione or 0)|round(2) }} / {{ (suma_all or 0)|round(2) }} PLN
                </span>
                {% endif %}
              </div>
            </div>

            <hr class="hr-bw my-2">

            {# Pasek: Finanse #}
            {% if zbiorka.pokaz_postep_finanse %}
            <div class="mb-2">
              <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>
            {% endif %}

            {# Pasek: Zakupy sztukami #}
            {% if has_items and zbiorka.pokaz_postep_pozycje %}
            <div class="mb-2">
              <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>
            {% endif %}

            {# Pasek: Zakupy kwotowo #}
            {% if has_items and not zbiorka.ukryj_kwote and (suma_all or 0) > 0 and zbiorka.pokaz_postep_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 %}
          </div>
        </div>
        {% endif %}
        {# Koniec warunku dla typu zbiórki #}

      </div>

      {% set show_iban = zbiorka.uzyj_konta and zbiorka.numer_konta %}
      {% set show_blik = zbiorka.uzyj_blik and zbiorka.numer_telefonu_blik %}

      <!-- Kolumna prawa: płatności (sticky) -->
      <div class="col-md-4">
        <div class="card shadow-sm wspomoz-card sticky-md" style="top: var(--sticky-offset, 1rem);">
          <div class="card-body d-flex flex-column gap-2">

            <div class="d-flex align-items-center justify-content-between">
              <h5 class="mb-0">
                {% if zbiorka.typ_zbiorki == 'rezerwa' %}
                Sposoby wsparcia
                {% else %}
                Jak wspomóc?
                {% endif %}
              </h5>
              {% if has_cel and not zbiorka.ukryj_kwote and zbiorka.typ_zbiorki != 'rezerwa' %}
              {% set brak = (zbiorka.cel - zbiorka.stan) %}
              {% if brak > 0 %}
              <span class="badge bg-warning text-dark border border-warning">Brakuje: {{ brak|round(2) }} PLN</span>
              {% else %}
              <span class="badge rounded-pill" style="background: var(--accent); color:#111;">Zrealizowana</span>
              {% endif %}
              {% endif %}
            </div>

            {% if show_iban or show_blik %}
            {% if show_iban %}
            <!-- Numer konta -->
            <div>
              <label for="ibanInput" class="form-label fw-semibold mb-1">Numer konta</label>
              <div class="input-group input-group-sm">
                <input id="ibanInput" type="text"
                  class="form-control bg-transparent text-light border monospace-input text-truncate"
                  value="{{ zbiorka.numer_konta }}" readonly autocomplete="off" autocorrect="off" autocapitalize="off"
                  spellcheck="false" inputmode="text" aria-label="Numer konta do wpłaty">
                <button class="btn btn-outline-light copy-btn" type="button" data-copy-input="#ibanInput"
                  aria-label="Kopiuj numer konta">Kopiuj</button>
              </div>
            </div>
            {% endif %}

            {% if show_blik %}
            <!-- Telefon BLIK -->
            <div>
              <label for="blikInput" class="form-label fw-semibold mb-1">Telefon / BLIK</label>
              <div class="input-group input-group-sm">
                <input id="blikInput" type="text"
                  class="form-control bg-transparent text-light border monospace-input text-truncate"
                  value="{{ zbiorka.numer_telefonu_blik }}" readonly autocomplete="off" autocorrect="off"
                  autocapitalize="off" spellcheck="false" inputmode="numeric" aria-label="Telefon BLIK">
                <button class="btn btn-outline-light copy-btn" type="button" data-copy-input="#blikInput"
                  aria-label="Kopiuj numer BLIK">Kopiuj</button>
              </div>
            </div>
            {% endif %}
            {% else %}
            <div class="alert alert-secondary mb-0">
              Kanały płatności są wyłączone dla tej zbiórki.
            </div>
            {% endif %}

            {% if not zbiorka.ukryj_kwote %}
            <ul class="list-group list-group-flush small mt-2">
              {% if zbiorka.typ_zbiorki != 'rezerwa' %}
                {% if has_cel %}
                <li class="list-group-item bg-transparent d-flex justify-content-between py-1">
                  <span>Cel</span>
                  <span class="fw-semibold">{{ zbiorka.cel|round(2) }} PLN</span>
                </li>
                {% endif %}
              {% endif %}
              
              <li class="list-group-item bg-transparent d-flex justify-content-between py-1">
                <span>Stan</span>
                <span class="fw-semibold text-success">{{ zbiorka.stan|round(2) }} PLN</span>
              </li>
              
              {% if zbiorka.typ_zbiorki != 'rezerwa' and has_cel %}
              <li class="list-group-item bg-transparent d-flex justify-content-between py-1">
                <span>
                  {% if brak > 0 %}Brakuje{% elif brak == 0 %}Cel{% else %}Nadwyżka{% endif %}
                </span>
                <span class="fw-semibold {% if brak > 0 %}text-warning{% elif brak < 0 %}text-success{% endif %}">
                  {% if brak > 0 %}
                  {{ brak|round(2) }} PLN
                  {% elif brak == 0 %}
                  osiągnięty
                  {% else %}
                  {{ (-brak)|round(2) }} PLN
                  {% endif %}
                </span>
              </li>
              {% endif %}
            </ul>
            {% endif %}

            {% if current_user.is_authenticated and current_user.czy_admin %}
            <hr class="my-2">
            <div class="d-grid gap-2">
              <a href="{{ url_for('dodaj_wplate', zbiorka_id=zbiorka.id) }}" class="btn btn-outline-light btn-sm">Dodaj wpłatę</a>
              <a href="{{ url_for('dodaj_wydatek', zbiorka_id=zbiorka.id) }}" class="btn btn-outline-light btn-sm">Dodaj wydatek</a>
              <a href="{{ url_for('dodaj_przesuniecie', zbiorka_id=zbiorka.id) }}" class="btn btn-outline-light btn-sm">
                <i class="bi bi-arrow-left-right"></i> Przesuń środki
              </a>
              <a href="{{ url_for('edytuj_stan', zbiorka_id=zbiorka.id) }}" class="btn btn-outline-light btn-sm">Edytuj stan</a>
              {% if zbiorka.typ_zbiorki != 'rezerwa' %}
              <a href="{{ url_for('formularz_zbiorek', zbiorka_id=zbiorka.id) }}"
                class="btn btn-outline-light btn-sm">Edytuj opis</a>
              {% else %}
              <a href="{{ url_for('edytuj_rezerwe', rezerwa_id=zbiorka.id) }}"
                class="btn btn-outline-light btn-sm">Edytuj rezerwę</a>
              {% endif %}
            </div>
            {% endif %}

          </div>
        </div>
      </div>

    </div>

    <!-- Aktywność -->
    <div class="card shadow-sm mt-3">
      <div class="card-header bg-transparent d-flex align-items-center justify-content-between py-2">
        <h5 class="card-title mb-0">Aktywność / Transakcje</h5>
        <div class="d-flex align-items-center gap-2">
          {% if aktywnosci and aktywnosci|length > 0 %}
          <small class="text-muted">Łącznie pozycji: {{ aktywnosci|length }}</small>
          {% endif %}
          {% if current_user.is_authenticated and current_user.czy_admin %}
          <a href="{{ url_for('transakcje_zbiorki', zbiorka_id=zbiorka.id) }}" class="btn btn-sm btn-outline-light">
            Zarządzaj
          </a>
          {% endif %}
        </div>
      </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-start py-2">
            <div class="me-3 flex-grow-1">
              <strong>{{ a.data|dt("%d.%m.%Y %H:%M") }}</strong>
              
              {% if a.typ == 'wpłata' %}
              <span class="badge bg-success ms-2">Wpłata</span>
              {% elif a.typ == 'wydatek' %}
              <span class="badge bg-danger ms-2">Wydatek</span>
              {% elif a.typ == 'przesunięcie_przych' %}
              <span class="badge bg-info ms-2">Przesunięcie (↓ przychód)</span>
              {% elif a.typ == 'przesunięcie_wych' %}
              <span class="badge bg-warning text-dark ms-2">Przesunięcie (↑ wychód)</span>
              {% endif %}
              
              {% if a.opis %}
              <span class="text-muted">— {{ a.opis }}</span>
              {% endif %}
              
              {# Informacja o przesunięciu wpłaty #}
              {% if a.typ == 'wpłata' and a.przesuniecie_z %}
              <div class="text-muted small mt-1">
                <span class="badge bg-secondary">Przesunięto</span>
                Źródło: 
                <a href="{{ url_for('zbiorka', zbiorka_id=a.przesuniecie_z.zbiorka_zrodlo_id) }}" 
                   class="text-decoration-none">
                  {{ a.przesuniecie_z.zbiorka_zrodlo_nazwa }}
                </a>
                {% if a.przesuniecie_z.opis %}
                <br><span class="text-muted">{{ a.przesuniecie_z.opis }}</span>
                {% endif %}
              </div>
              {% endif %}
              
              {# Link do źródłowej/docelowej zbiórki dla przesunięć ogólnych #}
              {% if a.typ in ['przesunięcie_przych', 'przesunięcie_wych'] and a.zbiorka_id %}
              <a href="{{ url_for('zbiorka', zbiorka_id=a.zbiorka_id) }}" 
                 class="ms-2 text-decoration-none small">
                <i class="bi bi-link-45deg"></i>
                {% if a.typ == 'przesunięcie_przych' %}
                z: {{ a.zbiorka_nazwa }}
                {% else %}
                do: {{ a.zbiorka_nazwa }}
                {% endif %}
              </a>
              {% endif %}
            </div>
            
            {% if not zbiorka.ukryj_kwote %}
            <span class="badge bg-dark border" style="border-color: var(--border);">
              {% if a.typ == 'wpłata' or a.typ == 'przesunięcie_przych' %}
              +{{ a.kwota|round(2) }} PLN
              {% else %}
              -{{ a.kwota|round(2) }} PLN
              {% endif %}
            </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">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 %}