{% extends "base.html" %}

{% block title %}Exception Review - {{ project.name }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1><i class="bi bi-flag-fill"></i> Exception Review</h1>
                <div>
                    <span class="badge bg-{{ 'danger' if exception_rate > 1 else 'warning' if exception_rate > 0.5 else 'success' }} fs-6 me-2">
                        Exception Rate: {{ "%.2f"|format(exception_rate) }}%
                    </span>
                    <span class="badge bg-secondary fs-6">{{ total_exceptions }} / {{ total_utterances }}</span>
                </div>
            </div>

            {% if exception_rate > 1 %}
            <div class="alert alert-danger mb-4">
                <i class="bi bi-exclamation-triangle-fill"></i>
                <strong>Quality Gate Failed:</strong> Exception rate ({{ "%.2f"|format(exception_rate) }}%) exceeds 1% threshold.
                The analysis process should be improved before proceeding to voice generation.
            </div>
            {% endif %}

            <!-- Filter Controls -->
            <div class="card mb-4">
                <div class="card-body">
                    <form method="GET" class="row g-3">
                        <div class="col-md-3">
                            <label class="form-label">Chapter</label>
                            <select name="chapter" class="form-select" hx-get="/api/exception-review/filter" hx-target="#exception-table" hx-trigger="change">
                                <option value="">All Chapters</option>
                                {% for ch in chapters %}
                                <option value="{{ ch.id }}" {% if ch.id == selected_chapter %}selected{% endif %}>
                                    Ch {{ ch.chapter_index + 1 }}: {{ ch.title or 'Untitled' }}
                                </option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Ambiguity Type</label>
                            <select name="ambiguity_type" class="form-select" hx-get="/api/exception-review/filter" hx-target="#exception-table" hx-trigger="change">
                                <option value="">All Types</option>
                                <option value="pronoun" {% if selected_type == 'pronoun' %}selected{% endif %}>Pronoun Resolution</option>
                                <option value="unnamed_role" {% if selected_type == 'unnamed_role' %}selected{% endif %}>Unnamed Role</option>
                                <option value="retroactive_name" {% if selected_type == 'retroactive_name' %}selected{% endif %}>Retroactive Naming</option>
                                <option value="ambiguous_tag" {% if selected_type == 'ambiguous_tag' %}selected{% endif %}>Ambiguous Tag</option>
                                <option value="generic_role" {% if selected_type == 'generic_role' %}selected{% endif %}>Generic Role</option>
                                <option value="character_absent" {% if selected_type == 'character_absent' %}selected{% endif %}>Character Absent</option>
                                <option value="low_confidence" {% if selected_type == 'low_confidence' %}selected{% endif %}>Low Confidence</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Confidence</label>
                            <select name="confidence" class="form-select" hx-get="/api/exception-review/filter" hx-target="#exception-table" hx-trigger="change">
                                <option value="">All</option>
                                <option value="very_low" {% if selected_confidence == 'very_low' %}selected{% endif %}>< 0.3</option>
                                <option value="low" {% if selected_confidence == 'low' %}selected{% endif %}>0.3 - 0.5</option>
                                <option value="medium" {% if selected_confidence == 'medium' %}selected{% endif %}>0.5 - 0.7</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Status</label>
                            <select name="status" class="form-select" hx-get="/api/exception-review/filter" hx-target="#exception-table" hx-trigger="change">
                                <option value="">All</option>
                                <option value="pending" {% if selected_status == 'pending' %}selected{% endif %}>Pending Review</option>
                                <option value="resolved" {% if selected_status == 'resolved' %}selected{% endif %}>Resolved</option>
                            </select>
                        </div>
                        <div class="col-md-2 d-flex align-items-end">
                            <button type="submit" class="btn btn-primary w-100">Apply Filters</button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Exception Table -->
            <div class="card" id="exception-table">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Exceptions Requiring Review</h5>
                    <div>
                        <button class="btn btn-sm btn-outline-secondary" hx-get="/api/exception-review/export" hx-target="#export-modal">
                            <i class="bi bi-download"></i> Export CSV
                        </button>
                    </div>
                </div>
                <div class="card-body p-0">
                    {% if exceptions %}
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>Chapter</th>
                                    <th>Utterance</th>
                                    <th>Current Speaker</th>
                                    <th>Confidence</th>
                                    <th>Ambiguity Type</th>
                                    <th>Evidence</th>
                                    <th>Text Preview</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for exc in exceptions %}
                                <tr class="{{ 'table-warning' if exc.confidence < 0.3 else 'table-info' if exc.confidence < 0.5 else '' }}">
                                    <td>
                                        <strong>Ch {{ exc.chapter_index + 1 }}</strong>
                                        <br><small class="text-muted">{{ exc.chapter_title or 'Untitled' }}</small>
                                    </td>
                                    <td>
                                        <code>utt{{ exc.utterance_index }}</code>
                                    </td>
                                    <td>
                                        {% if exc.speaker == 'narrator' %}
                                        <span class="badge bg-warning text-dark">Narrator</span>
                                        {% else %}
                                        <span class="badge bg-primary">{{ exc.speaker }}</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="progress flex-grow-1 me-2" style="height: 8px;">
                                                <div class="progress-bar {{ 'bg-danger' if exc.confidence < 0.3 else 'bg-warning' if exc.confidence < 0.5 else 'bg-info' if exc.confidence < 0.7 else 'bg-success' }}"
                                                     style="width: {{ exc.confidence * 100 }}%"></div>
                                            </div>
                                            <span class="fw-bold">{{ "%.0f"|format(exc.confidence * 100) }}%</span>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="badge bg-secondary">{{ exc.ambiguity_type }}</span>
                                    </td>
                                    <td>
                                        <small>
                                            {% for e in exc.evidence[:3] %}
                                            <div>{{ e }}</div>
                                            {% endfor %}
                                            {% if exc.evidence|length > 3 %}
                                            <div class="text-muted">+{{ exc.evidence|length - 3 }} more...</div>
                                            {% endif %}
                                        </small>
                                    </td>
                                    <td>
                                        <div class="text-truncate" style="max-width: 300px;">{{ exc.text[:200] }}{% if exc.text|length > 200 %}...{% endif %}</div>
                                    </td>
                                    <td>
                                        <div class="btn-group btn-group-sm" role="group">
                                            <button class="btn btn-outline-primary"
                                                    hx-get="/api/exception-review/{{ exc.id }}/context"
                                                    hx-target="#context-modal .modal-body"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#context-modal"
                                                    title="View Context">
                                                <i class="bi bi-eye"></i>
                                            </button>
                                            <button class="btn btn-outline-success"
                                                    hx-get="/api/exception-review/{{ exc.id }}/resolve-form"
                                                    hx-target="#resolve-modal .modal-body"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#resolve-modal"
                                                    title="Resolve">
                                                <i class="bi bi-check-circle"></i>
                                            </button>
                                            {% if exc.alternatives %}
                                            <button class="btn btn-outline-info"
                                                    hx-get="/api/exception-review/{{ exc.id }}/alternatives"
                                                    hx-target="#alternatives-modal .modal-body"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#alternatives-modal"
                                                    title="View Alternatives">
                                                <i class="bi bi-list-ul"></i>
                                            </button>
                                            {% endif %}
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination -->
                    <div class="card-footer">
                        <nav>
                            <ul class="pagination pagination-sm justify-content-center mb-0">
                                {% if page > 1 %}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ page - 1 }}&chapter={{ selected_chapter }}&ambiguity_type={{ selected_type }}&confidence={{ selected_confidence }}&status={{ selected_status }}">Previous</a>
                                </li>
                                {% endif %}
                                <li class="page-item disabled"><span class="page-link">Page {{ page }} of {{ total_pages }}</span></li>
                                {% if page < total_pages %}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ page + 1 }}&chapter={{ selected_chapter }}&ambiguity_type={{ selected_type }}&confidence={{ selected_confidence }}&status={{ selected_status }}">Next</a>
                                </li>
                                {% endif %}
                            </ul>
                        </nav>
                    </div>
                    {% else %}
                    <div class="text-center py-5">
                        <i class="bi bi-check-circle-fill text-success" style="font-size: 3rem;"></i>
                        <h4 class="mt-3">No Exceptions Found</h4>
                        <p class="text-muted">All attributions meet confidence thresholds.</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Context Modal -->
<div class="modal fade" id="context-modal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Utterance Context</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <!-- Loaded via HTMX -->
            </div>
        </div>
    </div>
</div>

<!-- Resolve Modal -->
<div class="modal fade" id="resolve-modal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Resolve Exception</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <!-- Loaded via HTMX -->
            </div>
        </div>
    </div>
</div>

<!-- Alternatives Modal -->
<div class="modal fade" id="alternatives-modal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Alternative Speakers</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <!-- Loaded via HTMX -->
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-refresh exception count badge
    function updateExceptionBadge() {
        fetch('/api/exception-review/stats')
            .then(r => r.json())
            .then(data => {
                const badge = document.querySelector('.badge.fs-6');
                if (badge) {
                    badge.textContent = `Exception Rate: ${data.exception_rate.toFixed(2)}%`;
                    badge.className = `badge bg-${data.exception_rate > 1 ? 'danger' : data.exception_rate > 0.5 ? 'warning' : 'success'} fs-6 me-2`;
                }
            });
    }
    setInterval(updateExceptionBadge, 30000);
});
</script>
{% endblock %}