{{define "admin/stats.html"}}
{{template "admin_shell_open" .}}

<style>
.admin-stats-chart-wrap { position: relative; height: 260px; }
.admin-stats-range .btn-check:checked + .btn {
  color: #fff !important;
  background-color: var(--bs-primary, #0d6efd);
  border-color: var(--bs-primary, #0d6efd);
}
.admin-stats-range .btn-check:focus + .btn {
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.35);
}
</style>

<div class="cs-admin-page">
{{template "admin_pagehead" (dict "Icon" "bx-bar-chart-alt-2" "Title" (T "admin.stats.title") "Desc" (T "admin.stats.desc"))}}

<div class="card cs-admin-section cs-admin-section--toolbar mb-4">
  <div class="cs-admin-section__body py-3">
    <div class="btn-group admin-stats-range" role="group" aria-label="{{T "admin.stats.range_aria"}}">
      <input type="radio" class="btn-check" name="statsRange" id="statsR7" autocomplete="off" checked>
      <label class="btn btn-outline-primary" for="statsR7">{{T "admin.stats.d7"}}</label>
      <input type="radio" class="btn-check" name="statsRange" id="statsR30" autocomplete="off">
      <label class="btn btn-outline-primary" for="statsR30">{{T "admin.stats.d30"}}</label>
    </div>
  </div>
</div>

<div class="row g-3 g-lg-4">
  <div class="col-12 col-lg-6">
    <div class="card cs-admin-section h-100"><div class="cs-admin-section__body">
      <div class="admin-stats-chart-wrap"><canvas id="chartComments" aria-label="{{T "admin.stats.chart_comments"}}"></canvas></div>
    </div></div>
  </div>
  <div class="col-12 col-lg-6">
    <div class="card cs-admin-section h-100"><div class="cs-admin-section__body">
      <div class="admin-stats-chart-wrap"><canvas id="chartLikes" aria-label="{{T "admin.stats.chart_likes"}}"></canvas></div>
    </div></div>
  </div>
  <div class="col-12 col-lg-6">
    <div class="card cs-admin-section h-100"><div class="cs-admin-section__body">
      <div class="admin-stats-chart-wrap"><canvas id="chartDislikes" aria-label="{{T "admin.stats.chart_dislikes"}}"></canvas></div>
    </div></div>
  </div>
  <div class="col-12 col-lg-6">
    <div class="card cs-admin-section h-100"><div class="cs-admin-section__body">
      <div class="admin-stats-chart-wrap"><canvas id="chartFavorites" aria-label="{{T "admin.stats.chart_favorites"}}"></canvas></div>
    </div></div>
  </div>
  <div class="col-12 col-lg-6">
    <div class="card cs-admin-section h-100"><div class="cs-admin-section__body">
      <div class="admin-stats-chart-wrap"><canvas id="chartNewItems" aria-label="{{T "admin.stats.chart_software"}}"></canvas></div>
    </div></div>
  </div>
  <div class="col-12 col-lg-6">
    <div class="card cs-admin-section h-100"><div class="cs-admin-section__body">
      <div class="admin-stats-chart-wrap"><canvas id="chartDownloads" aria-label="{{T "admin.stats.chart_downloads"}}"></canvas></div>
    </div></div>
  </div>
</div>
</div>

<script src="{{asset "/template/default/assets/chartjs/js/Chart.min.js"}}"></script>
<script>
(function () {
  var Lstats = {
    comments: {{jsString (T "admin.stats.lbl_comments")}},
    likes: {{jsString (T "admin.stats.lbl_likes")}},
    dislikes: {{jsString (T "admin.stats.lbl_dislikes")}},
    favorites: {{jsString (T "admin.stats.lbl_favorites")}},
    software: {{jsString (T "admin.stats.lbl_software")}},
    downloads: {{jsString (T "admin.stats.lbl_downloads")}}
  };
  var charts = {};
  var palette = {
    comments: { border: 'rgb(37, 99, 235)', fill: 'rgba(37, 99, 235, 0.12)' },
    likes: { border: 'rgb(14, 165, 233)', fill: 'rgba(14, 165, 233, 0.12)' },
    dislikes: { border: 'rgb(100, 116, 139)', fill: 'rgba(100, 116, 139, 0.12)' },
    favorites: { border: 'rgb(79, 70, 229)', fill: 'rgba(79, 70, 229, 0.12)' },
    software: { border: 'rgb(2, 132, 199)', fill: 'rgba(2, 132, 199, 0.12)' },
    downloads: { border: 'rgb(29, 78, 216)', fill: 'rgba(29, 78, 216, 0.12)' }
  };
  var chartDefs = [
    { id: 'chartComments', key: 'comments', label: Lstats.comments },
    { id: 'chartLikes', key: 'likes', label: Lstats.likes },
    { id: 'chartDislikes', key: 'dislikes', label: Lstats.dislikes },
    { id: 'chartFavorites', key: 'favorites', label: Lstats.favorites },
    { id: 'chartNewItems', key: 'software', label: Lstats.software },
    { id: 'chartDownloads', key: 'downloads', label: Lstats.downloads }
  ];

  function chartOptions() {
    return {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: { display: false },
        tooltip: { mode: 'index', intersect: false }
      },
      scales: {
        x: { grid: { display: false }, ticks: { maxRotation: 0, autoSkip: true, maxTicksLimit: 10 } },
        y: { beginAtZero: true, ticks: { precision: 0 } }
      },
      interaction: { mode: 'nearest', axis: 'x', intersect: false }
    };
  }

  function upsertChart(def, labels, series) {
    var el = document.getElementById(def.id);
    if (!el || typeof Chart === 'undefined') return;
    var colors = palette[def.key] || palette.comments;
    var data = (series && series[def.key]) ? series[def.key] : [];
    if (charts[def.id]) {
      charts[def.id].data.labels = labels;
      charts[def.id].data.datasets[0].data = data;
      charts[def.id].update();
      return;
    }
    charts[def.id] = new Chart(el.getContext('2d'), {
      type: 'line',
      data: {
        labels: labels,
        datasets: [{
          label: def.label,
          data: data,
          borderColor: colors.border,
          backgroundColor: colors.fill,
          tension: 0.35,
          fill: true,
          borderWidth: 2,
          pointRadius: 2,
          pointHoverRadius: 4
        }]
      },
      options: chartOptions()
    });
  }

  function loadStats(days) {
    $.getJSON('/admin/stats/data?days=' + encodeURIComponent(days), function (res) {
      if (!res || !res.success || !res.data) return;
      var labels = res.data.labels || [];
      var series = res.data.series || {};
      chartDefs.forEach(function (def) {
        upsertChart(def, labels, series);
      });
    });
  }

  function currentDays() {
    return $('#statsR30').is(':checked') ? 30 : 7;
  }

  $(function () {
    loadStats(currentDays());
    $('input[name="statsRange"]').on('change', function () {
      loadStats(currentDays());
    });
  });
})();
</script>
{{template "admin_shell_close" .}}
{{end}}