{% extends 'base.html' %}
{% block title %}Panel administratora{% endblock %}
{% block content %}

<div class="admin-page-head mb-4">
  <div>
    <h2 class="mb-2">{{ ui_icon('settings') }} Panel administratora</h2>
    <p class="text-secondary mb-0">Wgląd w użytkowników, listy, paragony, wydatki i ustawienia aplikacji.</p>
  </div>
  <a href="{{ url_for('main_page') }}" class="btn btn-outline-secondary">← Powrót do strony głównej</a>
</div>

{% include 'admin/_nav.html' %}


<div class="row g-3 mb-4">
  <!-- Statystyki liczbowe -->
  <div class="col-md-4">
    <div class="card bg-dark text-white h-100">
      <div class="card-body">
        <h5 class="mb-3">{{ ui_icon('chart-bar') }} Statystyki ogólne</h5>
        <table class="table table-dark table-sm mb-0">
          <tbody>
            <tr>
              <td>{{ ui_icon('user') }} Użytkownicy</td>
              <td class="text-end fw-bold">{{ user_count }}</td>
            </tr>
            <tr>
              <td>{{ ui_icon('notes') }} Listy zakupowe</td>
              <td class="text-end fw-bold">{{ list_count }}</td>
            </tr>
            <tr>
              <td>{{ ui_icon('shopping-cart') }} Produkty na listach</td>
              <td class="text-end fw-bold">{{ item_count }}</td>
            </tr>
            <tr>
              <td>{{ ui_icon('check') }} Zakupione</td>
              <td class="text-end fw-bold">{{ purchased_items_count }}</td>
            </tr>
            <tr>
              <td>{{ ui_icon('ban') }} Nieoznaczone jako kupione</td>
              <td class="text-end fw-bold">{{ not_purchased_count }}</td>
            </tr>
            <tr>
              <td>{{ ui_icon('notes') }} Produkty z notatkami</td>
              <td class="text-end fw-bold">{{ items_with_notes }}</td>
            </tr>
            <tr>
              <td>{{ ui_icon('clock') }} Śr. czas do zakupu (h)</td>
              <td class="text-end fw-bold">{{ avg_hours_to_purchase }}</td>
            </tr>
            <tr>
              <td>{{ ui_icon('coins') }} Średnia kwota na listę</td>
              <td class="text-end fw-bold">{{ format_currency(avg_list_expense) }}</td>
            </tr>
          </tbody>
        </table>
        <hr>
        <div class="small text-uppercase mb-1">{{ ui_icon('chart-line') }} Średnie tempo tworzenia list:</div>
        <ul class="list-unstyled small mb-0">
          <li>{{ ui_icon('calendar') }} Tygodniowo: <strong>{{ avg_per_week }}</strong></li>
          <li>{{ ui_icon('calendar') }} Miesięcznie: <strong>{{ avg_per_month }}</strong></li>
          <!--< li>{{ ui_icon('calendar') }} Rocznie: <strong>{{ avg_per_year }}</strong></li> -->
        </ul>
      </div>
    </div>
  </div>


  <!-- Najczęściej kupowane -->
  <div class="col-md-4">
    <div class="card bg-dark text-white h-100">
      <div class="card-body">
        <h5 class="mb-3">{{ ui_icon('flame') }} Najczęściej kupowane produkty</h5>
        {% if top_products %}
        {% set max_count = top_products[0][1] %}
        {% for name, count in top_products %}
        <div class="mb-2">
          <div class="d-flex justify-content-between">
            <span>{{ name }}</span>
            <span class="badge rounded-pill bg-secondary">{{ count }}x</span>
          </div>
          <div class="progress bg-transparent" style=" height: 6px;">
            <div class="progress-bar bg-success" role="progressbar" style="width: {{ (count / max_count) * 100 }}%"
              aria-valuenow="{{ count }}" aria-valuemin="0" aria-valuemax="{{ max_count }}">
            </div>
          </div>
        </div>
        {% endfor %}
        {% else %}
        <div>
          <p><span class="badge rounded-pill bg-secondary opacity-75">Brak danych</span></p>
        </div>
        {% endif %}
      </div>
    </div>
  </div>

  <!-- Podsumowanie wydatków -->
  <div class="col-md-4">
    <div class="card bg-dark text-white h-100 shadow-sm">
      <div class="card-body">
        <h5 class="mb-3">{{ ui_icon('coins') }} Podsumowanie wydatków</h5>

        <table class="table table-dark table-sm mb-3 align-middle">
          <thead class="text-muted small">
            <tr>
              <th title="Rodzaj listy zakupowej">Typ listy</th>
              <th title="Wydatki w bieżącym miesiącu">Miesiąc</th>
              <th title="Wydatki w bieżącym roku">Rok</th>
              <th title="Wydatki łączne">Całkowite</th>
              <!-- <th title="Średnia kwota na 1 listę">Średnia</th> -->
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Wszystkie</td>
              <td>{{ format_currency(expense_summary.all.month) }}</td>
              <td>{{ format_currency(expense_summary.all.year) }}</td>
              <td>{{ format_currency(expense_summary.all.total) }}</td>
              <!-- <td>{{ '%.2f'|format(expense_summary.all.avg) }} PLN</td> -->
            </tr>
            <tr>
              <td>Aktywne</td>
              <td>{{ format_currency(expense_summary.active.month) }}</td>
              <td>{{ format_currency(expense_summary.active.year) }}</td>
              <td>{{ format_currency(expense_summary.active.total) }}</td>
              <!-- <td>{{ '%.2f'|format(expense_summary.active.avg) }} PLN</td> -->
            </tr>
            <tr>
              <td>Archiwalne</td>
              <td>{{ format_currency(expense_summary.archived.month) }}</td>
              <td>{{ format_currency(expense_summary.archived.year) }}</td>
              <td>{{ format_currency(expense_summary.archived.total) }}</td>
              <!-- <td>{{ '%.2f'|format(expense_summary.archived.avg) }} PLN</td> -->
            </tr>
            <tr>
              <td>Wygasłe</td>
              <td>{{ format_currency(expense_summary.expired.month) }}</td>
              <td>{{ format_currency(expense_summary.expired.year) }}</td>
              <td>{{ format_currency(expense_summary.expired.total) }}</td>
              <!--  <td>{{ '%.2f'|format(expense_summary.expired.avg) }} PLN</td> -->
            </tr>
          </tbody>
        </table>

        <a href="{{ url_for('expenses') }}#chartTab" class="btn btn-outline-light w-100">
          {{ ui_icon('chart-bar') }} Pokaż wykres wydatków
        </a>
      </div>
    </div>
  </div>

  {% if expiring_lists %}<div class="alert alert-warning mb-4"><div class="fw-semibold mb-2">{{ ui_icon('clock') }} Listy tymczasowe wygasające w ciągu 24h</div><ul class="mb-0 ps-3">{% for l in expiring_lists %}<li>#{{ l.id }} {{ l.title }} — {{ l.owner.username if l.owner else '—' }} — {{ l.expires_at.strftime('%Y-%m-%d %H:%M') }}</li>{% endfor %}</ul></div>{% endif %}<div class="card bg-dark text-white mb-5">
    <div class="card-body">

      {# panel wyboru miesiąca zawsze widoczny #}
      <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">

        {# LEWA STRONA — przyciski ← → TYLKO gdy nie show_all #}
        <div class="d-flex gap-2">
          {% if not show_all %}
          {% set current_date = now.replace(day=1) %}
          {% set prev_month = (current_date - timedelta(days=1)).strftime('%Y-%m') %}
          {% set next_month = (current_date + timedelta(days=31)).replace(day=1).strftime('%Y-%m') %}

          {% if prev_month in month_options %}
          <a href="{{ url_for('admin_panel', m=prev_month) }}" class="btn btn-outline-light btn-sm">
            ← {{ prev_month }}
          </a>
          {% else %}
          <button class="btn btn-outline-light btn-sm opacity-50" disabled>← {{ prev_month }}</button>
          {% endif %}

          {% if next_month in month_options %}
          <a href="{{ url_for('admin_panel', m=next_month) }}" class="btn btn-outline-light btn-sm">
            {{ next_month }} →
          </a>
          {% else %}
          <button class="btn btn-outline-light btn-sm opacity-50" disabled>{{ next_month }} →</button>
          {% endif %}
          {% else %}
          {# Tryb wszystkie miesiące — możemy pokazać skrót do bieżącego miesiąca #}
          <a href="{{ url_for('admin_panel', m=now.strftime('%Y-%m')) }}" class="btn btn-outline-light btn-sm">
            {{ ui_icon('calendar') }} Przejdź do bieżącego miesiąca
          </a>
          {% endif %}
        </div>

        {# PRAWA STRONA — picker miesięcy zawsze widoczny #}
        <form method="get" class="m-0">
          <div class="input-group input-group-sm">
            <span class="input-group-text bg-secondary text-white">{{ ui_icon('calendar') }}</span>
            <select name="m" class="form-select bg-dark text-white border-secondary" onchange="this.form.submit()">
              <option value="all" {% if show_all %}selected{% endif %}>Wszystkie miesiące</option>
              {% for val in month_options %}
              {% set date_obj = (val ~ '-01') | todatetime %}
              <option value="{{ val }}" {% if month_str==val %}selected{% endif %}>
                {{ date_obj.strftime('%B %Y')|capitalize }}
              </option>
              {% endfor %}
            </select>
          </div>
        </form>
      </div>

      <h3 class="mt-4">
        {{ ui_icon('file-text') }} Listy zakupowe
        {% if show_all %}
        — <strong>wszystkie miesiące</strong>
        {% else %}
        — <strong>{{ month_str|replace('-', ' / ') }}</strong>
        {% endif %}
      </h3>
      <form method="post" action="{{ url_for('admin_delete_list') }}"
        onsubmit="return confirm('Na pewno usunąć tę listę?')" class="d-inline">
        <div class="table-responsive">
          <table class="table table-dark align-middle sortable">
            <thead>
              <tr>
                <th><input type="checkbox" id="select-all"></th>
                <th>ID</th>
                <th>Tytuł</th>
                <th>Status</th>
                <th>Utworzono</th>
                <th>Właściciel</th>
                <th>Produkty</th>
                <th>Progress</th>
                <th>Koment.</th>
                <th>Paragony</th>
                <th>Wydatki</th>
                <th>Akcje</th>
              </tr>
            </thead>
            <tbody>
              {% for e in enriched_lists %}
              {% set l = e.list %}
              <tr>
                <td><input type="checkbox" name="list_ids" value="{{ l.id }}" class="table-select-checkbox"></td>
                <td>{{ l.id }}</td>
                <td class="fw-bold align-middle">
                  <a href="{{ url_for('view_list', list_id=l.id) }}" class="text-white">{{ l.title }}</a>{% if l.is_temporary and l.expires_at %}<div class="small text-warning mt-1">wygasa: {{ l.expires_at.strftime('%Y-%m-%d %H:%M') }}</div>{% endif %}
                  {% if l.categories %}
                  <span class="ms-1 text-info" data-bs-toggle="tooltip"
                    title="{{ l.categories | map(attribute='name') | join(', ') }}">
                    {{ ui_icon('tag') }}
                  </span>
                  {% endif %}
                </td>

                <td>
                  {% if l.is_archived %}
                  <span class="badge rounded-pill bg-secondary">Archiwalna</span>
                  {% elif e.expired %}
                  <span class="badge rounded-pill bg-warning text-dark">Wygasła</span>
                  {% else %}
                  <span class="badge rounded-pill bg-success">Aktywna</span>
                  {% endif %}
                </td>
                <td>{{ l.created_at.strftime('%Y-%m-%d %H:%M') if l.created_at else '-' }}</td>
                <td>
                  {% if l.owner %}
                  {{ ui_icon('user') }} {{ l.owner.username }} ({{ l.owner.id }})
                  {% else %}
                  -
                  {% endif %}
                </td>
                <td>{{ e.total_count }}</td>
                <td>
                  <div class="progress bg-transparent" style=" height: 14px;">
                    <div class="progress-bar fw-bold text-black text-cente
                      {% if e.percent >= 80 %}bg-success
                      {% elif e.percent >= 40 %}bg-warning
                      {% else %}bg-danger{% endif %}" role="progressbar" style="width: {{ e.percent }}%">
                      {{ e.purchased_count }}/{{ e.total_count }}
                    </div>
                  </div>
                </td>
                <td><span class="badge rounded-pill bg-primary">{{ e.comments_count }}</span></td>
                <td><span class="badge rounded-pill bg-secondary">{{ e.receipts_count }}</span></td>
                <td class="fw-bold 
                  {% if e.total_expense >= 500 %}text-danger
                  {% elif e.total_expense > 0 %}text-success{% endif %}">
                  {% if e.total_expense > 0 %}
                  {{ format_currency(e.total_expense) }}
                  {% else %}
                  -
                  {% endif %}
                </td>
                <td>
                  <div class="d-flex flex-wrap gap-2">
                    <a href="{{ url_for('edit_list', list_id=l.id) }}" class="btn btn-sm btn-outline-light" title="Edytuj">{{ ui_icon('pencil') }}</a>
                    <button type="button" class="btn btn-sm btn-outline-light preview-btn" data-list-id="{{ l.id }}" title="Podgląd produktów">{{ ui_icon('eye') }}</button>
                  </div>
                </td>
              </tr>
              {% endfor %}
              {% if enriched_lists|length == 0 %}
              <tr>
                <td colspan="12" class="text-center py-4">
                  Brak list zakupowych do wyświetlenia
                </td>
              </tr>
              {% endif %}
            </tbody>
          </table>
        </div>
        <div class="d-flex justify-content-end mt-2">
          <button type="submit" class="btn btn-outline-light btn-sm">{{ ui_icon('trash') }} Usuń zaznaczone listy</button>
        </div>
      </form>
    </div>
  </div>

  <div class="info-bar-fixed">
    Python: {{ python_version.split()[0] }} | {{ system_info }} | RAM app: {{ app_memory }} |
    DB: {{ db_info.engine|upper }}{% if db_info.version %} v{{ db_info.version[0] }}{% endif %} |
    Tabele: {{ table_count }} | Rekordy: {{ record_total }} |
    Uptime: {{ uptime_minutes }} min
  </div>

  <!-- Modal podglądu produktów -->
  <div class="modal fade" id="productPreviewModal" tabindex="-1" aria-labelledby="previewModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
      <div class="modal-content bg-dark text-white">
        <div class="modal-header">
          <h5 class="modal-title" id="previewModalLabel">Podgląd produktów</h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
        </div>
        <div class="modal-body">
          <div id="product-list" class="preview-product-list"></div>
        </div>
      </div>
    </div>
  </div>

  {% block scripts %}
  <script>
    document.getElementById('select-all').addEventListener('click', function () {
      const checkboxes = document.querySelectorAll('input[name="list_ids"]');
      checkboxes.forEach(cb => cb.checked = this.checked);
    });
  </script>
  <script src="{{ static_asset_url('static_bp.serve_js', 'preview_list_modal.js') }}?v=3"></script>
  {% endblock %}

  {% endblock %}