{% extends "base.html" %}
{% load static i18n %}

{% block title %}{% trans "Recruitment Dashboard" %} - {{ block.super }}{% endblock %}

{% block customCSS %}
<style>
    /* UI Variables for the KAAT-S Theme (Teal/Consistent Look) */
    :root {
        --kaauh-teal: #00636e; /* Dark Teal */
        --kaauh-teal-light: #0093a3;
        --kaauh-teal-dark: #004a53;
        --kaauh-border: #eaeff3;
        --kaauh-primary-text: #343a40;
        --color-success: #28a745;
        --color-warning: #ffc107; /* Standardized warning color */
        --color-info: #17a2b8;
    }

    /* General Card Styling */
    .card {
        border: 1px solid var(--kaauh-border);
        border-radius: 0.75rem;
        box-shadow: 0 4px 12px rgba(0,0,0,0.06);
        transition: transform 0.2s, box-shadow 0.2s;
        background-color: white;
    }
    .card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0,0,0,0.1);
    }

    /* Card Header and Icon Styling */
    .card-header {
        font-weight: 600;
        padding: 1.25rem;
        border-bottom: 1px solid var(--kaauh-border);
        background-color: #f8f9fa;
        display: flex; /* Ensure title and filter are aligned */
        justify-content: space-between;
        align-items: center;
    }

    .card-header h3, .card-header h2 {
        display: flex;
        align-items: center;
        color: var(--kaauh-primary-text);
        font-size: 1.25rem;
        font-weight: 600;
        margin: 0;
    }

    .stat-icon {
        color: var(--kaauh-teal);
        font-size: 1.75rem;
        margin-right: 0.75rem;
    }

    /* Stats Grid Layout */
    .stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 1.5rem;
        margin-bottom: 3rem;
    }

    /* Stat Card Specific Styling */
    .stat-value {
        font-size: 2.8rem;
        text-align: center;
        color: var(--kaauh-teal-dark);
        font-weight: 700;
        padding: 1rem 1rem 0.5rem;
    }

    .stat-caption {
        font-size: 0.9rem;
        text-align: center;
        color: #6c757d;
        padding-bottom: 1rem;
    }
    
    /* Dropdown/Filter Styling */
    .job-filter-container {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .form-select {
        border-color: var(--kaauh-border);
        border-radius: 0.5rem;
        font-size: 0.9rem;
    }
    .form-select:focus {
        border-color: var(--kaauh-teal);
        box-shadow: 0 0 0 0.2rem rgba(0, 99, 110, 0.25);
    }
    .job-filter-label {
        font-weight: 500;
        color: var(--kaauh-primary-text);
        margin: 0;
        white-space: nowrap;
    }

    /* Chart Container */
    .chart-container {
        padding: 2rem;
    }

    /* Bootstrap Overrides (Optional, for full consistency) */
    .btn-primary {
        background-color: var(--kaauh-teal);
        border-color: var(--kaauh-teal);
    }
    .btn-primary:hover {
        background-color: var(--kaauh-teal-dark);
        border-color: var(--kaauh-teal-dark);
    }

</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-4">

    <h1 class="mb-4" style="color: var(--kaauh-teal-dark); font-weight: 700;">{% trans "Recruitment Intelligence" %} 🧠</h1>

    {# -------------------------------------------------------------------------- #}
    {# STATS CARDS SECTION #}
    {# -------------------------------------------------------------------------- #}
    <div class="stats">

        <div class="card">
            <div class="card-header">
                <h3><i class="fas fa-briefcase stat-icon"></i> {% trans "Total Jobs" %}</h3>
            </div>
            <div class="stat-value">{{ total_jobs }}</div>
            <div class="stat-caption">{% trans "Active & Drafted Positions" %}</div>
        </div>

        <div class="card">
            <div class="card-header">
                <h3><i class="fas fa-users stat-icon"></i> {% trans "Total Candidates" %}</h3>
            </div>
            <div class="stat-value">{{ total_candidates }}</div>
            <div class="stat-caption">{% trans "All Profiles in ATS" %}</div>
        </div>

        <div class="card">
            <div class="card-header">
                <h3><i class="fas fa-chart-line stat-icon"></i> {% trans "Avg. Apps per Job" %}</h3>
            </div>
            <div class="stat-value">{{ average_applications|floatformat:1 }}</div>
            <div class="stat-caption">{% trans "Efficiency Metric" %}</div>
        </div>

        <div class="card">
            <div class="card-header">
                <h3><i class="fas fa-star stat-icon" style="color: var(--color-warning);"></i> {% trans "Avg. Match Score" %}</h3>
            </div>
            <div class="stat-value">{{ avg_match_score|floatformat:1 }}</div>
            <div class="stat-caption">{% trans "Average AI Score (0-100)" %}</div>
        </div>

        <div class="card">
            <div class="card-header">
                <h3><i class="fas fa-trophy stat-icon" style="color: var(--color-success);"></i> {% trans "High Potential" %}</h3>
            </div>
            <div class="stat-value">{{ high_potential_count }}</div>
            <div class="stat-caption">{% trans "Candidates with Score ≥ 75 ({{ high_potential_ratio }}%)" %}</div>
        </div>

        <div class="card">
            <div class="card-header">
                <h3><i class="fas fa-cogs stat-icon" style="color: var(--color-info);"></i> {% trans "Scored Profiles" %}</h3>
            </div>
            <div class="stat-value">{{ scored_ratio|floatformat:1 }}%</div>
            <div class="stat-caption">{% trans "Percent of profiles processed by AI" %}</div>
        </div>
    </div>

    {# -------------------------------------------------------------------------- #}
    {# CHARTS SECTION (Using a row/col layout for structure) #}
    {# -------------------------------------------------------------------------- #}
    <div class="row g-4">
        
        {# BAR CHART - Application Volume #}
        <div class="col-lg-12">
            <div class="card shadow-lg h-100">
                <div class="card-header">
                    <h2>
                        <i class="fas fa-chart-bar stat-icon"></i>
                        {% trans "Top 5 Application Volume" %}
                    </h2>
                </div>
                <div class="chart-container">
                    <canvas id="applicationsChart"></canvas>
                </div>
            </div>
        </div>

        {# DONUT CHART - Candidate Pipeline Status #}
        <div class="col-lg-12">
            <div class="card shadow-lg h-100">
                <div class="card-header">
                    <h2>
                        <i class="fas fa-filter stat-icon"></i>
                        {% trans "Candidate Pipeline Status for job: " %}
                    </h2>
                    <small>{{my_job}}</small>
                    
                    {# Job Filter Dropdown - Consistent with Card Header Layout #}
                    <form method="get" action="." class="job-filter-container">
                        <label for="job-select" class="job-filter-label d-none d-md-inline">{% trans "Filter Job:" %}</label>
                        <select name="selected_job_id" id="job-select" class="form-select form-select-sm" onchange="this.form.submit()">
                            
                            <option value="">{% trans "All Jobs (Default View)" %}</option>
                            {% for job in jobs%}
                                <option value="{{ job.internal_job_id }}" {% if selected_job_id == job.internal_job_id %}selected{% endif %}>
                                    {{ job }}
                                </option>
                            {% endfor %}
                        </select>
                    </form>
                </div>
                
                <div class="chart-container d-flex justify-content-center align-items-center">
                    <canvas id="candidate_donout_chart"></canvas>
                </div>
            </div>
        </div>
    </div>
    
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // Get the all_candidates_count value from Django context
    const ALL_CANDIDATES_COUNT = '{{ all_candidates_count|default:0 }}';

    // --- 1. DONUT CHART CENTER TEXT PLUGIN (Custom) ---
    const centerTextPlugin = {
        id: 'centerText',
        beforeDraw: (chart) => {
            const { ctx } = chart;
            
            // Convert to integer (handle case where all_candidates_count might be missing)
            const total = parseInt(ALL_CANDIDATES_COUNT) || 0; 
            if (total === 0) return; // Don't draw if count is zero

            // Get chart center coordinates
            const xCenter = chart.getDatasetMeta(0).data[0].x;
            const yCenter = chart.getDatasetMeta(0).data[0].y;
            
            ctx.restore();
            
            // --- First Line: The Total Count (Bold Number) ---
            ctx.font = 'bold 28px sans-serif'; 
            ctx.fillStyle = 'var(--kaauh-teal-dark)';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText(total.toString(), xCenter, yCenter - 10);

            // --- Second Line: The Label ---
            const labelText = '{% trans "Total" %}';
            ctx.font = '12px sans-serif'; 
            ctx.fillStyle = '#6c757d'; 
            ctx.fillText(labelText, xCenter, yCenter + 20);
            
            ctx.save();
        }
    };
    // ------------------------------------------------

    // Pass context data safely to JavaScript
    const jobTitles = JSON.parse('{{ job_titles|escapejs }}').slice(0, 5); // Take top 5
    const jobAppCounts = JSON.parse('{{ job_app_counts|escapejs }}').slice(0, 5); // Take top 5

    // BAR CHART configuration
    const ctxBar = document.getElementById('applicationsChart').getContext('2d');
    new Chart(ctxBar, {
        type: 'bar',
        data: {
            labels: jobTitles,
            datasets: [{
                label: '{% trans "Applications" %}',
                data: jobAppCounts,
                backgroundColor: 'var(--kaauh-teal)',
                borderColor: 'var(--kaauh-teal-dark)',
                borderWidth: 1,
                barThickness: 50
            }]
        },
        options: {
            responsive: true,
            aspectRatio: 2.5,
            plugins: {
                legend: { display: false },
                title: {
                    display: true,
                    text: '{% trans "Top 5 Most Applied Jobs" %}',
                    font: { size: 16 },
                    color: 'var(--kaauh-primary-text)'
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    title: { display: true, text: '{% trans "Total Applications" %}' },
                    ticks: { color: '#333333', precision: 0 },
                    grid: { color: '#e0e0e0' }
                },
                x: {
                    ticks: { color: '#333333' },
                    grid: { display: false }
                }
            }
        }
    });

    // DONUT CHART configuration
    const ctxDonut = document.getElementById('candidate_donout_chart').getContext('2d');

    new Chart(ctxDonut, {
        type: 'doughnut',
        data: {
            // Ensure these contexts are always output as valid JSON arrays
            labels: JSON.parse('{{ candidate_stage|safe }}'),
            datasets: [{
                label: '{% trans "Candidate Count" %}',
                data: JSON.parse('{{ candidates_count|safe }}'),
                backgroundColor: [
                    'var(--kaauh-teal)',       // Applied (Primary)
                    'rgb(255, 159, 64)',       // Exam (Orange)
                    'rgb(54, 162, 235)',       // Interview (Blue)
                    'rgb(75, 192, 192)'        // Offer (Green)
                ],
                hoverOffset: 4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: { padding: 20 }
                },
                title: {
                    display: true,
                    text: '{% trans "Pipeline Status Breakdown" %}',
                    font: { size: 16 }
                }
            }
        },
        // --- Register the custom plugin here ---
        plugins: [centerTextPlugin] 
    });
</script>

{% endblock %}