{% extends "base.html" %}

{% block title %}Notificações Internas - RH{% 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-bell"></i> Notificações Internas RH</h1>
    <div class="d-flex gap-2">
        <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">Fila interna de alertas para acompanhamento gerencial de criticidade.</div>
</div>

<div class="row g-2 mb-3">
    <div class="col-md-6"><span class="badge bg-warning text-dark w-100 py-2">Pendentes: {{ total_pendentes or 0 }}</span></div>
    <div class="col-md-6"><span class="badge bg-danger w-100 py-2">Críticas pendentes: {{ total_criticas_pendentes or 0 }}</span></div>
</div>

{% if (total_criticas_sla_estourado or 0) > 0 %}
<div class="alert alert-danger d-flex justify-content-between align-items-center">
    <div>
        <strong><i class="bi bi-alarm"></i> SLA crítico estourado:</strong>
        {{ total_criticas_sla_estourado }} notificação(ões) críticas pendentes há mais de {{ sla_critico_horas or 24 }}h.
    </div>
    <a href="{{ url_for('rh_ponto_notificacoes_internas', status='criticas') }}" class="btn btn-sm btn-light">Ver críticas</a>
</div>
{% endif %}

<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">Status</label>
                <select name="status" class="form-select">
                    <option value="pendentes" {% if status == 'pendentes' %}selected{% endif %}>Pendentes</option>
                    <option value="criticas" {% if status == 'criticas' %}selected{% endif %}>Críticas</option>
                    <option value="lidas" {% if status == 'lidas' %}selected{% endif %}>Lidas</option>
                    <option value="todas" {% if status == 'todas' %}selected{% endif %}>Todas</option>
                </select>
            </div>
            <div class="col-md-7">
                <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 d-flex align-items-end gap-2">
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-search"></i> Filtrar
                </button>
                <a href="{{ url_for('rh_ponto_notificacoes_internas') }}" class="btn btn-outline-secondary">
                    <i class="bi bi-x-circle"></i>
                </a>
            </div>
        </form>
    </div>
</div>

<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center gap-2 flex-wrap">
        <strong>Últimas notificações</strong>
        <form method="POST" action="{{ url_for('rh_ponto_notificacao_interna_marcar_todas_lidas') }}" class="d-flex gap-2">
            <input type="hidden" name="status" value="{{ status }}">
            <input type="hidden" name="funcionario_id" value="{{ funcionario_id or '' }}">
            <button type="submit" class="btn btn-sm btn-outline-success" {% if (total_pendentes or 0) <= 0 %}disabled{% endif %}>
                <i class="bi bi-check2-all"></i> Marcar pendentes como lidas
            </button>
        </form>
    </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>Nível</th>
                        <th>Título</th>
                        <th>Referência</th>
                        <th>Status</th>
                        <th>Ação</th>
                    </tr>
                </thead>
                <tbody>
                    {% for n in notificacoes %}
                    <tr class="{% if n.sla_critico_estourado %}table-danger{% elif not n.lida and (n.nivel or 'alerta') == 'critico' %}table-danger{% elif not n.lida %}table-warning{% endif %}">
                        <td>{{ n.data_evento.strftime('%d/%m/%Y %H:%M:%S') if n.data_evento else '-' }}</td>
                        <td>{{ n.funcionario_nome or 'Não identificado' }}</td>
                        <td>
                            {% if (n.nivel or 'alerta') == 'critico' %}
                                <span class="badge bg-danger">crítico</span>
                            {% else %}
                                <span class="badge bg-warning text-dark">alerta</span>
                            {% endif %}
                        </td>
                        <td style="min-width: 280px;">
                            <div class="fw-semibold">{{ n.titulo or '-' }}</div>
                            {% if n.origem and n.origem.startswith('rh_ponto_fora_perimetro:') %}
                            <div class="small mt-1">
                                <span class="badge bg-info text-dark">
                                    <i class="bi bi-geo-alt"></i> Perímetro
                                </span>
                            </div>
                            {% endif %}
                            {% if n.mensagem %}
                            <div class="small text-muted">{{ n.mensagem }}</div>
                            {% endif %}
                        </td>
                        <td>
                            {% if n.origem and n.origem.startswith('rh_ponto_fora_perimetro:') %}
                            <span class="badge bg-info text-dark">Batida fora do perímetro</span>
                            <div class="small mt-1 text-muted">Origem: app funcionário / geolocalização</div>
                            {% elif (n.referencia_total_eventos or 0) > 0 or (n.referencia_periodo_dias or 0) > 0 %}
                            <span class="badge bg-secondary">{{ n.referencia_total_eventos or 0 }} eventos</span>
                            <span class="badge bg-light text-dark border">{{ n.referencia_periodo_dias or 0 }} dias</span>
                            {% else %}
                            <span class="text-muted small">Sem referência numérica</span>
                            {% endif %}
                            {% if not n.lida %}
                            <div class="small mt-1 text-muted">Aberta há {{ n.horas_abertas or 0 }}h</div>
                            {% endif %}
                            {% if n.sla_critico_estourado %}
                            <div class="small mt-1"><span class="badge bg-danger">SLA &gt; {{ sla_critico_horas or 24 }}h</span></div>
                            {% endif %}
                        </td>
                        <td>
                            {% if n.lida %}
                                <span class="badge bg-success">lida</span>
                                <div class="small text-muted mt-1">
                                    {{ n.data_leitura.strftime('%d/%m/%Y %H:%M') if n.data_leitura else '-' }}
                                </div>
                            {% else %}
                                <span class="badge bg-danger">pendente</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if n.funcionario_id %}
                            {% set competencia_evento = n.data_evento.strftime('%Y-%m') if n.data_evento else '' %}
                            <div class="d-flex flex-column gap-2">
                                <a
                                    href="{{ url_for('rh_ponto_espelho_mensal', funcionario_id=n.funcionario_id, competencia=competencia_evento) if competencia_evento else url_for('rh_ponto_espelho_mensal', funcionario_id=n.funcionario_id) }}"
                                    class="btn btn-sm btn-outline-primary"
                                >
                                    <i class="bi bi-clock-history"></i> Abrir espelho
                                </a>
                                <a
                                    href="{{ url_for('rh_funcionario_editar', id=n.funcionario_id) }}"
                                    class="btn btn-sm btn-outline-secondary"
                                >
                                    <i class="bi bi-person-badge"></i> Cadastro
                                </a>
                            {% if not n.lida %}
                                <form method="POST" action="{{ url_for('rh_ponto_notificacao_interna_marcar_lida', notificacao_id=n.id) }}">
                                    <button type="submit" class="btn btn-sm btn-outline-success w-100">
                                        <i class="bi bi-check2-circle"></i> Marcar lida
                                    </button>
                                </form>
                            {% endif %}
                            </div>
                            {% elif not n.lida %}
                            <form method="POST" action="{{ url_for('rh_ponto_notificacao_interna_marcar_lida', notificacao_id=n.id) }}">
                                <button type="submit" class="btn btn-sm btn-outline-success">
                                    <i class="bi bi-check2-circle"></i> Marcar lida
                                </button>
                            </form>
                            {% else %}
                            <span class="text-muted small">—</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% else %}
                    <tr><td colspan="7" class="text-center text-muted py-4">Nenhuma notificação para os filtros selecionados.</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}