{% extends "admin/base_site.html" %}
{% load admin_charts %}

{% block extrahead %}
    {{ block.super }}
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    
    <style>
        /* On harmonise avec le style Django Admin */
        #content { padding: 0 !important; }
        #nav-sidebar { display: none !important; } 
        #main { margin-left: 0 !important; }
        .dashboard-wrapper { padding: 25px; background-color: #f8f9fc; min-height: 100vh; }
        .card { border: none; border-radius: 10px; transition: transform 0.2s; }
        .card:hover { transform: translateY(-5px); }
        .navbar-custom { background: linear-gradient(90deg, #4e73df 0%, #224abe 100%); }
        .offcanvas { width: 280px !important; }
    </style>
{% endblock %}

{% block content %}
<div class="dashboard-wrapper">
    <nav class="navbar navbar-dark navbar-custom shadow mb-4 rounded px-3">
        <div class="container-fluid">
            <button class="btn btn-outline-light border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#menuLateral">
                <i class="fas fa-bars fa-lg"></i>
            </button>
            <span class="navbar-brand mb-0 h1 fw-bold">🚀 Dashboard Analytique</span>
            <div class="d-flex align-items-center text-white">
                <small class="me-3">Bienvenue, <strong>{{ user.get_username }}</strong></small>
                <i class="fas fa-user-circle fa-2x"></i>
            </div>
        </div>
    </nav>

    <div class="offcanvas offcanvas-start bg-dark text-white" tabindex="-1" id="menuLateral">
        <div class="offcanvas-header border-bottom border-secondary">
            <h5 class="offcanvas-title"><i class="fas fa-cogs me-2"></i>Navigation</h5>
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button>
        </div>
        <div class="offcanvas-body">
            <ul class="nav flex-column">
                <li class="nav-item">
                    <a href="{% url 'admin:index' %}" class="nav-link text-white py-3 border-bottom border-secondary">
                        <i class="fas fa-home me-2"></i> Accueil Dashboard
                    </a>
                </li>
                
                {% for app in available_apps %}
                    <li class="mt-4 mb-2 text-uppercase small text-secondary fw-bold px-3">{{ app.name }}</li>
                    {% for model in app.models %}
                        <li class="nav-item">
                            <a href="{{ model.admin_url }}" class="nav-link text-white-50 py-2 ps-4 hover-link">
                                <i class="fas fa-table me-2"></i> {{ model.name }}
                            </a>
                        </li>
                    {% endfor %}
                {% endfor %}
            </ul>
        </div>
    </div>

    <div class="row">
        {% for config in chart_configs %}
        <div class="col-xl-6 col-lg-6 mb-4">
            <div class="card shadow h-100 py-2">
                <div class="card-header bg-white d-flex justify-content-between align-items-center border-0">
                    <h6 class="m-0 font-weight-bold text-primary">{{ config.title }}</h6>
                    <div class="dropdown no-arrow">
                        <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
                    </div>
                </div>
                <div class="card-body">
                    <div style="height: 320px;">
                        <canvas id="chart-{{ config.id }}" 
                                data-type="{{ config.chart_type }}" 
                                data-config='{% get_chart_data config %}'>
                        </canvas>
                    </div>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-12 text-center py-5">
            <div class="alert alert-info">
                <i class="fas fa-info-circle me-2"></i> Aucun graphique configuré. Ajoutez-en un dans la section <strong>Admin charts</strong>.
            </div>
        </div>
        {% endfor %}
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const canvases = document.querySelectorAll('canvas[id^="chart-"]');
        
        canvases.forEach(canvas => {
            try {
                const ctx = canvas.getContext('2d');
                const type = canvas.getAttribute('data-type');
                const configData = JSON.parse(canvas.getAttribute('data-config'));
                
                if (configData.error) {
                    console.warn("Erreur config:", configData.error);
                    return;
                }

                new Chart(ctx, {
                    type: type,
                    data: configData,
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: { position: 'bottom' }
                        },
                        scales: type !== 'pie' && type !== 'doughnut' ? {
                            y: { beginAtZero: true }
                        } : {}
                    }
                });
            } catch (e) {
                console.error("Erreur d'initialisation du graphique:", e);
            }
        });
    });
</script>
{% endblock %}