{% extends "base.html" %}
{% block title %}داشبورد{% endblock %}
{% block page_title %}<i class="bi bi-speedometer2"></i> داشبورد{% endblock %}

{% block content %}

<div class="d-flex justify-content-between align-items-center mb-3">
  <div class="text-muted small"><i class="bi bi-arrow-repeat me-1"></i>به‌روزرسانی خودکار هر ۱۰ ثانیه · آخرین: <span id="genAt" data-m="generated_at">{{ m.generated_at }}</span></div>
  <button class="btn btn-sm btn-outline-secondary" onclick="refreshDash(true)"><i class="bi bi-arrow-clockwise me-1"></i>به‌روزرسانی</button>
</div>

{# ── Service status strip ── #}
<div class="card mb-3">
  <div class="card-header"><h6><i class="bi bi-hdd-network me-2 text-accent"></i>وضعیت سرویس‌ها</h6></div>
  <div class="card-body">
    <div class="row g-2">
      {% set svc = [('telegram','Telegram','telegram'),('bale','Bale','chat-dots'),('ai','AI','cpu'),
                    ('database','Database','database'),('queue','Queue/Worker','diagram-3')] %}
      {% for key, label, icon in svc %}
      <div class="col-6 col-md-4 col-xl-2">
        <div class="d-flex align-items-center gap-2 p-2 rounded" style="background:var(--card-elev)">
          <i class="bi bi-{{ icon }}"></i>
          <span class="small flex-grow-1">{{ label }}</span>
          <span class="status-dot {{ 'connected' if m.services[key] else 'disconnected' }}" data-status="services.{{ key }}"></span>
        </div>
      </div>
      {% endfor %}
    </div>
    <div class="row g-2 mt-1">
      {% set sysm = m.services.system %}
      <div class="col-6 col-md-3"><div class="text-muted text-xs">CPU</div><div class="fw-bold" data-m="services.system.cpu" data-suffix="%">{{ sysm.cpu if sysm.cpu is not none else '—' }}</div></div>
      <div class="col-6 col-md-3"><div class="text-muted text-xs">RAM</div><div class="fw-bold" data-m="services.system.ram" data-suffix="%">{{ sysm.ram if sysm.ram is not none else '—' }}</div></div>
      <div class="col-6 col-md-3"><div class="text-muted text-xs">Storage</div><div class="fw-bold">{% if sysm.storage %}{{ sysm.storage.used_gb }}/{{ sysm.storage.total_gb }}GB ({{ sysm.storage.percent }}%){% else %}—{% endif %}</div></div>
      <div class="col-6 col-md-3"><div class="text-muted text-xs">Uptime</div><div class="fw-bold" data-m="services.system.uptime">{{ sysm.uptime or '—' }}</div></div>
    </div>
  </div>
</div>

{# ── Module widget cards ── #}
{% macro widget(title, icon, color, items) %}
<div class="col-md-6 col-xl-4">
  <div class="card h-100">
    <div class="card-header d-flex align-items-center gap-2"><i class="bi bi-{{ icon }}" style="color:{{ color }}"></i><h6 class="mb-0">{{ title }}</h6></div>
    <div class="card-body">
      <div class="row g-2 text-center">
        {% for label, path, val in items %}
        <div class="col-4">
          <div class="fw-bold fs-5" data-m="{{ path }}">{{ val }}</div>
          <div class="text-muted text-xs">{{ label }}</div>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
</div>
{% endmacro %}

<div class="row g-3 mb-3">
  {{ widget('مدیریت اکانت‌ها', 'person-badge', '#60A55F', [
      ('کل','accounts.total', m.accounts.total),
      ('فعال','accounts.active', m.accounts.active),
      ('غیرفعال','accounts.inactive', m.accounts.inactive),
      ('خطا','accounts.error', m.accounts.error),
      ('متصل','accounts.connected', m.accounts.connected),
      ('قطع','accounts.disconnected', m.accounts.disconnected)]) }}

  {{ widget('پیام ثابت', 'pin-angle', '#4a9fd8', [
      ('فعال','fixed_message.active', m.fixed_message.active),
      ('متوقف','fixed_message.stopped', m.fixed_message.stopped),
      ('ارسال امروز','fixed_message.sent_today', m.fixed_message.sent_today),
      ('بازنویسی AI','fixed_message.ai_rewritten', m.fixed_message.ai_rewritten),
      ('خطا','fixed_message.errors', m.fixed_message.errors),
      ('—','_', '') ]) }}

  {{ widget('فوروارد خودکار', 'arrow-left-right', '#d9a441', [
      ('Rule فعال','forward.rules_active', m.forward.rules_active),
      ('Rule غیرفعال','forward.rules_inactive', m.forward.rules_inactive),
      ('فوروارد امروز','forward.forwarded_today', m.forward.forwarded_today),
      ('ناموفق','forward.failed_today', m.forward.failed_today),
      ('پردازش AI','forward.ai_processing', m.forward.ai_processing),
      ('—','_','') ]) }}

  {{ widget('تعامل هوشمند', 'chat-dots', '#c3bdf5', [
      ('فعال','interaction.active', m.interaction.active),
      ('متوقف','interaction.stopped', m.interaction.stopped),
      ('پیام‌ها','interaction.messages', m.interaction.messages),
      ('پاسخ AI','interaction.ai_responses', m.interaction.ai_responses),
      ('خطا','interaction.errors', m.interaction.errors),
      ('—','_','') ]) }}

  {{ widget('کاربران', 'people', '#60A55F', [
      ('کل','users.total', m.users.total),
      ('آنلاین','users.online', m.users.online),
      ('—','_','') ]) }}

  <div class="col-md-6 col-xl-4">
    <div class="card h-100">
      <div class="card-header d-flex align-items-center gap-2"><i class="bi bi-box-arrow-in-right text-accent"></i><h6 class="mb-0">آخرین ورودها</h6></div>
      <div class="card-body" id="recentLogins">
        {% for u in m.users.recent_logins %}
        <div class="d-flex justify-content-between text-xs mb-1"><span>{{ u.username }}</span><span class="text-muted">{{ u.last_login }}</span></div>
        {% else %}<div class="text-muted small">—</div>{% endfor %}
      </div>
    </div>
  </div>
</div>

{# ── Chart + recent logs ── #}
<div class="row g-3">
  <div class="col-lg-7">
    <div class="card">
      <div class="card-header"><h6><i class="bi bi-graph-up me-2 text-accent"></i>روند ۷ روز اخیر (پیام‌ها / خطاها)</h6></div>
      <div class="card-body"><canvas id="trendChart" height="110"></canvas></div>
    </div>
  </div>
  <div class="col-lg-5">
    <div class="card">
      <div class="card-header"><h6><i class="bi bi-terminal me-2 text-accent"></i>آخرین لاگ‌ها</h6></div>
      <div class="card-body" id="recentLogs" style="max-height:280px;overflow:auto">
        {% for l in m.recent_logs %}
        <div class="d-flex gap-2 text-xs mb-1"><span class="badge badge-level-{{ l.level }}">{{ l.level }}</span><span class="text-muted">{{ l.time }}</span><span class="text-truncate">{{ l.message }}</span></div>
        {% else %}<div class="text-muted small">لاگی موجود نیست</div>{% endfor %}
      </div>
    </div>
  </div>
</div>

{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
/* Resolve a dotted path against an object. */
function dig(obj, path){ return path.split('.').reduce((o,k)=> (o==null?undefined:o[k]), obj); }

function refreshDash(force){
  fetch('{{ url_for("dashboard.summary") }}').then(r=>r.json()).then(m=>{
    document.querySelectorAll('[data-m]').forEach(el=>{
      const v = dig(m, el.dataset.m);
      if(v===undefined || v===null) return;
      el.textContent = v + (el.dataset.suffix||'');
    });
    document.querySelectorAll('[data-status]').forEach(el=>{
      const v = dig(m, el.dataset.status);
      el.className = 'status-dot ' + (v ? 'connected' : 'disconnected');
    });
    // recent logins
    const rl = document.getElementById('recentLogins');
    if(rl && m.users && m.users.recent_logins){
      rl.innerHTML = m.users.recent_logins.map(u=>`<div class="d-flex justify-content-between text-xs mb-1"><span>${esc(u.username)}</span><span class="text-muted">${esc(u.last_login)}</span></div>`).join('') || '<div class="text-muted small">—</div>';
    }
    // recent logs
    const lg = document.getElementById('recentLogs');
    if(lg && m.recent_logs){
      lg.innerHTML = m.recent_logs.map(l=>`<div class="d-flex gap-2 text-xs mb-1"><span class="badge badge-level-${esc(l.level)}">${esc(l.level)}</span><span class="text-muted">${esc(l.time)}</span><span class="text-truncate">${esc(l.message)}</span></div>`).join('') || '<div class="text-muted small">لاگی موجود نیست</div>';
    }
  }).catch(()=>{});
}
function esc(s){ return String(s==null?'':s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }

/* 7-day trend chart */
fetch('{{ url_for("dashboard.chart_data") }}').then(r=>r.json()).then(d=>{
  const ctx=document.getElementById('trendChart'); if(!ctx) return;
  new Chart(ctx,{type:'line',data:{labels:d.labels,datasets:[
    {label:'پیام‌ها',data:d.messages,borderColor:'#60A55F',backgroundColor:'rgba(96,165,95,.15)',tension:.35,fill:true},
    {label:'خطاها',data:d.errors,borderColor:'#e0684f',backgroundColor:'rgba(224,104,79,.12)',tension:.35,fill:true}]},
    options:{plugins:{legend:{labels:{color:'#DEDEE0'}}},scales:{x:{ticks:{color:'#94a3b8'},grid:{color:'rgba(255,255,255,.05)'}},y:{ticks:{color:'#94a3b8'},grid:{color:'rgba(255,255,255,.05)'}}}}});
}).catch(()=>{});

setInterval(refreshDash, 10000);
</script>
{% endblock %}