{% extends "base.html" %}

{% block title %}Auto Reactions{% endblock %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-2 pb-3 mb-4 border-bottom">
    <h1 class="h2"><i class="fa-solid fa-bolt text-success me-2"></i>Auto Reactions Management</h1>
</div>

<!-- Add Reaction Rule Card -->
<div class="card mb-4">
    <div class="card-header bg-white py-3">
        <h5 class="mb-0 fw-bold"><i class="fa-solid fa-plus-circle text-success me-2"></i>Add Auto-Reaction Target Rule</h5>
    </div>
    <div class="card-body">
        <form action="{{ url_for('reactions') }}" method="POST">
            <div class="row g-3">
                <div class="col-md-4">
                    <label for="target_chat" class="form-label font-weight-bold">Target Channel / Group Username *</label>
                    <input type="text" class="form-control" name="target_chat" placeholder="@mychannel or chat_id" required>
                </div>
                <div class="col-md-5">
                    <label for="emojis" class="form-label font-weight-bold">Reaction Emojis (Comma Separated)</label>
                    <input type="text" class="form-control" name="emojis" value="👍,❤️,🔥,😍,🎉" placeholder="👍,❤️,🔥" required>
                </div>
                <div class="col-md-3">
                    <label for="delay_seconds" class="form-label font-weight-bold">Reaction Delay (Seconds)</label>
                    <input type="number" step="0.5" class="form-control" name="delay_seconds" value="2.0">
                </div>
                <div class="col-md-6 mt-3">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="is_enabled" name="is_enabled" checked>
                        <label class="form-check-label fw-bold" for="is_enabled">Enable Rule Immediately</label>
                    </div>
                </div>
                <div class="col-md-6 text-end mt-3">
                    <button type="submit" class="btn btn-success">
                        <i class="fa-solid fa-plus me-1"></i>Save Reaction Rule
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Active Reaction Rules Table -->
<div class="card">
    <div class="card-header bg-white py-3">
        <h5 class="mb-0 fw-bold"><i class="fa-solid fa-list me-2"></i>Configured Reaction Rules ({{ rules|length }})</h5>
    </div>
    <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>ID</th>
                        <th>Target Chat</th>
                        <th>Emojis</th>
                        <th>Delay</th>
                        <th>Status</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for r in rules %}
                    <tr>
                        <td><strong>#{{ r.id }}</strong></td>
                        <td><code>{{ r.target_chat }}</code></td>
                        <td><span class="fs-5">{{ r.emojis }}</span></td>
                        <td>{{ r.delay_seconds }}s</td>
                        <td>
                            {% if r.is_enabled %}
                                <span class="badge bg-success">Active</span>
                            {% else %}
                                <span class="badge bg-secondary">Disabled</span>
                            {% endif %}
                        </td>
                        <td class="text-end">
                            <form action="{{ url_for('toggle_reaction_rule', rule_id=r.id) }}" method="POST" class="d-inline">
                                <button type="submit" class="btn btn-sm btn-outline-primary">
                                    <i class="fa-solid fa-power-off me-1"></i>Toggle
                                </button>
                            </form>
                            <form action="{{ url_for('delete_reaction_rule', rule_id=r.id) }}" method="POST" class="d-inline" onsubmit="return confirm('Delete this reaction rule?');">
                                <button type="submit" class="btn btn-sm btn-outline-danger">
                                    <i class="fa-solid fa-trash me-1"></i>Delete
                                </button>
                            </form>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="6" class="text-center text-muted py-4">No reaction rules configured yet. Add one above!</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}