{{define "user/stats.html"}}
{{template "user/layout_head" .}}
{{template "user_pagehead" (dict "Icon" "bx-bar-chart-alt-2" "Title" (T "user.stats.title") "Desc" (T "user.stats.desc"))}}

<style>
.user-stats-chart-wrap { position: relative; height: 240px; }
.user-stats-range .btn-check:checked + .btn {
  color: #fff !important;
  background-color: var(--bs-primary, #0d6efd);
  border-color: var(--bs-primary, #0d6efd);
}
.user-stats-kpi .card-body { padding: 1rem 1.15rem; }
.user-stats-kpi .kpi-val { font-size: 1.65rem; font-weight: 700; line-height: 1.2; }
.user-stats-table-title { font-size: .95rem; font-weight: 600; margin-bottom: .75rem; }
.user-stats-loading { opacity: .55; pointer-events: none; }
.user-stats-site-filter label { white-space: nowrap; flex-shrink: 0; }
</style>

<div id="statsRoot" data-site-id="{{index .Data "SiteID"}}">
  <div class="card border-0 shadow-sm mb-3">
    <div class="card-body py-3 d-flex flex-wrap align-items-center gap-3">
      <div class="btn-group user-stats-range" role="group" aria-label="{{T "user.stats.range_aria"}}">
        <input type="radio" class="btn-check" name="statsRange" id="statsR7" autocomplete="off" checked>
        <label class="btn btn-outline-primary btn-sm" for="statsR7">{{T "user.stats.range_7"}}</label>
        <input type="radio" class="btn-check" name="statsRange" id="statsR30" autocomplete="off">
        <label class="btn btn-outline-primary btn-sm" for="statsR30">{{T "user.stats.range_30"}}</label>
      </div>
      <div class="d-flex align-items-center gap-2 ms-md-auto user-stats-site-filter flex-shrink-0">
        <label class="text-muted small mb-0" for="statsSiteFilter">{{T "user.stats.filter_site"}}</label>
        <select id="statsSiteFilter" class="form-select form-select-sm" style="min-width: 180px;">
          <option value="0">{{T "user.stats.all_sites"}}</option>
          {{range index .Data "Sites"}}
          <option value="{{.id}}" {{if eq (asInt (index $.Data "SiteID")) (asInt .id)}}selected{{end}}>{{.name}}</option>
          {{end}}
        </select>
      </div>
    </div>
  </div>

  <div class="row g-3 mb-4 user-stats-kpi" id="statsKpiRow">
    <div class="col-6 col-md-4 col-xl-2"><div class="card border-0 shadow-sm h-100"><div class="card-body"><div class="text-muted small">{{T "user.stats.kpi_sessions"}}</div><div class="kpi-val" data-kpi="sessions">-</div></div></div></div>
    <div class="col-6 col-md-4 col-xl-2"><div class="card border-0 shadow-sm h-100"><div class="card-body"><div class="text-muted small">{{T "user.stats.kpi_messages"}}</div><div class="kpi-val" data-kpi="messages">-</div></div></div></div>
    <div class="col-6 col-md-4 col-xl-2"><div class="card border-0 shadow-sm h-100"><div class="card-body"><div class="text-muted small">{{T "user.stats.kpi_visitors"}}</div><div class="kpi-val" data-kpi="visitors">-</div></div></div></div>
    <div class="col-6 col-md-4 col-xl-2"><div class="card border-0 shadow-sm h-100"><div class="card-body"><div class="text-muted small">{{T "user.stats.kpi_closed"}}</div><div class="kpi-val" data-kpi="closed">-</div></div></div></div>
    <div class="col-6 col-md-4 col-xl-2"><div class="card border-0 shadow-sm h-100"><div class="card-body"><div class="text-muted small">{{T "user.stats.kpi_visitor_msgs"}}</div><div class="kpi-val" data-kpi="visitor_msgs">-</div></div></div></div>
    <div class="col-6 col-md-4 col-xl-2"><div class="card border-0 shadow-sm h-100"><div class="card-body"><div class="text-muted small">{{T "user.stats.kpi_avg"}}</div><div class="kpi-val" data-kpi="avg_msgs_per_session">-</div></div></div></div>
  </div>

  <div class="row g-3 mb-4">
    <div class="col-12 col-lg-6">
      <div class="card border-0 shadow-sm h-100"><div class="card-body">
        <div class="user-stats-table-title">{{T "user.stats.chart_sessions"}}</div>
        <div class="user-stats-chart-wrap"><canvas id="chartSessions" aria-label="{{T "user.stats.chart_sessions"}}"></canvas></div>
      </div></div>
    </div>
    <div class="col-12 col-lg-6">
      <div class="card border-0 shadow-sm h-100"><div class="card-body">
        <div class="user-stats-table-title">{{T "user.stats.chart_messages"}}</div>
        <div class="user-stats-chart-wrap"><canvas id="chartMessages" aria-label="{{T "user.stats.chart_messages"}}"></canvas></div>
      </div></div>
    </div>
    <div class="col-12 col-lg-6">
      <div class="card border-0 shadow-sm h-100"><div class="card-body">
        <div class="user-stats-table-title">{{T "user.stats.chart_visitors"}}</div>
        <div class="user-stats-chart-wrap"><canvas id="chartVisitors" aria-label="{{T "user.stats.chart_visitors"}}"></canvas></div>
      </div></div>
    </div>
    <div class="col-12 col-lg-6">
      <div class="card border-0 shadow-sm h-100"><div class="card-body">
        <div class="user-stats-table-title">{{T "user.stats.chart_msg_split"}}</div>
        <div class="user-stats-chart-wrap"><canvas id="chartMsgSplit" aria-label="{{T "user.stats.chart_msg_split_aria"}}"></canvas></div>
      </div></div>
    </div>
  </div>

  <div class="row g-3 mb-4">
    <div class="col-12 col-xl-8">
      <div class="card border-0 shadow-sm h-100"><div class="card-body">
        <div class="user-stats-table-title">{{T "user.stats.daily_title"}}</div>
        <div class="table-responsive">
          <table class="table table-sm table-hover mb-0 align-middle">
            <thead class="table-light"><tr>
              <th>{{T "user.stats.col_date"}}</th><th class="text-end">{{T "user.stats.col_sessions"}}</th><th class="text-end">{{T "user.stats.col_messages"}}</th><th class="text-end">{{T "user.stats.kpi_visitors"}}</th>
              <th class="text-end">{{T "user.stats.kpi_visitor_msgs"}}</th><th class="text-end">{{T "user.stats.col_agent_msgs"}}</th><th class="text-end">{{T "user.stats.col_closed"}}</th>
            </tr></thead>
            <tbody id="statsDailyBody"><tr><td colspan="7" class="text-center text-muted py-3">{{T "user.stats.loading"}}</td></tr></tbody>
          </table>
        </div>
      </div></div>
    </div>
    <div class="col-12 col-xl-4">
      <div class="card border-0 shadow-sm h-100"><div class="card-body">
        <div class="user-stats-table-title">{{T "user.stats.status_dist"}}</div>
        <div class="user-stats-chart-wrap" style="height:200px"><canvas id="chartStatus" aria-label="{{T "user.stats.status_dist"}}"></canvas></div>
        <ul class="list-unstyled small mb-0 mt-2" id="statsStatusList"></ul>
      </div></div>
    </div>
  </div>

  <div class="row g-3 mb-4">
    <div class="col-12 col-lg-6">
      <div class="card border-0 shadow-sm h-100"><div class="card-body">
        <div class="user-stats-table-title">{{T "user.stats.referrers"}}</div>
        <div class="table-responsive">
          <table class="table table-sm table-hover mb-0"><thead class="table-light"><tr><th>{{T "user.stats.col_source"}}</th><th class="text-end">{{T "user.stats.kpi_sessions"}}</th></tr></thead>
          <tbody id="statsReferrerBody"><tr><td colspan="2" class="text-center text-muted py-3">{{T "user.stats.loading"}}</td></tr></tbody></table>
        </div>
      </div></div>
    </div>
    <div class="col-12 col-lg-6" id="statsBySiteWrap">
      <div class="card border-0 shadow-sm h-100"><div class="card-body">
        <div class="user-stats-table-title">{{T "user.stats.by_site"}}</div>
        <div class="table-responsive">
          <table class="table table-sm table-hover mb-0"><thead class="table-light"><tr><th>{{T "user.stats.filter_site"}}</th><th class="text-end">{{T "user.stats.col_sessions"}}</th><th class="text-end">{{T "user.stats.col_messages"}}</th><th class="text-end">{{T "user.stats.kpi_visitors"}}</th></tr></thead>
          <tbody id="statsBySiteBody"><tr><td colspan="4" class="text-center text-muted py-3">{{T "user.stats.loading"}}</td></tr></tbody></table>
        </div>
      </div></div>
    </div>
  </div>

  <div class="row g-3 mb-2">
    <div class="col-12 col-md-4">
      <div class="card border-0 shadow-sm h-100"><div class="card-body">
        <div class="user-stats-table-title">{{T "user.stats.browsers"}}</div>
        <div class="user-stats-chart-wrap" style="height:200px"><canvas id="chartBrowsers" aria-label="{{T "user.stats.browsers"}}"></canvas></div>
      </div></div>
    </div>
    <div class="col-12 col-md-4">
      <div class="card border-0 shadow-sm h-100"><div class="card-body">
        <div class="user-stats-table-title">{{T "user.stats.os"}}</div>
        <div class="user-stats-chart-wrap" style="height:200px"><canvas id="chartOS" aria-label="{{T "user.stats.os"}}"></canvas></div>
      </div></div>
    </div>
    <div class="col-12 col-md-4">
      <div class="card border-0 shadow-sm h-100"><div class="card-body">
        <div class="user-stats-table-title">{{T "user.stats.devices"}}</div>
        <div class="user-stats-chart-wrap" style="height:200px"><canvas id="chartDevices" aria-label="{{T "user.stats.devices"}}"></canvas></div>
      </div></div>
    </div>
  </div>

  <div class="row g-3 mb-2">
    <div class="col-12 col-md-6">
      <div class="card border-0 shadow-sm h-100"><div class="card-body">
        <div class="user-stats-table-title">{{T "user.stats.countries_aria"}}</div>
        <div class="user-stats-chart-wrap" style="height:220px"><canvas id="chartCountries" aria-label="{{T "user.stats.countries"}}"></canvas></div>
      </div></div>
    </div>
    <div class="col-12 col-md-6">
      <div class="card border-0 shadow-sm h-100"><div class="card-body">
        <div class="user-stats-table-title">{{T "user.stats.regions_aria"}}</div>
        <div class="user-stats-chart-wrap" style="height:220px"><canvas id="chartRegions" aria-label="{{T "user.stats.regions"}}"></canvas></div>
      </div></div>
    </div>
  </div>
</div>

{{template "public/script_chartjs" .}}
<script>
(function () {
  var charts = {};
  var palette = {
    sessions: { border: 'rgb(37, 99, 235)', fill: 'rgba(37, 99, 235, 0.12)' },
    messages: { border: 'rgb(14, 165, 233)', fill: 'rgba(14, 165, 233, 0.12)' },
    visitors: { border: 'rgb(16, 185, 129)', fill: 'rgba(16, 185, 129, 0.12)' },
    visitor_msgs: { border: 'rgb(245, 158, 11)', fill: 'rgba(245, 158, 11, 0.12)' },
    agent_msgs: { border: 'rgb(99, 102, 241)', fill: 'rgba(99, 102, 241, 0.12)' }
  };
  var pieColors = ['#2563eb','#0ea5e9','#10b981','#f59e0b','#6366f1','#64748b','#ec4899','#14b8a6'];

  function lineOptions() {
    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: 12 } },
        y: { beginAtZero: true, ticks: { precision: 0 } }
      },
      interaction: { mode: 'nearest', axis: 'x', intersect: false }
    };
  }

  function upsertLine(id, label, key, labels, series, multi) {
    var el = document.getElementById(id);
    if (!el || typeof Chart === 'undefined') return;
    if (charts[id]) { charts[id].destroy(); delete charts[id]; }
    var datasets;
    if (multi) {
      datasets = multi.map(function (m) {
        var c = palette[m.key] || palette.sessions;
        return {
          label: m.label,
          data: (series && series[m.key]) ? series[m.key] : [],
          borderColor: c.border,
          backgroundColor: c.fill,
          tension: 0.35,
          fill: false,
          borderWidth: 2,
          pointRadius: 2
        };
      });
    } else {
      var colors = palette[key] || palette.sessions;
      datasets = [{
        label: label,
        data: (series && series[key]) ? series[key] : [],
        borderColor: colors.border,
        backgroundColor: colors.fill,
        tension: 0.35,
        fill: true,
        borderWidth: 2,
        pointRadius: 2
      }];
    }
    charts[id] = new Chart(el.getContext('2d'), {
      type: 'line',
      data: { labels: labels, datasets: datasets },
      options: multi ? Object.assign(lineOptions(), { plugins: { legend: { display: true, position: 'top' }, tooltip: { mode: 'index', intersect: false } } }) : lineOptions()
    });
  }

  function upsertDoughnut(id, labels, values) {
    var el = document.getElementById(id);
    if (!el || typeof Chart === 'undefined') return;
    if (charts[id]) { charts[id].destroy(); delete charts[id]; }
    charts[id] = new Chart(el.getContext('2d'), {
      type: 'doughnut',
      data: {
        labels: labels,
        datasets: [{ data: values, backgroundColor: pieColors.slice(0, labels.length), borderWidth: 0 }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } }
      }
    });
  }

  function fmt(n) { return (n || n === 0) ? String(n) : '-'; }

  function renderKpi(summary) {
    summary = summary || {};
    $('[data-kpi]').each(function () {
      var k = $(this).data('kpi');
      $(this).text(fmt(summary[k]));
    });
  }

  function renderDaily(rows) {
    var $tb = $('#statsDailyBody');
    if (!rows || !rows.length) {
      $tb.html('<tr><td colspan="7" class="text-center text-muted py-3">' + {{jsString (T "user.stats.no_data")}} + '</td></tr>');
      return;
    }
    var html = '';
    rows.slice().reverse().forEach(function (r) {
      html += '<tr><td>' + r.date + '</td>'
        + '<td class="text-end">' + r.sessions + '</td>'
        + '<td class="text-end">' + r.messages + '</td>'
        + '<td class="text-end">' + r.visitors + '</td>'
        + '<td class="text-end">' + r.visitor_msgs + '</td>'
        + '<td class="text-end">' + r.agent_msgs + '</td>'
        + '<td class="text-end">' + r.closed + '</td></tr>';
    });
    $tb.html(html);
  }

  function renderReferrers(list) {
    var $tb = $('#statsReferrerBody');
    if (!list || !list.length) {
      $tb.html('<tr><td colspan="2" class="text-center text-muted py-3">' + {{jsString (T "user.stats.no_data")}} + '</td></tr>');
      return;
    }
    var html = '';
    list.forEach(function (r) {
      html += '<tr><td class="text-break">' + $('<div>').text(r.name).html() + '</td><td class="text-end">' + r.count + '</td></tr>';
    });
    $tb.html(html);
  }

  function renderBySite(list, siteId) {
    var $wrap = $('#statsBySiteWrap');
    if (siteId && parseInt(siteId, 10) > 0) {
      $wrap.hide();
      return;
    }
    $wrap.show();
    var $tb = $('#statsBySiteBody');
    if (!list || !list.length) {
      $tb.html('<tr><td colspan="4" class="text-center text-muted py-3">' + {{jsString (T "user.stats.no_data")}} + '</td></tr>');
      return;
    }
    var html = '';
    list.forEach(function (r) {
      html += '<tr><td>' + $('<div>').text(r.site_name).html() + '</td>'
        + '<td class="text-end">' + r.sessions + '</td>'
        + '<td class="text-end">' + r.messages + '</td>'
        + '<td class="text-end">' + r.visitors + '</td></tr>';
    });
    $tb.html(html);
  }

  function renderStatus(st) {
    st = st || {};
    var labels = [{{jsString (T "user.stats.status_waiting")}}, {{jsString (T "user.stats.status_active")}}, {{jsString (T "user.stats.status_closed")}}];
    var keys = ['waiting', 'active', 'closed'];
    var vals = keys.map(function (k) { return st[k] || 0; });
    upsertDoughnut('chartStatus', labels, vals);
    var html = '';
    keys.forEach(function (k, i) {
      html += '<li class="d-flex justify-content-between py-1"><span>' + labels[i] + '</span><strong>' + vals[i] + '</strong></li>';
    });
    $('#statsStatusList').html(html);
  }

  function renderPieGroup(id, list) {
    list = list || [];
    var labels = list.map(function (x) { return x.name; });
    var vals = list.map(function (x) { return x.count; });
    if (!labels.length) {
      labels = [{{jsString (T "user.stats.empty")}}];
      vals = [0];
    }
    upsertDoughnut(id, labels, vals);
  }

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

  function currentSiteId() {
    return $('#statsSiteFilter').val() || '0';
  }

  function loadStats() {
    var days = currentDays();
    var siteId = currentSiteId();
    var $root = $('#statsRoot');
    $root.addClass('user-stats-loading');
    $.getJSON('/api/user/stats/data?days=' + encodeURIComponent(days) + '&site_id=' + encodeURIComponent(siteId))
      .done(function (res) {
        if (!res || !res.success || !res.data) return;
        var d = res.data;
        var labels = d.labels || [];
        var series = d.series || {};
        renderKpi(d.summary);
        upsertLine('chartSessions', {{jsString (T "user.stats.series_sessions")}}, 'sessions', labels, series);
        upsertLine('chartMessages', {{jsString (T "user.stats.series_messages")}}, 'messages', labels, series);
        upsertLine('chartVisitors', {{jsString (T "user.stats.series_visitors")}}, 'visitors', labels, series);
        upsertLine('chartMsgSplit', '', null, labels, series, [
          { key: 'visitor_msgs', label: {{jsString (T "user.stats.series_visitor_msgs")}} },
          { key: 'agent_msgs', label: {{jsString (T "user.stats.series_agent_msgs")}} }
        ]);
        renderDaily(d.daily_rows);
        renderStatus(d.session_status);
        renderReferrers(d.top_referrers);
        renderBySite(d.by_site, d.site_id);
        renderPieGroup('chartBrowsers', d.browsers);
        renderPieGroup('chartOS', d.os);
        renderPieGroup('chartDevices', d.devices);
        renderPieGroup('chartCountries', d.countries);
        renderPieGroup('chartRegions', d.regions);
      })
      .always(function () {
        $root.removeClass('user-stats-loading');
      });
  }

  $(function () {
    loadStats();
    $('input[name="statsRange"]').on('change', loadStats);
    $('#statsSiteFilter').on('change', function () {
      var sid = $(this).val();
      var url = '/user/stats' + (sid && sid !== '0' ? '?site_id=' + encodeURIComponent(sid) : '');
      if (window.history && window.history.replaceState) {
        window.history.replaceState(null, '', url);
      }
      loadStats();
    });
  });
})();
</script>
{{template "user/layout_foot" .}}
{{end}}