{% extends "base.html" %}

{% block title %}Auto-Reply Logs{% endblock %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <div>
        <h1 class="h2 fw-bold">Auto-Reply Logs</h1>
        <p class="text-secondary mb-0">Browse details and audit trails of all handled messages.</p>
    </div>
    
    <div class="btn-toolbar mb-2 mb-md-0 gap-2">
        <a href="{{ url_for('export_logs_csv') }}" class="btn btn-sm btn-outline-success"><i class="fa-solid fa-file-csv me-1"></i> Export CSV</a>
        <a href="{{ url_for('export_logs_json') }}" target="_blank" class="btn btn-sm btn-outline-info"><i class="fa-solid fa-file-code me-1"></i> Export JSON</a>
    </div>
</div>

<!-- Filters Card -->
<div class="card glass-card shadow-sm border-0 mb-4">
    <div class="card-body">
        <form action="{{ url_for('logs') }}" method="GET" class="row g-3 align-items-end">
            <!-- Search field -->
            <div class="col-md-5">
                <label for="search" class="form-label small fw-semibold">Search Text / User ID</label>
                <div class="input-group input-group-sm">
                    <span class="input-group-text bg-transparent text-secondary"><i class="fa-solid fa-magnifying-glass"></i></span>
                    <input type="text" class="form-control" id="search" name="search" value="{{ search_query }}" placeholder="Filter by name, text, username...">
                </div>
            </div>
            
            <!-- Status Dropdown -->
            <div class="col-md-3">
                <label for="status" class="form-label small fw-semibold">Reply Status</label>
                <select class="form-select form-select-sm" id="status" name="status">
                    <option value="all" {% if status_filter == 'all' %}selected{% endif %}>All Events</option>
                    {% for st in statuses %}
                    <option value="{{ st }}" {% if status_filter == st %}selected{% endif %}>{{ st }}</option>
                    {% endfor %}
                </select>
            </div>
            
            <!-- Filter Actions -->
            <div class="col-md-4 d-flex gap-2">
                <button type="submit" class="btn btn-primary btn-sm flex-grow-1"><i class="fa-solid fa-filter me-1"></i> Apply Filters</button>
                <a href="{{ url_for('logs') }}" class="btn btn-outline-secondary btn-sm"><i class="fa-solid fa-arrows-rotate"></i> Reset</a>
            </div>
        </form>
    </div>
</div>

<!-- Logs list Table -->
<div class="card glass-card shadow-sm border-0">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th class="ps-3" style="width: 15%">Time</th>
                        <th style="width: 20%">User Identity</th>
                        <th style="width: 25%">Received Message</th>
                        <th style="width: 25%">Auto-Reply Sent</th>
                        <th class="pe-3" style="width: 15%">Result Status</th>
                    </tr>
                </thead>
                <tbody>
                    {% if logs %}
                        {% for log in logs %}
                        <tr>
                            <td class="ps-3 small text-secondary">{{ log.timestamp }}</td>
                            <td>
                                <div class="fw-bold">{{ log.full_name }}</div>
                                <div class="font-monospace text-secondary" style="font-size: 0.75rem;">
                                    {% if log.username %}@{{ log.username }}{% endif %}
                                    (ID: {{ log.user_id }})
                                </div>
                            </td>
                            <td>
                                <div class="text-wrap" style="max-width: 300px; font-size: 0.85rem;">
                                    {{ log.original_message or '-' }}
                                </div>
                            </td>
                            <td>
                                <div class="text-wrap text-secondary" style="max-width: 300px; font-size: 0.85rem;">
                                    {{ log.reply_message or '-' }}
                                </div>
                            </td>
                            <td class="pe-3">
                                {% if log.status == 'Replied' %}
                                    <span class="badge bg-success-subtle text-success border border-success-subtle">Replied</span>
                                {% elif log.status.startswith('Ignored:') %}
                                    <span class="badge bg-warning-subtle text-warning border border-warning-subtle">{{ log.status }}</span>
                                {% else %}
                                    <span class="badge bg-danger-subtle text-danger border border-danger-subtle">{{ log.status }}</span>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    {% else %}
                        <tr>
                            <td colspan="5" class="text-center py-5 text-secondary">
                                <i class="fa-solid fa-box-open fs-2 mb-2 d-block"></i> No logs match your criteria.
                            </td>
                        </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>
    </div>
    
    <!-- Table Pagination footer -->
    {% if total_pages > 1 %}
    <div class="card-footer bg-transparent border-0 py-3">
        <nav aria-label="Logs navigation">
            <ul class="pagination pagination-sm justify-content-center mb-0">
                <!-- Previous Button -->
                <li class="page-item {% if page == 1 %}disabled{% endif %}">
                    <a class="page-link" href="{{ url_for('logs', page=page-1, status=status_filter, search=search_query) }}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                
                {% for p in range(1, total_pages + 1) %}
                    {% if p == page or (p >= page - 2 and p <= page + 2) %}
                    <li class="page-item {% if p == page %}active{% endif %}">
                        <a class="page-link" href="{{ url_for('logs', page=p, status=status_filter, search=search_query) }}">{{ p }}</a>
                    </li>
                    {% endif %}
                {% endfor %}
                
                <!-- Next Button -->
                <li class="page-item {% if page == total_pages %}disabled{% endif %}">
                    <a class="page-link" href="{{ url_for('logs', page=page+1, status=status_filter, search=search_query) }}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
    {% endif %}
</div>
{% endblock %}