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

{% block title %}{% trans "Dice Game Statistics" %}{% endblock %}

{% block extrastyle %}
<style>
    .stats-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
    }

    .stats-card {
        background: white;
        border-radius: 15px;
        padding: 20px;
        margin-bottom: 30px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    .stat-box {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 10px;
        padding: 20px;
        color: white;
        text-align: center;
        margin-bottom: 20px;
    }

    .stat-value {
        font-size: 3rem;
        font-weight: bold;
    }

    .chart-bar {
        background: #667eea;
        height: 30px;
        border-radius: 5px;
        transition: width 0.5s;
        display: flex;
        align-items: center;
        padding-left: 10px;
        color: white;
        font-weight: bold;
        margin-bottom: 10px;
    }
</style>
{% endblock %}

{% block content %}
<div class="stats-container">
    <h1 class="text-center mb-4">📊 {% trans "Estatísticas do Dice Game" %}</h1>

    <!-- Estatísticas Gerais -->
    <div class="row mb-4">
        <div class="col-md-4">
            <div class="stat-box">
                <div>{% trans "Total de Jogos" %}</div>
                <div class="stat-value">{{ total_games }}</div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="stat-box">
                <div>{% trans "Total de Vitórias" %}</div>
                <div class="stat-value">{{ total_wins }}</div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="stat-box">
                <div>{% trans "Taxa de Vitória" %}</div>
                <div class="stat-value">{{ win_rate }}%</div>
            </div>
        </div>
    </div>

    <!-- Distribuição dos Resultados -->
    <div class="stats-card">
        <h3>🎲 {% trans "Distribuição de Resultados do Dado" %}</h3>
        <p class="text-muted">{% trans "Frequência de cada número sorteado" %}</p>
        
        {% for dist in dice_distribution %}
        <div class="mb-3">
            <div class="d-flex justify-content-between mb-1">
                <span><strong>⚅{{ dist.number }}</strong></span>
                <span>{{ dist.count }} vezes ({{ dist.percentage }}%)</span>
            </div>
            <div class="chart-bar" style="width: {{ dist.percentage }}%; max-width: 100%;">
                {{ dist.percentage }}%
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- Estatísticas por Tipo de Aposta -->
    <div class="stats-card">
        <h3>📈 {% trans "Estatísticas por Tipo de Aposta" %}</h3>
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>{% trans "Tipo de Aposta" %}</th>
                        <th>{% trans "Jogos" %}</th>
                        <th>{% trans "Vitórias" %}</th>
                        <th>{% trans "Total Apostado" %}</th>
                        <th>{% trans "Total Pago" %}</th>
                        <th>{% trans "Lucro Casa" %}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for stat in bet_type_stats %}
                    <tr>
                        <td><strong>{{ stat.bet_type|upper }}</strong></td>
                        <td>{{ stat.count }}</td>
                        <td>{{ stat.wins }}</td>
                        <td>{{ stat.total_bet }} fichas</td>
                        <td>{{ stat.total_prize }} fichas</td>
                        <td class="{% if stat.total_bet > stat.total_prize %}text-success{% else %}text-danger{% endif %}">
                            {% with profit=stat.total_bet|add:stat.total_prize|add:"-"|add:stat.total_prize %}
                                {{ stat.total_bet|add:"-"|add:stat.total_prize }} fichas
                            {% endwith %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <div class="text-center mt-5">
        <a href="{% url 'games:dice_game_page' %}" class="btn btn-primary btn-lg rounded-pill me-2">
            🎲 {% trans "Voltar para Dice Game" %}
        </a>
        <a href="{% url 'games:dice_game_leaderboard' %}" class="btn btn-secondary btn-lg rounded-pill">
            🏆 {% trans "Ver Ranking" %}
        </a>
    </div>
</div>
{% endblock %}