{% extends "/coulisses/base.html.twig" %}

{% block styles %}{% endblock %}

{% block content %}
<div class="c-honeypot">
<div class="header">
    <div class="header-left">
        <h1>🍯 {{ pageTitle }}</h1>
        <span class="badge">{{ total }} entrées</span>
    </div>
    <div class="header-actions">
        <a href="/coulisses/honeypot-log/download" class="btn-download">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
            Télécharger le log
        </a>
        <div
            data-icon="broom-wide"
            data-icon-style="duotone"
            data-admin-component="LongPressButton"
            data-action="/coulisses/honeypot-log/clear"
            data-label="Vider les logs"
            data-done-label="Logs vidés ✓"
            data-duration="5000"
        ></div>
    </div>
</div>

<div class="main">

    <div class="stats">
        <div class="stat-card">
            <div class="label">Tentatives totales</div>
            <div class="value">{{ total }}</div>
        </div>
        <div class="stat-card">
            <div class="label">IPs distinctes</div>
            <div class="value">{{ ip_counts|length > 0 ? ip_counts|keys|length : 0 }}</div>
        </div>
        <div class="stat-card">
            <div class="label">Tentatives POST</div>
            <div class="value">{{ entries|filter(e => e.method == 'POST')|length }}</div>
        </div>
        {% if entries|length > 0 %}
        <div class="stat-card">
            <div class="label">Dernière tentative</div>
            <div class="value" style="font-size:14px;padding-top:6px;">{{ entries[0].timestamp|date('d/m H:i') }}</div>
        </div>
        {% endif %}
    </div>

    {% if ip_counts|length > 0 %}
    <div class="panel">
        <div class="panel-title">Top IPs attaquantes</div>
        <div class="top-ips">
            {% for ip, count in ip_counts %}
            <span class="ip-chip">{{ ip }}<span class="count">({{ count }})</span></span>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <div class="panel">
        <div class="panel-title">Journal des tentatives ({{ total }}, plus récentes en premier)</div>

        {% if entries|length > 0 %}

        <div class="toolbar">
            <input type="text" id="filter-input" placeholder="Filtrer par IP, URI, User-Agent…" oninput="filterTable(this.value)">
            <label>Méthode</label>
            <select id="method-filter" onchange="filterTable(document.getElementById('filter-input').value)">
                <option value="">Toutes</option>
                <option value="GET">GET</option>
                <option value="POST">POST</option>
            </select>
        </div>

        <table id="log-table">
            <thead>
                <tr>
                    <th>Date</th><th>IP</th><th>Méthode</th><th>URI</th><th>User-Agent</th>
                </tr>
            </thead>
            <tbody>
            {% for i, entry in entries %}
            {% set hasPost = entry.post_data is defined and entry.post_data|length > 0 %}
            <tr class="{{ hasPost ? 'has-post' : '' }}" onclick="toggleDetail({{ i }})">
                <td>{{ entry.timestamp|date('d/m/y H:i:s') }}</td>
                <td class="ip">{{ entry.ip }}</td>
                <td class="{{ entry.method == 'POST' ? 'method-post' : '' }}">{{ entry.method }}</td>
                <td class="uri">{{ entry.uri }}</td>
                <td>{{ entry.user_agent|slice(0, 80) }}{% if entry.user_agent|length > 80 %}…{% endif %}</td>
            </tr>
            <tr class="detail-row" id="detail-{{ i }}">
                <td colspan="5">
                    <div class="detail-grid">
                        {% if entry.ip %}<div class="detail-item"><div class="key">IP</div><div class="val">{{ entry.ip }}</div></div>{% endif %}
                        {% if entry.forwarded_for %}<div class="detail-item"><div class="key">X-Forwarded-For</div><div class="val">{{ entry.forwarded_for }}</div></div>{% endif %}
                        {% if entry.uri %}<div class="detail-item"><div class="key">URI complète</div><div class="val">{{ entry.uri }}{% if entry.query_string %}?{{ entry.query_string }}{% endif %}</div></div>{% endif %}
                        {% if entry.referer %}<div class="detail-item"><div class="key">Referer</div><div class="val">{{ entry.referer }}</div></div>{% endif %}
                        {% if entry.accept_lang %}<div class="detail-item"><div class="key">Accept-Language</div><div class="val">{{ entry.accept_lang }}</div></div>{% endif %}
                        {% if entry.user_agent %}<div class="detail-item" style="grid-column:1/-1"><div class="key">User-Agent</div><div class="val">{{ entry.user_agent }}</div></div>{% endif %}
                    </div>
                    {% if hasPost %}
                    <div class="post-data">
                        <div class="key">Données POST</div>
                        <pre>{{ entry.post_data|json_encode(constant('JSON_PRETTY_PRINT') b-or constant('JSON_UNESCAPED_UNICODE')) }}</pre>
                    </div>
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>

        {% else %}
        <div class="empty">
            <strong>Aucune tentative enregistrée</strong>
            Le honeypot est en place — les tentatives apparaîtront ici dès qu'elles surviendront.
        </div>
        {% endif %}
    </div>

</div>

<script>
function toggleDetail(i) { document.getElementById('detail-' + i).classList.toggle('open') }
function filterTable(text) {
    const method = document.getElementById('method-filter').value.toLowerCase()
    const search = text.toLowerCase()
    document.querySelectorAll('#log-table tbody tr:not(.detail-row)').forEach(row => {
        const content    = row.textContent.toLowerCase()
        const methodCell = row.querySelector('td:nth-child(3)').textContent.trim().toLowerCase()
        const visible    = (!method || methodCell === method) && (!search || content.includes(search))
        row.style.display = visible ? '' : 'none'
        const detail = row.nextElementSibling
        if (detail?.classList.contains('detail-row')) {
            if (!visible) detail.classList.remove('open')
            detail.style.display = visible ? '' : 'none'
        }
    })
}
</script>
</div>{# /.c-honeypot #}
{% endblock %}