{include file="_partials/head.tpl"}

<style>
  .an-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin:18px 0}
  .an-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px;position:relative}
  .an-card b{display:block;font-size:26px;color:var(--text);line-height:1.1;font-weight:800}
  .an-card span{font-size:12.5px;color:var(--text-muted)}
  .an-card.is-accent{background:linear-gradient(135deg,#1797F0,#0f79cc);border:0}
  .an-card.is-accent b,.an-card.is-accent span{color:#fff}
  .an-delta{position:absolute;top:14px;right:14px;font-size:11px;font-weight:700;display:inline-flex;align-items:center;gap:3px}
  .an-delta.is-up{color:#16a34a}.an-delta.is-down{color:#ef4444}.an-delta.is-flat{color:#94a3b8}
  .an-card.is-accent .an-delta{color:#fff;opacity:.9}
  .an-delta::before{content:"";display:inline-block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent}
  .an-delta.is-up::before{border-bottom:5px solid currentColor}
  .an-delta.is-down::before{border-top:5px solid currentColor}
  .an-delta.is-flat::before{border:none;width:7px;height:2px;background:currentColor}
  .an-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
  .an-box{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 20px}
  .an-box h3{font-size:15px;margin:0 0 14px;color:var(--text);display:flex;justify-content:space-between;align-items:center}
  .an-box h3 .tot{font-size:13px;color:#16a34a;font-weight:700}
  .an-bar{margin-bottom:12px}
  .an-bar .lbl{display:flex;justify-content:space-between;font-size:13px;color:var(--text-muted);margin-bottom:5px}
  .an-bar .lbl b{color:var(--text)}
  .an-bar .track{height:9px;background:var(--surface-2);border-radius:6px;overflow:hidden}
  .an-bar .fill{height:100%;border-radius:6px;background:#8B9AAB}
  .an-evt{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--border-soft);font-size:14px;color:var(--text-muted)}
  .an-evt b{color:#1797F0;font-size:16px}
  .an-g{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border-soft);font-size:13.5px}
  .an-g .gn{color:var(--text);font-weight:600}
  .an-g .gm{color:var(--text-muted);font-size:12px}
  .an-g .gv{text-align:right;white-space:nowrap}
  .an-g .gv b{color:#1797F0}
  .prod-table td .badge{white-space:nowrap}
  .prod-table th:nth-child(2),.prod-table td:nth-child(2){min-width:160px;white-space:nowrap}
  .an-flag{width:18px;height:13px;border-radius:2px;vertical-align:-1px;margin-right:6px;box-shadow:0 0 0 1px rgba(0,0,0,.1)}
  .an-g .cr{color:#16a34a;font-weight:700;font-size:12px}
  .an-acts{display:flex;gap:8px;align-items:center}
  @media(max-width:980px){.an-grid{grid-template-columns:repeat(3,1fr)}.an-row{grid-template-columns:1fr}}
  @media(max-width:560px){.an-grid{grid-template-columns:repeat(2,1fr)}}
</style>

<div class="page-head">
  <div><h1>Аналитика посетителей</h1></div>
  <div class="an-acts">
    <a href="/admin/analytics/map" class="btn btn-secondary">{icon name="globe" size="16"} Карта</a>
    <a href="/admin/analytics/realtime" class="btn btn-secondary">{icon name="lightning" size="16"} Realtime</a>
    <a href="/admin/analytics/goals" class="btn btn-secondary">{icon name="tag" size="16"} Цели</a>
    <a href="/admin/analytics/export?range={range}" class="btn btn-secondary">{icon name="download" size="16"} CSV</a>
  </div>
</div>

<div class="tabs-bar">
  <a href="/admin/analytics?range=today" class="tab [if {is_today}="1"]is-active[/if]">Сегодня</a>
  <a href="/admin/analytics?range=7d" class="tab [if {is_7d}="1"]is-active[/if]">7 дней</a>
  <a href="/admin/analytics?range=30d" class="tab [if {is_30d}="1"]is-active[/if]">30 дней</a>
</div>

<div class="an-grid">
  <div class="an-card"><b>{visitors}</b><span>Посетителей</span>[if {d_visitors.has}="1"]<span class="an-delta is-{d_visitors.dir}">{d_visitors.pct}%</span>[/if]</div>
  <div class="an-card"><b>{sessions}</b><span>Сессий</span>[if {d_sessions.has}="1"]<span class="an-delta is-{d_sessions.dir}">{d_sessions.pct}%</span>[/if]</div>
  <div class="an-card"><b>{pageviews}</b><span>Просмотров</span>[if {d_pageviews.has}="1"]<span class="an-delta is-{d_pageviews.dir}">{d_pageviews.pct}%</span>[/if]</div>
  <div class="an-card"><b>{avg_time}</b><span>Ср. время на сайте</span></div>
  <div class="an-card is-accent"><b>{leads}</b><span>Заявок с формы</span>[if {d_leads.has}="1"]<span class="an-delta is-{d_leads.dir}">{d_leads.pct}%</span>[/if]</div>
  <div class="an-card"><b>{goal_actions}</b><span>Целевых действий</span>[if {d_goal_actions.has}="1"]<span class="an-delta is-{d_goal_actions.dir}">{d_goal_actions.pct}%</span>[/if]</div>
</div>

[if {has_data}="1"]
<div class="an-box" style="margin-bottom:16px">
  <h3>Просмотры за 14 дней</h3>
  {spark_svg|raw}
</div>

<div class="an-row">
  <div class="an-box">
    <h3>Источники переходов</h3>
    [foreach var="sources" as="s"]
      <div class="an-bar">
        <div class="lbl"><span>{s.label}[if {s.is_ads}="1"] {icon name="lightning" size="12"}[/if]</span><b>{s.count} · {s.pct}%</b></div>
        <div class="track"><div class="fill" style="width:{s.pct}%;background:{s.color}"></div></div>
      </div>
    [/foreach]
  </div>
  <div class="an-box">
    <h3>Конверсии по целям <span class="tot">{total_value}</span></h3>
    [if {goals_perf}]
      [foreach var="goals_perf" as="g"]
        <div class="an-g">
          <div><div class="gn">{g.name}</div><div class="gm">CR <span class="cr">{g.cr}%</span></div></div>
          <div class="gv"><b>{g.count}</b><div class="gm">{g.value}</div></div>
        </div>
      [/foreach]
    [else]
      <p class="muted" style="font-size:13px">Целей пока нет. <a href="/admin/analytics/goals">Добавить цель</a></p>
    [/if]
  </div>
</div>

<div class="an-row">
  <div class="an-box">
    <h3>Воронка</h3>
    [foreach var="funnel" as="f"]
      <div class="an-bar">
        <div class="lbl"><span>{f.label}</span><b>{f.count} · {f.pct}%</b></div>
        <div class="track"><div class="fill" style="width:{f.pct}%;background:#1797F0"></div></div>
      </div>
    [/foreach]
  </div>
  <div class="an-box">
    <h3>Клики и события</h3>
    [if {events}]
      [foreach var="events" as="e"]
        <div class="an-evt"><span>{e.label}</span><b>{e.count}</b></div>
      [/foreach]
    [else]
      <p class="muted" style="font-size:13px">Пока нет целевых событий.</p>
    [/if]
  </div>
</div>

<div class="an-row">
  <div class="an-box">
    <h3>Популярные страницы</h3>
    [foreach var="top_pages" as="p"]
      <div class="an-bar">
        <div class="lbl"><span>{p.url}</span><b>{p.count}</b></div>
        <div class="track"><div class="fill" style="width:{p.pct}%;background:#1797F0"></div></div>
      </div>
    [/foreach]
  </div>
  <div class="an-box">
    <h3>Откуда пришли (сайты)</h3>
    [if {referrers}]
      [foreach var="referrers" as="r"]
        <div class="an-bar">
          <div class="lbl"><span>{r.host}</span><b>{r.count}</b></div>
          <div class="track"><div class="fill" style="width:{r.pct}%;background:#1CE2A6"></div></div>
        </div>
      [/foreach]
    [else]
      <p class="muted" style="font-size:13px">Внешних сайтов-источников пока нет.</p>
    [/if]
  </div>
</div>

<div class="an-row">
  <div class="an-box">
    <h3>Кампании (Google Ads / UTM)</h3>
    [if {campaigns}]
      [foreach var="campaigns" as="c"]
        <div class="an-evt"><span>{c.name}</span><b>{c.count}</b></div>
      [/foreach]
    [else]
      <p class="muted" style="font-size:13px">UTM-кампаний пока нет. Платных кликов (gclid): {gclid_count}.</p>
    [/if]
  </div>
  <div class="an-box">
    <h3>Ключевые слова</h3>
    [if {keywords}]
      [foreach var="keywords" as="k"]
        <div class="an-evt"><span>{k.name}</span><b>{k.count}</b></div>
      [/foreach]
    [else]
      <p class="muted" style="font-size:13px">utm_term не передаётся. Кликов с gclid: {gclid_count}.</p>
    [/if]
  </div>
</div>

<div class="an-box" style="margin-bottom:16px">
  <h3>География <a href="/admin/analytics/map" style="font-size:12px">на карте →</a></h3>
  [if {geo}]
    [foreach var="geo" as="gg"]
      <div class="an-bar">
        <div class="lbl"><span>[if {gg.flag}]<img class="an-flag" src="{gg.flag}" alt="{gg.code}" onerror="this.style.display='none'">[/if]{gg.name}</span><b>{gg.count}</b></div>
        <div class="track"><div class="fill" style="width:{gg.pct}%;background:#F5A065"></div></div>
      </div>
    [/foreach]
  [else]
    <p class="muted" style="font-size:13px">Страны появятся по мере заходов (определяются по IP локально). <a href="/admin/analytics/map">Открыть карту</a></p>
  [/if]
</div>

<div class="prod-table-wrap">
<table class="table prod-table">
  <thead>
    <tr><th>Время</th><th>Источник</th><th>Устройство</th><th>Страница входа</th><th>Стр.</th><th>Действий</th><th>На сайте</th></tr>
  </thead>
  <tbody>
    [foreach var="sessions_list" as="s"]
      <tr>
        <td class="muted"><small><a href="/admin/analytics/session/{s.sid}">{s.time}</a></small></td>
        <td><span class="badge" style="background:{s.source_color};color:#fff">{s.source_label}</span></td>
        <td><small>{s.device}</small></td>
        <td><small>{s.landing}</small></td>
        <td>{s.pv}</td>
        <td>{s.ev}</td>
        <td><small>{s.dur}</small></td>
      </tr>
    [/foreach]
  </tbody>
</table>
</div>
[else]
<div class="empty-state">
  {icon name="chart" size="42"}
  <p>Данных пока нет. Они появятся здесь, как только на сайт зайдут посетители (особенно после запуска рекламы).</p>
</div>
[/if]

{include file="_partials/foot.tpl"}
