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

{% block extrastyle %}
{{ block.super }}
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- HTMX -->
<script src="https://unpkg.com/htmx.org@1.9.6"></script>
<!-- Anime.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<style>
    /* Custom animations */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .animate-fade-in-up {
        animation: fadeInUp 0.5s ease-out;
    }
    
    .stat-card {
        opacity: 0;
        transform: translateY(20px);
    }
    
    .chart-container {
        opacity: 0;
    }
</style>
{% endblock %}

{% block extrahead %}
{{ block.super }}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
{% endblock %}

{% block breadcrumbs %}
<div class="breadcrumbs">
    <a href="{% url 'admin:index' %}">{% trans "Accueil" %}</a> &rsaquo; {% trans "Tableau de bord comptable" %}
</div>
{% endblock %}

{% block content %}
<div class="bg-gray-100 min-h-screen p-6">
    <h1 class="text-3xl font-bold mb-8 text-gray-800">{% trans "Tableau de bord comptable" %}</h1>
    
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- Solde total -->
        <div id="balance-card" hx-get="{% url 'admin:accounting_balance_refresh' %}" hx-trigger="every 30s">
            {% include "admin/accounting/partials/balance_card.html" %}
        </div>
        
        <!-- Revenus du mois -->
        <div id="income-card" hx-get="{% url 'admin:accounting_income_refresh' %}" hx-trigger="every 30s">
            {% include "admin/accounting/partials/income_card.html" %}
        </div>
        
        <!-- Dépenses du mois -->
        <div id="expenses-card" hx-get="{% url 'admin:accounting_expenses_refresh' %}" hx-trigger="every 30s">
            {% include "admin/accounting/partials/expenses_card.html" %}
        </div>
        
        <!-- Factures en attente -->
        <div id="invoices-card" hx-get="{% url 'admin:accounting_invoices_refresh' %}" hx-trigger="every 30s">
            {% include "admin/accounting/partials/invoices_card.html" %}
        </div>
    </div>

    <!-- Graphiques -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-8">
        <div class="chart-container bg-white rounded-lg shadow-lg p-6 border-t-4 border-green-500">
            <h2 class="text-xl font-semibold text-gray-800 mb-4">{% trans "Évolution des revenus et dépenses" %}</h2>
            <div class="relative h-96">
                <canvas id="revenueExpenseChart"></canvas>
            </div>
        </div>

        <div class="chart-container bg-white rounded-lg shadow-lg p-6 border-t-4 border-blue-500">
            <h2 class="text-xl font-semibold text-gray-800 mb-4">{% trans "Répartition des dépenses par catégorie" %}</h2>
            <div class="relative h-96">
                <canvas id="expensePieChart"></canvas>
            </div>
        </div>
    </div>

    <!-- Actions rapides -->
    <div class="flex space-x-4 mt-8">
        <a href="{% url 'admin:accounting_transaction_add' %}" 
           class="inline-flex items-center px-4 py-2 bg-green-500 hover:bg-green-600 text-white rounded-lg transition-colors duration-200"
           hx-boost="true">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
            </svg>
            {% trans "Nouvelle transaction" %}
        </a>
        <a href="{% url 'admin:accounting_invoice_add' %}" 
           class="inline-flex items-center px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors duration-200"
           hx-boost="true">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
            </svg>
            {% trans "Nouvelle facture" %}
        </a>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Animation des cartes statistiques avec Anime.js
    anime({
        targets: '.stat-card',
        opacity: [0, 1],
        translateY: [20, 0],
        delay: anime.stagger(100),
        easing: 'easeOutQuad',
        duration: 800
    });

    // Animation des conteneurs de graphiques
    anime({
        targets: '.chart-container',
        opacity: [0, 1],
        translateY: [20, 0],
        delay: anime.stagger(200),
        easing: 'easeOutQuad',
        duration: 1000,
        begin: function() {
            document.querySelectorAll('.chart-container').forEach(el => {
                el.style.opacity = '0';
                el.style.transform = 'translateY(20px)';
            });
        }
    });

    // HTMX événements
    htmx.on('htmx:afterSwap', function(evt) {
        if (evt.detail.target.classList.contains('stat-card')) {
            anime({
                targets: evt.detail.target,
                scale: [1.05, 1],
                duration: 300,
                easing: 'easeOutQuad'
            });
        }
    });

    // Graphique d'évolution des revenus et dépenses
    const revenueCtx = document.getElementById('revenueExpenseChart').getContext('2d');
    new Chart(revenueCtx, {
        type: 'line',
        data: {
            labels: {{ chart_labels|safe }},
            datasets: [{
                label: '{% trans "Revenus" %}',
                data: {{ chart_revenues|safe }},
                borderColor: '#28a745',
                backgroundColor: 'rgba(40, 167, 69, 0.1)',
                tension: 0.4,
                fill: true
            }, {
                label: '{% trans "Dépenses" %}',
                data: {{ chart_expenses|safe }},
                borderColor: '#dc3545',
                backgroundColor: 'rgba(220, 53, 69, 0.1)',
                tension: 0.4,
                fill: true
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            interaction: {
                intersect: false,
                mode: 'index'
            },
            plugins: {
                legend: {
                    position: 'top',
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return value.toLocaleString('fr-FR') + ' €';
                        }
                    }
                }
            }
        }
    });

    // Graphique en camembert des dépenses par catégorie
    const expenseCtx = document.getElementById('expensePieChart').getContext('2d');
    const expenseData = {{ expenses_by_type|safe }};
    new Chart(expenseCtx, {
        type: 'doughnut',
        data: {
            labels: expenseData.map(item => item.type),
            datasets: [{
                data: expenseData.map(item => item.total),
                backgroundColor: [
                    '#4e73df', '#1cc88a', '#36b9cc',
                    '#f6c23e', '#e74a3b', '#858796',
                    '#5a5c69', '#476482', '#784545',
                    '#6b8e23', '#4169e1', '#cd853f'
                ]
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'right',
                    labels: {
                        font: {
                            size: 12
                        }
                    }
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            let value = context.raw;
                            let total = context.dataset.data.reduce((a, b) => a + b, 0);
                            let percentage = ((value * 100) / total).toFixed(1);
                            return `${context.label}: ${value.toLocaleString('fr-FR')} € (${percentage}%)`;
                        }
                    }
                }
            }
        }
    });
});
</script>
{% endblock %}