{extend name="common/layout" /}
{block name="title"}后台首页{/block}
{block name="css"}
{if $statEnabled}
<style>
#chart-week-users,#chart-traffic{min-height:320px}
</style>
{/if}
{/block}
{block name="content"}
<div class="row">
  <div class="col-md-6 col-lg-3">
    <div class="card report-card">
      <div class="card-body">
        <div class="row d-flex justify-content-center">
          <div class="col">
            <p class="text-dark mb-0 fw-semibold">管理员</p>
            <h3 class="my-1 fs-20">{$adminCount}</h3>
            <p class="mb-0 text-truncate text-muted"><span class="text-success">管理员账号</span></p>
          </div>
          <div class="col-auto align-self-center">
            <div class="flex-shrink-0 bg-primary-subtle text-primary thumb-md rounded-circle">
              <i class="ri-user-line fs-4"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6 col-lg-3">
    <div class="card report-card">
      <div class="card-body">
        <div class="row d-flex justify-content-center">
          <div class="col">
            <p class="text-dark mb-0 fw-semibold">用户总数</p>
            <h3 class="my-1 fs-20">{$userCount}</h3>
            <p class="mb-0 text-truncate text-muted"><span class="text-success">注册会员</span></p>
          </div>
          <div class="col-auto align-self-center">
            <div class="flex-shrink-0 bg-info-subtle text-info thumb-md rounded-circle">
              <i class="ri-group-line fs-4"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6 col-lg-3">
    <div class="card report-card">
      <div class="card-body">
        <div class="row d-flex justify-content-center">
          <div class="col">
            <p class="text-dark mb-0 fw-semibold">今日新增</p>
            <h3 class="my-1 fs-20">{$todayUser}</h3>
            <p class="mb-0 text-truncate text-muted"><span class="text-success">今日注册</span></p>
          </div>
          <div class="col-auto align-self-center">
            <div class="flex-shrink-0 bg-pink-subtle text-pink thumb-md rounded-circle">
              <i class="ri-user-add-line fs-4"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6 col-lg-3">
    <div class="card report-card">
      <div class="card-body">
        <div class="row d-flex justify-content-center">
          <div class="col">
            <p class="text-dark mb-0 fw-semibold">{if $statEnabled}今日 PV{else /}PHP 版本{/if}</p>
            <h3 class="my-1 fs-20">{if $statEnabled}{$stat.today_pv|default='0'}{else /}{$phpVersion}{/if}</h3>
            <p class="mb-0 text-truncate text-muted"><span class="text-success">{if $statEnabled}页面浏览{else /}运行环境{/if}</span></p>
          </div>
          <div class="col-auto align-self-center">
            <div class="flex-shrink-0 bg-warning-subtle text-warning thumb-md rounded-circle">
              <i class="{if $statEnabled}ri-line-chart-line{else /}ri-database-2-line{/if} fs-4"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

{if $statEnabled}
<div class="row">
  <div class="col-lg-6">
    <div class="card">
      <div class="card-header">
        <div class="row align-items-center">
          <div class="col">
            <h4 class="card-title">本周概况</h4>
          </div>
        </div>
      </div>
      <div class="card-body pt-0">
        <div id="chart-week-users" class="apex-charts"></div>
      </div>
    </div>
  </div>
  <div class="col-lg-6">
    <div class="card">
      <div class="card-header">
        <div class="row align-items-center">
          <div class="col">
            <h4 class="card-title">近 {$stat.traffic_days|default='12'} 日流量</h4>
          </div>
        </div>
      </div>
      <div class="card-body pt-0">
        <div id="chart-traffic" class="apex-charts"></div>
      </div>
    </div>
  </div>
</div>
{else /}
<div class="row">
  <div class="col-12">
    <div class="card">
      <div class="card-body text-center py-5">
        <div class="flex-shrink-0 bg-primary-subtle text-primary thumb-lg rounded-circle d-inline-flex align-items-center justify-content-center mb-3 mx-auto">
          <i class="ri-line-chart-line fs-2"></i>
        </div>
        <h5 class="mt-2">统计图表未启用</h5>
        <p class="text-muted mb-3">安装「访问统计」插件后即可显示本周概况与流量图表。</p>
        <a class="btn btn-primary" href="{:url('/admin/apps/plugin')}">前往插件中心</a>
      </div>
    </div>
  </div>
</div>
{/if}

<div class="row">
  <div class="col-12">
    <div class="card">
      <div class="card-header">
        <div class="row align-items-center">
          <div class="col"><h4 class="card-title mb-0">系统信息</h4></div>
          <div class="col-auto d-flex align-items-center gap-2 flex-wrap">
            <button type="button" class="btn btn-sm btn-outline-secondary" id="btn-core-check">检查更新</button>
            <button type="button" class="btn btn-sm btn-primary" id="btn-core-upgrade" style="display:none;">一键更新</button>
          </div>
        </div>
      </div>
      <div class="card-body">
        <div class="admin-sysinfo">
          <div class="admin-sysinfo-grid">
            <div class="admin-sysinfo-item">
              <span class="text-muted">更新时间</span>
              <span>{$updateTime|default='-'}</span>
            </div>
            <div class="admin-sysinfo-item">
              <span class="text-muted">操作系统</span>
              <span>{$osName}</span>
            </div>
            <div class="admin-sysinfo-item">
              <span class="text-muted">运行环境</span>
              <span>{$serverSoftware}</span>
            </div>
            <div class="admin-sysinfo-item">
              <span class="text-muted">PHP版本</span>
              <span>{$phpVersion}{if $phpOk} <span class="badge bg-success-subtle text-success">OK</span>{/if}</span>
            </div>
            <div class="admin-sysinfo-item">
              <span class="text-muted">MYSQL版本</span>
              <span>{$mysqlVersion}{if $mysqlOk} <span class="badge bg-success-subtle text-success">OK</span>{/if}</span>
            </div>
            <div class="admin-sysinfo-item">
              <span class="text-muted">上传限制</span>
              <span>{$uploadLimit}</span>
            </div>
            <div class="admin-sysinfo-item">
              <span class="text-muted">POST限制</span>
              <span>{$postLimit}</span>
            </div>
            <div class="admin-sysinfo-item">
              <span class="text-muted">服务器地址</span>
              <span>{$serverAddr}</span>
            </div>
            <div class="admin-sysinfo-item">
              <span class="text-muted">开发团队</span>
              <span>{if condition="!function_exists('license_hide_brand') || !license_hide_brand()"}<a href="https://www.zsadmin.com" target="_blank" rel="noopener noreferrer">ZsAdmin</a>{else /}—{/if}</span>
            </div>
            <div class="admin-sysinfo-item">
              <span class="text-muted">特别鸣谢</span>
              <span class="admin-sysinfo-links">
                <a href="https://www.thinkphp.cn" target="_blank" rel="noopener noreferrer">Thinkphp框架</a>
                <a href="https://www.kehua.me" target="_blank" rel="noopener noreferrer">刻画主题</a>
                <a href="https://www.caogenbbs.com" target="_blank" rel="noopener noreferrer">风信子</a>
                <a href="https://xiwo.xyi66.cn/" target="_blank" rel="noopener noreferrer">怪咖先生</a>
              </span>
            </div>
            <div class="admin-sysinfo-item">
              <span class="text-muted">服务器赞助</span>
              <span><a href="https://www.ciyundata.com/recommend/fre2T3Ni8D5H" target="_blank" rel="noopener noreferrer">慈云数据</a></span>
            </div>
            <div class="admin-sysinfo-item">
              <span class="text-muted">版权信息</span>
              <span>{if condition="!function_exists('license_hide_brand') || !license_hide_brand()"}© <script>document.write(new Date().getFullYear())</script> ZsAdmin{else /}—{/if}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

{/block}
{block name="js"}
{if $statEnabled}
<script src="{$static}/libs/apexcharts/apexcharts.min.js"></script>
<script>
(function () {
  var stat = {$statJson|raw};
  var weekChart = null;
  var trafficChart = null;

  function isDark() {
    return document.documentElement.getAttribute('data-bs-theme') === 'dark';
  }

  function labelColor() {
    return isDark() ? 'rgba(255,255,255,0.55)' : 'var(--bs-secondary-color, #95a0c5)';
  }

  function primaryColor() {
    if (window.AdminPrimary) return AdminPrimary.readStored();
    try {
      var cfg = JSON.parse(localStorage.getItem('zsens_admin_settings') || '{}');
      if (cfg && cfg.primary) return String(cfg.primary);
    } catch (e) {}
    var fromCss = (getComputedStyle(document.documentElement).getPropertyValue('--bs-primary') || '').trim();
    return fromCss || (window.AdminPrimary && AdminPrimary.DEFAULT) || '#6f6af8';
  }

  function destroyCharts() {
    if (weekChart) { weekChart.destroy(); weekChart = null; }
    if (trafficChart) { trafficChart.destroy(); trafficChart = null; }
  }

  function draw() {
    var weekEl = document.querySelector('#chart-week-users');
    var trafficEl = document.querySelector('#chart-traffic');
    if (!weekEl || !trafficEl || typeof ApexCharts === 'undefined') return;
    destroyCharts();
    var primary = primaryColor();

    weekChart = new ApexCharts(weekEl, {
      chart: {
        type: 'bar',
        height: 320,
        toolbar: { show: false },
        fontFamily: 'inherit',
        foreColor: labelColor()
      },
      colors: [primary, '#22b783'],
      plotOptions: {
        bar: {
          horizontal: false,
          columnWidth: '42%',
          borderRadius: 4,
          borderRadiusApplication: 'end'
        }
      },
      dataLabels: { enabled: false },
      stroke: { show: true, width: 2, colors: ['transparent'] },
      series: [
        { name: '注册用户', data: stat.week_users || [] },
        { name: stat.active_label || '活跃用户(UV)', data: stat.week_active || [] }
      ],
      xaxis: {
        categories: stat.week_labels || [],
        axisBorder: { show: false },
        axisTicks: { show: false },
        labels: { style: { colors: labelColor(), fontSize: '12px' } }
      },
      yaxis: {
        labels: {
          style: { colors: labelColor(), fontSize: '12px' },
          formatter: function (v) { return Math.round(v); }
        }
      },
      grid: {
        borderColor: 'var(--bs-border-color)',
        strokeDashArray: 3,
        xaxis: { lines: { show: false } },
        yaxis: { lines: { show: true } },
        padding: { top: 0, right: 0, bottom: 0, left: 10 }
      },
      legend: {
        show: true,
        position: 'top',
        horizontalAlign: 'right',
        fontSize: '13px',
        markers: { width: 10, height: 10, radius: 2 },
        itemMargin: { horizontal: 12 }
      },
      tooltip: {
        theme: isDark() ? 'dark' : 'light',
        y: { formatter: function (v) { return v; } }
      },
      fill: { opacity: 1 }
    });
    weekChart.render();

    trafficChart = new ApexCharts(trafficEl, {
      chart: {
        type: 'area',
        height: 320,
        toolbar: { show: false },
        fontFamily: 'inherit',
        foreColor: labelColor(),
        zoom: { enabled: false }
      },
      colors: [primary, '#f4a14d'],
      dataLabels: { enabled: false },
      stroke: {
        curve: 'smooth',
        width: [2, 2],
        lineCap: 'round'
      },
      series: [
        { name: 'PV', data: stat.traffic_pv || [] },
        { name: 'UV', data: stat.traffic_uv || [] }
      ],
      xaxis: {
        categories: stat.traffic_labels || [],
        axisBorder: { show: false },
        axisTicks: { show: false },
        labels: { style: { colors: labelColor(), fontSize: '12px' } }
      },
      yaxis: {
        labels: {
          style: { colors: labelColor(), fontSize: '12px' },
          formatter: function (v) {
            if (v >= 1000) return (v / 1000).toFixed(v >= 10000 ? 0 : 1) + 'k';
            return Math.round(v);
          }
        }
      },
      grid: {
        borderColor: 'var(--bs-border-color)',
        strokeDashArray: 3,
        xaxis: { lines: { show: false } },
        yaxis: { lines: { show: true } },
        padding: { top: 0, right: 8, bottom: 0, left: 10 }
      },
      legend: {
        show: true,
        position: 'top',
        horizontalAlign: 'right',
        fontSize: '13px',
        markers: { width: 10, height: 10, radius: 2 },
        itemMargin: { horizontal: 12 }
      },
      fill: {
        type: 'gradient',
        gradient: {
          type: 'vertical',
          shadeIntensity: 1,
          inverseColors: false,
          opacityFrom: 0.28,
          opacityTo: 0.02,
          stops: [0, 90, 100]
        }
      },
      markers: { size: 0, hover: { size: 5 } },
      tooltip: {
        theme: isDark() ? 'dark' : 'light',
        shared: true,
        y: { formatter: function (v) { return v; } }
      }
    });
    trafficChart.render();
  }

  draw();
  window.addEventListener('message', function (e) {
    if (e && e.data && e.data.type === 'zsens-theme-sync') setTimeout(draw, 40);
  });
})();
</script>
{/if}
<script>
(function ($) {
  if (!$) return;
  var pending = null;
  function toast(msg, ok) {
    if (window.AdminUI && typeof AdminUI.notify === 'function') {
      AdminUI.notify(msg, ok === false ? 'danger' : 'success');
      return;
    }
    if (window.showNotify) {
      showNotify(ok === false ? 'danger' : 'success', msg);
      return;
    }
    alert(msg);
  }
  function checkUpdate(silent) {
    var $btn = $('#btn-core-check').prop('disabled', true);
    var oldText = $btn.text();
    if (!silent) $btn.text('检测中…');
    $.getJSON("{:url('/admin/system/check')}", function (res) {
      $btn.prop('disabled', false).text(oldText);
      if (!res || res.code !== 1) {
        if (!silent) toast((res && res.msg) || '检测失败', false);
        return;
      }
      var d = res.data || {};
      pending = d;
      if (d.has_update) {
        $('#btn-core-upgrade').show();
        toast('发现新版本 v' + (d.latest_version || '') + '（当前 v' + (d.current_version || d.local_version || '') + '）', true);
      } else if (!silent) {
        $('#btn-core-upgrade').hide();
        toast('当前已是最新版 v' + (d.current_version || d.local_version || d.latest_version || ''), true);
      }
    }).fail(function () {
      $btn.prop('disabled', false).text(oldText);
      if (!silent) toast('网络异常', false);
    });
  }
  $('#btn-core-check').on('click', function () { checkUpdate(false); });
  // 页面加载后主动检测一次
  $(function () { checkUpdate(true); });
  $('#btn-core-upgrade').on('click', function () {
    if (!pending || !pending.has_update) {
      toast('请先检查更新', false);
      return;
    }
    var ver = pending.latest_version || '';
    var run = function () {
      var $btn = $('#btn-core-upgrade').prop('disabled', true);
      $.post("{:url('/admin/system/upgrade')}", {
        app_id: pending.app_id || 0,
        version: ver
      }, function (res) {
        $btn.prop('disabled', false);
        if (!res || res.code !== 1) {
          toast((res && res.msg) || '升级失败', false);
          return;
        }
        toast(res.msg || '升级成功', true);
        setTimeout(function () { location.reload(); }, 800);
      }, 'json').fail(function () {
        $btn.prop('disabled', false);
        toast('网络异常', false);
      });
    };
    if (window.AdminUI && typeof AdminUI.confirm === 'function') {
      AdminUI.confirm('确认升级到 v' + ver + '？升级将覆盖核心白名单文件。', run);
    } else if (confirm('确认升级到 v' + ver + '？升级将覆盖核心白名单文件。')) {
      run();
    }
  });
})(window.jQuery);
</script>
{/block}