{% extends 'base.html' %}

{% block content %}
<div class="d-flex justify-content-between align-items-start flex-wrap gap-3 mb-4">
  <div>
    <h2 class="mb-2">Edytuj listę: <strong>{{ list.title }}</strong></h2>
    <p class="text-secondary mb-0">Zmień ustawienia, kategorię, ważność i udostępnianie listy.</p>
  </div>
  <a href="{{ url_for('main_page') }}" class="btn btn-outline-secondary">← Powrót</a>
</div>

<div class="card bg-secondary bg-opacity-10 text-white mb-5">
  <div class="card-body">
    <form method="post" data-unsaved-warning="true" class="stack-form">

      <!-- Nazwa listy -->
      <div class="mb-3">
        <label for="title" class="form-label">📝 Nazwa listy</label>
        <input type="text" class="form-control bg-dark text-white border-secondary rounded" id="title" name="title"
          value="{{ list.title }}" required>
      </div>

      <!-- Statusy listy -->
      <div class="mb-4">
        <label class="form-label">⚙️ Statusy listy</label>
        <div class="switch-grid">
          <div class="form-check form-switch form-check-spaced form-switch-compact app-switch">
            <input class="form-check-input" type="checkbox" id="public" name="is_public" {% if list.is_public
              %}checked{% endif %}>
            <label class="form-check-label" for="public">🌐 Publiczna (czyli mogą zobaczyć goście)</label>
          </div>

          <div class="form-check form-switch form-check-spaced form-switch-compact app-switch">
            <input class="form-check-input" type="checkbox" id="temporary" name="is_temporary" {% if list.is_temporary
              %}checked{% endif %}>
            <label class="form-check-label" for="temporary">⏳ Tymczasowa (ustaw date wygasania)</label>
          </div>

          <div class="form-check form-switch form-check-spaced form-switch-compact app-switch">
            <input class="form-check-input" type="checkbox" id="archived" name="is_archived" {% if list.is_archived
              %}checked{% endif %}>
            <label class="form-check-label" for="archived">📦 Archiwalna</label>
          </div>
        </div>
      </div>

      <!-- Data/Godzina wygaśnięcia -->
      <div class="row mb-4">
        <div class="col-md-6">
          <label for="expires_date" class="form-label">📅 Data wygaśnięcia</label>
          <input type="date" class="form-control bg-dark text-white border-secondary rounded" id="expires_date"
            name="expires_date" value="{{ list.expires_at.strftime('%Y-%m-%d') if list.expires_at else '' }}">
        </div>
        <div class="col-md-6">
          <label for="expires_time" class="form-label">⏰ Godzina wygaśnięcia</label>
          <input type="time" class="form-control bg-dark text-white border-secondary rounded" id="expires_time"
            name="expires_time" value="{{ list.expires_at.strftime('%H:%M') if list.expires_at else '' }}">
        </div>
      </div>

      <!-- Utworzono / Zmień miesiąc -->
      <div class="row mb-3">
        <div class="col-md-6">
          <label class="form-label">📆 Utworzono:</label>
          <p class="form-control-plaintext text-white">
            <span class="badge rounded-pill bg-success rounded-pill text-dark ms-1">
              {{ list.created_at.strftime('%Y-%m-%d') }}
            </span>
          </p>
        </div>
        <div class="col-md-6">
          <label class="form-label">📁 Przenieś do miesiąca (format: rok-miesiąc np 2026-01)</label>
          <input type="month" id="move_to_month" name="move_to_month"
            class="form-control bg-dark text-white border-secondary rounded">
        </div>
      </div>

      <!-- Kategorie -->
      <div class="mb-4">
        <label for="categories" class="form-label">🏷️ Kategorie</label>
        <select id="categories" name="categories"
          class="form-select tom-dark bg-dark text-white border-secondary rounded">
          <option value="">– brak –</option>
          {% for cat in categories %}
          <option value="{{ cat.id }}" {% if cat.id in selected_categories %}selected{% endif %}>
            {{ cat.name }}
          </option>
          {% endfor %}
        </select>
      </div>
      <!-- Przyciski -->
      <div class="btn-group mt-4" role="group">
        <button type="submit" class="btn btn-sm btn-outline-light">💾 Zapisz</button>
        <a href="{{ url_for('main_page') }}" class="btn btn-sm btn-outline-light">❌ Anuluj</a>
      </div>
    </form>
  </div>
</div>

<!-- DOSTĘP DO LISTY -->
<datalist id="userHintsOwner">
  {% for username in all_usernames %}<option value="{{ username }}"></option>{% endfor %}
</datalist>

<div class="mb-3">
  <label class="form-label">👥 Użytkownicy z dostępem</label>

  <div class="access-editor border rounded p-2 bg-dark" data-post-url="{{ request.path }}"
    data-suggest-url="{{ url_for('edit_my_list_suggestions', list_id=list.id) }}" data-next="{{ request.path }}"
    data-list-id="{{ list.id }}">

    <!-- Tokeny uprawnionych -->
    <div class="tokens d-flex flex-wrap gap-2 mb-2">
      {% for u in permitted_users %}
      <button type="button" class="btn btn-sm btn-outline-secondary rounded-pill token" data-user-id="{{ u.id }}"
        data-username="{{ u.username }}" title="Kliknij, aby odebrać dostęp">
        @{{ u.username }} <span aria-hidden="true">×</span>
      </button>
      {% endfor %}
      {% if not permitted_users or permitted_users|length == 0 %}
      <span class="no-perms text-warning small">Brak dodanych uprawnień.</span>
      {% endif %}
    </div>

    <!-- Dodawanie (wiele: przecinki/enter) + prywatne podpowiedzi -->
    <div class="input-group input-group-sm">
      <input type="text" class="access-input form-control form-control-sm bg-dark text-white border-secondary"
        placeholder="Dodaj użytkownika (wiele: przecinki/enter)" list="userHintsOwner" autocomplete="off" aria-label="Dodaj użytkowników">
      <button type="button" class="access-add btn btn-sm btn-outline-light">💾 Zapisz dostęp</button>
    </div>
    <div class="text-secondary small mt-1">Kliknij token, aby odebrać dostęp. Możesz wpisać kilka loginów oddzielonych przecinkiem.</div>
  </div>
</div>

{% if receipts %}
<hr class="my-4">
<h5>Paragony przypisane do tej listy</h5>

<div class="row">
  {% 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="{{ r.filename }}">
      </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>
          💾
          {% 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_user', receipt_id=r.id) }}">🔄 Obróć o 90°</a>
            </li>
            <li>
              <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#userCropModal"
                data-img-src="{{ url_for('uploaded_file', filename=r.filename) }}" data-receipt-id="{{ r.id }}"
                data-crop-endpoint="{{ url_for('crop_receipt_user') }}">
                ✂️ Przytnij
              </a>
            </li>
            <li>
              <a class="dropdown-item text-danger" href="{{ url_for('delete_receipt_user', receipt_id=r.id) }}"
                onclick="return confirm('Na pewno usunąć ten paragon?')">
                🗑️ Usuń
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  {% endfor %}
</div>
{% endif %}

<hr class="my-3">
<!-- Trigger przycisk -->
<div class="btn-group mt-4" role="group">
  <button type="button" class="btn btn-sm btn-outline-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">
    🗑️ Usuń tę listę
  </button>
</div>
</div>
</div>
<!-- MODAL -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content bg-dark border-danger text-white">
      <div class="modal-header">
        <h5 class="modal-title text-danger" id="deleteModalLabel">Potwierdź usunięcie</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
      </div>
      <div class="modal-body">
        <p>Aby usunąć listę <strong>{{ list.title }}</strong>, wpisz <code>usuń</code> i poczekaj 2 sekundy:</p>
        <input type="text" id="confirm-delete-input" class="form-control bg-dark text-white border-warning rounded"
          placeholder="">
      </div>
      <div class="modal-footer justify-content-between">
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-sm btn-outline-light" data-bs-dismiss="modal">Anuluj</button>
          <button id="confirm-delete-btn" class="btn btn-sm btn-outline-light" disabled>🗑️ Usuń</button>
        </div>
      </div>
    </div>
  </div>
</div>
<form id="delete-form" method="post" action="{{ url_for('delete_user_list', list_id=list.id) }}"></form>
<!-- Hidden delete form -->

<div class="modal fade" id="userCropModal" 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="userCropImage" 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="userSaveCrop">💾 Zapisz</button>
        </div>
        <div id="userCropLoading" 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>

{% endblock %}

{% block scripts %}
<script>
  window.CROP_CONFIG = {
    modalId: "userCropModal",
    imageId: "userCropImage",
    spinnerId: "userCropLoading",
    saveBtnId: "userSaveCrop",
    endpoint: "/user_crop_receipt"
  };
</script>
<script src="{{ static_asset_url('static_bp.serve_js', 'confirm_delete.js') }}"></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>
<script src="{{ static_asset_url('static_bp.serve_js', 'select.js') }}"></script>
<script src="{{ static_asset_url('static_bp.serve_js', 'access_users.js') }}"></script>
{% endblock %}