{% extends 'base.html' %}
{% block title %}Wszystkie paragony{% endblock %}
{% block content %}

<div class="d-flex justify-content-between align-items-center flex-wrap mb-4">
  <h2 class="mb-2">
    📸 {% if id == 'all' %}Wszystkie paragony{% else %}Paragony dla listy #{{ id }}{% endif %}
  </h2>

  <p class="text-white-50 small mt-1">
    {% if id == 'all' %}
    Rozmiar plików tej strony:
    {% else %}
    Rozmiar plików listy #{{ id }}:
    {% endif %}
    <strong>
      {% if page_filesize >= 1024*1024 %}
      {{ (page_filesize / 1024 / 1024) | round(2) }} MB
      {% else %}
      {{ (page_filesize / 1024) | round(1) }} kB
      {% endif %}
    </strong>
    {% if not (id != 'all' and (id|string).isdigit()) %}
    | Łącznie:
    <strong>
      {% if total_filesize >= 1024*1024 %}
      {{ (total_filesize / 1024 / 1024) | round(2) }} MB
      {% else %}
      {{ (total_filesize / 1024) | round(1) }} kB
      {% endif %}
    </strong>
    {% endif %}
  </p>

  <div>
    {% if id is string and id.isdigit() and id|int > 0 %}
    <a href="{{ url_for('admin_receipts', id='all') }}" class="btn btn-outline-light me-2">
      Pokaż wszystkie paragony
    </a>
    {% else %}
    <a href="{{ url_for('recalculate_filesizes_all') }}" class="btn btn-outline-light me-2">
      Przelicz rozmiary plików
    </a>
    {% endif %}
    <a href="{{ url_for('admin_panel') }}" class="btn btn-outline-secondary">← Powrót do panelu</a>
  </div>
</div>

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

<div class="card bg-secondary bg-opacity-10 text-white mb-5">
  <div class="card-body">
    <div class="row g-3">
      {% for r in receipts %}
      <div class="col-6 col-md-4 col-lg-3">
        <div class="card bg-dark text-white h-100 shadow-sm border border-secondary">
          <a href="{{ url_for('uploaded_file', filename=r.filename) }}?v={{ r.version_token or '0' }}" class="glightbox"
            data-gallery="receipts" data-title="{{ r.filename }}">
            <img src="{{ url_for('uploaded_file', filename=r.filename) }}?v={{ r.version_token or '0' }}"
              class="card-img-top" style="object-fit: cover; height: 200px;"
              title="Token: {{ r.version_token or '0' }}">
          </a>

          <div class="card-body text-center p-2 small">
            <div class="text-truncate fw-semibold" title="{{ r.filename }}">📄 {{ r.filename }}</div>
            <div>📅 {{ r.uploaded_at.strftime('%Y-%m-%d %H:%M') }}</div>
            <div>👤 {{ r.uploaded_by_user.username if r.uploaded_by_user else "?" }}</div>
            <div>
              💾
              {% if r.filesize and r.filesize >= 1024 * 1024 %}
              {{ (r.filesize / 1024 / 1024) | round(2) }} MB
              {% elif r.filesize %}
              {{ (r.filesize / 1024) | round(1) }} kB
              {% else %}
              Brak danych
              {% endif %}
            </div>

            <div class="dropdown mt-2">
              <button class="btn btn-sm btn-outline-light dropdown-toggle w-100" type="button"
                data-bs-toggle="dropdown">
                ⋮ Akcje
              </button>
              <ul class="dropdown-menu dropdown-menu-dark w-100 text-start">
                <li>
                  <a class="dropdown-item" href="{{ url_for('rotate_receipt', receipt_id=r.id) }}">🔄 Obróć o 90°</a>
                </li>
                <li>
                  <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#adminCropModal"
                    data-img-src="{{ url_for('uploaded_file', filename=r.filename) }}?v={{ r.version_token or '0' }}"
                    data-receipt-id="{{ r.id }}" data-crop-endpoint="{{ url_for('crop_receipt_admin') }}"
                    data-version="{{ r.version_token or '0' }}">
                    ✂️ Przytnij
                  </a>

                </li>
                <li>
                  <a class="dropdown-item" href="{{ url_for('rename_receipt', receipt_id=r.id) }}">✏️ Zmień nazwę</a>
                </li>
                {% if not r.file_hash %}
                <li>
                  <a class="dropdown-item" href="{{ url_for('generate_receipt_hash', receipt_id=r.id) }}">🔐 Generuj
                    hash</a>
                </li>
                {% endif %}
                <li>
                  <a class="dropdown-item text-danger" href="{{ url_for('delete_receipt', receipt_id=r.id) }}"
                    onclick="return confirm('Na pewno usunąć plik {{ r.filename }}?');">🗑️ Usuń</a>
                </li>
                <li>
                  <hr class="dropdown-divider">
                </li>
                <li>
                  <a class="dropdown-item" href="{{ url_for('edit_list', list_id=r.list_id) }}">📋 Edytuj listę #{{
                    r.list_id }}</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>

    {% if not receipts %}
    <div class="alert alert-info text-center mt-4" role="alert">
      <i class="fas fa-info-circle"></i>
      Nie wgrano żadnego paragonu
    </div>
    {% endif %}
  </div>
</div>

{% if id == 'all' %}
<hr>
<div class="d-flex justify-content-between align-items-center mt-4">
  <form method="get" class="d-flex align-items-center">
    <label for="per_page" class="me-2">🔢 Pozycji na stronę:</label>
    <select id="per_page" name="per_page" class="form-select form-select-sm me-2"
      onchange="this.form.page.value = 1; this.form.submit();">
      <option value="25" {% if per_page==25 %}selected{% endif %}>25</option>
      <option value="50" {% if per_page==50 %}selected{% endif %}>50</option>
      <option value="100" {% if per_page==100 %}selected{% endif %}>100</option>
    </select>
    <input type="hidden" name="page" value="{{ page }}">
  </form>

  <nav aria-label="Nawigacja stron">
    <ul class="pagination pagination-dark mb-0">
      <li class="page-item {% if page <= 1 %}disabled{% endif %}">
        <a class="page-link" href="?{{ query_string }}{% if query_string %}&{% endif %}page={{ page - 1 }}">«</a>
      </li>
      {% for p in range(1, total_pages + 1) %}
      <li class="page-item {% if p == page %}active{% endif %}">
        <a class="page-link" href="?{{ query_string }}{% if query_string %}&{% endif %}page={{ p }}">{{
          p }}</a>
      </li>
      {% endfor %}
      <li class="page-item {% if page >= total_pages %}disabled{% endif %}">
        <a class="page-link" href="?{{ query_string }}{% if query_string %}&{% endif %}page={{ page + 1 }}">»</a>
      </li>
    </ul>
  </nav>
</div>
{% endif %}

{% if orphan_files and request.path.endswith('/all') %}
<hr class="my-4">
<h4 class="mt-3 mb-2 text-warning">Znalezione nieprzypisane pliki ({{ orphan_files_count }})</h4>
<div class="row g-3">
  {% for f in orphan_files %}
  <div class="col-6 col-md-4 col-lg-3">
    <div class="card bg-dark border-warning text-warning h-100">
      <a href="{{ url_for('uploaded_file', filename=f) }}" class="glightbox" data-gallery="receipts"
        data-title="{{ f }}">
        <img src="{{ url_for('uploaded_file', filename=f) }}" class="card-img-top"
          style="object-fit: cover; height: 200px;">
      </a>
      <div class="card-body text-center">
        <p class="small mb-1 fw-bold">{{ f }}</p>
        <div class="alert alert-warning small py-1 mb-2">Brak powiązania z listą!</div>
        <a href="{{ url_for('delete_receipt', filename=f) }}" class="btn btn-sm btn-outline-light w-100 mb-2"
          onclick="return confirm('Na pewno usunąć WYŁĄCZNIE plik {{ f }} z dysku?');">
          🗑 Usuń plik z serwera
        </a>
      </div>
    </div>
  </div>
  {% endfor %}
</div>
{% endif %}

<div class="modal fade" id="adminCropModal" tabindex="-1" aria-labelledby="userCropModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-centered">
    <div class="modal-content bg-dark text-white">
      <div class="modal-header">
        <h5 class="modal-title">✂️ Przycinanie paragonu</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      <div style="position: relative; width: 100%; height: 75vh;">
        <img id="adminCropImage" style="max-width: 100%; max-height: 100%; display: block; margin: auto;">
      </div>
      <div class="modal-footer">
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-sm btn-outline-light" data-bs-dismiss="modal">❌ Anuluj</button>
          <button type="button" class="btn btn-sm btn-outline-light" id="adminSaveCrop">💾 Zapisz</button>
        </div>
        <div id="adminCropLoading" class="position-absolute top-50 start-50 translate-middle text-center d-none">
          <div class="spinner-border text-light" role="status"></div>
          <div class="mt-2 text-light">⏳ Pracuję...</div>
        </div>
      </div>
    </div>
  </div>
</div>

{% block scripts %}
<script>
  window.CROP_CONFIG = {
    modalId: "adminCropModal",
    imageId: "adminCropImage",
    spinnerId: "adminCropLoading",
    saveBtnId: "adminSaveCrop",
    endpoint: "/admin/crop_receipt"
  };
</script>
<script src="{{ static_asset_url('static_bp.serve_js', 'receipt_crop.js') }}"></script>
<script src="{{ static_asset_url('static_bp.serve_js', 'receipt_crop_logic.js') }}"></script>
{% endblock %}

{% endblock %}