{% extends 'base.html' %}
{% block content %}

<div class="card p-5 mb-5 shadow-sm border-0" style="background: linear-gradient(135deg, #04A96D, #038a58); color: white; border-radius: 20px;">
    <div class="row align-items-center">
        <div class="col-md-9">
            <h2 class="fw-bold mb-2 text-white">Feature Importance Analysis</h2>
            <p class="text-white-50 mb-0">Explore which academic and socio-economic factors influence graduate unemployment risk the most.</p>
        </div>
        <div class="col-md-3 text-md-end mt-3 mt-md-0">
            <span class="badge bg-white text-success px-3 py-2 fw-bold shadow-sm" style="border-radius: 30px;">
                <i class="fa-solid fa-brain me-1"></i> Explainable AI (XAI)
            </span>
        </div>
    </div>
</div>

<div class="card p-4 shadow-sm border-0 rounded-4 mb-4">
    <div class="card-header bg-white border-0 pb-0">
        <h5 class="fw-bold text-dark m-0"><i class="fa-solid fa-chart-bar me-2 text-success"></i> Key Predictors Distribution</h5>
    </div>
    <div class="card-body">
        <div style="position: relative; height: 50vh; width: 100%;">
            <canvas id="liveChart"></canvas>
        </div>
    </div>
</div>

<div class="row g-4 mb-5">
    <div class="col-md-6">
        <div class="card border-0 shadow-sm rounded-4 p-4 h-100" style="border-left: 5px solid #04A96D !important;">
            <h5 class="fw-bold text-dark mb-2"><i class="fa-solid fa-graduation-cap text-success me-2"></i> Thesis Insight</h5>
            <p class="text-muted small">These impact scores are computed using the Gini Importance (Mean Decrease in Impurity) from our optimized <strong>Random Forest Classifier</strong>.</p>
            <p class="text-muted small mb-0">Use this visualization during your defense to justify why parameters like institutional soft skills, specific field practicals, and internship exposure emerge as high-weight anchors compared to static features.</p>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card border-0 shadow-sm rounded-4 p-4 h-100 bg-light">
            <h5 class="fw-bold text-dark mb-3"><i class="fa-solid fa-circle-question text-secondary me-2"></i> Defense QA Quick Reference</h5>
            <div class="accordion accordion-flush" id="xaiAccordion">
                <div class="accordion-item bg-transparent">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed p-2 fw-bold bg-transparent text-dark small" type="button" data-bs-toggle="collapse" data-bs-target="#xai1">
                            Q: Random Forest কীভাবে এই গুরুত্ব হিসাব করে?
                        </button>
                    </h2>
                    <div id="xai1" class="accordion-collapse collapse" data-bs-parent="#xaiAccordion">
                        <div class="accordion-body p-2 text-muted standard-font" style="font-size: 0.82rem;">
                            মডেলটি তৈরি হওয়ার সময় প্রতিটি ডিসিশন ট্রি-তে একটি নির্দিষ্ট ফিচারের কারণে ডেটার অশুদ্ধতা বা নোড ইম্পিউরিটি (Gini Impurity) কতটুকু হ্রাস পাচ্ছে, তার গড় হিসাব করে এই স্কোর দেওয়া হয়।
                        </div>
                    </div>
                </div>
                <div class="accordion-item bg-transparent">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed p-2 fw-bold bg-transparent text-dark small" type="button" data-bs-toggle="collapse" data-bs-target="#xai2">
                            Q: প্রেজেন্টেশনে এই চার্টের গুরুত্ব কী?
                        </button>
                    </h2>
                    <div id="xai2" class="accordion-collapse collapse" data-bs-parent="#xaiAccordion">
                        <div class="accordion-body p-2 text-muted standard-font" style="font-size: 0.82rem;">
                            এটি আমাদের মডেলের "Black Box" প্রকৃতি ভেঙে "Explainability" নিশ্চিত করে। অর্থাৎ কোন পলিসি বা স্কিলগুলো পরিবর্তন করলে বেকারত্ব দূর করা সম্ভব, তা ডেটা থেকে সরাসরি প্রমাণ করে।
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const labelsData = {{ data.importance_labels | tojson | safe }};
        const valuesData = {{ data.importance_values | tojson | safe }};

        const ctx = document.getElementById('liveChart').getContext('2d');
        
        // Creating a premium smooth gradient background for the bars
        const gradient = ctx.createLinearGradient(0, 0, ctx.canvas.width, 0);
        gradient.addColorStop(0, 'rgba(4, 169, 109, 0.2)');
        gradient.addColorStop(1, 'rgba(4, 169, 109, 0.85)');

        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labelsData,
                datasets: [{
                    label: 'Relative Importance Weight (%)',
                    data: valuesData,
                    backgroundColor: gradient,
                    borderColor: '#04A96D',
                    borderWidth: 1.5,
                    borderRadius: 6,
                    maxBarThickness: 30
                }]
            },
            options: {
                indexAxis: 'y', // Converts the layout to Horizontal Bar for clear text alignment
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    x: {
                        beginAtZero: true,
                        title: { display: true, text: 'Relative Importance Score (%)', font: { weight: 'bold' } },
                        grid: { display: true, color: 'rgba(0,0,0,0.05)' }
                    },
                    y: { 
                        grid: { display: false },
                        ticks: {
                            font: { size: 12, weight: '500' },
                            color: '#2d3748'
                        }
                    }
                },
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        backgroundColor: '#1e293b',
                        titleFont: { size: 13 },
                        bodyFont: { size: 12 },
                        padding: 10,
                        displayColors: false,
                        callbacks: {
                            label: function(context) {
                                return ` Importance: ${context.parsed.x}%`;
                            }
                        }
                    }
                }
            }
        });
    });
</script>
{% endblock %}