{% extends 'base.html' %}
{% block title %}Lista: {{ list.title }}{% endblock %}
{% block content %}

<div class="list-header-toolbar d-flex justify-content-between align-items-start mb-3 flex-wrap gap-2">
  <h2 class="mb-0">
    🛍️ {{ list.title }}

    {% if list.is_archived %}
    <span class="badge rounded-pill bg-secondary ms-2">(Archiwalna)</span>
    {% endif %}

    {% if total_expense > 0 %}
    <span id="total-expense1" class="badge rounded-pill bg-success ms-2">
      💸 {{ format_currency(total_expense) }}
    </span>
    {% else %}
    <span id="total-expense" class="badge rounded-pill bg-secondary ms-2" style="display: none;">
      💸 {{ format_currency(0) }}
    </span>
    {% endif %}

    {% if list.category_badges %}
    {% for cat in list.category_badges %}
    <span class="badge rounded-pill rounded-pill text-dark ms-1" style="background-color: {{ cat.color }};
                   font-size: 0.75rem;
                   opacity: 0.85;">
      {{ cat.name }}
    </span>
    {% endfor %}
    {% endif %}
  </h2>

  <div class="list-toolbar list-toolbar--share d-flex justify-content-end align-items-center gap-2 share-page-toolbar">
    <div class="form-check form-switch form-check-spaced app-switch hide-purchased-switch hide-purchased-switch--minimal hide-purchased-switch--right">
      <input class="form-check-input" type="checkbox" id="hidePurchasedToggle">
      <label class="form-check-label ms-2" for="hidePurchasedToggle">Ukryj zaznaczone</label>
    </div>
  </div>
</div>

<ul id="items" class="list-group mb-3" data-is-share="{{ 'true' if is_share else 'false' }}">
  {% for item in items %}

  <li data-name="{{ item.name|lower }}" id="item-{{ item.id }}"
    class="list-group-item shopping-item-row clickable-item 
            {% if item.purchased %}bg-success text-white{% elif item.not_purchased %}bg-warning text-dark{% else %}item-not-checked{% endif %}">

    <div class="shopping-item-main">
      <input id="checkbox-{{ item.id }}" class="large-checkbox" type="checkbox" {% if item.purchased %}checked{% endif
        %} {% if list.is_archived or item.not_purchased %}disabled{% endif %}>
      <div class="shopping-item-content">
        <div class="shopping-item-head">
          <div class="shopping-item-text">
            <span id="name-{{ item.id }}" class="shopping-item-name text-white">{{ item.name }}</span>
            {% if item.quantity and item.quantity > 1 %}
            <span class="badge rounded-pill bg-secondary">x{{ item.quantity }}</span>
            {% endif %}
            {% set info_parts = [] %}
            {% if item.note %}{% set _ = info_parts.append('<span class="text-danger">[ <b>' ~ item.note ~ '</b> ]</span>') %}{% endif %}
            {% if item.not_purchased_reason %}{% set _ = info_parts.append('<span class="text-dark">[ <b>Powód: ' ~ item.not_purchased_reason ~ '</b> ]</span>') %}{% endif %}
            {% if item.added_by_display %}{% set _ = info_parts.append('<span class="item-added-by-meta">· dodał/a: <b>' ~ item.added_by_display ~ '</b></span>') %}{% endif %}
            {% if info_parts %}
            <span class="info-line small" id="info-{{ item.id }}">{{ info_parts | join(' ') | safe }}</span>
            {% endif %}
          </div>
          <div class="list-item-actions shopping-item-actions" role="group">
      {% if item.not_purchased %}
      <button type="button" class="btn btn-outline-light btn-sm shopping-action-btn shopping-action-btn--wide" {% if list.is_archived %}disabled{% else %}
        onclick="unmarkNotPurchased({{ item.id }})" {% endif %}>
        Przywróć
      </button>
      {% else %}
      <button type="button" class="btn btn-outline-light btn-sm shopping-action-btn" {% if list.is_archived %}disabled{% else %}
        onclick="markNotPurchasedModal(event, {{ item.id }})" {% endif %}>
        ⚠️
      </button>
      {% endif %}

      <button type="button" class="btn btn-outline-light btn-sm shopping-action-btn" {% if list.is_archived %}disabled{% else %}
        onclick="openNoteModal(event, {{ item.id }})" {% endif %}>
        📝
      </button>
          </div>
        </div>
      </div>
    </div>
  </li>
  {% else %}
  <li id="empty-placeholder" class="list-group-item bg-dark text-secondary text-center w-100">
    Brak produktów w tej liście.
  </li>
  {% endfor %}
</ul>

{% if not list.is_archived %}
<div class="shopping-entry-card mb-3" aria-label="Sekcja dodawania produktu">
  <div class="shopping-entry-card__label">➕ Dodaj produkt</div>
  <div class="shopping-entry-card__hint">Wpisz nazwę produktu i ilość, potem kliknij Dodaj.</div>
  <div class="input-group mb-0 shopping-compact-input-group shopping-product-input-group">
  <input id="newItem" class="form-control bg-dark text-white border-secondary shopping-product-name-input" placeholder="Dodaj produkt" {% if
    not current_user.is_authenticated %}disabled{% endif %}>
  <input id="newQuantity" type="number" class="form-control bg-dark text-white border-secondary shopping-qty-input" placeholder="Ilość"
    min="1" value="1" {% if not current_user.is_authenticated %}disabled{% endif %}>
  <button onclick="addItem({{ list.id }})" class="btn btn-outline-success share-submit-btn shopping-compact-submit" {% if not
    current_user.is_authenticated %}disabled{% endif %}><span class="shopping-btn-icon" aria-hidden="true">➕</span><span class="shopping-btn-label">Dodaj</span></button>
  </div>
</div>
{% endif %}

{% if not list.is_archived %}
<div class="shopping-entry-card shopping-entry-card--expense mb-3" aria-label="Sekcja dodawania wydatku">
  <div class="shopping-entry-card__label d-flex justify-content-between align-items-center">
    <span>💰 Dodaj wydatek</span>

    <span class="badge rounded-pill bg-success" id="total-expense2">
      💸 Łączna suma: {{ format_currency(total_expense) }}
    </span>
  </div>

  <div class="shopping-entry-card__hint">Wpisz kwotę wydatku i kliknij Zapisz.</div>

  <div class="input-group mb-0 shopping-compact-input-group shopping-expense-input-group">
    <input id="expenseAmount" type="number" step="0.01" min="0"
      class="form-control bg-dark text-white border-secondary shopping-expense-amount-input"
      placeholder="{{ currency_placeholder() }}">

    <button onclick="submitExpense({{ list.id }})"
      class="btn btn-outline-primary share-submit-btn share-submit-btn--expense shopping-compact-submit">
      <span class="shopping-btn-icon" aria-hidden="true">💾</span>
      <span class="shopping-btn-label">Zapisz</span>
    </button>
  </div>
</div>
{% endif %}

<p id="total-expense2" style="display: none;">
  <b>💸 Łącznie wydano:</b> {{ format_currency(total_expense) }}
</p>

<button id="toggleReceiptBtn" type="button" class="receipt-disclosure mb-3"
  aria-expanded="false" aria-controls="receiptSection">
  <span class="receipt-disclosure__content">
    <span class="receipt-disclosure__icon" aria-hidden="true">🧾</span>
    <span class="receipt-disclosure__text">
      <span class="receipt-disclosure__eyebrow">Strefa paragonów</span>
      <span class="receipt-disclosure__title">Pokaż sekcję paragonów</span>
    </span>
    <span class="receipt-disclosure__meta">
      <span class="receipt-disclosure__count">{{ receipts|length }}</span>
      <span class="receipt-disclosure__chevron" aria-hidden="true">⌄</span>
    </span>
  </span>
</button>

<div class="collapse px-2 px-md-4" id="receiptSection" data-receipt-storage-key="receiptSectionOpen:list:{{ list.id }}">
  {% set receipt_pattern = 'list_' ~ list.id %}

  <div class="receipt-section-stack d-flex flex-column gap-3 mt-3">
    <div class="card bg-dark text-white border-secondary shadow-sm">
      <div class="card-body">
        <div class="d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-2 mb-3">
          <div>
            <h5 class="mb-1">📄 Paragony</h5>
            <p class="text-secondary small mb-0">
              Przeglądaj dodane paragony, wrzucaj nowe i rozliczaj je przez OCR.
            </p>
          </div>
          <div class="d-flex flex-wrap gap-2">
            <span class="badge rounded-pill bg-secondary">{{ receipts|length }} plik{% if receipts|length != 1 %}i{% endif %}</span>
            {% if list.is_archived %}
            <span class="badge rounded-pill bg-secondary">Lista archiwalna</span>
            {% elif current_user.is_authenticated %}
            <span class="badge rounded-pill bg-success">Możesz dodawać</span>
            {% else %}
            <span class="badge rounded-pill bg-warning text-dark">Tylko podgląd</span>
            {% endif %}
          </div>
        </div>

        <div class="row g-3 align-items-stretch">
          <div class="col-12 col-xl-7">
            <div class="border border-secondary rounded-3 p-3 h-100">
              <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
                <h6 class="mb-0">📸 Dodane paragony</h6>
                {% if receipts %}
                <span class="text-secondary small">Kliknij miniaturę, aby otworzyć podgląd</span>
                {% endif %}
              </div>

              <div class="row g-3" id="receiptGallery">
                {% if receipts %}
                {% for r in receipts %}
                <div class="col-6 col-md-4 text-center">
                  <a href="{{ url_for('uploaded_file', filename=r.filename) }}?v={{ r.version_token or '0' }}" class="glightbox text-decoration-none"
                    data-gallery="receipt-gallery">
                    <div class="card bg-black border-secondary h-100 overflow-hidden shadow-sm">
                      <img src="{{ url_for('uploaded_file', filename=r.filename) }}?v={{ r.version_token or '0' }}"
                        class="card-img-top img-fluid" style="height: 180px; object-fit: cover;" alt="Paragon {{ loop.index }}">
                      <div class="card-body p-2">
                        <div class="small text-truncate text-secondary">Paragon {{ loop.index }}</div>
                      </div>
                    </div>
                  </a>
                </div>
                {% endfor %}
                {% else %}
                <div class="col-12">
                  <div class="alert alert-info text-center mb-0" role="alert">
                    ℹ️ Brak wgranych paragonów do tej listy
                  </div>
                </div>
                {% endif %}
              </div>
            </div>
          </div>

          <div class="col-12 col-xl-5">
            <div class="d-flex flex-column gap-3 h-100">
              <div class="border border-secondary rounded-3 p-3 bg-black bg-opacity-25 {% if not receipts %}d-none{% endif %}" id="receiptAnalysisBlock">
                <div class="d-flex justify-content-between align-items-start gap-2 flex-wrap mb-2">
                  <div>
                    <h6 class="mb-1">🔍 Analiza paragonów (OCR)</h6>
                    <p class="text-small text-secondary mb-0">
                      System spróbuje automatycznie rozpoznać kwoty. Sprawdź wynik i kliknij „Dodaj”, aby dopisać wydatek.
                    </p>
                  </div>
                </div>

                {% if current_user.is_authenticated %}
                <button id="analyzeBtn" class="btn btn-sm btn-outline-light mb-3 w-100 w-sm-auto">
                  🔍 Zleć analizę OCR
                </button>
                {% else %}
                <div class="alert alert-warning mb-3">
                  ⚠️ Tylko zalogowani użytkownicy mogą zlecać analizę OCR.
                </div>
                {% endif %}
                <div id="analysisResults" class="mt-2"></div>
              </div>

              {% if not list.is_archived and current_user.is_authenticated %}
              <div class="border border-secondary rounded-3 p-3 h-100">
                <h6 class="mb-1">📤 Dodaj nowy paragon</h6>
                <p class="text-secondary small mb-3">Możesz dodać zdjęcie z aparatu, z galerii albo plik PDF.</p>

                <form id="receiptForm" action="{{ url_for('upload_receipt', list_id=list.id) }}" method="post"
                  enctype="multipart/form-data" class="text-center">

                  <div class="d-grid gap-2">
                    <label for="cameraInput" id="cameraBtn"
                      class="btn btn-outline-light w-100 py-2 d-flex align-items-center justify-content-center gap-2">
                      <i class="bi bi-camera"></i> 📸 Zrób zdjęcie
                    </label>
                    <input type="file" name="receipt" accept="image/*" capture="environment" class="d-none" id="cameraInput">

                    <label for="galleryInput" id="galleryBtn"
                      class="btn btn-outline-light w-100 py-2 d-flex align-items-center justify-content-center gap-2">
                      <i class="bi bi-image"></i> <span id="galleryBtnText">🖼️ Z galerii</span>
                    </label>
                    <input type="file" name="receipt" accept="image/*" class="d-none" id="galleryInput">

                    <label for="pdfInput" id="pdfBtn"
                      class="btn btn-outline-light w-100 py-2 d-flex align-items-center justify-content-center gap-2">
                      📄 Dodaj PDF
                    </label>
                    <input type="file" name="receipt" accept="application/pdf" class="d-none" id="pdfInput">
                  </div>

                  <div id="progressContainer" class="progress progress-dark rounded-3 overflow-hidden shadow-sm mt-3"
                    style="height: 20px; display: none;">
                    <div id="progressBar" class="progress-bar bg-success fw-bold text-white text-center" role="progressbar"
                      style="width: 0%;">0%</div>
                  </div>

                  <div id="receiptUploadFeedback" class="mt-3"></div>
                </form>
              </div>
              {% elif list.is_archived %}
              <div class="border border-secondary rounded-3 p-3 bg-black bg-opacity-25">
                <h6 class="mb-1">📤 Dodawanie zablokowane</h6>
                <p class="text-secondary small mb-0">Ta lista jest archiwalna, więc nie można już dodawać nowych paragonów.</p>
              </div>
              {% elif not current_user.is_authenticated %}
              <div class="border border-secondary rounded-3 p-3 bg-black bg-opacity-25">
                <h6 class="mb-1">🔐 Dodawanie wymaga logowania</h6>
                <p class="text-secondary small mb-0">Zaloguj się, aby dodawać paragony i uruchamiać analizę OCR.</p>
              </div>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Modal notatki -->
<div class="modal fade" id="noteModal" tabindex="-1" 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">Dodaj notatkę</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
      </div>

      <form id="noteForm" onsubmit="submitNote(event)">
        <div class="modal-body">
          <textarea id="noteText" class="form-control" rows="4" placeholder="Np. 'Promocja 2+2'"></textarea>
        </div>
        <div class="modal-footer">
          <div class="btn-group" role="group">
            <button type="button" class="btn btn-outline-light btn-sm" data-bs-dismiss="modal">❌ Anuluj</button>
            <button type="submit" class="btn btn-outline-light btn-sm"><span class="shopping-btn-icon" aria-hidden="true">💾</span>
            <span class="shopping-btn-label">Zapisz</span></button>
          </div>

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

{% block scripts %}
<script>
  const isShare = document.getElementById('items').dataset.isShare === 'true';
  window.IS_SHARE = isShare;
  window.LIST_ID = {{ list.id }};
  window.IS_ARCHIVED = {{ 'true' if list.is_archived else 'false' }};
  window.IS_OWNER = {{ 'true' if (current_user.is_authenticated and list.user_id == current_user.id) else 'false' }};
  if (typeof isSorting === 'undefined') {
    var isSorting = false;
  }
</script>
<script src="{{ static_asset_url('static_bp.serve_js_lib', 'Sortable.min.js') }}"></script>
<script src="{{ static_asset_url('static_bp.serve_js', 'notes.js') }}"></script>
<script src="{{ static_asset_url('static_bp.serve_js', 'clickable_row.js') }}"></script>
<script src="{{ static_asset_url('static_bp.serve_js', 'receipt_section.js') }}"></script>
<script src="{{ static_asset_url('static_bp.serve_js', 'receipt_upload.js') }}"></script>
<script src="{{ static_asset_url('static_bp.serve_js', 'receipt_analysis.js') }}"></script>
<script>
  setupList({{ list.id }}, '{{ current_user.username if current_user.is_authenticated else 'Gość' }}');
</script>
{% endblock %}

{% endblock %}