{% extends "base.html" %}

{% block title %}XAURA - Results: {{ model_name }}{% endblock %}
{% block nav_results %}active{% endblock %}

{% block content %}
<section class="results-page">

    <!-- ── Header ─────────────────────────────────────────────── -->
    <div class="results-header">
        <div class="results-title-row">
            <h1 class="page-title">Model Results</h1>
            <div class="results-actions">
                {% if from_experiment %}
                <button class="btn btn-secondary" onclick="window.location.href='/experiments'">
                    Back to Experiments
                </button>
                {% else %}
                <button class="btn btn-secondary" onclick="window.location.href='/profile/{{ session_id }}'">
                    Back to Profile
                </button>
                {% endif %}
                {% if from_experiment %}
                <button class="btn btn-primary" onclick="window.location.href='/api/export/{{ session_id }}/zip'">
                    Export ZIP
                </button>
                {% else %}
                <button class="btn btn-primary" onclick="exportResults('{{ session_id }}')">
                    Export ZIP
                </button>
                {% endif %}
            </div>
        </div>
        <p class="page-subtitle">{{ filename }} &mdash; {{ model_name }}</p>
    </div>

    {% if profile %}
    <!-- ── Dataset Profile ────────────────────────────────────── -->
    <h3 class="section-title" style="text-align: left; margin-top: 0;">Dataset Profile</h3>
    <div class="summary-grid" style="margin-bottom: 32px;">
        <div class="summary-card">
            <div class="summary-value">{{ "{:,}".format(profile.n_rows) }}</div>
            <div class="summary-label">Rows</div>
        </div>
        <div class="summary-card">
            <div class="summary-value">{{ profile.n_cols }}</div>
            <div class="summary-label">Columns</div>
        </div>
        <div class="summary-card">
            <div class="summary-value">{{ profile.task_type or "unknown" }}</div>
            <div class="summary-label">Task Type</div>
        </div>
        <div class="summary-card">
            {% if profile.has_missing %}
            <div class="summary-value warning">{{ "%.1f"|format(profile.missing_fraction * 100) }}%</div>
            {% else %}
            <div class="summary-value success">None</div>
            {% endif %}
            <div class="summary-label">Missing Values</div>
        </div>
    </div>
    {% endif %}

    <h3 class="section-title" style="text-align: left; margin-top: 32px;">Model Results</h3>
    <!-- ── Model Info Cards ───────────────────────────────────── -->
    <div class="summary-grid">
        <div class="summary-card">
            <div class="summary-value">{{ model_name }}</div>
            <div class="summary-label">Model</div>
        </div>
        <div class="summary-card">
            <div class="summary-value">{{ task_type }}</div>
            <div class="summary-label">Task Type</div>
        </div>
        <div class="summary-card">
            <div class="summary-value">{{ train_time }}s</div>
            <div class="summary-label">Train Time</div>
        </div>
        <div class="summary-card">
            <div class="summary-value">{{ metrics | length }}</div>
            <div class="summary-label">Metrics</div>
        </div>
    </div>

    <!-- ── Metrics Panel ──────────────────────────────────────── -->
    <div class="card">
        <h3 class="card-title">Performance Metrics</h3>
        <div class="metrics-panel">
            {% for name, value in metrics.items() %}
            <div class="metric-row">
                <span class="metric-name">{{ name }}</span>
                {% if value is number and value <= 1.0 and value >= 0.0 %}
                <div class="metric-bar">
                    <div class="metric-fill" style="width: {{ (value * 100) | round(1) }}%"></div>
                </div>
                {% endif %}
                <span class="metric-value">{{ value }}</span>
            </div>
            {% endfor %}
        </div>
    </div>

    <!-- ── Charts Grid ────────────────────────────────────────── -->
    {% if charts %}
    <h3 class="section-title" style="text-align: left; margin-top: 32px;">Interactive Charts</h3>
    <div class="charts-grid">
        {# Classification charts #}
        {% if charts.get('confusion_matrix') %}
        <div class="chart-container" id="chart-confusion-matrix"></div>
        {% endif %}
        {% if charts.get('roc_curve') %}
        <div class="chart-container" id="chart-roc-curve"></div>
        {% endif %}
        {% if charts.get('precision_recall') %}
        <div class="chart-container" id="chart-precision-recall"></div>
        {% endif %}
        {% if charts.get('feature_importance') %}
        <div class="chart-container" id="chart-feature-importance"></div>
        {% endif %}
        {# Regression charts #}
        {% if charts.get('residuals_vs_fitted') %}
        <div class="chart-container" id="chart-residuals-vs-fitted"></div>
        {% endif %}
        {% if charts.get('qq_plot') %}
        <div class="chart-container" id="chart-qq-plot"></div>
        {% endif %}
        {% if charts.get('predicted_vs_actual') %}
        <div class="chart-container" id="chart-predicted-vs-actual"></div>
        {% endif %}
        {% if charts.get('residual_distribution') %}
        <div class="chart-container" id="chart-residual-distribution"></div>
        {% endif %}

        {# Clustering charts #}
        {% if charts.get('cluster_scatter') %}
        <div class="chart-container" id="chart-cluster-scatter"></div>
        {% endif %}
        {% if charts.get('silhouette') %}
        <div class="chart-container" id="chart-silhouette"></div>
        {% endif %}
    {% endif %}

    <!-- ── Config Panel ───────────────────────────────────────── -->
    <div class="card" style="margin-top: 24px;">
        <h3 class="card-title">Hyperparameters</h3>
        <pre class="config-pre">{{ config_str }}</pre>
    </div>

    {% if not charts %}
    <div class="card" style="margin-top: 24px; text-align: center; padding: 24px; color: var(--text-secondary);">
        <p style="margin: 0;">Charts are only available for the active session immediately after training.</p>
    </div>
    {% endif %}

</section>
{% endblock %}

{% block scripts %}
<script>
    // Render charts from server-provided JSON
    document.addEventListener("DOMContentLoaded", function() {
        {# Classification #}
        {% if charts.get('confusion_matrix') %}
        renderChart("chart-confusion-matrix", '{{ charts.confusion_matrix | safe }}');
        {% endif %}
        {% if charts.get('roc_curve') %}
        renderChart("chart-roc-curve", '{{ charts.roc_curve | safe }}');
        {% endif %}
        {% if charts.get('precision_recall') %}
        renderChart("chart-precision-recall", '{{ charts.precision_recall | safe }}');
        {% endif %}
        {% if charts.get('feature_importance') %}
        renderChart("chart-feature-importance", '{{ charts.feature_importance | safe }}');
        {% endif %}
        {# Regression #}
        {% if charts.get('residuals_vs_fitted') %}
        renderChart("chart-residuals-vs-fitted", '{{ charts.residuals_vs_fitted | safe }}');
        {% endif %}
        {% if charts.get('qq_plot') %}
        renderChart("chart-qq-plot", '{{ charts.qq_plot | safe }}');
        {% endif %}
        {% if charts.get('predicted_vs_actual') %}
        renderChart("chart-predicted-vs-actual", '{{ charts.predicted_vs_actual | safe }}');
        {% endif %}
        {% if charts.get('residual_distribution') %}
        renderChart("chart-residual-distribution", '{{ charts.residual_distribution | safe }}');
        {% endif %}

        {# Clustering #}
        {% if charts.get('cluster_scatter') %}
        renderChart("chart-cluster-scatter", '{{ charts.cluster_scatter | safe }}');
        {% endif %}
        {% if charts.get('silhouette') %}
        renderChart("chart-silhouette", '{{ charts.silhouette | safe }}');
        {% endif %}
    });
</script>
{% endblock %}