{% extends "base.html" %}

{% block title %}Moderation Rules - {{ project.name }} - AutoModerate{% endblock %}

{% block scripts %}
<link href="{{ url_for('static', filename='css/dashboard/rules.css') }}" rel="stylesheet">
<script>
    // Make project ID available to JavaScript
    window.projectId = '{{ project.id }}';
</script>
<script src="{{ url_for('static', filename='js/dashboard/rules.js') }}"></script>
{% endblock %}

{% block content %}
<!-- Hidden CSRF token for AJAX requests -->
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>

<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">Moderation Rules - {{ project.name }}</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <div class="btn-group me-2">
            <a href="{{ url_for('dashboard.project_detail', project_id=project.id) }}" class="btn btn-sm btn-outline-secondary">
                <i class="fas fa-arrow-left"></i> Back to Project
            </a>
            <a href="{{ url_for('dashboard.create_rule', project_id=project.id) }}" class="btn btn-sm btn-primary">
                <i class="fas fa-plus"></i> Create Rule
            </a>
        </div>
    </div>
</div>

<!-- Rules Overview -->
<div class="row mb-4">
    <div class="col-12">
        <div class="alert alert-info">
            <i class="fas fa-info-circle"></i>
            <strong>How Rules Work:</strong> Rules are processed in order of priority (highest first).
            When content matches a rule, the specified action is taken. If no rules match, AI moderation is applied.
        </div>
    </div>
</div>

<!-- Existing Rules -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">Active Moderation Rules</h5>
            </div>
            <div class="card-body">
                {% if rules %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Priority</th>
                                <th>Name</th>
                                <th>Type</th>
                                <th>Action</th>
                                <th>Status</th>
                                <th>Created</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for rule in rules %}
                            <tr>
                                <td>
                                    <span class="badge bg-primary">{{ rule.priority }}</span>
                                </td>
                                <td>
                                    <strong>{{ rule.name }}</strong>
                                    {% if rule.description %}
                                    <br><small class="text-muted">{{ rule.description }}</small>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if rule.rule_type == 'keyword' %}
                                        <span class="badge bg-info">Keyword</span>
                                    {% elif rule.rule_type == 'regex' %}
                                        <span class="badge bg-warning">Regex</span>
                                    {% elif rule.rule_type == 'ai_prompt' %}
                                        <span class="badge bg-success">AI Prompt</span>
                                    {% else %}
                                        <span class="badge bg-secondary">{{ rule.rule_type|title }}</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if rule.action == 'approve' %}
                                        <span class="badge bg-success">Approve</span>
                                    {% elif rule.action == 'reject' %}
                                        <span class="badge bg-danger">Reject</span>
                                    {% elif rule.action == 'flag' %}
                                        <span class="badge bg-warning">Flag</span>
                                    {% else %}
                                        <span class="badge bg-info">{{ rule.action|title }}</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if rule.is_active %}
                                        <span class="badge bg-success">Active</span>
                                    {% else %}
                                        <span class="badge bg-secondary">Inactive</span>
                                    {% endif %}
                                </td>
                                <td>{{ rule.created_at.strftime('%Y-%m-%d') }}</td>
                                <td>
                                    <div class="btn-group btn-group-sm">
                                        <button class="btn btn-outline-primary btn-sm view-rule-btn"
                                                data-rule-id="{{ rule.id }}"
                                                data-rule-name="{{ rule.name }}"
                                                data-rule-type="{{ rule.rule_type }}"
                                                data-rule-action="{{ rule.action }}"
                                                data-rule-description="{{ rule.description or '' }}"
                                                data-rule-priority="{{ rule.priority }}"
                                                title="View Details">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        <button class="btn btn-outline-secondary btn-sm edit-rule-btn"
                                                data-rule-id="{{ rule.id }}"
                                                data-rule-name="{{ rule.name }}"
                                                data-rule-type="{{ rule.rule_type }}"
                                                data-rule-action="{{ rule.action }}"
                                                data-rule-description="{{ rule.description or '' }}"
                                                data-rule-priority="{{ rule.priority }}"
                                                title="Edit Rule">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        {% if rule.is_active %}
                                        <button class="btn btn-outline-warning btn-sm toggle-rule-btn"
                                                data-rule-id="{{ rule.id }}"
                                                data-action="deactivate"
                                                title="Deactivate">
                                            <i class="fas fa-pause"></i>
                                        </button>
                                        {% else %}
                                        <button class="btn btn-outline-success btn-sm toggle-rule-btn"
                                                data-rule-id="{{ rule.id }}"
                                                data-action="activate"
                                                title="Activate">
                                            <i class="fas fa-play"></i>
                                        </button>
                                        {% endif %}
                                        <button class="btn btn-outline-danger btn-sm delete-rule-btn"
                                                data-rule-id="{{ rule.id }}"
                                                data-rule-name="{{ rule.name }}"
                                                title="Delete">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div class="text-center py-5">
                    <i class="fas fa-cogs fa-4x text-muted mb-4"></i>
                    <h3>No Moderation Rules Yet</h3>
                    <p class="text-muted mb-4">Create custom rules to automatically moderate content based on your specific requirements.</p>
                    <a href="{{ url_for('dashboard.create_rule', project_id=project.id) }}" class="btn btn-primary btn-lg">
                        <i class="fas fa-plus"></i> Create Your First Rule
                    </a>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Rule Details Modal -->
<div class="modal fade" id="ruleDetailsModal" tabindex="-1" aria-labelledby="ruleDetailsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="ruleDetailsModalLabel">Rule Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label"><strong>Rule Name:</strong></label>
                            <p id="modalRuleName" class="form-control-plaintext"></p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label"><strong>Rule Type:</strong></label>
                            <p id="modalRuleType" class="form-control-plaintext"></p>
                        </div>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label"><strong>Description:</strong></label>
                    <p id="modalRuleDescription" class="form-control-plaintext"></p>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label"><strong>Action:</strong></label>
                            <p id="modalRuleAction" class="form-control-plaintext"></p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label"><strong>Priority:</strong></label>
                            <p id="modalRulePriority" class="form-control-plaintext"></p>
                        </div>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label"><strong>Rule Configuration:</strong></label>
                    <div id="modalRuleConfig" class="bg-light p-3 rounded"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="editFromViewBtn">Edit Rule</button>
            </div>
        </div>
    </div>
</div>

<!-- Edit Rule Modal -->
<div class="modal fade" id="editRuleModal" tabindex="-1" aria-labelledby="editRuleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editRuleModalLabel">Edit Rule</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="editRuleForm" method="POST">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                <div class="modal-body">
                    <input type="hidden" id="editRuleId" name="rule_id">

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="editRuleName" class="form-label">Rule Name *</label>
                                <input type="text" class="form-control" id="editRuleName" name="name" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="editRulePriority" class="form-label">Priority *</label>
                                <input type="number" class="form-control" id="editRulePriority" name="priority" min="0" max="100" required>
                                <div class="form-text">Higher priority rules are checked first</div>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="editRuleDescription" class="form-label">Description</label>
                        <textarea class="form-control" id="editRuleDescription" name="description" rows="2"></textarea>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="editRuleAction" class="form-label">Action *</label>
                                <select class="form-select" id="editRuleAction" name="action" required>
                                    <option value="reject">Reject</option>
                                    <option value="flag">Flag for Review</option>
                                    <option value="approve">Approve</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Rule Type</label>
                                <input type="text" class="form-control" id="editRuleTypeDisplay" readonly>
                                <input type="hidden" id="editRuleType" name="rule_type">
                            </div>
                        </div>
                    </div>

                    <!-- Rule Type Specific Configuration -->
                    <div id="editRuleConfig">
                        <!-- Will be populated dynamically -->
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Changes</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteRuleModal" tabindex="-1" aria-labelledby="deleteRuleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteRuleModalLabel">Delete Rule</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete the rule "<span id="deleteRuleName"></span>"?</p>
                <p class="text-danger"><strong>This action cannot be undone.</strong></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteBtn">Delete Rule</button>
            </div>
        </div>
    </div>
</div>

<!-- Hidden element to store rule data -->
<script type="application/json" id="ruleDataStore">
{
    {% for rule in rules %}"{{ rule.id }}": {{ rule.rule_data|tojson if rule.rule_data else '{}' }}{% if not loop.last %},{% endif %}{% endfor %}
}
</script>
{% endblock %}