{% extends "base.html" %}
{% block title %}داشبورد | فرنود{% endblock %}
{% block content %}
<div class="dashboard">
{% include "_sidebar.html" %}
<main class="main">
<header class="topbar">
  <h2>داشبورد</h2>
  <div class="topbar-actions">
    <span class="greeting">{{ username }}</span>
    <button type="button" class="theme-toggle" id="themeToggle" title="تم">🌓</button>
  </div>
</header>
<div class="content">
  <div class="stats">
    <div class="stat"><div class="stat-label">کاربران ربات</div><div class="stat-value">{{ stats.users or 0 }}</div></div>
    <div class="stat"><div class="stat-label">سرویس‌های فروخته‌شده</div><div class="stat-value">{{ stats.orders or 0 }}</div></div>
    <div class="stat"><div class="stat-label">درآمد (تومان)</div><div class="stat-value">{{ "{:,.0f}".format(stats.revenue or 0) }}</div></div>
    <div class="stat"><div class="stat-label">شارژ در انتظار</div><div class="stat-value">{{ stats.pending_charges or 0 }}</div></div>
    <div class="stat"><div class="stat-label">پنل‌ها</div><div class="stat-value">{{ stats.panels or 0 }}</div></div>
    <div class="stat"><div class="stat-label">محصولات فعال</div><div class="stat-value">{{ stats.products or 0 }}</div></div>
    <div class="stat"><div class="stat-label">تیکت باز</div><div class="stat-value">{{ stats.open_tickets or 0 }}</div></div>
  </div>

  <div class="card chart-card">
    <div class="card-title">نمودار کاربران و فروش</div>
    <div class="card-desc">مقایسه رشد کاربران با تعداد سفارش و درآمد</div>
    <div class="chart-filters" id="chartFilters">
      <button type="button" data-period="today">امروز</button>
      <button type="button" data-period="7" class="active">۷ روز</button>
      <button type="button" data-period="28">۲۸ روز</button>
      <button type="button" data-period="all">۹۰ روز</button>
    </div>
    <div class="chart-wrap"><canvas id="dashChart"></canvas></div>
    <div class="stats" style="margin-top:16px;margin-bottom:0">
      <div class="stat"><div class="stat-label">کاربران دوره</div><div class="stat-value" id="cUsers">—</div></div>
      <div class="stat"><div class="stat-label">سفارش‌ها</div><div class="stat-value" id="cOrders">—</div></div>
      <div class="stat"><div class="stat-label">درآمد دوره</div><div class="stat-value" id="cRev">—</div></div>
    </div>
  </div>
</div>
</main>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
(function(){
  let chart;
  const ctx = document.getElementById('dashChart');
  async function load(period){
    const res = await fetch('/api/dashboard/chart?period=' + period, {credentials:'same-origin'});
    const data = await res.json();
    if(!data.ok && !data.labels) return;
    document.getElementById('cUsers').textContent = data.users_total ?? '—';
    document.getElementById('cOrders').textContent = data.orders_total ?? '—';
    document.getElementById('cRev').textContent = (data.revenue_total||0).toLocaleString('fa-IR');
    const primary = getComputedStyle(document.documentElement).getPropertyValue('--primary').trim() || '#3b82f6';
    const cfg = {
      type: 'line',
      data: {
        labels: data.labels || [],
        datasets: [
          { label: 'کاربران جدید', data: data.users || [], borderColor: primary, backgroundColor: primary + '33', tension: 0.35, fill: true },
          { label: 'سفارش‌ها', data: data.orders || [], borderColor: '#22c55e', backgroundColor: '#22c55e22', tension: 0.35, fill: true },
          { label: 'درآمد (÷1000)', data: (data.revenue||[]).map(v => Math.round(v/1000)), borderColor: '#f59e0b', backgroundColor: '#f59e0b22', tension: 0.35, fill: false }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { labels: { color: getComputedStyle(document.documentElement).getPropertyValue('--text-2') } } },
        scales: {
          x: { ticks: { color: '#64748b' }, grid: { color: 'rgba(148,163,184,.12)' } },
          y: { ticks: { color: '#64748b' }, grid: { color: 'rgba(148,163,184,.12)' } }
        }
      }
    };
    if(chart) chart.destroy();
    chart = new Chart(ctx, cfg);
  }
  document.querySelectorAll('#chartFilters button').forEach(btn => {
    btn.addEventListener('click', () => {
      document.querySelectorAll('#chartFilters button').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      load(btn.dataset.period);
    });
  });
  load('7');
})();
</script>
{% endblock %}