{% extends "base.html" %}

{% block title %}KPI Bloqueios Inteligentes - RH Ponto{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2"><i class="bi bi-shield-exclamation"></i> KPI Bloqueios Inteligentes</h1>
    <div class="d-flex gap-2">
        <a href="{{ url_for('rh_ponto_notificacoes_internas') }}" class="btn btn-outline-danger position-relative">
            <i class="bi bi-bell"></i> Notificações
            {% if (total_notificacoes_criticas_pendentes or 0) > 0 %}
            <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                {{ total_notificacoes_criticas_pendentes }}
            </span>
            {% elif (total_notificacoes_pendentes or 0) > 0 %}
            <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning text-dark">
                {{ total_notificacoes_pendentes }}
            </span>
            {% endif %}
        </a>
        <a href="{{ url_for('rh_ponto_espelho_mensal') }}" class="btn btn-outline-secondary">
            <i class="bi bi-calendar3"></i> Espelho
        </a>
        <a href="{{ url_for('rh_ponto_espelho_mensal') }}" class="btn btn-outline-secondary">
            <i class="bi bi-clock-history"></i> Espelho / Lançamentos
        </a>
    </div>
</div>

<div class="alert alert-light border">
    <div><strong>Empresa:</strong> {{ empresa.nome_fantasia or empresa.razao_social or empresa.nome }}</div>
    <div class="small text-muted mt-1">Monitoramento de tentativas bloqueadas pelo validador inteligente de ponto.</div>
</div>

<div class="card mb-3">
    <div class="card-body">
        <form method="GET" class="row g-2">
            <div class="col-md-3">
                <label class="form-label">Período</label>
                <select name="periodo" class="form-select">
                    <option value="7" {% if periodo == '7' %}selected{% endif %}>Últimos 7 dias</option>
                    <option value="30" {% if periodo == '30' %}selected{% endif %}>Últimos 30 dias</option>
                    <option value="90" {% if periodo == '90' %}selected{% endif %}>Últimos 90 dias</option>
                </select>
            </div>
            <div class="col-md-5">
                <label class="form-label">Funcionário</label>
                <select name="funcionario_id" class="form-select">
                    <option value="">Todos</option>
                    {% for f in funcionarios %}
                    <option value="{{ f.id }}" {% if funcionario_id == f.id %}selected{% endif %}>{{ f.nome }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label">Limiar alerta</label>
                <input type="number" min="1" max="500" name="limiar_alerta" class="form-control" value="{{ limiar_alerta or 10 }}">
                <small class="text-muted">Crítico: ≥ {{ limiar_critico or 15 }}</small>
            </div>
            <div class="col-md-2 d-flex align-items-end gap-2">
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-search"></i> Aplicar
                </button>
                <a href="{{ url_for('rh_ponto_bloqueios_inteligentes') }}" class="btn btn-outline-secondary">
                    <i class="bi bi-x-circle"></i> Limpar
                </a>
            </div>
        </form>
    </div>
</div>

<div class="row g-2 mb-3">
    <div class="col-md-2"><span class="badge bg-dark w-100 py-2">Eventos: {{ total_eventos or 0 }}</span></div>
    <div class="col-md-2"><span class="badge bg-warning text-dark w-100 py-2">Com espera: {{ total_com_espera or 0 }}</span></div>
    <div class="col-md-2"><span class="badge bg-danger w-100 py-2">Em alerta: {{ qtd_em_alerta or 0 }}</span></div>
    <div class="col-md-2"><span class="badge bg-danger-subtle text-danger-emphasis w-100 py-2">Crítico: {{ qtd_critico or 0 }}</span></div>
    <div class="col-md-4"><span class="badge bg-danger w-100 py-2">SLA crítico (>{{ sla_critico_horas or 24 }}h): {{ total_notificacoes_criticas_sla_estourado or 0 }}</span></div>
</div>

{% if (total_notificacoes_criticas_pendentes or 0) > 0 %}
<div class="alert alert-danger d-flex justify-content-between align-items-center">
    <div>
        <strong><i class="bi bi-bell-fill"></i> Atenção operacional:</strong>
        existem <strong>{{ total_notificacoes_criticas_pendentes }}</strong> notificações críticas pendentes para tratamento
        (SLA configurado: {{ sla_critico_horas or 24 }}h).
    </div>
    <a href="{{ url_for('rh_ponto_notificacoes_internas', status='criticas') }}" class="btn btn-sm btn-light">
        Abrir pendências críticas
    </a>
</div>
{% endif %}

<div class="alert alert-light border py-2">
    <strong>Regra de severidade:</strong>
    <span class="badge bg-success">normal</span> &lt; {{ limiar_alerta }} |
    <span class="badge bg-warning text-dark">alerta</span> ≥ {{ limiar_alerta }} |
    <span class="badge bg-danger">crítico</span> ≥ {{ limiar_critico }}
</div>

<div class="row g-3">
    <div class="col-lg-7">
        <div class="card h-100">
            <div class="card-header"><strong>Ranking de bloqueios por funcionário</strong></div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-sm table-hover mb-0 align-middle">
                        <thead>
                            <tr>
                                <th>Funcionário</th>
                                <th>Cód. Batida</th>
                                <th>Total</th>
                                <th>Média Espera (HH:MM)</th>
                                <th>Último Evento</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for r in ranking %}
                            <tr class="{% if r.nivel_alerta == 'critico' %}table-danger{% elif r.nivel_alerta == 'alerta' %}table-warning{% endif %}">
                                <td>{{ r.funcionario_nome or 'Não identificado' }}</td>
                                <td>{{ r.funcionario_codigo_batida or '-' }}</td>
                                <td>
                                    {% if r.nivel_alerta == 'critico' %}
                                        <span class="badge bg-danger">{{ r.total_bloqueios or 0 }} (crítico)</span>
                                    {% elif r.nivel_alerta == 'alerta' %}
                                        <span class="badge bg-warning text-dark">{{ r.total_bloqueios or 0 }} (alerta)</span>
                                    {% else %}
                                        <span class="badge bg-success">{{ r.total_bloqueios or 0 }}</span>
                                    {% endif %}
                                </td>
                                <td>{{ fmt_min(r.media_minutos_restantes or 0) }}</td>
                                <td>{{ r.ultimo_evento.strftime('%d/%m/%Y %H:%M') if r.ultimo_evento else '-' }}</td>
                            </tr>
                            {% else %}
                            <tr><td colspan="5" class="text-center text-muted py-3">Sem dados para o período.</td></tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-5">
        <div class="card h-100">
            <div class="card-header"><strong>Distribuição por contexto</strong></div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-sm table-hover mb-0 align-middle">
                        <thead>
                            <tr>
                                <th>Contexto</th>
                                <th>Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for c in contexto_stats %}
                            <tr>
                                <td>{{ c.contexto }}</td>
                                <td><span class="badge bg-secondary">{{ c.total }}</span></td>
                            </tr>
                            {% else %}
                            <tr><td colspan="2" class="text-center text-muted py-3">Sem dados para o período.</td></tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card mt-3">
    <div class="card-header"><strong>Últimos eventos</strong></div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-sm table-hover mb-0 align-middle">
                <thead>
                    <tr>
                        <th>Data/Hora</th>
                        <th>Funcionário</th>
                        <th>Próximo Tipo</th>
                        <th>Espera (HH:MM)</th>
                        <th>Liberado Em</th>
                        <th>Contexto</th>
                        <th>Mensagem</th>
                    </tr>
                </thead>
                <tbody>
                    {% for e in eventos %}
                    <tr>
                        <td>{{ e.data_evento.strftime('%d/%m/%Y %H:%M:%S') if e.data_evento else '-' }}</td>
                        <td>{{ e.funcionario_nome or '-' }}</td>
                        <td>{{ (e.proximo_tipo or '-').replace('_', ' ') }}</td>
                        <td>{{ fmt_min(e.minutos_restantes or 0) }}</td>
                        <td>{{ e.janela_liberada_em.strftime('%d/%m/%Y %H:%M') if e.janela_liberada_em else '-' }}</td>
                        <td>{{ e.contexto or '-' }}</td>
                        <td style="min-width: 320px;">{{ e.mensagem or '-' }}</td>
                    </tr>
                    {% else %}
                    <tr><td colspan="7" class="text-center text-muted py-4">Nenhum evento de bloqueio para o período selecionado.</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}