{% extends "base.html" %}

{% block title %}Resilience Report - {{ data.model_name }}{% endblock %}

{% block content %}
    <section id="overview">
        <h2>Overview</h2>

        <div id="metrics-overview">
            <div class="row">
                <div class="col-md-3">
                    <div class="metric-card">
                        <h5>Resilience Score</h5>
                        <p class="metric-value {{ 'metric-good' if data.metrics.resilience_score >= 0.7 else 'metric-bad' }}">
                            {{ data.metrics.resilience_score | format_number(3) }}
                        </p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="metric-card">
                        <h5>Base Score</h5>
                        <p class="metric-value">
                            {{ data.metrics.base_score | format_number(3) }}
                        </p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="metric-card">
                        <h5>Avg Distribution Shift</h5>
                        <p class="metric-value {{ 'metric-good' if data.metrics.avg_distribution_shift <= 0.1 else 'metric-bad' }}">
                            {{ data.metrics.avg_distribution_shift | format_number(3) }}
                        </p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="metric-card">
                        <h5>Max Performance Gap</h5>
                        <p class="metric-value {{ 'metric-good' if data.metrics.max_performance_gap <= 0.1 else 'metric-bad' }}">
                            {{ data.metrics.max_performance_gap | format_percentage(2) }}
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div style="margin-top: 20px; padding: 15px; background: #e8f4f8; border-left: 4px solid #3498db; border-radius: 4px;">
            <p style="margin: 0;">
                <strong>Interpretation:</strong>
                {% if data.metrics.resilience_score >= 0.8 %}
                    Excellent resilience! The model maintains performance well under distribution shifts.
                {% elif data.metrics.resilience_score >= 0.6 %}
                    Good resilience. The model is reasonably stable under distribution changes.
                {% else %}
                    Low resilience. The model is sensitive to distribution shifts and may require improvement.
                {% endif %}
            </p>
        </div>
    </section>

    {% if include_charts %}
        <section id="distribution-shift-analysis">
            <h2>Distribution Shift Analysis</h2>

            <div class="chart-container" style="height: 500px;">
                <canvas id="distribution-shift-chart"></canvas>
            </div>

            <div style="margin-top: 20px;">
                <h3>Analysis</h3>
                <ul>
                    <li><strong>Distance Metrics:</strong> {{ data.distance_metrics | join(', ') }}</li>
                    <li><strong>Alpha Levels:</strong> {{ data.alphas | join(', ') }}</li>
                    {% if data.metrics.most_affected_feature %}
                    <li><strong>Most Affected Feature:</strong> {{ data.metrics.most_affected_feature }}</li>
                    {% endif %}
                </ul>

                {% if data.shift_results %}
                    <p>
                        The worst scenario showed a performance gap of
                        <strong>{{ data.metrics.max_performance_gap | format_percentage(2) }}</strong>,
                        while the average performance gap was
                        <strong>{{ data.metrics.avg_performance_gap | format_percentage(2) }}</strong>.
                    </p>
                {% endif %}
            </div>
        </section>

        {% if data.feature_importance and data.feature_importance | length > 0 %}
            <section id="feature-importance">
                <h2>Feature Importance</h2>

                <div class="chart-container" style="height: 500px;">
                    <canvas id="feature-importance-chart"></canvas>
                </div>

                <div style="margin-top: 20px;">
                    <h3>Top Features</h3>
                    <table>
                        <thead>
                            <tr>
                                <th>Rank</th>
                                <th>Feature Name</th>
                                <th>Importance</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for feature in data.feature_importance[:10] %}
                                <tr>
                                    <td>{{ feature.rank }}</td>
                                    <td>{{ feature.feature_name }}</td>
                                    <td>{{ feature.importance | format_number(4) }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </section>
        {% endif %}

        <section id="detailed-results">
            <h2>Detailed Results</h2>

            <div style="margin-bottom: 20px;">
                <label for="distance-metric-filter">Filter by Distance Metric:</label>
                <select id="distance-metric-filter" style="margin-left: 10px; padding: 5px;">
                    <option value="all">All</option>
                    {% for metric in data.distance_metrics %}
                        <option value="{{ metric }}">{{ metric }}</option>
                    {% endfor %}
                </select>
            </div>

            <div style="overflow-x: auto;">
                <table id="results-table">
                    <thead>
                        <tr>
                            <th>Distance Metric</th>
                            <th>Alpha</th>
                            <th>Feature</th>
                            <th>Baseline Score</th>
                            <th>Shifted Score</th>
                            <th>Performance Gap</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for result in data.shift_results %}
                            <tr data-distance-metric="{{ result.distance_metric }}">
                                <td>{{ result.distance_metric }}</td>
                                <td>{{ result.alpha | format_number(2) }}</td>
                                <td>{{ result.feature_name }}</td>
                                <td>{{ result.baseline_score | format_number(4) }}</td>
                                <td>{{ result.shifted_score | format_number(4) }}</td>
                                <td class="{{ 'metric-good' if result.performance_gap | abs <= 0.05 else 'metric-bad' }}">
                                    {{ result.performance_gap | format_percentage(2) }}
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </section>
    {% endif %}
{% endblock %}

{% block scripts %}
    {% if include_charts %}
        <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
        <script>
            // Data from template
            const reportData = {{ data | tojson }};

            // Distribution Shift Chart
            if (reportData.shift_results && reportData.shift_results.length > 0) {
                const ctx = document.getElementById('distribution-shift-chart');
                if (ctx) {
                    // Group by distance metric and alpha
                    const datasets = {};
                    reportData.distance_metrics.forEach(metric => {
                        datasets[metric] = {
                            label: metric,
                            data: [],
                            borderColor: getColorForMetric(metric),
                            backgroundColor: getColorForMetric(metric, 0.2),
                            borderWidth: 2,
                            fill: false
                        };
                    });

                    // Populate data
                    const alphaMap = {};
                    reportData.shift_results.forEach(result => {
                        if (!alphaMap[result.alpha]) {
                            alphaMap[result.alpha] = {};
                        }
                        if (!alphaMap[result.alpha][result.distance_metric]) {
                            alphaMap[result.alpha][result.distance_metric] = [];
                        }
                        alphaMap[result.alpha][result.distance_metric].push(Math.abs(result.performance_gap));
                    });

                    // Calculate averages and populate datasets
                    Object.keys(alphaMap).sort((a, b) => parseFloat(a) - parseFloat(b)).forEach(alpha => {
                        reportData.distance_metrics.forEach(metric => {
                            if (alphaMap[alpha][metric] && alphaMap[alpha][metric].length > 0) {
                                const avg = alphaMap[alpha][metric].reduce((a, b) => a + b, 0) / alphaMap[alpha][metric].length;
                                datasets[metric].data.push({ x: parseFloat(alpha), y: avg });
                            }
                        });
                    });

                    new Chart(ctx, {
                        type: 'line',
                        data: {
                            datasets: Object.values(datasets)
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                title: {
                                    display: true,
                                    text: 'Average Performance Gap by Alpha Level'
                                },
                                legend: {
                                    display: true,
                                    position: 'top'
                                }
                            },
                            scales: {
                                x: {
                                    type: 'linear',
                                    title: {
                                        display: true,
                                        text: 'Alpha Level'
                                    }
                                },
                                y: {
                                    title: {
                                        display: true,
                                        text: 'Average Performance Gap'
                                    },
                                    beginAtZero: true
                                }
                            }
                        }
                    });
                }
            }

            // Feature Importance Chart
            if (reportData.feature_importance && reportData.feature_importance.length > 0) {
                const ctx = document.getElementById('feature-importance-chart');
                if (ctx) {
                    const top10 = reportData.feature_importance.slice(0, 10);
                    new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: top10.map(f => f.feature_name),
                            datasets: [{
                                label: 'Importance',
                                data: top10.map(f => f.importance),
                                backgroundColor: 'rgba(52, 152, 219, 0.6)',
                                borderColor: 'rgba(52, 152, 219, 1)',
                                borderWidth: 1
                            }]
                        },
                        options: {
                            indexAxis: 'y',
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: {
                                    display: false
                                },
                                title: {
                                    display: true,
                                    text: 'Top 10 Features by Importance'
                                }
                            },
                            scales: {
                                x: {
                                    beginAtZero: true,
                                    title: {
                                        display: true,
                                        text: 'Importance Score'
                                    }
                                }
                            }
                        }
                    });
                }
            }

            // Filter functionality
            const filterSelect = document.getElementById('distance-metric-filter');
            if (filterSelect) {
                filterSelect.addEventListener('change', function() {
                    const selectedMetric = this.value;
                    const rows = document.querySelectorAll('#results-table tbody tr');
                    rows.forEach(row => {
                        if (selectedMetric === 'all' || row.dataset.distanceMetric === selectedMetric) {
                            row.style.display = '';
                        } else {
                            row.style.display = 'none';
                        }
                    });
                });
            }

            // Helper function to get colors
            function getColorForMetric(metric, alpha = 1) {
                const colors = {
                    'PSI': `rgba(52, 152, 219, ${alpha})`,
                    'KS': `rgba(231, 76, 60, ${alpha})`,
                    'WD1': `rgba(46, 204, 113, ${alpha})`,
                    'default': `rgba(149, 165, 166, ${alpha})`
                };
                return colors[metric] || colors['default'];
            }
        </script>
    {% endif %}
{% endblock %}