{% extends "layouts/base.html" %}
{% load humanize i18n %}
{% load static %}

{% block extrastyle %}
<link rel="stylesheet" href="{% static 'css/reports.css' %}">
<style>
/* Enhanced Social Report Styles */
.social-report-container {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  padding: 2rem 0;
}

.social-header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 25px;
  padding: 3rem 2rem;
  text-align: center;
  margin-bottom: 3rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.social-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 3rem;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1rem;
  text-shadow: 0 0 30px rgba(102, 126, 234, 0.3);
}

.social-subtitle {
  color: #6c757d;
  font-size: 1.2rem;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.stat-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, var(--card-color), var(--card-color-light));
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}

.stat-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.stat-card:hover::before {
  opacity: 0.1;
}

.stat-card.posts { --card-color: #007bff; --card-color-light: #0056b3; }
.stat-card.likes { --card-color: #28a745; --card-color-light: #1e7e34; }
.stat-card.comments { --card-color: #17a2b8; --card-color-light: #117a8b; }
.stat-card.shares { --card-color: #ffc107; --card-color-light: #e0a800; }
.stat-card.users { --card-color: #6c757d; --card-color-light: #545b62; }
.stat-card.follows { --card-color: #343a40; --card-color-light: #212529; }
.stat-card.hashtags { --card-color: #dc3545; --card-color-light: #c82333; }
.stat-card.recent { --card-color: #6f42c1; --card-color-light: #5a2d91; }

.stat-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 2rem;
  color: white;
  background: linear-gradient(135deg, var(--card-color), var(--card-color-light));
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  transition: all 0.4s ease;
}

.stat-card:hover .stat-icon {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.stat-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: #495057;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.stat-value {
  font-family: 'Orbitron', sans-serif;
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--card-color);
  margin-bottom: 0.5rem;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.stat-description {
  color: #6c757d;
  font-size: 0.9rem;
  margin: 0;
}

.chart-section {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 25px;
  padding: 2.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.chart-header {
  text-align: center;
  margin-bottom: 2rem;
}

.chart-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: #495057;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.chart-description {
  color: #6c757d;
  font-size: 1rem;
  margin: 0;
}

.chart-container {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 15px;
  padding: 1.5rem;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1);
}

.table-section {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 25px;
  padding: 2.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.enhanced-table {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.enhanced-table thead {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
}

.enhanced-table th {
  border: none;
  padding: 1.5rem 1rem;
  font-weight: 600;
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.9rem;
}

.enhanced-table td {
  padding: 1.25rem 1rem;
  border-bottom: 1px solid #e9ecef;
  text-align: center;
  vertical-align: middle;
  transition: all 0.3s ease;
}

.enhanced-table tbody tr {
  transition: all 0.3s ease;
}

.enhanced-table tbody tr:hover {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
  transform: scale(1.01);
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  margin-right: 0.75rem;
}

.content-preview {
  max-width: 300px;
  text-align: left;
  line-height: 1.4;
}

.engagement-badge {
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-likes { background: rgba(40, 167, 69, 0.1); color: #28a745; border: 1px solid rgba(40, 167, 69, 0.2); }
.badge-comments { background: rgba(23, 162, 184, 0.1); color: #17a2b8; border: 1px solid rgba(23, 162, 184, 0.2); }
.badge-shares { background: rgba(255, 193, 7, 0.1); color: #ffc107; border: 1px solid rgba(255, 193, 7, 0.2); }
.badge-posts { background: rgba(0, 123, 255, 0.1); color: #007bff; border: 1px solid rgba(0, 123, 255, 0.2); }

.hashtag-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
  border: 1px solid rgba(220, 53, 69, 0.2);
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.hashtag-tag:hover {
  background: rgba(220, 53, 69, 0.2);
  transform: translateY(-2px);
}

.content-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.content-type-card {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 15px;
  padding: 2rem;
  text-align: center;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.content-type-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.content-type-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-size: 1.5rem;
  color: white;
  background: linear-gradient(135deg, var(--type-color), var(--type-color-light));
}

.content-type-card.image { --type-color: #007bff; --type-color-light: #0056b3; }
.content-type-card.video { --type-color: #28a745; --type-color-light: #1e7e34; }
.content-type-card.link { --type-color: #17a2b8; --type-color-light: #117a8b; }
.content-type-card.pinned { --type-color: #ffc107; --type-color-light: #e0a800; }

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  z-index: 10;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.empty-state {
  text-align: center;
  padding: 3rem;
  color: #6c757d;
}

.empty-state i {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.empty-state h4 {
  margin-bottom: 1rem;
  color: #495057;
}

@media (max-width: 768px) {
  .social-title { font-size: 2rem; }
  .stats-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
  .chart-section, .table-section { padding: 1.5rem; }
  .content-type-grid { grid-template-columns: 1fr; }
  .enhanced-table { font-size: 0.9rem; }
  .enhanced-table th, .enhanced-table td { padding: 1rem 0.5rem; }
}
</style>
{% endblock extrastyle %}

{% block breadcrumbs %}
<li class="breadcrumb-item"><a href="{% url 'dashboard' %}">{% trans "Dashboard" %}</a></li>
<li class="breadcrumb-item"><a href="{% url 'reports:dashboard' %}">{% trans "Relatórios" %}</a></li>
<li class="breadcrumb-item active" aria-current="page">{% trans "Relatório da Rede Social" %}</li>
{% endblock breadcrumbs %}

{% block page_header %}
<h5 class="display-5">{% trans "Relatório da Rede Social" %}</h5>
{% endblock page_header %}

{% block content %}
<div class="social-report-container">
  <div class="container">
    <!-- Header Section -->
    <div class="social-header">
      <h1 class="social-title">
        <i class="fas fa-users me-3"></i>
        {% trans "Relatório da Rede Social" %}
      </h1>
      <p class="social-subtitle">
        {% trans "Analise engajamento, usuários mais ativos, posts populares e estatísticas completas da rede social." %}
      </p>
    </div>
    
    <!-- Statistics Grid -->
    <div class="stats-grid">
      <div class="stat-card posts">
        <div class="stat-icon">
          <i class="fas fa-file-alt"></i>
        </div>
        <h5 class="stat-title">{% trans "Total de Posts" %}</h5>
        <div class="stat-value">{{ total_posts|intcomma }}</div>
        <p class="stat-description">{% trans "Posts criados na plataforma" %}</p>
      </div>
      
      <div class="stat-card likes">
        <div class="stat-icon">
          <i class="fas fa-heart"></i>
        </div>
        <h5 class="stat-title">{% trans "Total de Curtidas" %}</h5>
        <div class="stat-value">{{ total_likes|intcomma }}</div>
        <p class="stat-description">{% trans "Interações de curtidas" %}</p>
      </div>
      
      <div class="stat-card comments">
        <div class="stat-icon">
          <i class="fas fa-comments"></i>
        </div>
        <h5 class="stat-title">{% trans "Total de Comentários" %}</h5>
        <div class="stat-value">{{ total_comments|intcomma }}</div>
        <p class="stat-description">{% trans "Comentários realizados" %}</p>
      </div>
      
      <div class="stat-card shares">
        <div class="stat-icon">
          <i class="fas fa-share"></i>
        </div>
        <h5 class="stat-title">{% trans "Total de Compartilhamentos" %}</h5>
        <div class="stat-value">{{ total_shares|intcomma }}</div>
        <p class="stat-description">{% trans "Posts compartilhados" %}</p>
      </div>
      
      <div class="stat-card users">
        <div class="stat-icon">
          <i class="fas fa-users"></i>
        </div>
        <h5 class="stat-title">{% trans "Usuários Ativos" %}</h5>
        <div class="stat-value">{{ total_users|intcomma }}</div>
        <p class="stat-description">{% trans "Usuários participativos" %}</p>
      </div>
      
      <div class="stat-card follows">
        <div class="stat-icon">
          <i class="fas fa-user-plus"></i>
        </div>
        <h5 class="stat-title">{% trans "Conexões" %}</h5>
        <div class="stat-value">{{ total_follows|intcomma }}</div>
        <p class="stat-description">{% trans "Relacionamentos criados" %}</p>
      </div>
      
      <div class="stat-card hashtags">
        <div class="stat-icon">
          <i class="fas fa-hashtag"></i>
        </div>
        <h5 class="stat-title">{% trans "Hashtags" %}</h5>
        <div class="stat-value">{{ total_hashtags|intcomma }}</div>
        <p class="stat-description">{% trans "Tags utilizadas" %}</p>
      </div>
      
      <div class="stat-card recent">
        <div class="stat-icon">
          <i class="fas fa-calendar-day"></i>
        </div>
        <h5 class="stat-title">{% trans "Posts (30 dias)" %}</h5>
        <div class="stat-value">{{ posts_30_dias|intcomma }}</div>
        <p class="stat-description">{% trans "Atividade recente" %}</p>
      </div>
    </div>

    <!-- Posts per Day Chart -->
    <div class="chart-section">
      <div class="chart-header">
        <h2 class="chart-title">
          <i class="fas fa-chart-line me-2"></i>
          {% trans "Posts por Dia (Últimos 30 dias)" %}
        </h2>
        <p class="chart-description">
          {% trans "Evolução da atividade na rede social ao longo do tempo" %}
        </p>
      </div>
      <div class="chart-container" style="height: 400px; position: relative;">
        <canvas id="postsPorDia"></canvas>
        <div class="loading-overlay" id="postsChartLoading" style="display: none;">
          <div class="spinner"></div>
        </div>
      </div>
    </div>

    <!-- Most Active Users -->
    <div class="table-section">
      <div class="chart-header">
        <h2 class="chart-title">
          <i class="fas fa-trophy me-2"></i>
          {% trans "Usuários Mais Ativos" %}
        </h2>
        <p class="chart-description">
          {% trans "Top 10 usuários com mais posts e engajamento" %}
        </p>
      </div>
      <div class="table-responsive">
        <table class="table enhanced-table">
          <thead>
            <tr>
              <th><i class="fas fa-user me-2"></i>{% trans "Usuário" %}</th>
              <th><i class="fas fa-file-alt me-2"></i>{% trans "Posts" %}</th>
              <th><i class="fas fa-heart me-2"></i>{% trans "Curtidas Recebidas" %}</th>
              <th><i class="fas fa-comments me-2"></i>{% trans "Comentários Recebidos" %}</th>
            </tr>
          </thead>
          <tbody>
            {% for usuario in usuarios_mais_ativos %}
              <tr>
                <td>
                  <div class="d-flex align-items-center">
                    <div class="user-avatar">
                      {{ usuario.author__username|first|upper }}
                    </div>
                    <strong>{{ usuario.author__username }}</strong>
                  </div>
                </td>
                <td>
                  <span class="engagement-badge badge-posts">{{ usuario.total_posts }}</span>
                </td>
                <td>
                  <span class="engagement-badge badge-likes">{{ usuario.total_likes_received|default:0 }}</span>
                </td>
                <td>
                  <span class="engagement-badge badge-comments">{{ usuario.total_comments_received|default:0 }}</span>
                </td>
              </tr>
            {% empty %}
              <tr>
                <td colspan="4" class="empty-state">
                  <i class="fas fa-users"></i>
                  <h4>{% trans "Nenhum usuário ativo encontrado" %}</h4>
                  <p>{% trans "Não há dados de usuários ativos para exibir." %}</p>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

    <!-- Most Popular Posts -->
    <div class="table-section">
      <div class="chart-header">
        <h2 class="chart-title">
          <i class="fas fa-fire me-2"></i>
          {% trans "Posts Mais Populares" %}
        </h2>
        <p class="chart-description">
          {% trans "Posts com maior engajamento (likes + comentários + compartilhamentos)" %}
        </p>
      </div>
      <div class="table-responsive">
        <table class="table enhanced-table">
          <thead>
            <tr>
              <th><i class="fas fa-user me-2"></i>{% trans "Autor" %}</th>
              <th><i class="fas fa-file-alt me-2"></i>{% trans "Conteúdo" %}</th>
              <th><i class="fas fa-heart me-2"></i>{% trans "Curtidas" %}</th>
              <th><i class="fas fa-comments me-2"></i>{% trans "Comentários" %}</th>
              <th><i class="fas fa-share me-2"></i>{% trans "Compartilhamentos" %}</th>
              <th><i class="fas fa-calendar me-2"></i>{% trans "Data" %}</th>
            </tr>
          </thead>
          <tbody>
            {% for post in posts_mais_populares %}
              <tr>
                <td>
                  <div class="d-flex align-items-center">
                    <div class="user-avatar">
                      {{ post.author.username|first|upper }}
                    </div>
                    <strong>{{ post.author.username }}</strong>
                  </div>
                </td>
                <td>
                  <div class="content-preview" title="{{ post.content }}">
                    {{ post.content|truncatechars:100 }}
                  </div>
                </td>
                <td>
                  <span class="engagement-badge badge-likes">{{ post.likes_count }}</span>
                </td>
                <td>
                  <span class="engagement-badge badge-comments">{{ post.comments_count }}</span>
                </td>
                <td>
                  <span class="engagement-badge badge-shares">{{ post.shares_count }}</span>
                </td>
                <td>
                  <small>{{ post.created_at|date:"d/m/Y H:i" }}</small>
                </td>
              </tr>
            {% empty %}
              <tr>
                <td colspan="6" class="empty-state">
                  <i class="fas fa-fire"></i>
                  <h4>{% trans "Nenhum post popular encontrado" %}</h4>
                  <p>{% trans "Não há posts com engajamento suficiente para exibir." %}</p>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

    <!-- Popular Hashtags -->
    <div class="chart-section">
      <div class="chart-header">
        <h2 class="chart-title">
          <i class="fas fa-hashtag me-2"></i>
          {% trans "Hashtags Mais Populares" %}
        </h2>
        <p class="chart-description">
          {% trans "Hashtags com maior uso e engajamento" %}
        </p>
      </div>
      <div class="row">
        <div class="col-md-6">
          <div class="chart-container" style="height: 400px; position: relative;">
            <canvas id="hashtagsPopulares"></canvas>
            <div class="loading-overlay" id="hashtagsChartLoading" style="display: none;">
              <div class="spinner"></div>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="table-responsive">
            <table class="table enhanced-table">
              <thead>
                <tr>
                  <th><i class="fas fa-hashtag me-2"></i>{% trans "Hashtag" %}</th>
                  <th><i class="fas fa-file-alt me-2"></i>{% trans "Posts" %}</th>
                  <th><i class="fas fa-heart me-2"></i>{% trans "Curtidas" %}</th>
                </tr>
              </thead>
              <tbody>
                {% for hashtag in hashtags_populares %}
                  <tr>
                    <td>
                      <div class="hashtag-tag">
                        <i class="fas fa-hashtag"></i>
                        <strong>{{ hashtag.hashtag__name }}</strong>
                      </div>
                    </td>
                    <td>
                      <span class="engagement-badge badge-posts">{{ hashtag.total_posts }}</span>
                    </td>
                    <td>
                      <span class="engagement-badge badge-likes">{{ hashtag.total_likes|default:0 }}</span>
                    </td>
                  </tr>
                {% empty %}
                  <tr>
                    <td colspan="3" class="empty-state">
                      <i class="fas fa-hashtag"></i>
                      <h4>{% trans "Nenhuma hashtag encontrada" %}</h4>
                      <p>{% trans "Não há hashtags populares para exibir." %}</p>
                    </td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    <!-- Content Types -->
    <div class="chart-section">
      <div class="chart-header">
        <h2 class="chart-title">
          <i class="fas fa-chart-pie me-2"></i>
          {% trans "Tipos de Conteúdo" %}
        </h2>
        <p class="chart-description">
          {% trans "Distribuição dos tipos de conteúdo na rede social" %}
        </p>
      </div>
      <div class="content-type-grid">
        <div class="content-type-card image">
          <div class="content-type-icon">
            <i class="fas fa-image"></i>
          </div>
          <h5>{% trans "Posts com Imagem" %}</h5>
          <h4 class="stat-value">{{ posts_com_imagem|intcomma }}</h4>
        </div>
        <div class="content-type-card video">
          <div class="content-type-icon">
            <i class="fas fa-video"></i>
          </div>
          <h5>{% trans "Posts com Vídeo" %}</h5>
          <h4 class="stat-value">{{ posts_com_video|intcomma }}</h4>
        </div>
        <div class="content-type-card link">
          <div class="content-type-icon">
            <i class="fas fa-link"></i>
          </div>
          <h5>{% trans "Posts com Link" %}</h5>
          <h4 class="stat-value">{{ posts_com_link|intcomma }}</h4>
        </div>
        <div class="content-type-card pinned">
          <div class="content-type-icon">
            <i class="fas fa-thumbtack"></i>
          </div>
          <h5>{% trans "Posts Fixados" %}</h5>
          <h4 class="stat-value">{{ posts_fixados|intcomma }}</h4>
        </div>
      </div>
    </div>

    <!-- Reactions by Type -->
    <div class="chart-section">
      <div class="chart-header">
        <h2 class="chart-title">
          <i class="fas fa-smile me-2"></i>
          {% trans "Reações por Tipo" %}
        </h2>
        <p class="chart-description">
          {% trans "Distribuição dos tipos de reações dos usuários" %}
        </p>
      </div>
      <div class="chart-container" style="height: 400px; position: relative;">
        <canvas id="reacoesPorTipo"></canvas>
        <div class="loading-overlay" id="reactionsChartLoading" style="display: none;">
          <div class="spinner"></div>
        </div>
      </div>
    </div>

    <!-- Most Influential Users -->
    <div class="table-section">
      <div class="chart-header">
        <h2 class="chart-title">
          <i class="fas fa-crown me-2"></i>
          {% trans "Usuários Mais Influentes" %}
        </h2>
        <p class="chart-description">
          {% trans "Usuários com maior número de seguidores" %}
        </p>
      </div>
      <div class="table-responsive">
        <table class="table enhanced-table">
          <thead>
            <tr>
              <th><i class="fas fa-user me-2"></i>{% trans "Usuário" %}</th>
              <th><i class="fas fa-users me-2"></i>{% trans "Seguidores" %}</th>
              <th><i class="fas fa-user-plus me-2"></i>{% trans "Seguindo" %}</th>
              <th><i class="fas fa-file-alt me-2"></i>{% trans "Posts" %}</th>
            </tr>
          </thead>
          <tbody>
            {% for usuario in usuarios_influentes %}
              <tr>
                <td>
                  <div class="d-flex align-items-center">
                    <div class="user-avatar">
                      {{ usuario.user.username|first|upper }}
                    </div>
                    <strong>{{ usuario.user.username }}</strong>
                  </div>
                </td>
                <td>
                  <span class="engagement-badge badge-likes">{{ usuario.followers_count }}</span>
                </td>
                <td>
                  <span class="engagement-badge badge-comments">{{ usuario.following_count }}</span>
                </td>
                <td>
                  <span class="engagement-badge badge-posts">{{ usuario.posts_count }}</span>
                </td>
              </tr>
            {% empty %}
              <tr>
                <td colspan="4" class="empty-state">
                  <i class="fas fa-crown"></i>
                  <h4>{% trans "Nenhum usuário influente encontrado" %}</h4>
                  <p>{% trans "Não há dados de usuários influentes para exibir." %}</p>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

    <!-- Most Liked Comments -->
    <div class="table-section">
      <div class="chart-header">
        <h2 class="chart-title">
          <i class="fas fa-comment-dots me-2"></i>
          {% trans "Comentários Mais Curtidos" %}
        </h2>
        <p class="chart-description">
          {% trans "Comentários com maior engajamento" %}
        </p>
      </div>
      <div class="table-responsive">
        <table class="table enhanced-table">
          <thead>
            <tr>
              <th><i class="fas fa-user me-2"></i>{% trans "Autor" %}</th>
              <th><i class="fas fa-comment me-2"></i>{% trans "Comentário" %}</th>
              <th><i class="fas fa-heart me-2"></i>{% trans "Curtidas" %}</th>
              <th><i class="fas fa-file-alt me-2"></i>{% trans "Post" %}</th>
              <th><i class="fas fa-calendar me-2"></i>{% trans "Data" %}</th>
            </tr>
          </thead>
          <tbody>
            {% for comentario in comentarios_populares %}
              <tr>
                <td>
                  <div class="d-flex align-items-center">
                    <div class="user-avatar">
                      {{ comentario.author.username|first|upper }}
                    </div>
                    <strong>{{ comentario.author.username }}</strong>
                  </div>
                </td>
                <td>
                  <div class="content-preview" title="{{ comentario.content }}">
                    {{ comentario.content|truncatechars:100 }}
                  </div>
                </td>
                <td>
                  <span class="engagement-badge badge-likes">{{ comentario.likes_count }}</span>
                </td>
                <td>
                  <small>{{ comentario.post.content|truncatechars:50 }}</small>
                </td>
                <td>
                  <small>{{ comentario.created_at|date:"d/m/Y H:i" }}</small>
                </td>
              </tr>
            {% empty %}
              <tr>
                <td colspan="5" class="empty-state">
                  <i class="fas fa-comment-dots"></i>
                  <h4>{% trans "Nenhum comentário popular encontrado" %}</h4>
                  <p>{% trans "Não há comentários com engajamento suficiente para exibir." %}</p>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<!-- Enhanced Chart Scripts -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Enhanced Posts per Day Chart
    const ctxPosts = document.getElementById('postsPorDia').getContext('2d');
    const postsLabels = {{ posts_por_dia_labels|safe }};
    const postsValues = {{ posts_por_dia_values|safe }};
    
    if (postsLabels.length > 0 && postsValues.length > 0) {
        new Chart(ctxPosts, {
            type: 'line',
            data: {
                labels: postsLabels,
                datasets: [{
                    label: 'Posts',
                    data: postsValues,
                    borderColor: 'rgb(102, 126, 234)',
                    backgroundColor: 'rgba(102, 126, 234, 0.1)',
                    tension: 0.4,
                    fill: true,
                    pointBackgroundColor: 'rgb(102, 126, 234)',
                    pointBorderColor: '#fff',
                    pointBorderWidth: 2,
                    pointRadius: 6,
                    pointHoverRadius: 8
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    },
                    title: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            stepSize: 1,
                            font: {
                                size: 12
                            }
                        },
                        grid: {
                            color: 'rgba(0, 0, 0, 0.1)'
                        }
                    },
                    x: {
                        ticks: {
                            font: {
                                size: 12
                            }
                        },
                        grid: {
                            color: 'rgba(0, 0, 0, 0.1)'
                        }
                    }
                },
                interaction: {
                    intersect: false,
                    mode: 'index'
                }
            }
        });
    } else {
        ctxPosts.font = '16px Arial';
        ctxPosts.fillStyle = '#6c757d';
        ctxPosts.textAlign = 'center';
        ctxPosts.fillText('Nenhum dado disponível para o período', ctxPosts.canvas.width / 2, ctxPosts.canvas.height / 2);
    }

    // Enhanced Hashtags Popular Chart
    const ctxHashtags = document.getElementById('hashtagsPopulares').getContext('2d');
    const hashtagsLabels = {{ hashtags_labels|safe }};
    const hashtagsValues = {{ hashtags_values|safe }};
    
    if (hashtagsLabels.length > 0 && hashtagsValues.length > 0) {
        new Chart(ctxHashtags, {
            type: 'doughnut',
            data: {
                labels: hashtagsLabels,
                datasets: [{
                    data: hashtagsValues,
                    backgroundColor: [
                        'rgba(220, 53, 69, 0.8)',
                        'rgba(102, 126, 234, 0.8)',
                        'rgba(255, 193, 7, 0.8)',
                        'rgba(40, 167, 69, 0.8)',
                        'rgba(23, 162, 184, 0.8)',
                        'rgba(111, 66, 193, 0.8)',
                        'rgba(253, 126, 20, 0.8)',
                        'rgba(108, 117, 125, 0.8)'
                    ],
                    borderWidth: 3,
                    borderColor: '#fff'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            padding: 20,
                            usePointStyle: true,
                            font: {
                                size: 12
                            }
                        }
                    }
                }
            }
        });
    } else {
        ctxHashtags.font = '16px Arial';
        ctxHashtags.fillStyle = '#6c757d';
        ctxHashtags.textAlign = 'center';
        ctxHashtags.fillText('Nenhuma hashtag disponível', ctxHashtags.canvas.width / 2, ctxHashtags.canvas.height / 2);
    }

    // Enhanced Reactions by Type Chart
    const ctxReacoes = document.getElementById('reacoesPorTipo').getContext('2d');
    const reacoesLabels = {{ reacoes_labels|safe }};
    const reacoesValues = {{ reacoes_values|safe }};
    
    if (reacoesLabels.length > 0 && reacoesValues.length > 0) {
        new Chart(ctxReacoes, {
            type: 'bar',
            data: {
                labels: reacoesLabels,
                datasets: [{
                    label: 'Quantidade',
                    data: reacoesValues,
                    backgroundColor: [
                        'rgba(220, 53, 69, 0.8)',
                        'rgba(102, 126, 234, 0.8)',
                        'rgba(255, 193, 7, 0.8)',
                        'rgba(40, 167, 69, 0.8)',
                        'rgba(23, 162, 184, 0.8)',
                        'rgba(111, 66, 193, 0.8)'
                    ],
                    borderWidth: 0,
                    borderRadius: 8,
                    borderSkipped: false
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: {
                            color: 'rgba(0, 0, 0, 0.1)'
                        },
                        ticks: {
                            font: {
                                size: 12
                            }
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        },
                        ticks: {
                            font: {
                                size: 12
                            }
                        }
                    }
                }
            }
        });
    } else {
        ctxReacoes.font = '16px Arial';
        ctxReacoes.fillStyle = '#6c757d';
        ctxReacoes.textAlign = 'center';
        ctxReacoes.fillText('Nenhuma reação disponível', ctxReacoes.canvas.width / 2, ctxReacoes.canvas.height / 2);
    }

    // Add smooth scrolling for better UX
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });

    // Add loading animations
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
            }
        });
    }, observerOptions);

    // Observe all stat cards and sections
    document.querySelectorAll('.stat-card, .chart-section, .table-section').forEach(el => {
        el.style.opacity = '0';
        el.style.transform = 'translateY(30px)';
        el.style.transition = 'all 0.6s ease';
        observer.observe(el);
    });
});
</script>
{% endblock %}