{% extends 'base.html' %}
{% block title %}Wydatki z Twoich list{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-start flex-wrap gap-3 mb-4">
  <div>
    <h2 class="mb-2">Statystyki wydatków</h2>
    <p class="text-secondary mb-0">Analiza kosztów list w czasie, z podziałem na zakresy i kategorie.</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">
    <div class="d-flex justify-content-center mb-3">
      <div class="form-check form-switch app-switch">
        <input class="form-check-input" type="checkbox" id="showAllLists" {% if show_all %}checked{% endif %}>
        <label class="form-check-label ms-2 text-white" for="showAllLists">
          Uwzględnij listy udostępnione dla mnie i publiczne
        </label>
      </div>
    </div>

    <!-- Przyciski kategorii -->
    <div class="d-flex flex-wrap gap-2 mb-3 justify-content-center">
      <button type="button"
        class="btn btn-sm category-filter {% if not selected_category %}btn-success{% else %}btn-outline-light{% endif %}"
        data-category-id="">
        🌐 Wszystkie
      </button>
      {% for cat in categories %}
      <button type="button"
        class="btn btn-sm category-filter {% if selected_category == cat.id %}btn-success{% else %}btn-outline-light{% endif %}"
        data-category-id="{{ cat.id }}">
        {{ cat.name }}
      </button>
      {% endfor %}
    </div>
  </div>
</div>

<div class="card bg-dark text-white mb-5">
  <div class="card-body">
    <ul class="nav nav-tabs mb-3" id="expenseTabs" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="lists-tab" data-bs-toggle="tab" data-bs-target="#listsTab" type="button"
          role="tab">
          📚 Listy
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="chart-tab" data-bs-toggle="tab" data-bs-target="#chartTab" type="button"
          role="tab">
          📊 Wykres
        </button>
      </li>
    </ul>

    <div class="tab-content" id="expenseTabsContent">
      <!-- LISTY -->
      <div class="tab-pane fade show active" id="listsTab" role="tabpanel">
        <div class="card bg-dark text-white mb-4">
          <div class="card-body">
            <div class="d-flex flex-wrap gap-2 mb-3 justify-content-center expenses-range-toolbar expenses-table-toolbar">
              <div class="btn-group btn-group-sm expenses-range-group" role="group">
                <button class="btn btn-outline-light range-btn table-range-btn" data-range="day">🗓️ Dzień</button>
                <button class="btn btn-outline-light range-btn table-range-btn" data-range="week">📆 Tydzień</button>
                <button class="btn btn-outline-light range-btn table-range-btn active" data-range="month">📅 Miesiąc</button>
                <button class="btn btn-outline-light range-btn table-range-btn" data-range="year">📈 Rok</button>
                <button class="btn btn-outline-light range-btn table-range-btn" data-range="all">🌐 Wszystko</button>
              </div>
            </div>

            <div class="d-flex justify-content-center mb-3">
              <div class="input-group input-group-sm w-100 expenses-date-range" style="max-width: 570px;">
                <span class="input-group-text bg-secondary text-white border-secondary">Od</span>
                <input type="date" class="form-control bg-dark text-white border-secondary flex-grow-1"
                  id="customStart">
                <span class="input-group-text bg-secondary text-white border-secondary">Do</span>
                <input type="date" class="form-control bg-dark text-white border-secondary flex-grow-1" id="customEnd">
                <button class="btn btn-outline-light" id="applyCustomRange">📊 Zastosuj zakres</button>
              </div>
            </div>

            <div class="d-flex justify-content-between align-items-center mb-2">
              <div>
                <button id="selectAllBtn" class="btn btn-sm btn-outline-light">Zaznacz wszystko</button>
                <button id="deselectAllBtn" class="btn btn-sm btn-outline-light active" style="display: none;">Odznacz
                  wszystko</button>
              </div>
              <h5 class="text-success m-0">💰 Suma: <span id="listsTotal">{{ format_currency(0) }}</span></h5>
            </div>

            <!-- Tabela list z możliwością filtrowania -->
            <div class="table-responsive">
              <table class="table table-dark align-middle sortable">
                <thead>
                  <tr>
                    <th></th>
                    <th>ID</th>
                    <th>Nazwa listy</th>
                    <th>Właściciel</th>
                    <th>Data</th>
                    <th>Wydatki ({{ CURRENCY_CODE }})</th>
                  </tr>
                </thead>
                <tbody id="listsTableBody">
                  {% for list in lists_data %}
                  <tr data-date="{{ list.created_at.strftime('%Y-%m-%d') }}"
                    data-week="{{ list.created_at.isocalendar()[0] }}-{{ '%02d' % list.created_at.isocalendar()[1] }}"
                    data-month="{{ list.created_at.strftime('%Y-%m') }}" data-year="{{ list.created_at.year }}"
                    data-categories="{% if list.categories %}{{ ','.join(list.categories | map('string')) }}{% else %}{% endif %}">

                    <td>
                      <input type="checkbox" class="form-check-input list-checkbox"
                        data-amount="{{ '%.2f'|format(list.total_expense) }}">
                    </td>
                    <td>{{ list.id }}</td>
                    <td>
                      <strong>{{ list.title }}</strong>
                    </td>
                    <td>👤 {{ list.owner_username or '?' }}</td>
                    <td>{{ list.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
                    <td>{{ '%.2f'|format(list.total_expense) }}</td>
                  </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

      <!-- WYKRES -->
      <div class="tab-pane fade" id="chartTab" role="tabpanel">
        <div class="card bg-dark text-white mb-4">
          <div class="card-body">

            <div class="text-end mb-2">
              <div class="btn-group btn-group-sm">
                <button class="btn btn-outline-light" id="openFsBtn"
                  onclick="openChartFullscreen('expensesChart','Wydatki')" title="Pełny ekran" disabled>⛶</button>

                <button type="button" class="btn btn-outline-light" id="downloadMainChartBtn" title="Pobierz jako PNG"
                  disabled>⬇</button>
              </div>
            </div>

            <div class="d-flex gap-3 mb-3">
              <div>
                <h6 class="text-white">Podział według czasu</h6>
                <div class="btn-group" role="group" aria-label="Podział czasu">
                  <button type="button" class="btn btn-outline-light btn-sm" id="toggleMonthlySplit"
                    aria-pressed="true">Miesięczny</button>
                  <button type="button" class="btn btn-outline-light btn-sm" id="toggleDailySplit"
                    aria-pressed="false">Dzienny</button>
                </div>
              </div>
              <div>
                <h6 class="text-white">Kategorie/Sumy wydatków</h6>
                <button class="btn btn-outline-light btn-sm" id="toggleCategorySplit" aria-pressed="false">Przełącz na
                  kategorie</button>
              </div>
            </div>


            <p id="chartRangeLabel" class="fw-bold mb-3">Widok: miesięczne</p>
            <canvas id="expensesChart" height="120"></canvas>
          </div>
        </div>

        <div class="d-flex flex-wrap gap-2 mb-3 justify-content-center expenses-range-toolbar expenses-chart-toolbar">
          <div class="btn-group btn-group-sm expenses-range-group" role="group">
            <button class="btn btn-outline-light range-btn chart-range-btn" data-range="last30days">🗓️ Ostatnie 30
              dni</button>
            <button class="btn btn-outline-light range-btn chart-range-btn" data-range="currentmonth">📅 Bieżący miesiąc</button>
            <button class="btn btn-outline-light range-btn chart-range-btn" data-range="monthly">📆 Miesięczne</button>
            <button class="btn btn-outline-light range-btn chart-range-btn" data-range="quarterly">📊 Kwartalne</button>
            <button class="btn btn-outline-light range-btn chart-range-btn" data-range="halfyearly">🗓️ Półroczne</button>
            <button class="btn btn-outline-light range-btn chart-range-btn" data-range="yearly">📈 Roczne</button>
          </div>
        </div>

        <div class="d-flex justify-content-center mb-4">
          <div class="input-group input-group-sm w-100 expenses-date-range" style="max-width: 570px;">
            <span class="input-group-text bg-secondary text-white border-secondary">Od</span>
            <input type="date" class="form-control bg-dark text-white border-secondary flex-grow-1" id="startDate">
            <span class="input-group-text bg-secondary text-white border-secondary">Do</span>
            <input type="date" class="form-control bg-dark text-white border-secondary flex-grow-1" id="endDate">
            <button class="btn btn-outline-light" id="customRangeBtn">📊 Pokaż dane z zakresu</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="chartFullscreenModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-centered">
    <div class="modal-content bg-dark">
      <div class="modal-header">
        <h5 class="modal-title" id="chartModalTitle">Wykres</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
      </div>
      <div class="modal-body p-0">
        <canvas id="chartFullscreenCanvas"></canvas>
      </div>
    </div>
  </div>
</div>


{% endblock %}

{% block scripts %}
<script src="{{ static_asset_url('static_bp.serve_js_lib', 'chart.js') }}"></script>
<script src="{{ static_asset_url('static_bp.serve_js', 'show_all_expense.js') }}"></script>
<script src="{{ static_asset_url('static_bp.serve_js', 'expense_chart.js') }}"></script>
<script src="{{ static_asset_url('static_bp.serve_js', 'expense_table.js') }}"></script>
<script src="{{ static_asset_url('static_bp.serve_js', 'expense_tab.js') }}"></script>
<script src="{{ static_asset_url('static_bp.serve_js', 'select_all_table.js') }}"></script>
<script src="{{ static_asset_url('static_bp.serve_js', 'chart_controls.js') }}"></script>
<script src="{{ static_asset_url('static_bp.serve_js', 'modal_chart.js') }}"></script>
<script src="{{ static_asset_url('static_bp.serve_js', 'download_chart.js') }}"></script>
{% endblock %}