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

{# page title #}
{% block title %}Dashboard{% 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'] == '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'] == '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>

      <!-- IP Address Access Data -->
      <div class="card mb-4">
        <div class="card-header">
          Verteilung der Zugriffe
        </div>
        <div class="card-body">
          <div class="table-responsive">
            <table class="table table-bordered">
              <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>

      <!-- Detailed Table of Top File Accesses -->
      {% for top20 in [top20_overall, top20_predigt, top20_chor, top20_ggesang, top20_glied] %}
      <div class="card mb-4">
        <div class="card-header">
          Detaillierte Dateizugriffe (Top 20)
        </div>
        <div class="card-body">
          <div class="table-responsive">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>File Path</th>
                  <th>Access Count</th>
                  <th>Kategorie</th>
                </tr>
              </thead>
              <tbody>
                {% for row in top20 %}
                <tr>
                  <td>{{ row.rel_path }}</td>
                  <td>{{ row.access_count }}</td>
                  <td>{{ row.category }}</td>
                </tr>
                {% else %}
                <tr>
                  <td colspan="2">No data available for the selected timeframe.</td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
    {% endblock %}

    {% block scripts %}
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
      // Data passed from the backend as JSON
      let distinctDeviceData = {{ distinct_device_data|tojson }};
      let timeframeData = {{ timeframe_data|tojson }};
      const userAgentData = {{ user_agent_data|tojson }};
      const folderData = {{ folder_data|tojson }};

      // Remove the first (incomplete) bucket from the arrays
      distinctDeviceData = distinctDeviceData.slice(1);
      timeframeData = timeframeData.slice(1);

      // Shift the labels to local time zone
      const timeframe = "{{ timeframe }}"; // e.g., 'last24hours', '7days', '30days', or '365days'
      const shiftedLabels = timeframeData.map((item) => {
        if (timeframe === 'last24hours') {
          const bucketDate = new Date(item.bucket);
          const now = new Date();
          const isCurrentHour =
            bucketDate.getFullYear() === now.getFullYear() &&
            bucketDate.getMonth() === now.getMonth() &&
            bucketDate.getDate() === now.getDate() &&
            bucketDate.getHours() === now.getHours();
          const bucketEnd = isCurrentHour ? now : new Date(bucketDate.getTime() + 3600 * 1000);
          return `${bucketDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} - ${bucketEnd.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`;
        } else if (timeframe === '7days' || timeframe === '30days') {
          const localDate = new Date(item.bucket);
          return localDate.toLocaleDateString();
        } else if (timeframe === '365days') {
          const [year, month] = item.bucket.split('-');
          const dateObj = new Date(year, month - 1, 1);
          return dateObj.toLocaleString([], { month: 'short', year: 'numeric' });
        } else {
          return item.bucket;
        }
      });

      // Distinct Device Chart
      const ctxDistinctDevice = document.getElementById('distinctDeviceChart').getContext('2d');
      new Chart(ctxDistinctDevice, {
        type: 'bar',
        data: {
          labels: shiftedLabels,
          datasets: [{
            label: 'Device Count',
            data: distinctDeviceData.map(item => item.count),
            borderWidth: 2
          }]
        },
        options: {
          responsive: true,
          plugins: { legend: { display: false } },
          scales: {
            x: { title: { display: true, text: 'Time Range' } },
            y: { 
              title: { display: true, text: 'Device Count' },
              beginAtZero: true,
              ticks: { stepSize: 1 }
            }
          }
        }
      });

      // Timeframe Breakdown Chart
      const ctxTimeframe = document.getElementById('downloadTimeframeChart').getContext('2d');
      new Chart(ctxTimeframe, {
        type: 'bar',
        data: {
          labels: shiftedLabels,
          datasets: [{
            label: 'Download Count',
            data: timeframeData.map(item => item.count),
            borderWidth: 2
          }]
        },
        options: {
          responsive: true,
          plugins: { legend: { display: false } },
          scales: {
            x: { title: { display: true, text: 'Time Range' } },
            y: { 
              title: { display: true, text: 'Download Count' },
              beginAtZero: true,
              ticks: { stepSize: 1 }
            }
          }
        }
      });

      // User Agent Distribution Chart - Pie Chart
      const ctxUserAgent = document.getElementById('userAgentChart').getContext('2d');
      new Chart(ctxUserAgent, {
        type: 'pie',
        data: {
          labels: userAgentData.map(item => item.device),
          datasets: [{
            data: userAgentData.map(item => item.count)
          }]
        },
        options: { responsive: true }
      });

      // Folder Distribution Chart - Pie Chart
      const ctxFolder = document.getElementById('folderChart').getContext('2d');
      new Chart(ctxFolder, {
        type: 'pie',
        data: {
          labels: folderData.map(item => item.folder),
          datasets: [{
            data: folderData.map(item => item.count)
          }]
        },
        options: { responsive: true }
      });
    </script>
{% endblock %}