{# templates/dashboard.html #}
{% extends 'base.html' %}

{# page title #}
{% block title %}Dashboard{% endblock %}
{% block page_id %}dashboard{% endblock %}

{% block head_extra %}
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" data-page-head />
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" data-page-head></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js" data-page-head></script>
  <style data-page-head>
    #dashboard-map {
      width: 100%;
      height: 420px;
      min-height: 320px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    #dashboard-map-modal {
      width: 100%;
      height: 100%;
      min-height: 480px;
    }
  </style>
{% endblock %}

{# page content #}
{% block content %}

    <!-- Main Container -->
    <div class="container">
      <h2>Auswertung-Downloads</h2>
      <!-- Dropdown Controls -->
      <div class="mb-4 d-flex flex-wrap gap-2">
        <!-- Timeframe Dropdown -->
        <div class="dropdown">
          <button class="btn btn-secondary dropdown-toggle" 
                  type="button" id="timeframeDropdown" data-bs-toggle="dropdown" aria-expanded="false">
            {% if session['timeframe'] == 'last24hours' %}
              Last 24 Hours
            {% elif session['timeframe'] == '7days' %}
              Last 7 Days
            {% elif session['timeframe'] == '14days' %}
              Last 14 Days
            {% elif session['timeframe'] == '30days' %}
              Last 30 Days
            {% elif session['timeframe'] == '365days' %}
              Last 365 Days
            {% else %}
              Select Timeframe
            {% endif %}
          </button>
          <ul class="dropdown-menu" aria-labelledby="timeframeDropdown">
            <li>
              <a class="dropdown-item {% if session['timeframe'] == 'last24hours' %}active{% endif %}" 
                href="{{ url_for('dashboard', timeframe='last24hours') }}">
                Last 24 Hours
              </a>
            </li>
            <li>
              <a class="dropdown-item {% if session['timeframe'] == '7days' %}active{% endif %}" 
                href="{{ url_for('dashboard', timeframe='7days') }}">
                Last 7 Days
              </a>
            </li>
            <li>
              <a class="dropdown-item {% if session['timeframe'] == '14days' %}active{% endif %}" 
                href="{{ url_for('dashboard', timeframe='14days') }}">
                Last 14 Days
              </a>
            </li>
            <li>
              <a class="dropdown-item {% if session['timeframe'] == '30days' %}active{% endif %}" 
                href="{{ url_for('dashboard', timeframe='30days') }}">
                Last 30 Days
              </a>
            </li>
            <li>
              <a class="dropdown-item {% if session['timeframe'] == '365days' %}active{% endif %}" 
                href="{{ url_for('dashboard', timeframe='365days') }}">
                Last 365 Days
              </a>
            </li>
          </ul>
        </div>

        <!-- Filetype Dropdown -->
        <div class="dropdown">
          <button class="btn btn-secondary dropdown-toggle" 
                  type="button" id="filetypeDropdown" data-bs-toggle="dropdown" aria-expanded="false">
            {% if session['filetype'] == 'audio' %}
              Audio
            {% elif session['filetype'] == 'video' %}
              Video
            {% elif session['filetype'] == 'photo' %}
              Photo
            {% elif session['filetype'] == 'other' %}
              Other
            {% else %}
              Select File Type
            {% endif %}
          </button>
          <ul class="dropdown-menu" aria-labelledby="filetypeDropdown">
            <li>
              <a class="dropdown-item {% if session['filetype'] == 'audio' %}active{% endif %}" 
                href="{{ url_for('dashboard', filetype='audio') }}">
                Audio
              </a>
            </li>
            <li>
              <a class="dropdown-item {% if session['filetype'] == 'video' %}active{% endif %}" 
                href="{{ url_for('dashboard', filetype='video') }}">
                Video
              </a>
            </li>
            <li>
              <a class="dropdown-item {% if session['filetype'] == 'photo' %}active{% endif %}" 
                href="{{ url_for('dashboard', filetype='photo') }}">
                Photo
              </a>
            </li>
            <li>
              <a class="dropdown-item {% if session['filetype'] == 'other' %}active{% endif %}" 
                href="{{ url_for('dashboard', filetype='other') }}">
                Other
              </a>
            </li>
          </ul>
        </div>
      </div>

      <!-- Summary Cards -->
      <div class="row mb-4">
        <div class="col-md-3 mb-3">
          <div class="card bg-info text-white">
            <div class="card-body">
              <h5 class="card-title">Alle Downloads</h5>
              <p class="card-text display-6">{{ total_accesses }}</p>
            </div>
          </div>
        </div>
        <div class="col-md-3 mb-3">
          <div class="card bg-success text-white">
            <div class="card-body">
              <h5 class="card-title">unterschiedliche Dateien</h5>
              <p class="card-text display-6">{{ unique_files }}</p>
            </div>
          </div>
        </div>
        <div class="col-md-3 mb-3">
          <div class="card bg-warning text-white">
            <div class="card-body">
              <h5 class="card-title">unterschiedliche Nutzer</h5>
              <p class="card-text display-6">{{ unique_user }}</p>
            </div>
          </div>
        </div>
        <div class="col-md-3 mb-3">
          <div class="card bg-secondary text-white">
            <div class="card-body">
              <h5 class="card-title">beschleunigte Downloads</h5>
              <p class="card-text display-6">{{ cached_percentage }} %</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Charts Section -->
      <div class="row mb-4">
        <!-- Access Trend Chart -->
        <div class="col-md-6 mb-3">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Anzahl Geräte</h5>
              <canvas id="distinctDeviceChart"></canvas>
            </div>
          </div>
        </div>
        <!-- Timeframe Breakdown Chart -->
        <div class="col-md-6 mb-3">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Anzahl Downloads</h5>
              <canvas id="downloadTimeframeChart"></canvas>
            </div>
          </div>
        </div>
        <!-- User Agent Distribution Chart -->
        <div class="col-md-6 mb-3">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Endgeräte der Nutzer</h5>
              <canvas id="userAgentChart"></canvas>
            </div>
          </div>
        </div>
        <!-- Folder Distribution Chart -->
        <div class="col-md-6 mb-3">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Verteilung auf Ordner</h5>
              <canvas id="folderChart"></canvas>
            </div>
          </div>
        </div>
      </div>

      <!-- Map + Location Distribution -->
      <div class="row mb-4">
        <div class="col-lg-7 mb-3">
          <div class="card h-100">
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">Zugriffe auf der Karte</h5>
                <button id="mapFullscreenToggle" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#mapModal">Vollbild</button>
              </div>
              <div id="dashboard-map" class="mt-3"></div>
            </div>
          </div>
        </div>
        <div class="col-lg-5 mb-3">
          <div class="card h-100">
            <div class="card-header">
              Verteilung der Zugriffe
            </div>
            <div class="card-body">
              <div class="table-responsive">
                <table class="table table-bordered mb-0">
                  <thead>
                    <tr>
                      <th>Anzahl Downloads</th>
                      <th>Stadt</th>
                      <th>Land</th>
                    </tr>
                  </thead>
                  <tbody>
                    {% for loc in location_data %}
                    <tr>
                      <td>{{ loc.count }}</td>
                      <td>{{ loc.city }}</td>
                      <td>{{ loc.country }}</td>
                    </tr>
                    {% else %}
                    <tr>
                      <td colspan="3">No access data available for the selected timeframe.</td>
                    </tr>
                    {% endfor %}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>


    </div>

    <!-- Map fullscreen modal -->
    <div class="modal fade" id="mapModal" tabindex="-1" aria-labelledby="mapModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-fullscreen">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="mapModalLabel">Karte im Vollbild</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body p-0">
            <div id="dashboard-map-modal"></div>
          </div>
        </div>
      </div>
    </div>
    <script type="application/json" id="dashboard-page-data">
      {{ {
        'map_data': map_data,
        'distinct_device_data': distinct_device_data,
        'timeframe_data': timeframe_data,
        'user_agent_data': user_agent_data,
        'folder_data': folder_data,
        'timeframe': timeframe
      } | tojson }}
    </script>
    {% endblock %}

{% block scripts %}{% endblock %}