{% extends "base.html" %}
{% block content %}
<div class="card">
    <h2>Quality Report</h2>
    <p style="color:#94a3b8">Automated quality metrics and defect tracking.</p>
</div>

<div class="stat-grid">
    <div class="stat">
        <div class="num">{{ defects|length }}</div>
        <div class="label">Defects</div>
    </div>
    <div class="stat">
        <div class="num">{{ chapters|length }}</div>
        <div class="label">Chapters Analyzed</div>
    </div>
</div>

{% if defects %}
<div class="card defect-warn">
    <h3>Defects</h3>
    <table>
        <thead>
            <tr>
                <th>Stage</th>
                <th>Severity</th>
                <th>Message</th>
                <th>Time</th>
            </tr>
        </thead>
        <tbody>
            {% for d in defects %}
            <tr>
                <td>{{ d.stage }}</td>
                <td>
                    {% if d.severity == 'ERROR' %}
                        <span class="badge badge-red">{{ d.severity }}</span>
                    {% else %}
                        <span class="badge badge-yellow">{{ d.severity }}</span>
                    {% endif %}
                </td>
                <td>{{ d.message }}</td>
                <td>{{ d.timestamp }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}

<div class="card">
    <h3>Chapter Audio Summary</h3>
    <table>
        <thead>
            <tr>
                <th>Chapter</th>
                <th>Title</th>
                <th>Audio Count</th>
                <th>MOS Range</th>
                <th>Avg Similarity</th>
            </tr>
        </thead>
        <tbody>
            {% for ch in chapters %}
            <tr>
                <td><a href="/chapters/{{ ch.id }}" style="color: #7c3aed; text-decoration: none;">{{ ch.id }}</a></td>
                <td>{{ ch.title or 'Untitled' }}</td>
                <td>{{ ch.audio_count }}</td>
                <td>
                    {% if ch.min_mos is not none %}
                        {{ "%.2f"|format(ch.min_mos) }} - {{ "%.2f"|format(ch.max_mos) }}
                    {% else %}
                        <span style="color: #64748b;">N/A</span>
                    {% endif %}
                </td>
                <td>
                    {% if ch.avg_sim is not none %}
                        {{ "%.2f"|format(ch.avg_sim) }}
                    {% else %}
                        <span style="color: #64748b;">N/A</span>
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}