{% extends "base.html" %}

{% block content %}
<div class="container-fluid py-4" style="background: #020617; min-height: 100vh; color: #f8fafc; font-family: 'Segoe UI', Roboto, sans-serif;">
    <div class="row justify-content-center">
        <div class="col-lg-11">
            
            <!-- Cabeçalho do Relatório -->
            <div class="d-flex justify-content-between align-items-center mb-5 border-bottom border-slate-800 pb-4">
                <div>
                    <h1 class="display-5 fw-bold mb-0 text-white text-uppercase tracking-tighter">
                        <i class="bi bi-file-earmark-bar-graph text-warning me-2"></i>Relatório <span class="text-warning">IA Global</span>
                    </h1>
                    <p class="text-slate-400 mb-0">Análise Probabilística de Todos os Jogos Gerados em Tempo Real</p>
                </div>
                <div class="text-end">
                    <div class="badge bg-slate-900 border border-slate-700 p-2 mb-2">
                        <i class="bi bi-clock-fill text-info me-1"></i> ATUALIZADO: {{ current_time|date:"H:i:s" }}
                    </div>
                    <div class="d-flex gap-2">
                        <button onclick="window.print()" class="btn btn-outline-light btn-sm rounded-pill">
                            <i class="bi bi-printer"></i> Imprimir Relatório
                        </button>
                        <a href="{% url 'sequential_generator' %}" class="btn btn-primary btn-sm rounded-pill px-4">
                            Voltar ao Supercomputador
                        </a>
                    </div>
                </div>
            </div>

            <div class="row g-4">
                {% for item in reports %}
                <div class="col-xl-6">
                    <div class="card bg-slate-900 border-slate-800 shadow-lg rounded-4 overflow-hidden h-100">
                        <div class="card-header bg-black border-bottom border-slate-800 p-3 d-flex justify-content-between align-items-center">
                            <h4 class="mb-0 fw-bold text-info">
                                <i class="bi bi-grid-3x3-gap-fill me-2"></i>{{ item.lottery.get_name_display }}
                            </h4>
                            <span class="badge bg-info">Concurso {{ item.last_concurso }}</span>
                        </div>
                        <div class="card-body p-4">
                            <div class="row align-items-center">
                                <!-- Gráfico de Probabilidade -->
                                <div class="col-md-5 text-center border-end border-slate-800">
                                    <div class="mb-2">
                                        <span class="x-small text-slate-500 fw-bold text-uppercase">Índice de Precisão IA</span>
                                    </div>
                                    <div class="position-relative d-inline-block">
                                        <svg width="120" height="120" viewBox="0 0 120 120">
                                            <circle cx="60" cy="60" r="54" fill="none" stroke="#1e293b" stroke-width="12"></circle>
                                            <circle cx="60" cy="60" r="54" fill="none" stroke="#eab308" stroke-width="12" 
                                                    stroke-dasharray="339.29" stroke-dashoffset="{{ 339.29|add:item.prob_index|floatformat:0 }}"
                                                    style="transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 1s ease-out;"></circle>
                                        </svg>
                                        <div class="position-absolute top-50 start-50 translate-middle">
                                            <h3 class="fw-bold mb-0 text-white">{{ item.prob_index }}%</h3>
                                        </div>
                                    </div>
                                    <div class="mt-3">
                                        <p class="x-small text-slate-400">Baseado em {{ item.total_analyzed }} sorteios históricos</p>
                                    </div>
                                </div>

                                <!-- Dezenas de Elite -->
                                <div class="col-md-7 ps-md-4">
                                    <div class="mb-3">
                                        <span class="small fw-bold text-warning text-uppercase"><i class="bi bi-stars"></i> Números de Elite do Funil:</span>
                                    </div>
                                    <div class="d-flex flex-wrap gap-2 mb-4">
                                        {% for n in item.elite_numbers %}
                                        <div class="num-ball-report">
                                            {{ n }}
                                        </div>
                                        {% endfor %}
                                    </div>
                                    <div class="bg-black p-3 rounded-3 border border-slate-800">
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <span class="x-small text-slate-500">TENDÊNCIA QUENTE (TOP 5)</span>
                                            <i class="bi bi-fire text-danger"></i>
                                        </div>
                                        <div class="d-flex gap-2 justify-content-center">
                                            {% for n, freq in item.hot_top %}
                                            <div class="text-center">
                                                <div class="fw-bold text-white small">{{ n }}</div>
                                                <div class="x-small text-muted">{{ freq }}x</div>
                                            </div>
                                            {% endfor %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer bg-black border-top border-slate-800 p-2 text-center">
                            <small class="text-slate-600 font-monospace">MD5_COMPUTE_HASH: IA_ELITE_FILTER_V4_ONLINE</small>
                        </div>
                    </div>
                </div>
                {% empty %}
                <div class="col-12 text-center py-5">
                    <h3 class="text-slate-500">Nenhum dado processado ainda. Inicie o Supercomputador para gerar o relatório.</h3>
                </div>
                {% endfor %}
            </div>

            <!-- Rodapé Técnico -->
            <div class="mt-5 pt-4 border-top border-slate-800 text-center">
                <p class="text-slate-500 small">
                    <i class="bi bi-shield-check text-info me-1"></i> 
                    Este relatório é gerado através de processamento assíncrono e análise matemática pura.
                    As probabilidades são recalculadas a cada novo acesso.
                </p>
            </div>
        </div>
    </div>
</div>

<style>
    .x-small { font-size: 0.7rem; }
    .num-ball-report {
        width: 45px;
        height: 45px;
        background: linear-gradient(135deg, #eab308, #ca8a04);
        color: #000;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        font-weight: 800;
        font-size: 1.1rem;
        box-shadow: 0 4px 10px rgba(234, 179, 8, 0.3);
        border: 2px solid rgba(255,255,255,0.2);
    }
    .card { transition: transform 0.3s ease; }
    .card:hover { transform: translateY(-5px); border-color: #334155 !important; }
</style>
{% endblock %}