{% extends "base.html" %}
{% block title %}گزارش‌ها{% endblock %}
{% block page_title %}<i class="bi bi-bar-chart-line"></i> گزارش‌ها{% endblock %}

{% block head %}
{% if tab == 'forwarding' %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
{% endif %}
{% endblock %}

{% block content %}

<!-- Report tabs -->
<ul class="nav nav-pills mb-4 flex-wrap gap-2">
  {% for key, spec in reports.items() %}
  <li class="nav-item">
    <a class="nav-link {{ 'active' if key == tab }}" href="{{ url_for('reports.index', tab=key) }}">
      {{ spec.title }}
    </a>
  </li>
  {% endfor %}
</ul>

{% if tab == 'forwarding' and summary %}
<!-- Period selector -->
<div class="card mb-4">
  <div class="card-body py-3">
    <form method="GET" class="row g-2 align-items-end">
      <input type="hidden" name="tab" value="forwarding">
      <div class="col-auto">
        <label class="form-label">بازه زمانی</label>
        <select name="period" class="form-select form-select-sm" style="min-width:150px" onchange="this.form.submit()">
          <option value="today"          {{ 'selected' if summary.period=='today' }}>امروز</option>
          <option value="yesterday"      {{ 'selected' if summary.period=='yesterday' }}>دیروز</option>
          <option value="week"           {{ 'selected' if summary.period=='week' }}>۷ روز اخیر</option>
          <option value="month"          {{ 'selected' if summary.period=='month' }}>۳۰ روز اخیر</option>
          <option value="current_month"  {{ 'selected' if summary.period=='current_month' }}>ماه جاری</option>
          <option value="prev_month"     {{ 'selected' if summary.period=='prev_month' }}>ماه گذشته</option>
        </select>
      </div>
      <div class="col-auto">
        <label class="form-label">از تاریخ</label>
        <input type="date" name="date_from" class="form-control form-control-sm" value="{{ summary.date_from }}">
      </div>
      <div class="col-auto">
        <label class="form-label">تا تاریخ</label>
        <input type="date" name="date_to" class="form-control form-control-sm" value="{{ summary.date_to }}">
      </div>
      <div class="col-auto">
        <button type="submit" class="btn btn-primary btn-sm"><i class="bi bi-search me-1"></i>اعمال</button>
      </div>
      <div class="col-auto ms-auto">
        <span class="badge text-bg-light text-muted py-2 px-3">
          <i class="bi bi-calendar3 me-1"></i>{{ summary.date_from }} تا {{ summary.date_to }}
        </span>
      </div>
    </form>
  </div>
</div>

<!-- Summary stat cards -->
<div class="row g-3 mb-4">
  <div class="col-6 col-md-4 col-xl-2">
    <div class="stat-card" style="background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff">
      <span class="stat-icon"><i class="bi bi-envelope-arrow-down"></i></span>
      <div class="stat-value">{{ summary.total_received }}</div>
      <div class="stat-label">دریافت‌شده</div>
    </div>
  </div>
  <div class="col-6 col-md-4 col-xl-2">
    <div class="stat-card" style="background:linear-gradient(135deg,#16a34a,#15803d);color:#fff">
      <span class="stat-icon"><i class="bi bi-telegram"></i></span>
      <div class="stat-value">{{ summary.total_tg_sent }}</div>
      <div class="stat-label">ارسال تلگرام</div>
    </div>
  </div>
  <div class="col-6 col-md-4 col-xl-2">
    <div class="stat-card" style="background:linear-gradient(135deg,#e91e63,#c2185b);color:#fff">
      <span class="stat-icon"><i class="bi bi-chat-dots"></i></span>
      <div class="stat-value">{{ summary.total_bale_sent }}</div>
      <div class="stat-label">ارسال بله</div>
    </div>
  </div>
  <div class="col-6 col-md-4 col-xl-2">
    <div class="stat-card" style="background:linear-gradient(135deg,#dc2626,#b91c1c);color:#fff">
      <span class="stat-icon"><i class="bi bi-exclamation-octagon"></i></span>
      <div class="stat-value">{{ summary.total_failed }}</div>
      <div class="stat-label">ناموفق</div>
    </div>
  </div>
  <div class="col-6 col-md-4 col-xl-2">
    <div class="stat-card" style="background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff">
      <span class="stat-icon"><i class="bi bi-cpu"></i></span>
      <div class="stat-value">{{ summary.total_ai_ok }}</div>
      <div class="stat-label">هوش مصنوعی موفق</div>
    </div>
  </div>
  <div class="col-6 col-md-4 col-xl-2">
    <div class="stat-card" style="background:linear-gradient(135deg,#0891b2,#0e7490);color:#fff">
      <span class="stat-icon"><i class="bi bi-image"></i></span>
      <div class="stat-value">{{ summary.total_media }}</div>
      <div class="stat-label">پیام رسانه‌ای</div>
    </div>
  </div>
</div>

{% if summary.total_received > 0 %}
{% set tg_rate = ((summary.total_tg_sent / summary.total_received) * 100)|round(1) %}
{% set bale_rate = ((summary.total_bale_sent / summary.total_received) * 100)|round(1) %}
{% set ai_rate = ((summary.total_ai_ok / summary.total_received) * 100)|round(1) %}
<div class="row g-3 mb-4">
  <div class="col-md-4">
    <div class="card"><div class="card-body py-3">
      <div class="d-flex justify-content-between align-items-center mb-2">
        <span class="small fw-semibold">نرخ موفقیت تلگرام</span>
        <span class="fw-bold text-success">{{ tg_rate }}%</span>
      </div>
      <div class="progress" style="height:8px"><div class="progress-bar bg-success" style="width:{{ tg_rate }}%"></div></div>
    </div></div>
  </div>
  <div class="col-md-4">
    <div class="card"><div class="card-body py-3">
      <div class="d-flex justify-content-between align-items-center mb-2">
        <span class="small fw-semibold">نرخ موفقیت بله</span>
        <span class="fw-bold" style="color:#e91e63">{{ bale_rate }}%</span>
      </div>
      <div class="progress" style="height:8px"><div class="progress-bar" style="width:{{ bale_rate }}%;background:#e91e63"></div></div>
    </div></div>
  </div>
  <div class="col-md-4">
    <div class="card"><div class="card-body py-3">
      <div class="d-flex justify-content-between align-items-center mb-2">
        <span class="small fw-semibold">نرخ پردازش هوش مصنوعی</span>
        <span class="fw-bold" style="color:#7c3aed">{{ ai_rate }}%</span>
      </div>
      <div class="progress" style="height:8px"><div class="progress-bar" style="width:{{ ai_rate }}%;background:#7c3aed"></div></div>
    </div></div>
  </div>
</div>
{% endif %}

{% if summary.daily %}
<div class="card mb-4">
  <div class="card-header"><h6 class="mb-0"><i class="bi bi-graph-up me-2 text-primary"></i>روند روزانه</h6></div>
  <div class="card-body py-3"><canvas id="chartDaily" height="70"></canvas></div>
</div>
{% endif %}

{% if summary.channel_stats %}
<div class="card mb-4">
  <div class="card-header"><h6 class="mb-0"><i class="bi bi-broadcast me-2 text-muted"></i>آمار بر اساس کانال منبع</h6></div>
  <div class="table-responsive">
    <table class="table table-hover align-middle mb-0">
      <thead><tr><th>کانال</th><th class="text-center">دریافت</th><th class="text-center">ارسال‌شده</th>
        <th class="text-center">ناموفق</th><th style="min-width:200px">نرخ موفقیت</th></tr></thead>
      <tbody>
        {% for row in summary.channel_stats %}
        {% set rate = ((row.sent or 0) / row.total * 100)|round(1) if row.total else 0 %}
        <tr>
          <td><span class="fw-semibold">{{ row[0] or 'نامشخص' }}</span></td>
          <td class="text-center fw-bold">{{ row.total }}</td>
          <td class="text-center text-success fw-bold">{{ row.sent or 0 }}</td>
          <td class="text-center text-danger fw-bold">{{ row.failed or 0 }}</td>
          <td>
            <div class="d-flex align-items-center gap-2">
              <div class="progress flex-grow-1" style="height:8px">
                <div class="progress-bar {{ 'bg-success' if rate>=80 else ('bg-warning' if rate>=50 else 'bg-danger') }}" style="width:{{ rate }}%"></div>
              </div>
              <span class="small fw-semibold text-muted" style="min-width:40px">{{ rate }}%</span>
            </div>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endif %}
{% endif %}

<!-- Generic module table: search / filter / sort / paginate / export -->
<div class="card">
  <div class="card-header d-flex flex-wrap align-items-center justify-content-between gap-2">
    <h6 class="mb-0"><i class="bi bi-table me-2 text-muted"></i>{{ reports[tab].title }} — {{ result.total }} رکورد</h6>
    <div class="d-flex gap-2">
      <a class="btn btn-sm btn-outline-success" href="{{ url_for('reports.export_csv', **filters.to_dict(flat=True)) if filters.get('tab') else url_for('reports.export_csv', tab=tab) }}">
        <i class="bi bi-filetype-csv me-1"></i>خروجی CSV
      </a>
      <a class="btn btn-sm btn-outline-success" href="{{ url_for('reports.export_xlsx', **filters.to_dict(flat=True)) if filters.get('tab') else url_for('reports.export_xlsx', tab=tab) }}">
        <i class="bi bi-file-earmark-excel me-1"></i>خروجی Excel
      </a>
    </div>
  </div>
  <div class="card-body">
    <div class="d-flex flex-wrap align-items-end gap-2 mb-3">
      <form method="GET" class="d-flex gap-2">
        <input type="hidden" name="tab" value="{{ tab }}">
        {% for k, v in filters.items() %}{% if k not in ('q', 'page', 'tab') %}<input type="hidden" name="{{ k }}" value="{{ v }}">{% endif %}{% endfor %}
        <input class="form-control form-control-sm" name="q" value="{{ filters.get('q','') }}" placeholder="جستجو..." style="min-width:200px">
        <button class="btn btn-sm btn-outline-primary"><i class="bi bi-search"></i></button>
      </form>
      {% for f in reports[tab].filters %}
      <select class="form-select form-select-sm" style="max-width:200px" onchange="if(this.value) location.href=this.value">
        <option value="{{ qs_for(**{f.key: none, 'page': none}) }}" {{ 'selected' if not filters.get(f.key) }}>{{ f.label }}: همه</option>
        {% for val, label in f.options %}
        <option value="{{ qs_for(**{f.key: val, 'page': none}) }}" {{ 'selected' if filters.get(f.key) == val }}>{{ label }}</option>
        {% endfor %}
      </select>
      {% endfor %}
      {% if filters|length > 1 %}
      <a class="btn btn-sm btn-outline-secondary" href="{{ url_for('reports.index', tab=tab) }}"><i class="bi bi-x-circle me-1"></i>پاک‌سازی فیلترها</a>
      {% endif %}
    </div>

    <div class="table-responsive">
      <table class="table table-sm table-hover align-middle mb-0">
        <thead>
          <tr>
            {% for key, label in result.columns %}
            {% set is_sorted = filters.get('sort') == key %}
            {% set next_dir = 'asc' if (is_sorted and filters.get('dir') == 'desc') else 'desc' %}
            <th>
              <a class="text-decoration-none text-reset" href="{{ qs_for(sort=key, dir=next_dir, page=none) }}">
                {{ label }}
                {% if is_sorted %}<i class="bi bi-caret-{{ 'up' if filters.get('dir')=='asc' else 'down' }}-fill text-accent"></i>{% endif %}
              </a>
            </th>
            {% endfor %}
          </tr>
        </thead>
        <tbody>
          {% for row in result.rows %}
          <tr>
            {% for key, _ in result.columns %}
            <td class="{{ 'font-mono text-xs' if key in ('id','timestamp','created_at','last_connected','last_sent_at','last_login','last_run') else '' }}">{{ row.get(key, '—') }}</td>
            {% endfor %}
          </tr>
          {% else %}
          <tr><td colspan="{{ result.columns|length }}" class="text-center text-muted py-4">داده‌ای یافت نشد</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    {% if result.total_pages > 1 %}
    <div class="d-flex justify-content-between align-items-center mt-3">
      <span class="text-muted small">صفحه {{ result.page }} از {{ result.total_pages }}</span>
      <div class="d-flex gap-2">
        <a class="btn btn-sm btn-outline-secondary {{ 'disabled' if result.page <= 1 }}" href="{{ qs_for(page=result.page - 1) }}"><i class="bi bi-arrow-right"></i> قبلی</a>
        <a class="btn btn-sm btn-outline-secondary {{ 'disabled' if result.page >= result.total_pages }}" href="{{ qs_for(page=result.page + 1) }}">بعدی <i class="bi bi-arrow-left"></i></a>
      </div>
    </div>
    {% endif %}
  </div>
</div>

{% endblock %}

{% block scripts %}
{% if tab == 'forwarding' and summary and summary.daily %}
<script>
const daily = {{ summary.daily | tojson }};
new Chart(document.getElementById('chartDaily'), {
  type: 'line',
  data: {
    labels: daily.map(d => d.date),
    datasets: [
      { label: 'دریافت‌شده', data: daily.map(d => d.total), borderColor: '#2563eb', backgroundColor: 'rgba(37,99,235,.1)', fill: true, tension: .4, pointRadius: 3 },
      { label: 'ارسال‌شده', data: daily.map(d => d.sent), borderColor: '#16a34a', backgroundColor: 'rgba(22,163,74,.1)', fill: true, tension: .4, pointRadius: 3 },
      { label: 'ناموفق', data: daily.map(d => d.failed), borderColor: '#dc2626', backgroundColor: 'rgba(220,38,38,.1)', fill: true, tension: .4, pointRadius: 3 }
    ]
  },
  options: {
    plugins: { legend: { position: 'bottom', labels: { font: { size: 12 }, color: '#64748b' } } },
    scales: {
      y: { beginAtZero: true, ticks: { precision: 0, color: '#94a3b8', font: { size: 11 } }, grid: { color: '#f1f5f9' } },
      x: { ticks: { color: '#94a3b8', font: { size: 11 } }, grid: { display: false } }
    }
  }
});
</script>
{% endif %}
{% endblock %}