{% extends "admin/base.html" %}

{% block main_content %}
<section class="form-panel">
    <div class="table-head">
        <div>
            <h2>评论筛选</h2>
            <div class="table-note">按 scope、审核状态、文章 slug 或关键词快速定位评论，尤其适合处理段落评论和垃圾留言。</div>
        </div>
    </div>

    <form method="get" action="/admin/comments" class="inline-form compact">
        <div class="compact-grid">
            <div class="field">
                <label for="scope">评论类型</label>
                <select id="scope" name="scope">
                    <option value="" {% if filters.scope == "" %}selected{% endif %}>全部</option>
                    <option value="article" {% if filters.scope == "article" %}selected{% endif %}>全文评论</option>
                    <option value="paragraph" {% if filters.scope == "paragraph" %}selected{% endif %}>段落评论</option>
                </select>
            </div>

            <div class="field">
                <label for="approved">审核状态</label>
                <select id="approved" name="approved">
                    <option value="" {% if filters.approved == "" %}selected{% endif %}>全部</option>
                    <option value="true" {% if filters.approved == "true" %}selected{% endif %}>已审核</option>
                    <option value="false" {% if filters.approved == "false" %}selected{% endif %}>待审核</option>
                </select>
            </div>

            <div class="field">
                <label for="post_slug">文章</label>
                <select id="post_slug" name="post_slug">
                    <option value="" {% if filters.post_slug == "" %}selected{% endif %}>全部文章</option>
                    {% for slug in post_options %}
                    <option value="{{ slug }}" {% if filters.post_slug == slug %}selected{% endif %}>{{ slug }}</option>
                    {% endfor %}
                </select>
            </div>

            <div class="field">
                <label for="q">关键词</label>
                <input
                    id="q"
                    type="text"
                    name="q"
                    value="{{ filters.q }}"
                    placeholder="作者 / 内容 / 段落 key"
                />
            </div>
        </div>

        <div class="compact-actions">
            <button type="submit" class="btn btn-primary">应用筛选</button>
            <a href="/admin/comments" class="btn btn-ghost">清空</a>
        </div>
    </form>

    <div class="inline-links" style="margin-top: 14px;">
        {% for stat in stats %}
        <span class="chip">{{ stat.label }} · {{ stat.value }}</span>
        {% endfor %}
    </div>
</section>

<section class="table-panel">
    <div class="table-head">
        <div>
            <h2>评论队列</h2>
            <div class="table-note">处理前台真实评论，并能一键跳到对应文章或段落核对上下文。</div>
        </div>
    </div>

    {% if rows | length > 0 %}
    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>作者 / 文章</th>
                    <th>内容与上下文</th>
                    <th>状态</th>
                    <th>时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {% for row in rows %}
                <tr>
                    <td class="mono">#{{ row.id }}</td>
                    <td>
                        <div class="item-title">
                            <strong>{{ row.author }}</strong>
                            <span class="item-meta">{{ row.post_slug }}</span>
                            {% if row.scope == "paragraph" %}
                            <span class="badge badge-warning">{{ row.scope_label }}</span>
                            {% else %}
                            <span class="badge">{{ row.scope_label }}</span>
                            {% endif %}
                            {% if row.frontend_url %}
                            <a href="{{ row.frontend_url }}" class="inline-link" target="_blank" rel="noreferrer noopener">
                                {% if row.scope == "paragraph" %}跳到前台段落{% else %}跳到前台文章{% endif %}
                            </a>
                            {% endif %}
                        </div>
                    </td>
                    <td>
                        <div class="item-title">
                            <strong>{{ row.content }}</strong>
                            {% if row.reply_target != "-" %}
                            <span class="item-meta">回复目标：{{ row.reply_target }}</span>
                            {% endif %}
                            {% if row.scope == "paragraph" and row.paragraph_excerpt != "-" %}
                            <span class="item-meta">段落上下文：{{ row.paragraph_excerpt }}</span>
                            {% endif %}
                            {% if row.scope == "paragraph" and row.paragraph_key != "-" %}
                            <span class="item-meta">段落 key：{{ row.paragraph_key }}</span>
                            {% endif %}
                        </div>
                    </td>
                    <td>
                        {% if row.approved %}
                        <span class="badge badge-success">已审核</span>
                        {% else %}
                        <span class="badge badge-warning">待审核</span>
                        {% endif %}
                    </td>
                    <td class="mono">{{ row.created_at }}</td>
                    <td>
                        <div class="actions">
                            <button class="btn btn-success" onclick='adminPatch("{{ row.api_url }}", {"approved": true}, "评论状态已更新")'>通过</button>
                            <button class="btn btn-warning" onclick='adminPatch("{{ row.api_url }}", {"approved": false}, "评论状态已更新")'>待审</button>
                            <button class="btn btn-danger" onclick='adminDelete("{{ row.api_url }}", "评论已删除")'>删除</button>
                            <a href="{{ row.api_url }}" class="btn btn-ghost" target="_blank" rel="noreferrer noopener">API</a>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="empty">当前筛选条件下暂无评论数据。</div>
    {% endif %}
</section>
{% endblock %}