{% extends "base.html" %}
{% import 'components/macros.html' as ui %}

{% block title %}Admin User Reports{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/hil-pages/admin_user_reports.css">
{% endblock %}
{% block content %}
<div class="header">
    <h1 class="brand">User Reports - Server Admin</h1>
    <div class="nav-links">
        <a href="/admin">Admin Dashboard</a>
        <a href="/reports">Reports</a>
        <a href="/logout">Logout</a>
    </div>
</div>

<div class="container">
    <nav class="sidebar">
        <a href="/admin" class="active">Admin Dashboard</a>
        <a href="/admin/shops">Shops</a>
        <a href="/reports">Reports</a>
        <a href="/admin/user-reports">User Reports</a>
        <a href="/admin/plugins">Plugins</a>
        <a href="/help-center">Help Center</a>
    </nav>

    <main class="content">
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="flash {{ category }}">{{ message }}</div>
                {% endfor %}
            {% endif %}
        {% endwith %}

        {% if ai_admin_report %}
        <div class="card">
            <h3>AI Server Admin Report</h3>
            <p class="hil-inline-05f940de63">{{ ai_admin_report.summary }}</p>
            <div class="hil-inline-39d93378bd">
                <div>
                    <h4 class="hil-inline-b2894a43e7">Challenges Users Face</h4>
                    <ul class="hil-inline-1cfedda6cc">
                        {% for item in ai_admin_report.challenges %}
                            <li>{{ item }}</li>
                        {% endfor %}
                    </ul>
                </div>
                <div>
                    <h4 class="hil-inline-ea15e30bb3">What Is Working</h4>
                    <ul class="hil-inline-1cfedda6cc">
                        {% for item in ai_admin_report.strengths %}
                            <li>{{ item }}</li>
                        {% endfor %}
                    </ul>
                </div>
                <div>
                    <h4 class="hil-inline-8445944785">Recommended Actions</h4>
                    <ul class="hil-inline-1cfedda6cc">
                        {% for item in ai_admin_report.recommendations %}
                            <li>{{ item }}</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
        {% endif %}

        {% if ai_operation_events %}
        <div class="card">
            <h3>Recent AI Operation Events</h3>
            {% for event in ai_operation_events %}
                <div class="hil-inline-e0b9a53344">
                    {% if event.severity == 'critical' %}
                    <strong class="event-severity event-severity-critical">
                        {{ event.created_at }} - {{ event.severity|upper }} - {{ event.title or event.event_type|replace('_', ' ')|title }}
                    </strong>
                    {% elif event.severity == 'warning' %}
                    <strong class="event-severity event-severity-warning">
                        {{ event.created_at }} - {{ event.severity|upper }} - {{ event.title or event.event_type|replace('_', ' ')|title }}
                    </strong>
                    {% else %}
                    <strong class="event-severity event-severity-info">
                        {{ event.created_at }} - {{ event.severity|upper }} - {{ event.title or event.event_type|replace('_', ' ')|title }}
                    </strong>
                    {% endif %}
                    <p class="hil-inline-1bded7f575">{{ event.message }}</p>
                    <small class="hil-inline-5dcdf2dee8">
                        Shop {{ event.shop_id or 'n/a' }}
                        {% if event.username %} | User {{ event.username }}{% endif %}
                        {% if event.route %} | {{ event.route }}{% endif %}
                    </small>
                </div>
            {% endfor %}
        </div>
        {% endif %}

        <div class="card">
            <h3><span class="hil-inline-27e46985ca">📨</span> User Reports ({{ reports|length }} shown)</h3>
            <p class="hil-inline-c0e80d018c">All user-submitted issues, messages, and feedback. Server owner only.</p>
            
            {% if reports %}
            <table>
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>User</th>
                        <th>Shop</th>
                        <th>Type</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for r in reports %}
                    <tr>
                        <td>{{ r[8].strftime('%Y-%m-%d %H:%M') }}</td>
                        <td>{{ r[2] }} (ID:{{ r[1] or 'anon' }})</td>
                        <td>{{ r[3] }}</td>
                        <td>{{ r[5] }}</td>
                        <td><span class="status {{ r[6] }}">{{ r[6]|title }}</span></td>
                        <td>
                            {% if r[6] != 'replied' %}
                            <form method="POST" class="confirm-mark-read hil-inline-cccfa4560d">
                                <input type="hidden" name="report_id" value="{{ r[0] }}">
                                <input type="hidden" name="action" value="mark_read">
                                <button type="submit" class="hil-inline-189c4701af">Mark Read</button>
                            </form>
                            {% endif %}
                            <form method="POST" class="hil-inline-cccfa4560d">
                                <input type="hidden" name="report_id" value="{{ r[0] }}">
                                <input type="hidden" name="action" value="reply">
                                <input type="text" name="admin_reply" placeholder="Quick reply..." maxlength="200" class="hil-inline-b067d25f5e">
                                <button type="submit" class="hil-inline-189c4701af">Reply</button>
                            </form>
                        </td>
                    </tr>
                    {% if r[7] %}
                    <tr>
                        <td colspan="6" class="hil-inline-8bfd048978">
                            <strong>Your reply:</strong> {{ r[7] }}
                        </td>
                    </tr>
                    {% endif %}
                    {% endfor %}
                </tbody>
            </table>

            {% if total_pages > 1 %}
            <div class="pagination">
                {% if page > 1 %}
                    <a href="?page={{ page-1 }}">&laquo; Prev</a>
                {% endif %}
                <span>Page {{ page }} of {{ total_pages }}</span>
                {% if total_pages > page %}
                    <a href="?page={{ page+1 }}">Next &raquo;</a>
                {% endif %}
            </div>
            {% endif %}
            {% else %}
            <p>No user reports yet. Users can submit via Help Center.</p>
            {% endif %}
        </div>
    </main>
</div>

<script>
document.querySelectorAll(".confirm-mark-read").forEach(function(form) {
    form.addEventListener("submit", function(event) {
        if (!confirm("Mark as read?")) {
            event.preventDefault();
        }
    });
});
</script>
{% endblock %}