{% extends "base.html" %}
{% block title %}Wykresy{% endblock %}

{% block content %}
<div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-4">
  <div>
    <h1 class="h3 text-white mb-1">Wykresy</h1>
    <p class="text-secondary mb-0">Podgląd trendów, najczęstszych powodów i źródeł banów.</p>
  </div>

  <form id="options-form" method="get" class="d-flex align-items-center gap-2">
    <label for="top_n" class="text-secondary small">TOP:</label>
    <select id="top_n" name="top_n" class="form-select form-select-sm bg-dark text-white border-secondary"
      style="width:auto">
      {% for n in [5,10,25,50,100] %}
      <option value="{{ n }}" {% if n==top_n %}selected{% endif %}>{{ n }}</option>
      {% endfor %}
    </select>

    <label for="period" class="text-secondary small ms-2">Okres:</label>
    <select id="period" name="period" class="form-select form-select-sm bg-dark text-white border-secondary"
      style="width:auto">
      {% for p in [("week","Tydzień"),("month","Miesiąc"),("year","Rok")] %}
      <option value="{{ p[0] }}" {% if p[0]==period %}selected{% endif %}>{{ p[1] }}</option>
      {% endfor %}
    </select>

    <div class="btn-group btn-group-sm ms-1" role="group" aria-label="Szybkie TOP">
      {% for n in [5,10,25,50,100] %}
      <button type="button" class="btn btn-outline-secondary quick-top {% if n == top_n %}active{% endif %}"
        data-value="{{ n }}">{{ n }}</button>
      {% endfor %}
    </div>

    <div class="btn-group btn-group-sm ms-1" role="group" aria-label="Szybki okres">
      {% for p in [("week","Tydzień"),("month","Miesiąc"),("year","Rok")] %}
      <button type="button" class="btn btn-outline-secondary quick-period {% if p[0] == period %}active{% endif %}"
        data-value="{{ p[0] }}">{{ p[1] }}</button>
      {% endfor %}
    </div>

   <!--  <button type="submit" class="btn btn-primary btn-sm ms-1">Zastosuj</button>  -->
  </form>

</div>

<!-- skeleton podczas ładowania -->
<div id="charts-skeleton" class="placeholder-glow mb-3">
  <span class="placeholder col-12"></span>
  <span class="placeholder col-12"></span>
  <span class="placeholder col-12"></span>
</div>

<div id="charts-root" class="d-none">
  <div class="card bg-dark border-secondary mb-4">
    <div class="card-header d-flex align-items-center justify-content-between">
      <span>Top {{ top_n }} powody banów</span>
      <div class="btn-group btn-group-sm" role="group">
        <button class="btn btn-outline-secondary chart-download" data-target="reasonsChart" data-type="png">PNG</button>
        <button class="btn btn-outline-secondary chart-download" data-target="reasonsChart" data-type="csv">CSV</button>
        <button class="btn btn-outline-secondary chart-fullscreen" data-target="reasonsChart">Fullscreen</button>
      </div>
    </div>
    <div class="card-body">
      <canvas id="reasonsChart" height="120"></canvas>
      <div class="text-center text-secondary small d-none" id="reasonsEmpty">Brak danych do wyświetlenia.</div>
    </div>
  </div>

  <div class="card bg-dark border-secondary mb-4">
    <div class="card-header d-flex align-items-center justify-content-between">
      <span>Top {{ top_n }} URL (bany)</span>
      <div class="btn-group btn-group-sm" role="group">
        <button class="btn btn-outline-secondary chart-download" data-target="urlsChart" data-type="png">PNG</button>
        <button class="btn btn-outline-secondary chart-download" data-target="urlsChart" data-type="csv">CSV</button>
        <button class="btn btn-outline-secondary chart-fullscreen" data-target="urlsChart">Fullscreen</button>
      </div>
    </div>
    <div class="card-body">
      <canvas id="urlsChart" height="120"></canvas>
      <div class="text-center text-secondary small d-none" id="urlsEmpty">Brak danych do wyświetlenia.</div>
    </div>
  </div>

  <div class="row g-4">
    <div class="col-md-6">
      <div class="card bg-dark border-secondary h-100">
        <div class="card-header d-flex align-items-center justify-content-between">
          <span>Kraje pochodzenia (bany)</span>
          <div class="btn-group btn-group-sm" role="group">
            <button class="btn btn-outline-secondary chart-download" data-target="countriesChart"
              data-type="png">PNG</button>
            <button class="btn btn-outline-secondary chart-download" data-target="countriesChart"
              data-type="csv">CSV</button>
            <button class="btn btn-outline-secondary chart-fullscreen" data-target="countriesChart">Fullscreen</button>
          </div>
        </div>
        <div class="card-body d-flex justify-content-center">
          <canvas id="countriesChart" style="max-width: 340px; max-height: 340px;"></canvas>
        </div>
        <div class="text-center text-secondary small d-none" id="countriesEmpty">Brak danych do wyświetlenia.</div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card bg-dark border-secondary h-100">
        <div class="card-header">Legenda krajów</div>
        <div class="card-body">
          <ul class="list-group list-group-flush">
            {% for item in stats.top_countries %}
            <li
              class="list-group-item bg-dark text-white d-flex justify-content-between align-items-center border-secondary">
              {{ item.country }}
              <span class="badge bg-primary rounded-pill">{{ item.count }}</span>
            </li>
            {% endfor %}
            {% if stats.top_countries|length == 0 %}
            <li class="list-group-item bg-dark text-secondary border-secondary text-center">Brak danych</li>
            {% endif %}
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div class="card bg-dark border-secondary my-4">
    <div class="card-header d-flex align-items-center justify-content-between">
      <span>Bany w czasie (ostatnie 6 tygodni)</span>
      <div class="btn-group btn-group-sm" role="group">
        <button class="btn btn-outline-secondary chart-download" data-target="bansOverTimeChart"
          data-type="png">PNG</button>
        <button class="btn btn-outline-secondary chart-download" data-target="bansOverTimeChart"
          data-type="csv">CSV</button>
        <button class="btn btn-outline-secondary chart-fullscreen" data-target="bansOverTimeChart">Fullscreen</button>
      </div>
    </div>
    <div class="card-body">
      <canvas id="bansOverTimeChart" height="120"></canvas>
      <div class="text-center text-secondary small d-none" id="timeEmpty">Brak danych do wyświetlenia.</div>
    </div>
  </div>
</div>

<!-- Modal fullscreen dla dowolnego canvas -->
<div class="modal fade" id="chartModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-fullscreen">
    <div class="modal-content bg-dark text-white">
      <div class="modal-header">
        <h5 class="modal-title">Podgląd wykresu</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
      </div>
      <div class="modal-body d-flex align-items-center justify-content-center">
        <canvas id="chartModalCanvas" style="max-width:95vw; max-height:80vh;"></canvas>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.6"></script>
<script>
  const statsData = {{ stats | tojson }};

  document.getElementById('top_n')?.addEventListener('change', () => {
    document.getElementById('options-form').requestSubmit();
  });

  window.addEventListener('DOMContentLoaded', () => {
    const sk = document.getElementById('charts-skeleton');
    const root = document.getElementById('charts-root');
    try {
      renderCharts(statsData);
      sk?.classList.add('d-none');
      root?.classList.remove('d-none');
    } catch (e) {
      window.showToast?.({ text: 'Błąd renderowania wykresów', variant: 'danger' });
      console.error(e);
    }
  });
</script>
<script src="{{ url_for('static', filename='js/charts.js') }}"></script>
{% endblock %}