{% extends "admin/admin_base.html" %}

{% block content %}
<div class="container-fluid px-4 py-4">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <div>
      <h1 class="h3 fw-bold mb-1">📊 {{ t_plugin('analytics', 'admin_title', 'Analiză & Statistici Vizualizări') }}</h1>
      <p class="text-secondary mb-0">{{ t_plugin('analytics', 'admin_subtitle', 'Contorizare în timp real pentru articole, audiență, geolocație și timpul de lectură.') }}</p>
    </div>
    <a href="/admin" class="btn btn-outline-secondary rounded-pill px-3">← {{ t_plugin('analytics', 'back_to_admin', 'Înapoi în Admin') }}</a>
  </div>

  <div class="row g-3 mb-4">
    <div class="col-6 col-md-3">
      <div class="card shadow-sm border-0 bg-primary bg-opacity-10 h-100">
        <div class="card-body p-3 text-center">
          <div class="display-6 fw-bold text-primary">{{ total_views }}</div>
          <div class="text-secondary small fw-semibold mt-1">{{ t_plugin('analytics', 'total_views', 'Total Vizualizări Articole') }}</div>
        </div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="card shadow-sm border-0 bg-success bg-opacity-10 h-100">
        <div class="card-body p-3 text-center">
          <div class="display-6 fw-bold text-success">{{ tot_min_str }}</div>
          <div class="text-secondary small fw-semibold mt-1">{{ t_plugin('analytics', 'total_read_time', 'Timp Total Lectură Cititori') }}</div>
        </div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="card shadow-sm border-0 bg-opacity-10 h-100" style="background-color: rgba(111, 66, 193, 0.1);">
        <div class="card-body p-3 text-center">
          <div class="fs-4 fw-bold text-truncate" style="color: #6f42c1;">
            {{ top_referrer.icon }} {{ top_referrer.name }}
          </div>
          <div class="text-secondary small fw-semibold mt-1">{{ t_plugin('analytics', 'card_top_referrer', 'Top Sursă Trafic') }} ({{ top_referrer.pct }}%)</div>
        </div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="card shadow-sm border-0 bg-warning bg-opacity-10 h-100">
        <div class="card-body p-3 text-center">
          <div class="fs-4 fw-bold text-dark text-truncate">{{ top_country.flag }} {{ top_country.name }}</div>
          <div class="text-secondary small fw-semibold mt-1">{{ t_plugin('analytics', 'card_top_country', 'Top Țară Vizitatoare (Geo-IP)') }}</div>
        </div>
      </div>
    </div>
  </div>

  <!-- Navigation Tabs -->
  <ul class="nav nav-tabs border-bottom-0 mb-3" id="analyticsTabs" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link active fw-bold" id="articles-tab" data-bs-toggle="tab" data-bs-target="#articles-pane" type="button" role="tab">
        {{ t_plugin('analytics', 'tab_content', '🏆 Clasament Conținut') }}
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link fw-bold" id="countries-tab" data-bs-toggle="tab" data-bs-target="#countries-pane" type="button" role="tab">
        {{ t_plugin('analytics', 'tab_countries', '🌍 Demografic Țări (Geo-IP)') }}
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link fw-bold" id="languages-tab" data-bs-toggle="tab" data-bs-target="#languages-pane" type="button" role="tab">
        {{ t_plugin('analytics', 'tab_languages', '🌐 Limbă Browser / Audiență') }}
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link fw-bold" id="referrers-tab" data-bs-toggle="tab" data-bs-target="#referrers-pane" type="button" role="tab">
        {{ t_plugin('analytics', 'tab_referrers', '🌐 Surse de Trafic (Referrers)') }}
      </button>
    </li>
  </ul>

  <div class="tab-content" id="analyticsTabsContent">
    <!-- Tab 1: Articles Table -->
    <div class="tab-pane fade show active" id="articles-pane" role="tabpanel">
      <div class="card shadow-sm border-0">
        <div class="card-header bg-body-tertiary fw-bold py-3">
          🏆 {{ t_plugin('analytics', 'ranking_title', 'Clasament Articole după Vizualizări & Lectură') }}
        </div>
        <div class="table-responsive">
          <table class="table table-hover align-middle mb-0">
            <thead class="table-light">
              <tr>
                <th>{{ t_plugin('analytics', 'col_article', 'Articol') }}</th>
                <th class="text-center">{{ t_plugin('analytics', 'col_views', 'Vizualizări') }}</th>
                <th class="text-center">{{ t_plugin('analytics', 'col_avg_time', 'Timp Mediu / Cititor') }}</th>
                <th class="text-center">{{ t_plugin('analytics', 'col_total_time', 'Timp Total Lectură') }}</th>
                <th class="text-center">{{ t_plugin('analytics', 'col_est_read', 'Est. Lectură') }}</th>
                <th class="text-end">{{ t_plugin('analytics', 'col_actions', 'Acțiuni') }}</th>
              </tr>
            </thead>
            <tbody>
              {% for item in items %}
              <tr>
                <td>
                  {% if item.type == 'product' %}
                    <span class="badge bg-success me-2">📦 {{ t_plugin('analytics', 'badge_product', 'Produs') }}</span>
                    {% if item.draft %}<span class="badge bg-secondary ms-2">{{ t_plugin('analytics', 'badge_inactive', 'Inactiv') }}</span>{% endif %}
                  {% else %}
                    <span class="badge bg-primary me-2">📝 {{ t_plugin('analytics', 'badge_blog', 'Blog') }}</span>
                    {% if item.draft %}<span class="badge bg-warning text-dark ms-2">{{ t_plugin('analytics', 'badge_draft', 'Ciornă') }}</span>{% endif %}
                  {% endif %}
                  <a href="{{ item.url }}" target="_blank" class="fw-bold text-decoration-none text-body">{{ item.title }}</a>
                  <div class="small text-secondary">{{ item.info }}</div>
                </td>
                <td class="text-center"><span class="badge bg-primary fs-6">{{ item.views }}</span></td>
                <td class="text-center fw-semibold">{{ item.avg_str }}</td>
                <td class="text-center text-secondary">{{ item.tot_str }}</td>
                <td class="text-center"><span class="badge bg-secondary">{{ item.est_min }} min</span></td>
                <td class="text-end">
                  <a href="{{ item.edit_url }}" class="btn btn-sm btn-outline-primary rounded-pill px-3">{{ t_plugin('analytics', 'btn_edit', 'Editează') }}</a>
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- Tab 2: Countries Geo-IP -->
    <div class="tab-pane fade" id="countries-pane" role="tabpanel">
      <div class="row g-4">
        <div class="col-md-6">
          <div class="card shadow-sm border-0 h-100">
            <div class="card-header bg-body-tertiary fw-bold py-3">
              📊 {{ t_plugin('analytics', 'title_countries_chart', 'Distribuție Vizitatori pe Țări (Geo-IP)') }}
            </div>
            <div class="card-body p-4 d-flex align-items-center justify-content-center">
              <canvas id="countryChart" style="max-height: 320px;"></canvas>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="card shadow-sm border-0 h-100">
            <div class="card-header bg-body-tertiary fw-bold py-3">
              🌍 {{ t_plugin('analytics', 'title_countries_table', 'Clasament Țări după Numărul de Vizitatori') }}
            </div>
            <div class="table-responsive">
              <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                  <tr>
                    <th>{{ t_plugin('analytics', 'col_country', 'Țară') }}</th>
                    <th class="text-center">{{ t_plugin('analytics', 'col_views', 'Vizualizări') }}</th>
                    <th class="text-end">{{ t_plugin('analytics', 'col_pct', 'Procentaj') }}</th>
                  </tr>
                </thead>
                <tbody>
                  {% for c in country_stats %}
                  <tr>
                    <td class="fw-semibold fs-6">
                      <span class="fs-5 me-2">{{ c.flag }}</span> {{ c.name }} <span class="badge bg-light text-secondary border ms-1">{{ c.code }}</span>
                    </td>
                    <td class="text-center"><span class="badge bg-info text-dark fs-6">{{ c.views }}</span></td>
                    <td class="text-end">
                      <div class="d-flex align-items-center justify-content-end gap-2">
                        <div class="progress flex-grow-1" style="height: 6px; max-width: 80px;">
                          <div class="progress-bar bg-primary" role="progressbar" style="width: {{ c.pct }}%"></div>
                        </div>
                        <span class="fw-bold text-secondary small">{{ c.pct }}%</span>
                      </div>
                    </td>
                  </tr>
                  {% else %}
                  <tr>
                    <td colspan="3" class="text-center text-muted py-4">{{ t_plugin('analytics', 'no_countries_data', 'Nu există date despre țări înregistrate încă.') }}</td>
                  </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Tab 3: Languages Browser -->
    <div class="tab-pane fade" id="languages-pane" role="tabpanel">
      <div class="row g-4">
        <div class="col-md-6">
          <div class="card shadow-sm border-0 h-100">
            <div class="card-header bg-body-tertiary fw-bold py-3">
              🌐 {{ t_plugin('analytics', 'title_languages_chart', 'Limba Solicitată de Cititori (Locale)') }}
            </div>
            <div class="card-body p-4 d-flex align-items-center justify-content-center">
              <canvas id="localeChart" style="max-height: 320px;"></canvas>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="card shadow-sm border-0 h-100">
            <div class="card-header bg-body-tertiary fw-bold py-3">
              📋 {{ t_plugin('analytics', 'title_languages_table', 'Lista Limbilor de Navigare') }}
            </div>
            <div class="table-responsive">
              <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                  <tr>
                    <th>{{ t_plugin('analytics', 'col_language', 'Limbă') }}</th>
                    <th class="text-center">{{ t_plugin('analytics', 'col_views', 'Vizualizări') }}</th>
                    <th class="text-end">{{ t_plugin('analytics', 'col_pct', 'Procentaj') }}</th>
                  </tr>
                </thead>
                <tbody>
                  {% for l in locale_stats %}
                  <tr>
                    <td class="fw-semibold fs-6">
                      <span class="badge bg-secondary me-2">{{ l.code }}</span>
                      {% if l.code == 'RO' or l.code == 'ro' %}Română
                      {% elif l.code == 'EN' or l.code == 'en' %}English
                      {% elif l.code == 'FR' or l.code == 'fr' %}Français
                      {% elif l.code == 'DE' or l.code == 'de' %}Deutsch
                      {% else %}{{ l.code }}
                      {% endif %}
                    </td>
                    <td class="text-center"><span class="badge bg-success fs-6">{{ l.views }}</span></td>
                    <td class="text-end">
                      <div class="d-flex align-items-center justify-content-end gap-2">
                        <div class="progress flex-grow-1" style="height: 6px; max-width: 80px;">
                          <div class="progress-bar bg-success" role="progressbar" style="width: {{ l.pct }}%"></div>
                        </div>
                        <span class="fw-bold text-secondary small">{{ l.pct }}%</span>
                      </div>
                    </td>
                  </tr>
                  {% else %}
                  <tr>
                    <td colspan="3" class="text-center text-muted py-4">{{ t_plugin('analytics', 'no_languages_data', 'Nu există date despre limbi înregistrate încă.') }}</td>
                  </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Tab 4: Referrers -->
    <div class="tab-pane fade" id="referrers-pane" role="tabpanel">
      <div class="card shadow-sm border-0">
        <div class="card-header bg-body-tertiary fw-bold py-3">
          🌐 {{ t_plugin('analytics', 'title_referrers_table', 'Top Surse de Trafic (Referrers)') }}
        </div>
        <div class="table-responsive">
          <table class="table table-hover align-middle mb-0">
            <thead class="table-light">
              <tr>
                <th>{{ t_plugin('analytics', 'col_referrer_source', 'Sursă / Domeniu Referrer') }}</th>
                <th class="text-center">{{ t_plugin('analytics', 'col_referrer_views', 'Vizualizări') }}</th>
                <th class="text-end">{{ t_plugin('analytics', 'col_referrer_pct', 'Procentaj Trafic') }}</th>
              </tr>
            </thead>
            <tbody>
              {% for ref in referrer_stats %}
              <tr>
                <td class="fw-semibold fs-6">
                  <span class="fs-5 me-2">{{ ref.icon }}</span>
                  <span>{{ ref.name }}</span>
                  {% if ref.domain %}
                  <span class="text-secondary small ms-2 fw-normal opacity-75">({{ ref.domain }})</span>
                  {% endif %}
                </td>
                <td class="text-center"><span class="badge bg-primary fs-6">{{ ref.views }}</span></td>
                <td class="text-end">
                  <div class="d-flex align-items-center justify-content-end gap-2">
                    <div class="progress flex-grow-1" style="height: 6px; max-width: 100px;">
                      <div class="progress-bar bg-primary" role="progressbar" style="width: {{ ref.pct }}%"></div>
                    </div>
                    <span class="fw-bold text-secondary small">{{ ref.pct }}%</span>
                  </div>
                </td>
              </tr>
              {% else %}
              <tr>
                <td colspan="3" class="text-center text-muted py-4">{{ t_plugin('analytics', 'no_referrers_data', 'Nu există date despre sursele de trafic înregistrate încă.') }}</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
  // Tab Switcher
  const tabButtons = document.querySelectorAll('#analyticsTabs button[data-bs-toggle="tab"]');
  tabButtons.forEach(btn => {
    btn.addEventListener('click', function(e) {
      e.preventDefault();
      tabButtons.forEach(b => b.classList.remove('active'));
      document.querySelectorAll('#analyticsTabsContent .tab-pane').forEach(p => p.classList.remove('show', 'active'));
      this.classList.add('active');
      const targetSelector = this.getAttribute('data-bs-target');
      if (targetSelector) {
        const target = document.querySelector(targetSelector);
        if (target) target.classList.add('show', 'active');
      }
    });
  });

  // Chart 1: Countries
  const countryLabels = [{% for c in country_stats %}"{{ c.flag }} {{ c.name }}"{% if not loop.last %}, {% endif %}{% endfor %}];
  const countryData = [{% for c in country_stats %}{{ c.views }}{% if not loop.last %}, {% endif %}{% endfor %}];
  
  if (document.getElementById("countryChart") && countryData.length > 0) {
    new Chart(document.getElementById("countryChart"), {
      type: 'doughnut',
      data: {
        labels: countryLabels,
        datasets: [{
          data: countryData,
          backgroundColor: ['#0d6efd', '#198754', '#ffc107', '#0dcaf0', '#6c757d', '#d63384', '#fd7e14']
        }]
      },
      options: {
        responsive: true,
        plugins: {
          legend: { position: 'bottom' }
        }
      }
    });
  }

  // Chart 2: Locales
  const localeLabels = [{% for l in locale_stats %}"{{ l.code }}"{% if not loop.last %}, {% endif %}{% endfor %}];
  const localeData = [{% for l in locale_stats %}{{ l.views }}{% if not loop.last %}, {% endif %}{% endfor %}];
  
  if (document.getElementById("localeChart") && localeData.length > 0) {
    new Chart(document.getElementById("localeChart"), {
      type: 'pie',
      data: {
        labels: localeLabels,
        datasets: [{
          data: localeData,
          backgroundColor: ['#198754', '#0d6efd', '#ffc107', '#6f42c1', '#20c997']
        }]
      },
      options: {
        responsive: true,
        plugins: {
          legend: { position: 'bottom' }
        }
      }
    });
  }
});
</script>
{% endblock %}