{% extends "base.html" %}

{% block content %}
<div class="header">
    <h1>Annotation Validation Report</h1>
    <p>Run ID: {{ data.summary.run_id }}</p>
    <p>Timestamp: {{ data.summary.timestamp }}</p>
</div>

<div class="summary">
    <div class="summary-card">
        <h3>Overall Status</h3>
        <span class="status {% if data.summary.status == 'PASSED' %}status-passed{% else %}status-failed{% endif %}">
            {{ data.summary.status }}
        </span>
    </div>
    <div class="summary-card">
        <h3>Total Fields</h3>
        <p>{{ data.fields|length }}</p>
    </div>
    <div class="summary-card">
        <h3>Total Samples</h3>
        <p>{{ data.inputs|length }}</p>
    </div>
</div>

{% for field_name, field in data.fields.items() %}
<div class="field-section">
    <div class="field-header">
        <h2>{{ field_name }}</h2>
        <span class="status {% if field.score >= field.threshold %}status-passed{% else %}status-failed{% endif %}">
            Score: {{ "%.2f"|format(field.score) }} (threshold: {{ field.threshold }})
        </span>
    </div>

    <div class="metrics">
        {% if field.details.accuracy is defined %}
        <div class="metric-card">
            <div class="metric-value">{{ "%.1f"|format(field.details.accuracy * 100) }}%</div>
            <div class="metric-label">Accuracy</div>
        </div>
        {% endif %}
        {% if field.details.mae is defined %}
        <div class="metric-card">
            <div class="metric-value">{{ "%.3f"|format(field.details.mae) }}</div>
            <div class="metric-label">Mean Absolute Error</div>
        </div>
        {% endif %}
        {% if field.details.rmse is defined %}
        <div class="metric-card">
            <div class="metric-value">{{ "%.3f"|format(field.details.rmse) }}</div>
            <div class="metric-label">Root Mean Square Error</div>
        </div>
        {% endif %}
    </div>

    <div class="tab-container">
        <div class="tab-buttons">
            <button class="tab-button active" onclick="switchTab('plot-{{ field_name }}', this)">Visualization</button>
            <button class="tab-button" onclick="switchTab('data-{{ field_name }}', this)">Raw Data</button>
            <button class="tab-button" onclick="switchTab('errors-{{ field_name }}', this)">Error Analysis</button>
        </div>
        
        <div id="plot-{{ field_name }}" class="tab-content active">
            <div class="plot-container">
                {{ field.plots[field_name] | safe if field.plots }}
            </div>
        </div>
        
        <div id="data-{{ field_name }}" class="tab-content">
            <table>
                <thead>
                    <tr>
                        <th>Index</th>
                        <th>Prediction</th>
                        <th>Ground Truth</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    {% for i in range(field.predictions|length) %}
                    <tr>
                        <td>{{ i + 1 }}</td>
                        <td>{{ field.predictions[i] }}</td>
                        <td>{{ field.annotations[i] if field.annotations else '-' }}</td>
                        <td>
                            {% if field.annotations %}
                                {% if field.predictions[i] == field.annotations[i] %}
                                    <span class="status status-passed">✓</span>
                                {% else %}
                                    <span class="status status-failed">✗</span>
                                {% endif %}
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        
        <div id="errors-{{ field_name }}" class="tab-content">
            {% if field.annotations %}
                <div class="error-summary">
                    <h3>Error Distribution</h3>
                    {% if field.details.error_distribution %}
                        <div class="plot-container">
                            {{ field.details.error_distribution | safe }}
                        </div>
                    {% endif %}
                    
                    {% if field.details.common_errors %}
                        <h3>Most Common Errors</h3>
                        <table>
                            <thead>
                                <tr>
                                    <th>Predicted</th>
                                    <th>Actual</th>
                                    <th>Count</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for error in field.details.common_errors %}
                                <tr>
                                    <td>{{ error.predicted }}</td>
                                    <td>{{ error.actual }}</td>
                                    <td>{{ error.count }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    {% endif %}
                </div>
            {% else %}
                <p>No annotation data available for error analysis.</p>
            {% endif %}
        </div>
    </div>
</div>
{% endfor %}

{% if data.inputs %}
<div class="field-section">
    <h2>Sample Inputs</h2>
    <div class="tab-container">
        <div class="tab-buttons">
            <button class="tab-button active" onclick="switchTab('inputs-table', this)">Table View</button>
            <button class="tab-button" onclick="switchTab('inputs-json', this)">JSON View</button>
        </div>
        
        <div id="inputs-table" class="tab-content active">
            <table>
                <thead>
                    <tr>
                        <th>Index</th>
                        {% for key in data.inputs[0].keys() %}
                        <th>{{ key }}</th>
                        {% endfor %}
                    </tr>
                </thead>
                <tbody>
                    {% for i, input in enumerate(data.inputs) %}
                    <tr>
                        <td>{{ i + 1 }}</td>
                        {% for value in input.values() %}
                        <td>{{ value }}</td>
                        {% endfor %}
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        
        <div id="inputs-json" class="tab-content">
            <pre><code>{{ data.inputs | tojson(indent=2) }}</code></pre>
        </div>
    </div>
</div>
{% endif %}
{% endblock %}