{% extends "base.html" %}

{% block content %}

<section class="a2t-section">
    <h2><i class="a2t-icon">&#9679;</i> Overview</h2>
    <div class="scorecard-grid">
        {% for card in scorecards %}
        <div class="scorecard scorecard-{{ card.color }}">
            <div class="scorecard-label">{{ card.label }}</div>
            <div class="scorecard-value">{{ card.value }}</div>
            <div class="scorecard-sub">{{ card.sub }}</div>
        </div>
        {% else %}
        <p class="a2t-empty">No metrics available for this report.</p>
        {% endfor %}
    </div>
</section>

<section class="a2t-section">
    <h2><i class="a2t-icon">&#9679;</i> Rankings
        {% if total_rankings %}<span class="a2t-badge">{{ total_rankings }} predictions</span>{% endif %}
    </h2>
    {% if rankings %}
    <table class="a2t-table">
        <thead>
            <tr><th>#</th><th>User ID</th><th>Item ID</th><th>Score</th><th>Similar Items</th></tr>
        </thead>
        <tbody>
            {% for row in rankings[:100] %}
            <tr>
                <td>{{ loop.index }}</td>
                <td>{{ row.user_id }}</td>
                <td>{{ row.item_id }}</td>
                <td>{{ "%.4f" | format(row.score) }}</td>
                <td>
                    {% for sim_id in row.get('similar_items', []) %}
                    <span class="a2t-pill">{{ sim_id }}</span>
                    {% else %}
                    <span class="a2t-muted">—</span>
                    {% endfor %}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
    <p class="a2t-empty">No predictions available for this report.</p>
    {% endif %}
</section>

<section class="a2t-section">
    <h2><i class="a2t-icon">&#9679;</i> Insights</h2>
    <div class="a2t-insights-grid">

        <div class="a2t-chart-panel">
            <h3>Prediction Score Distribution</h3>
            {% if score_distribution and score_distribution.n %}
            <div class="js-histogram-render"
                 data-counts='{{ score_distribution.counts | tojson }}'
                 data-bin-edges='{{ score_distribution.bin_edges | tojson }}'
                 data-mean="{{ score_distribution.mean }}"
                 style="height:320px;"></div>
            {% else %}
            <p class="a2t-empty">No prediction scores for this report.</p>
            {% endif %}
        </div>

        <div class="a2t-chart-panel">
            <h3>Item Embedding Projection (2D PCA)</h3>
            {% if embedding_plot and embedding_plot.x %}
            <div class="js-scatter-render"
                 data-x='{{ embedding_plot.x | tojson }}'
                 data-y='{{ embedding_plot.y | tojson }}'
                 data-ids='{{ embedding_plot.ids | tojson }}'
                 data-highlight-index="{{ embedding_plot.highlight_index if embedding_plot.highlight_index is not none else '' }}"
                 style="height:360px;"></div>
            {% else %}
            <p class="a2t-empty">No item embeddings supplied for this report.</p>
            {% endif %}
        </div>

        <div class="a2t-chart-panel a2t-chart-panel-full">
            <h3>Item-Item Similarity Heatmap</h3>
            {% if similarity_heatmap and similarity_heatmap.z %}
            <div class="js-heatmap-render"
                 data-z='{{ similarity_heatmap.z | tojson }}'
                 data-x='{{ similarity_heatmap.x | tojson }}'
                 data-y='{{ similarity_heatmap.y | tojson }}'
                 style="height:400px;"></div>
            {% else %}
            <p class="a2t-empty">No item embeddings supplied for this report.</p>
            {% endif %}
        </div>

    </div>
</section>

{% endblock %}

{% block scripts %}
<script src="static/js/{{ theme_js | default('supportinfer.js') }}"></script>
{% endblock %}