{% extends "base.html" %}

{% block title %}Notificações RH Runtime{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center pt-3 pb-2 mb-3 border-bottom flex-wrap gap-2">
    <div>
        <h1 class="h2 mb-0"><i class="bi bi-bell"></i> Notificações Internas RH</h1>
        <div class="small text-muted">Fila operacional reconstruída no runtime para acompanhamento rápido.</div>
    </div>
    <div class="d-flex gap-2 flex-wrap">
        <a href="{{ url_for('rh_funcionarios') }}" class="btn btn-outline-secondary">
            <i class="bi bi-person-badge"></i> Dashboard RH
        </a>
        <a href="{{ url_for('rh_ponto_espelho_mensal') }}" class="btn btn-outline-primary">
            <i class="bi bi-clock-history"></i> Espelho
        </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">SLA crítico atual: {{ sla_critico_horas or 24 }}h para notificações de nível crítico.</div>
</div>

<div class="row g-3 mb-3">
    <div class="col-md-4"><div class="card"><div class="card-body"><div class="small text-muted">Pendentes</div><div class="h3 mb-0">{{ total_pendentes or 0 }}</div></div></div></div>
    <div class="col-md-4"><div class="card border-danger"><div class="card-body"><div class="small text-muted">Críticas pendentes</div><div class="h3 mb-0">{{ total_criticas_pendentes or 0 }}</div></div></div></div>
    <div class="col-md-4"><div class="card {% if (total_criticas_sla_estourado or 0) > 0 %}border-danger{% endif %}"><div class="card-body"><div class="small text-muted">SLA crítico estourado</div><div class="h3 mb-0">{{ total_criticas_sla_estourado or 0 }}</div></div></div></div>
</div>

<div class="card mb-3">
    <div class="card-body">
        <form method="GET" class="row g-2 align-items-end">
            <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 gap-2">
                <button type="submit" class="btn btn-primary flex-fill"><i class="bi bi-search"></i></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 flex-wrap gap-2">
        <strong>Ocorrências recentes</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="table-responsive">
        <table class="table table-sm table-hover mb-0 align-middle">
            <thead>
                <tr>
                    <th>Quando</th>
                    <th>Funcionário</th>
                    <th>Título</th>
                    <th>Referência</th>
                    <th>Status</th>
                    <th class="text-end">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>
                        <div>{{ n.data_evento.strftime('%d/%m/%Y %H:%M') if n.data_evento else '-' }}</div>
                        <div class="small text-muted">aberta há {{ n.horas_abertas or 0 }}h</div>
                    </td>
                    <td>{{ n.funcionario_nome or 'Não identificado' }}</td>
                    <td>
                        <div class="fw-semibold">{{ n.titulo or '-' }}</div>
                        {% if n.mensagem %}<div class="small text-muted">{{ n.mensagem }}</div>{% endif %}
                    </td>
                    <td>
                        {% if (n.referencia_total_eventos or 0) > 0 %}<span class="badge bg-secondary">{{ n.referencia_total_eventos }} eventos</span>{% endif %}
                        {% if (n.referencia_periodo_dias or 0) > 0 %}<span class="badge bg-light text-dark border">{{ n.referencia_periodo_dias }} dias</span>{% endif %}
                        {% if n.origem %}<div class="small text-muted mt-1">{{ n.origem }}</div>{% endif %}
                    </td>
                    <td>
                        {% if n.lida %}
                        <span class="badge bg-success">Lida</span>
                        {% else %}
                            {% if (n.nivel or 'alerta') == 'critico' %}<span class="badge bg-danger">Crítica</span>{% else %}<span class="badge bg-warning text-dark">Pendente</span>{% endif %}
                            {% if n.sla_critico_estourado %}<div class="small text-danger mt-1">SLA estourado</div>{% endif %}
                        {% endif %}
                    </td>
                    <td class="text-end">
                        {% if n.funcionario_id %}
                        <a href="{{ url_for('rh_ponto_espelho_mensal', funcionario_id=n.funcionario_id, competencia=(n.data_evento.strftime('%Y-%m') if n.data_evento else None)) }}" class="btn btn-sm btn-outline-primary">
                            <i class="bi bi-clock-history"></i>
                        </a>
                        {% endif %}
                        {% if not n.lida %}
                        <form method="POST" action="{{ url_for('rh_ponto_notificacao_interna_marcar_lida', notificacao_id=n.id) }}" class="d-inline">
                            <button type="submit" class="btn btn-sm btn-outline-success"><i class="bi bi-check2-circle"></i></button>
                        </form>
                        {% endif %}
                    </td>
                </tr>
                {% else %}
                <tr><td colspan="6" class="text-center text-muted py-4">Nenhuma notificação encontrada para os filtros atuais.</td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}