{% extends 'base.html' %}
{% block title %}Twoje listy zakupów{% endblock %}
{% block content %}

{% if not current_user.is_authenticated %}
<div class="alert alert-info text-center" role="alert">
  ℹ️ Nie jesteś zalogowany/a. Możesz przeglądać tylko listy publiczne.
</div>
{% endif %}

{% if current_user.is_authenticated %}
{% if expiring_lists %}
<div class="alert alert-warning mb-4" role="alert">
  <div class="fw-semibold mb-2">⏰ Wygasające listy tymczasowe w ciągu 24h</div>
  <ul class="mb-0 ps-3">
    {% for l in expiring_lists %}
    <li><a class="link-dark fw-semibold" href="{{ url_for('view_list', list_id=l.id) }}">{{ l.title }}</a> — {{ l.expires_at.strftime('%Y-%m-%d %H:%M') }}</li>
    {% endfor %}
  </ul>
</div>
{% endif %}
<section class="mb-4">
  <div class="card bg-secondary bg-opacity-10 text-white mb-4">
    <div class="card-body">
      <div class="d-flex justify-content-between align-items-start flex-wrap gap-3 mb-3">
        <div>
          <h2 class="mb-2">Twoje centrum list zakupowych</h2>
          <p class="text-secondary mb-0">Stwórz nową liste</p>
        </div>
      </div>
      <form action="{{ url_for('create_list') }}" method="post">
        <div class="input-group mb-3 create-list-input-group" role="group" aria-label="Tworzenie nowej listy">
          <input type="text" name="title" id="title" placeholder="Wprowadź nazwę nowej listy" required
            class="form-control bg-dark text-white border-secondary create-list-title-input"
            aria-label="Nazwa nowej listy">
          <button type="button" class="btn btn-outline-secondary create-list-temp-toggle" id="tempToggle" data-active="0"
            data-bs-toggle="tooltip" data-bs-placement="top" title="Po zaznaczeniu lista będzie ważna tylko 7 dni"
            aria-pressed="false" aria-label="Przełącz listę tymczasową">
            <span class="create-list-temp-toggle__label">Tymczasowa</span>
          </button>
          <input type="hidden" name="temporary" id="temporaryHidden" value="0">
        </div>
        <button type="submit" class="btn btn-success w-100">➕ Utwórz nową listę</button>
      </form>
    </div>
  </div>
</section>

{% endif %}

{% set month_names = ["styczeń","luty","marzec","kwiecień","maj","czerwiec","lipiec","sierpień","wrzesień","październik","listopad","grudzień"] %}

<div class="d-none d-md-flex justify-content-end align-items-center flex-wrap gap-2 mb-3">
  <label for="monthSelect" class="text-white small mb-0">📅 Wybierz miesiąc:</label>
  <select id="monthSelect" class="form-select form-select-sm bg-dark text-white border-secondary" style="min-width: 180px;">
    {% for m in month_options %}
    {% set year, month = m.split('-') %}
    <option value="{{ m }}" {% if selected_month==m %}selected{% endif %}>
      {{ month_names[month|int - 1] }} {{ year }}
    </option>
    {% endfor %}
    <option value="all" {% if selected_month=='all' %}selected{% endif %}>
      Wyświetl wszystko
    </option>
  </select>
</div>

<div class="d-md-none mb-3">
  <button class="btn btn-outline-light w-100" data-bs-toggle="modal" data-bs-target="#monthPickerModal">
    📅 Wybierz miesiąc
  </button>
</div>

{% macro render_summary_panel(title, summary, accent='success') -%}
<div class="col-12 col-lg-6">
  <div class="main-summary-card h-100">
    <div class="d-flex justify-content-between align-items-start gap-3 flex-wrap mb-2">
      <div>
        <div class="main-summary-card__eyebrow">Postęp</div>
        <h4 class="main-summary-card__title mb-0">{{ title }}</h4>
      </div>
      <span class="badge rounded-pill text-bg-dark border border-secondary-subtle">Listy: {{ summary.list_count }}</span>
    </div>

    {% with total_count=summary.total_products, purchased_count=summary.purchased_products, not_purchased_count=summary.not_purchased_products, total_expense=summary.total_expense %}
    {% include '_list_progress.html' %}
    {% endwith %}

    <div class="main-summary-stats mt-3">
      <div class="main-summary-stat">
        <span class="main-summary-stat__label">Kupione</span>
        <strong>{{ summary.purchased_products }}</strong>
      </div>
      <div class="main-summary-stat">
        <span class="main-summary-stat__label">Niekupione</span>
        <strong>{{ summary.not_purchased_products }}</strong>
      </div>
      <div class="main-summary-stat">
        <span class="main-summary-stat__label">Nieoznaczone</span>
        <strong>{{ summary.remaining_products }}</strong>
      </div>
      <div class="main-summary-stat">
        <span class="main-summary-stat__label">Wydatki</span>
        <strong>{{ format_currency(summary.total_expense) }}</strong>
      </div>
    </div>
  </div>
</div>
{%- endmacro %}

{% if current_user.is_authenticated %}
<div class="d-flex justify-content-end align-items-center flex-wrap gap-2 mb-3">
  <button class="btn btn-sm btn-outline-light" type="button" data-bs-toggle="collapse" data-bs-target="#mainStatsCollapse" aria-expanded="false" aria-controls="mainStatsCollapse">
    📈 Statystyki
  </button>
  <button type="button" class="btn btn-sm btn-outline-light" data-bs-toggle="modal" data-bs-target="#archivedModal">
    🗄️ Zarchiwizowane
  </button>
</div>
<div class="collapse mb-4" id="mainStatsCollapse">
  <div class="row g-3">
    {{ render_summary_panel('Twoje listy', user_lists_summary) }}
    {{ render_summary_panel('Udostępnione i publiczne', accessible_lists_summary, 'info') }}
  </div>
</div>

<h3 class="mt-4 d-flex justify-content-between align-items-center flex-wrap">
  Twoje listy
</h3>

{% if user_lists %}
<ul class="list-group mb-4">
  {% for l in user_lists %}
  {% set purchased_count = l.purchased_count %}
  {% set total_count = l.total_count %}
  {% set percent = (purchased_count / total_count * 100) if total_count > 0 else 0 %}

  <li class="list-group-item bg-dark text-white">
    <div class="main-list-row">
      <div class="list-main-meta">
        <div class="fw-bold list-main-title mobile-list-heading" data-mobile-list-heading>
          {% if l.is_temporary and l.expires_at %}<span class="badge rounded-pill bg-warning text-dark me-2">⏰ {{ l.expires_at.strftime('%Y-%m-%d %H:%M') }}</span>{% endif %}
          <a class="list-main-title__link text-white text-decoration-none" href="{{ url_for('view_list', list_id=l.id) }}">
            <span data-mobile-list-title>{{ l.title }}</span>
            <span class="d-none d-sm-inline"> (Autor: Ty)</span>
          </a>
          {% if l.category_badges %}
          <span class="mobile-category-badges" data-mobile-category-group>
            {% for cat in l.category_badges %}
            <span class="badge rounded-pill text-dark ms-1 fw-semibold mobile-category-badge"
                  style="background-color: {{ cat.color }}; font-size: 0.7rem; opacity: 0.9; padding: 0.3em 0.6em;"
                  title="{{ cat.name }}" aria-label="Kategoria: {{ cat.name }}">
              <span class="mobile-category-badge__text">{{ cat.name }}</span>
              <span class="mobile-category-badge__dot"></span>
            </span>
            {% endfor %}
          </span>
          {% endif %}
        </div>
      </div>

      <div class="btn-group btn-group-compact list-main-actions" role="group">
        <a href="{{ url_for('view_list', list_id=l.id) }}" class="btn btn-sm btn-outline-light d-flex align-items-center" data-bs-toggle="tooltip" title="Otwórz">
          📂 <span class="btn-text ms-1 d-none d-sm-inline">Otwórz</span>
        </a>
        {% if l.share_token %}<a href="{{ url_for('shared_list', token=l.share_token) }}" class="btn btn-sm btn-outline-light d-flex align-items-center" data-bs-toggle="tooltip" title="Odznaczaj">
          ✏️ <span class="btn-text ms-1 d-none d-sm-inline">Odznaczaj</span>
        </a>{% endif %}
        <a href="{{ url_for('copy_list', list_id=l.id) }}" class="btn btn-sm btn-outline-light d-flex align-items-center" data-bs-toggle="tooltip" title="Kopiuj">
          📋 <span class="btn-text ms-1 d-none d-sm-inline">Kopiuj</span>
        </a>
        <a href="{{ url_for('toggle_visibility', list_id=l.id) }}" class="btn btn-sm btn-outline-light d-flex align-items-center" data-bs-toggle="tooltip" title="{% if l.is_public %}Ukryj{% else %}Odkryj{% endif %}">
          {% if l.is_public %}🙈 <span class="btn-text ms-1 d-none d-sm-inline">Ukryj</span>{% else %}🐵 <span class="btn-text ms-1 d-none d-sm-inline">Odkryj</span>{% endif %}
        </a>
        <a href="{{ url_for('edit_my_list', list_id=l.id) }}" class="btn btn-sm btn-outline-light d-flex align-items-center" data-bs-toggle="tooltip" title="Ustawienia">
          ⚙️ <span class="btn-text ms-1 d-none d-sm-inline">Ustawienia</span>
        </a>
      </div>
    </div>

    {% with total_count=total_count, purchased_count=purchased_count, not_purchased_count=l.not_purchased_count, total_expense=l.total_expense %}
    {% include '_list_progress.html' %}
    {% endwith %}
  </li>
  {% endfor %}
</ul>
{% else %}
<p><span class="badge rounded-pill bg-secondary opacity-75">Nie utworzono żadnej listy</span></p>
{% endif %}
{% else %}
<div class="mb-3">
  <button class="btn btn-sm btn-outline-light" type="button" data-bs-toggle="collapse" data-bs-target="#mainStatsCollapse" aria-expanded="false" aria-controls="mainStatsCollapse">
    📈 Statystyki
  </button>
</div>
<div class="collapse mb-4" id="mainStatsCollapse">
  <div class="row g-3">
    <div class="col-12">
      {{ render_summary_panel('Publiczne listy innych użytkowników', accessible_lists_summary, 'info') }}
    </div>
  </div>
</div>
{% endif %}

<h3 class="mt-4">
  {% if current_user.is_authenticated %}
  Udostępnione i publiczne listy innych użytkowników
  {% else %}
  Publiczne listy innych użytkowników
  {% endif %}
</h3>

{% set lists_to_show = accessible_lists %}
{% if lists_to_show %}
<ul class="list-group">
  {% for l in lists_to_show %}
  {% set purchased_count = l.purchased_count %}
  {% set total_count = l.total_count %}
  {% set percent = (purchased_count / total_count * 100) if total_count > 0 else 0 %}

  <li class="list-group-item bg-dark text-white">
    <div class="main-list-row">
      <div class="list-main-meta">
        <div class="fw-bold list-main-title mobile-list-heading" data-mobile-list-heading>
          {% if l.is_temporary and l.expires_at %}<span class="badge rounded-pill bg-warning text-dark me-2">⏰ {{ l.expires_at.strftime('%Y-%m-%d %H:%M') }}</span>{% endif %}
          <a class="fw-bold list-main-title__link text-white text-decoration-none" href="{{ url_for('shared_list', list_id=l.id) }}">
            <span data-mobile-list-title>{{ l.title }}</span>
            <span class="d-none d-sm-inline"> (Autor: {{ l.owner.username if l.owner else '—' }})</span>
          </a>
          {% if l.category_badges %}
          <span class="mobile-category-badges" data-mobile-category-group>
            {% for cat in l.category_badges %}
            <span class="badge rounded-pill text-dark ms-1 fw-semibold mobile-category-badge"
                  style="background-color: {{ cat.color }}; font-size: 0.7rem; opacity: 0.9; padding: 0.3em 0.6em;"
                  title="{{ cat.name }}" aria-label="Kategoria: {{ cat.name }}">
              <span class="mobile-category-badge__text">{{ cat.name }}</span>
              <span class="mobile-category-badge__dot"></span>
            </span>
            {% endfor %}
          </span>
          {% endif %}
        </div>
      </div>

      <div class="btn-group btn-group-compact list-main-actions" role="group">
        <a href="{{ url_for('shared_list', list_id=l.id) }}" class="btn btn-sm btn-outline-light d-flex align-items-center" data-bs-toggle="tooltip" title="Odznaczaj">
          ✏️ <span class="btn-text ms-1 d-none d-sm-inline">Odznaczaj</span>
        </a>
      </div>
    </div>

    {% with total_count=total_count, purchased_count=purchased_count, not_purchased_count=l.not_purchased_count, total_expense=l.total_expense %}
    {% include '_list_progress.html' %}
    {% endwith %}
  </li>
  {% endfor %}
</ul>
{% else %}
<p><span class="badge rounded-pill bg-secondary opacity-75">Brak list do wyświetlenia</span></p>
{% endif %}

<div class="modal fade" id="archivedModal" tabindex="-1" aria-labelledby="archivedModalLabel" 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="archivedModalLabel">Zarchiwizowane listy</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
      </div>
      <div class="modal-body">
        {% if archived_lists %}
        <ul class="list-group">
          {% for l in archived_lists %}
          <li class="list-group-item bg-dark text-white d-flex justify-content-between align-items-center flex-wrap">
            <span>{{ l.title }}</span>
            <form action="{{ url_for('edit_my_list', list_id=l.id) }}" method="post" class="d-contents">
              <input type="hidden" name="unarchive" value="1">
              <button type="submit" class="btn btn-sm btn-outline-light">
                ♻️ Przywróć
              </button>
            </form>
          </li>
          {% endfor %}
        </ul>
        {% else %}
        <div class="alert alert-info text-center" role="alert">
          ℹ️ Nie masz żadnych zarchiwizowanych list
        </div>
        {% endif %}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-light" data-bs-dismiss="modal">Zamknij</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="monthPickerModal" tabindex="-1" aria-labelledby="monthPickerModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content bg-dark text-white">
      <div class="modal-header">
        <h5 class="modal-title">📅 Wybierz miesiąc</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
      </div>
      <div class="modal-body">
        <div class="d-grid gap-2">
          {% for m in month_options %}
          {% set year, month = m.split('-') %}
          <a href="{{ url_for('main_page', m=m) }}"
            class="btn btn-outline-light {% if selected_month == m %}active{% endif %}">
            {{ month_names[month|int - 1] }} {{ year }}
          </a>
          {% endfor %}
          <a href="{{ url_for('main_page', m='all') }}"
            class="btn btn-outline-secondary {% if selected_month == 'all' %}active{% endif %}">
            📋 Wyświetl wszystkie
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

{% block scripts %}
<script src="{{ static_asset_url('static_bp.serve_js', 'toggle_button.js') }}"></script>
<script src="{{ static_asset_url('static_bp.serve_js', 'select_month.js') }}"></script>
{% endblock %}

{% endblock %}