{% extends "solo/base_solo.html" %}

{% block title %}Edge Case Rules - Solo Mode{% endblock %}

{% block extra_head %}
<style>
    .rule-review-container {
        max-width: 900px;
        margin: 0 auto;
    }

    .stats-bar {
        display: flex;
        gap: 20px;
        margin-bottom: 24px;
        padding: 16px;
        background: #f8f9fa;
        border-radius: 8px;
    }

    .stat-item {
        text-align: center;
    }

    .stat-item .stat-value {
        font-size: 28px;
        font-weight: bold;
        display: block;
    }

    .stat-item .stat-label {
        font-size: 12px;
        color: #666;
        text-transform: uppercase;
    }

    .stat-value.pending { color: #ffc107; }
    .stat-value.approved { color: #28a745; }
    .stat-value.rejected { color: #dc3545; }

    .category-card {
        background: white;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 16px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    }

    .category-card h3 {
        margin-top: 0;
        font-size: 16px;
        color: #333;
    }

    .category-summary {
        font-size: 18px;
        padding: 12px 16px;
        background: #f0f7ff;
        border-left: 4px solid #007bff;
        border-radius: 4px;
        margin-bottom: 16px;
    }

    .member-rules {
        margin-top: 12px;
    }

    .member-rules-toggle {
        cursor: pointer;
        color: #007bff;
        font-size: 14px;
        border: none;
        background: none;
        padding: 0;
        text-decoration: underline;
    }

    .member-rules-list {
        display: none;
        margin-top: 8px;
        padding-left: 16px;
        border-left: 2px solid #eee;
    }

    .member-rules-list.visible {
        display: block;
    }

    .member-rule-item {
        padding: 6px 0;
        font-size: 13px;
        color: #555;
        border-bottom: 1px solid #f5f5f5;
    }

    .member-rule-item:last-child {
        border-bottom: none;
    }

    .member-rule-item .source-info {
        font-size: 11px;
        color: #999;
        margin-top: 2px;
    }

    .review-actions {
        display: flex;
        gap: 10px;
        margin-top: 16px;
        align-items: center;
    }

    .review-actions textarea {
        flex: 1;
        padding: 6px 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
        resize: none;
        height: 36px;
        font-size: 13px;
    }

    .btn-approve {
        background: #28a745;
        color: white;
        border: none;
        padding: 8px 20px;
        border-radius: 4px;
        cursor: pointer;
        font-weight: bold;
    }

    .btn-approve:hover { background: #218838; }

    .btn-reject {
        background: #dc3545;
        color: white;
        border: none;
        padding: 8px 20px;
        border-radius: 4px;
        cursor: pointer;
        font-weight: bold;
    }

    .btn-reject:hover { background: #c82333; }

    .empty-state {
        text-align: center;
        padding: 40px;
        color: #666;
    }

    .apply-section {
        margin-top: 24px;
        padding: 16px;
        background: #e8f5e9;
        border-radius: 8px;
        text-align: center;
    }

    .btn-apply {
        background: #007bff;
        color: white;
        border: none;
        padding: 10px 24px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 15px;
        font-weight: bold;
    }

    .btn-apply:hover { background: #0056b3; }
</style>
{% endblock %}

{% block content %}
<div class="rule-review-container">
    <h1>Edge Case Rule Review</h1>
    <p style="color: #666; margin-bottom: 20px;">
        These rules were discovered from instances where the LLM was uncertain.
        Review each category and approve or reject it for inclusion in the annotation guidelines.
    </p>

    <div class="stats-bar">
        <div class="stat-item">
            <span class="stat-value">{{ stats.total_rules }}</span>
            <span class="stat-label">Rules Discovered</span>
        </div>
        <div class="stat-item">
            <span class="stat-value">{{ stats.total_categories }}</span>
            <span class="stat-label">Categories</span>
        </div>
        <div class="stat-item">
            <span class="stat-value pending">{{ stats.pending_categories }}</span>
            <span class="stat-label">Pending</span>
        </div>
        <div class="stat-item">
            <span class="stat-value approved">{{ approved_count }}</span>
            <span class="stat-label">Approved</span>
        </div>
        <div class="stat-item">
            <span class="stat-value rejected">{{ rejected_count }}</span>
            <span class="stat-label">Rejected</span>
        </div>
    </div>

    {% if pending_categories %}
        {% for item in pending_categories %}
        <div class="category-card">
            <h3>Category: {{ item.category.id }}</h3>

            <div class="category-summary">
                {{ item.category.summary_rule }}
            </div>

            <div class="member-rules">
                <button class="member-rules-toggle"
                        onclick="this.nextElementSibling.classList.toggle('visible')">
                    Show {{ item.member_rules|length }} individual rules
                </button>
                <div class="member-rules-list">
                    {% for rule in item.member_rules %}
                    <div class="member-rule-item">
                        {{ rule.rule_text }}
                        <div class="source-info">
                            Instance: {{ rule.instance_id }} |
                            Confidence: {{ (rule.source_confidence * 100)|int }}%
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>

            <form method="POST" class="review-actions">
                <input type="hidden" name="category_id" value="{{ item.category.id }}">
                <textarea name="notes" placeholder="Optional notes..."></textarea>
                <button type="submit" name="action" value="approve" class="btn-approve">Approve</button>
                <button type="submit" name="action" value="reject" class="btn-reject">Reject</button>
            </form>
        </div>
        {% endfor %}
    {% else %}
        <div class="empty-state">
            <p>No pending categories to review.</p>
            {% if approved_count > 0 %}
            <p>{{ approved_count }} categories approved.</p>
            {% endif %}
        </div>
    {% endif %}

    {% if approved_count > 0 %}
    <div class="apply-section">
        <p>{{ approved_count }} approved categories ready to be incorporated into the annotation prompt.</p>
        <button class="btn-apply" onclick="applyRules()">Apply Approved Rules to Prompt</button>
    </div>
    {% endif %}

    <div style="margin-top: 20px;">
        <a href="{{ url_for('solo_mode.annotate') }}" class="btn btn-secondary">Back to Annotation</a>
        <a href="{{ url_for('solo_mode.status') }}" class="btn btn-secondary" style="margin-left: 10px;">View Status</a>
    </div>
</div>

<script>
function applyRules() {
    fetch('{{ url_for("solo_mode.api_rules_apply") }}', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Rules applied to prompt successfully! New prompt version: ' + data.new_prompt_version);
            window.location.reload();
        } else {
            alert('Error: ' + (data.error || 'Unknown error'));
        }
    })
    .catch(err => alert('Error applying rules: ' + err));
}
</script>
{% endblock %}