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

{% block extrastyle %}
<link rel="stylesheet" href="{% static 'css/reports.css' %}">
<style>
  .report-meta {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
  }
  
  .report-meta .badge {
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
  }
  
  @media (max-width: 768px) {
    .report-meta {
      justify-content: center;
    }
  }
</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 de Inventário" %}</li>
{% endblock breadcrumbs %}

{% block page_header %}
<h5 class="display-5">{% trans "Relatório de Movimentações de Itens" %}</h5>
{% endblock page_header %}

{% block content %}
<div class="reports-container">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-12">
        <div class="report-container">
          <div class="report-header">
            <h1 class="report-title">
              <i class="fas fa-boxes me-3"></i>
              {% trans "Relatório de Movimentações de Itens" %}
            </h1>
            <p class="reports-subtitle">
              {% trans "Acompanhe todas as movimentações de itens no inventário. Visualize tendências, itens mais movimentados e estatísticas detalhadas." %}
            </p>
            <div class="report-meta">
              <span class="badge bg-info">
                <i class="fas fa-calendar me-1"></i>
                {% trans "Período" %}: {{ periodo_dias }} {% trans "dias" %}
              </span>
              <span class="badge bg-success">
                <i class="fas fa-chart-line me-1"></i>
                {{ total_logs }} {% trans "movimentações" %}
              </span>
              <span class="badge bg-warning">
                <i class="fas fa-users me-1"></i>
                {{ total_usuarios_ativos }} {% trans "usuários ativos" %}
              </span>
              <span class="badge bg-primary">
                <i class="fas fa-gamepad me-1"></i>
                {{ total_personagens_ativos }} {% trans "personagens" %}
              </span>
              <span class="badge bg-secondary">
                <i class="fas fa-box me-1"></i>
                {{ total_itens_unicos }} {% trans "itens únicos" %}
              </span>
            </div>
          </div>
          
          <div class="report-body">
            <!-- Gráfico de Movimentações -->
            <div class="chart-container">
              <canvas id="graficoMovimentacoes" height="150"></canvas>
            </div>

            <!-- Resumo das Movimentações -->
            <div class="row g-4 mb-4">
              <div class="col-md-2">
                <div class="status-block bg-danger text-white p-3 rounded shadow">
                  <i class="fas fa-minus-circle fa-2x mb-2"></i>
                  <h5>{% trans "Retirados" %}</h5>
                  <h4>{{ total_retirado }}</h4>
                </div>
              </div>
              <div class="col-md-2">
                <div class="status-block bg-success text-white p-3 rounded shadow">
                  <i class="fas fa-plus-circle fa-2x mb-2"></i>
                  <h5>{% trans "Inseridos" %}</h5>
                  <h4>{{ total_inserido }}</h4>
                </div>
              </div>
              <div class="col-md-2">
                <div class="status-block bg-primary text-white p-3 rounded shadow">
                  <i class="fas fa-exchange-alt fa-2x mb-2"></i>
                  <h5>{% trans "Trocados" %}</h5>
                  <h4>{{ total_troca }}</h4>
                </div>
              </div>
              <div class="col-md-2">
                <div class="status-block bg-warning text-white p-3 rounded shadow">
                  <i class="fas fa-download fa-2x mb-2"></i>
                  <h5>{% trans "Recebidos" %}</h5>
                  <h4>{{ total_recebido }}</h4>
                </div>
              </div>
              <div class="col-md-2">
                <div class="status-block bg-info text-white p-3 rounded shadow">
                  <i class="fas fa-shopping-bag fa-2x mb-2"></i>
                  <h5>{% trans "Bag para Inventário" %}</h5>
                  <h4>{{ total_bag_para_inventario }}</h4>
                </div>
              </div>
            </div>

            <!-- Itens Mais Trocados -->
            <div class="row">
              <div class="col-md-6">
                <div class="reports-card">
                  <div class="reports-card-header">
                    <i class="fas fa-exchange-alt reports-icon"></i>
                    <h2 class="reports-card-title">{% trans "Itens Mais Trocados" %}</h2>
                    <p class="reports-card-description">
                      {% trans "Itens que foram mais trocados pelos jogadores" %}
                    </p>
                  </div>
                  <div class="reports-card-body">
                    <div class="table-responsive">
                      <table class="table report-table">
                        <thead>
                          <tr>
                            <th><i class="fas fa-box me-2"></i>{% trans "Item" %}</th>
                            <th><i class="fas fa-exchange-alt me-2"></i>{% trans "Total Trocado" %}</th>
                          </tr>
                        </thead>
                        <tbody>
                          {% for item in itens_trocados %}
                            <tr>
                              <td>
                                <i class="fas fa-box text-primary me-2"></i>
                                {{ item.item_name }}
                              </td>
                              <td>
                                <span class="badge bg-primary">
                                  <i class="fas fa-exchange-alt me-1"></i>
                                  {{ item.total_trocado }}
                                </span>
                              </td>
                            </tr>
                          {% empty %}
                            <tr>
                              <td colspan="2" class="text-center py-4">
                                <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                                <p class="text-muted">{% trans "Nenhum item trocado." %}</p>
                              </td>
                            </tr>
                          {% endfor %}
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>

                          <!-- Itens Mais Movimentados -->
            <div class="col-md-6">
              <div class="reports-card">
                <div class="reports-card-header">
                  <i class="fas fa-chart-line reports-icon"></i>
                  <h2 class="reports-card-title">{% trans "Itens Mais Movimentados" %}</h2>
                  <p class="reports-card-description">
                    {% trans "Itens com maior volume de movimentação" %}
                  </p>
                </div>
                <div class="reports-card-body">
                  <div class="table-responsive">
                    <table class="table report-table">
                      <thead>
                        <tr>
                          <th><i class="fas fa-box me-2"></i>{% trans "Item" %}</th>
                          <th><i class="fas fa-chart-line me-2"></i>{% trans "Total Movimentado" %}</th>
                        </tr>
                      </thead>
                      <tbody>
                        {% for item in itens_movimentados %}
                          <tr>
                            <td>
                              <i class="fas fa-box text-success me-2"></i>
                              {{ item.item_name }}
                            </td>
                            <td>
                              <span class="badge bg-success">
                                <i class="fas fa-chart-line me-1"></i>
                                {{ item.total_movimentado }}
                              </span>
                            </td>
                          </tr>
                        {% empty %}
                          <tr>
                            <td colspan="2" class="text-center py-4">
                              <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                              <p class="text-muted">{% trans "Nenhum item movimentado." %}</p>
                            </td>
                          </tr>
                        {% endfor %}
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Novas Estatísticas -->
          <div class="row g-4 mb-4">
            <!-- Usuários Mais Ativos -->
            <div class="col-md-4">
              <div class="reports-card">
                <div class="reports-card-header">
                  <i class="fas fa-users reports-icon"></i>
                  <h2 class="reports-card-title">{% trans "Usuários Mais Ativos" %}</h2>
                  <p class="reports-card-description">
                    {% trans "Usuários com mais movimentações" %}
                  </p>
                </div>
                <div class="reports-card-body">
                  <div class="table-responsive">
                    <table class="table report-table">
                      <thead>
                        <tr>
                          <th><i class="fas fa-user me-2"></i>{% trans "Usuário" %}</th>
                          <th><i class="fas fa-chart-bar me-2"></i>{% trans "Ações" %}</th>
                        </tr>
                      </thead>
                      <tbody>
                        {% for usuario in usuarios_ativos %}
                          <tr>
                            <td>
                              <i class="fas fa-user-circle text-primary me-2"></i>
                              {{ usuario.user__username }}
                            </td>
                            <td>
                              <span class="badge bg-primary">
                                <i class="fas fa-chart-bar me-1"></i>
                                {{ usuario.total_acoes }}
                              </span>
                            </td>
                          </tr>
                        {% empty %}
                          <tr>
                            <td colspan="2" class="text-center py-4">
                              <i class="fas fa-users fa-3x text-muted mb-3"></i>
                              <p class="text-muted">{% trans "Nenhum usuário ativo." %}</p>
                            </td>
                          </tr>
                        {% endfor %}
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>

            <!-- Personagens Mais Ativos -->
            <div class="col-md-4">
              <div class="reports-card">
                <div class="reports-card-header">
                  <i class="fas fa-gamepad reports-icon"></i>
                  <h2 class="reports-card-title">{% trans "Personagens Mais Ativos" %}</h2>
                  <p class="reports-card-description">
                    {% trans "Personagens com mais movimentações" %}
                  </p>
                </div>
                <div class="reports-card-body">
                  <div class="table-responsive">
                    <table class="table report-table">
                      <thead>
                        <tr>
                          <th><i class="fas fa-gamepad me-2"></i>{% trans "Personagem" %}</th>
                          <th><i class="fas fa-chart-bar me-2"></i>{% trans "Ações" %}</th>
                        </tr>
                      </thead>
                      <tbody>
                        {% for personagem in personagens_ativos %}
                          <tr>
                            <td>
                              <i class="fas fa-gamepad text-success me-2"></i>
                              {{ personagem.inventory__character_name }}
                            </td>
                            <td>
                              <span class="badge bg-success">
                                <i class="fas fa-chart-bar me-1"></i>
                                {{ personagem.total_acoes }}
                              </span>
                            </td>
                          </tr>
                        {% empty %}
                          <tr>
                            <td colspan="2" class="text-center py-4">
                              <i class="fas fa-gamepad fa-3x text-muted mb-3"></i>
                              <p class="text-muted">{% trans "Nenhum personagem ativo." %}</p>
                            </td>
                          </tr>
                        {% endfor %}
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>

            <!-- Itens Mais Encantados -->
            <div class="col-md-4">
              <div class="reports-card">
                <div class="reports-card-header">
                  <i class="fas fa-magic reports-icon"></i>
                  <h2 class="reports-card-title">{% trans "Itens Mais Encantados" %}</h2>
                  <p class="reports-card-description">
                    {% trans "Itens com maior volume de encantamentos" %}
                  </p>
                </div>
                <div class="reports-card-body">
                  <div class="table-responsive">
                    <table class="table report-table">
                      <thead>
                        <tr>
                          <th><i class="fas fa-magic me-2"></i>{% trans "Item" %}</th>
                          <th><i class="fas fa-star me-2"></i>{% trans "Total" %}</th>
                          <th><i class="fas fa-crown me-2"></i>{% trans "Max +" %}</th>
                        </tr>
                      </thead>
                      <tbody>
                        {% for item in itens_encantados %}
                          <tr>
                            <td>
                              <i class="fas fa-magic text-warning me-2"></i>
                              {{ item.item_name }}
                            </td>
                            <td>
                              <span class="badge bg-warning">
                                <i class="fas fa-star me-1"></i>
                                {{ item.total_encantado }}
                              </span>
                            </td>
                            <td>
                              <span class="badge bg-danger">
                                <i class="fas fa-crown me-1"></i>
                                +{{ item.max_enchant }}
                              </span>
                            </td>
                          </tr>
                        {% empty %}
                          <tr>
                            <td colspan="3" class="text-center py-4">
                              <i class="fas fa-magic fa-3x text-muted mb-3"></i>
                              <p class="text-muted">{% trans "Nenhum item encantado." %}</p>
                            </td>
                          </tr>
                        {% endfor %}
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>

            <!-- Botão de Volta -->
            <div class="text-center mt-5">
              <a href="{% url 'reports:dashboard' %}" class="report-back-button">
                <i class="fas fa-arrow-left me-2"></i>
                {% trans "Voltar ao Dashboard de Relatórios" %}
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  const labels = {{ labels|safe }};
  const retirados = {{ retirados|safe }};
  const inseridos = {{ inseridos|safe }};
  const trocados = {{ trocados|safe }};
  const recebidos = {{ recebidos|safe }};
  const bag_para_inventario = {{ bag_para_inventario|safe }};

  const ctx = document.getElementById('graficoMovimentacoes').getContext('2d');
  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: labels,
      datasets: [
        {
          label: '❌ {% trans "Retirados" %}',
          data: retirados,
          backgroundColor: 'rgba(244, 67, 54, 0.7)',
          borderColor: 'rgba(244, 67, 54, 1)',
          borderWidth: 2
        },
        {
          label: '✅ {% trans "Inseridos" %}',
          data: inseridos,
          backgroundColor: 'rgba(0, 200, 83, 0.7)',
          borderColor: 'rgba(0, 200, 83, 1)',
          borderWidth: 2
        },
        {
          label: '🔄 {% trans "Trocados" %}',
          data: trocados,
          backgroundColor: 'rgba(33, 150, 243, 0.7)',
          borderColor: 'rgba(33, 150, 243, 1)',
          borderWidth: 2
        },
        {
          label: '🔁 {% trans "Recebidos" %}',
          data: recebidos,
          backgroundColor: 'rgba(255, 165, 0, 0.7)',
          borderColor: 'rgba(255, 165, 0, 1)',
          borderWidth: 2
        },
        {
          label: '📦 {% trans "Bag para Inventário" %}',
          data: bag_para_inventario,
          backgroundColor: 'rgba(255, 99, 132, 0.7)',
          borderColor: 'rgba(255, 99, 132, 1)',
          borderWidth: 2
        }
      ]
    },
    options: {
      responsive: true,
      plugins: {
        title: {
          display: true,
          text: '{% trans "Movimentação de Itens nos Últimos Dias" %}',
          color: '#333',
          font: {
            size: 18,
            family: 'Orbitron, sans-serif'
          }
        },
        legend: {
          labels: {
            color: '#333',
            font: {
              size: 14
            }
          }
        }
      },
      scales: {
        x: {
          ticks: { 
            color: '#333',
            font: {
              size: 12
            }
          }
        },
        y: {
          beginAtZero: true,
          ticks: { 
            color: '#333',
            font: {
              size: 12
            }
          }
        }
      }
    }
  });
</script>
{% endblock %}