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

<div class="page-head">
  <div>
    <h1>{lang key="shop.analytics.title"}</h1>
    <p class="muted">{lang key="shop.analytics.subtitle"}</p>
  </div>
  <div class="actions">
    <div class="prod-tabs" style="border-bottom:none;margin:0">
      <a href="/admin/shop/analytics?range=7"  class="prod-tab [if {range}=7]is-active[/if]">{lang key="shop.analytics.range_7"}</a>
      <a href="/admin/shop/analytics?range=30" class="prod-tab [if {range}=30]is-active[/if]">{lang key="shop.analytics.range_30"}</a>
      <a href="/admin/shop/analytics?range=90" class="prod-tab [if {range}=90]is-active[/if]">{lang key="shop.analytics.range_90"}</a>
    </div>
  </div>
</div>

<!-- KPI -->
<div class="dash-shop-kpi">
  [foreach var="kpi" as="k"]
    <div class="kpi-card kpi-{k.tone}">
      <div class="kpi-label">{k.label}</div>
      <div class="kpi-value">{k.value}</div>
      <div class="kpi-sub muted">{k.sub}</div>
    </div>
  [/foreach]
</div>

<!-- Бар-чарт + распределение по статусам -->
<div class="dash-shop-row">
  <div class="card dash-shop-chart">
    <div class="card-h">
      <h3>{lang key="shop.analytics.section_dynamics"}</h3>
      <span class="muted">за {range} дней</span>
    </div>
    [if {has_data}]
      <div class="chart-bars">
        [foreach var="by_day" as="d"]
          <div class="chart-bar" title="{d.day} · {d.count} сделок · {d.rev_fmt}">
            <span style="height:{d.pct}%"></span>
          </div>
        [/foreach]
      </div>
      <div class="chart-axis muted">
        [foreach var="by_day" as="d"]<span>[if {_index}=0]{d.short}[/if][if {_last}]{d.short}[/if]</span>[/foreach]
      </div>
    [else]
      <div class="dash-empty">
        <div class="dash-empty-ico">{icon name="chart" size="42"}</div>
        <p>{lang key="shop.analytics.no_sales"}</p>
        <p class="muted">{lang key="shop.analytics.no_sales_hint"}</p>
      </div>
    [/if]
  </div>

  <div class="card">
    <div class="card-h">
      <h3>{lang key="shop.analytics.section_status"}</h3>
      <span class="muted">за {range} дней</span>
    </div>
    [if {status_breakdown}]
      <ul class="alerts-list">
        [foreach var="status_breakdown" as="s"]
          <li><div class="alert-row">
            <span class="alert-label">{s.status}</span>
            <span class="alert-num">{s.count}</span>
          </div></li>
        [/foreach]
      </ul>
    [else]
      <p class="muted">{lang key="shop.analytics.no_orders_period"}</p>
    [/if]
  </div>
</div>

<!-- Топ + сводка каталога -->
<div class="dash-shop-row">
  <div class="card">
    <div class="card-h">
      <h3>{lang key="shop.analytics.section_top"}</h3>
      <a href="/admin/shop/products" class="muted">{lang key="shop.analytics.all_products"}</a>
    </div>
    [if {top_products}]
      <ol class="hits-list">
        [foreach var="top_products" as="p"]
          <li>
            <span class="hits-pos">{p.position}</span>
            <a href="/admin/shop/products/{p.pid}/edit" class="hits-title">{p.title}</a>
            <div class="hits-meta muted">{p.revenue_fmt} · {lang key="shop.analytics.sold"} {p.qty}</div>
          </li>
        [/foreach]
      </ol>
    [else]
      <p class="muted">{lang key="shop.analytics.no_sales_period"}</p>
    [/if]
  </div>

  <div class="card">
    <div class="card-h">
      <h3>{lang key="shop.analytics.section_summary"}</h3>
      <span class="muted">{lang key="shop.analytics.summary_subtitle"}</span>
    </div>
    <div class="catalog-grid">
      [foreach var="catalog_kpi" as="c"]
        <div class="catalog-cell">
          <div class="catalog-num">{c.value}</div>
          <div class="catalog-cap">{c.label}</div>
        </div>
      [/foreach]
    </div>
  </div>
</div>

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