{% load i18n %}
<div class="grid" hx-get="." hx-trigger="every 30s" hx-swap="outerHTML">
    <div class="s12 m4">
        <article class="round border padding">
            <h6 class="bold mb-1">{% trans "Recipes Over Time" %}</h6>
            <canvas id="recipeChart" style="width:100%; max-height:300px;"></canvas>
        </article>
    </div>
    <div class="s12 m4">
        <article class="round border padding">
            <h6 class="bold mb-1">{% trans "Orders Over Time" %}</h6>
            <canvas id="orderChart" style="width:100%; max-height:300px;"></canvas>
        </article>
    </div>
    <div class="s12 m4">
        <article class="round border padding">
            <h6 class="bold mb-1">{% trans "Avg Rating" %}</h6>
            <canvas id="ratingChart" style="width:100%; max-height:300px;"></canvas>
        </article>
    </div>

    <script>
        (function() {
            function initCharts() {
                if (typeof Chart === 'undefined') {
                    console.log('Chart.js not loaded yet, retrying in 100ms...');
                    setTimeout(initCharts, 100);
                    return;
                }

                const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary').trim() || '#5d4037';
                const secondaryColor = getComputedStyle(document.documentElement).getPropertyValue('--secondary').trim() || '#ff7a18';
                const tertiaryColor = getComputedStyle(document.documentElement).getPropertyValue('--tertiary').trim() || '#4caf50';

                // Recipe Chart
                const recipeCtx = document.getElementById('recipeChart');
                if (recipeCtx) {
                    new Chart(recipeCtx, {
                        type: 'line',
                        data: {
                            labels: {{ recipe_labels|safe }},
                            datasets: [{
                                label: '{% trans "Recipes" %}',
                                data: {{ recipe_counts|safe }},
                                borderColor: primaryColor,
                                backgroundColor: primaryColor + '33',
                                fill: true,
                                tension: 0.4
                            }]
                        },
                        options: {
                            responsive: true,
                            plugins: { legend: { display: false } },
                            scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } } }
                        }
                    });
                }

                // Order Chart
                const orderCtx = document.getElementById('orderChart');
                if (orderCtx) {
                    new Chart(orderCtx, {
                        type: 'line',
                        data: {
                            labels: {{ order_labels|safe }},
                            datasets: [{
                                label: '{% trans "Orders" %}',
                                data: {{ order_counts|safe }},
                                borderColor: tertiaryColor,
                                backgroundColor: tertiaryColor + '33',
                                fill: true,
                                tension: 0.4
                            }]
                        },
                        options: {
                            responsive: true,
                            plugins: { legend: { display: false } },
                            scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } } }
                        }
                    });
                }

                // Rating Chart
                const ratingCtx = document.getElementById('ratingChart');
                if (ratingCtx) {
                    new Chart(ratingCtx, {
                        type: 'bar',
                        data: {
                            labels: {{ rating_labels|safe }},
                            datasets: [{
                                label: '{% trans "Avg Rating" %}',
                                data: {{ rating_avgs|safe }},
                                backgroundColor: secondaryColor,
                                borderRadius: 4
                            }]
                        },
                        options: {
                            responsive: true,
                            plugins: { legend: { display: false } },
                            scales: { y: { min: 0, max: 10 } }
                        }
                    });
                }
            }

            // Run on load
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', initCharts);
            } else {
                initCharts();
            }
        })();
    </script>
</div>
