{% load unfold %}

<!-- Charts Section -->
<div class="mb-8 w-full">
    {% include 'admin/components/section_header.html' with title='Analytics Overview' icon='analytics' icon_color='blue' %}

    <!-- Time Range Navigation -->
    {% if navigation %}
        <div class="mb-6 flex items-center space-x-2">
            {% for nav_item in navigation %}
                <a href="{{ nav_item.link }}"
                   class="px-4 py-2 rounded-default {% if nav_item.active %}bg-primary-600 text-white{% else %}bg-base-100 dark:bg-base-800 text-font-default-light dark:text-font-default-dark hover:bg-base-200 dark:hover:bg-base-700{% endif %} transition-colors flex items-center">
                    {% if nav_item.icon %}
                        <span class="material-icons text-sm mr-2">{{ nav_item.icon }}</span>
                    {% endif %}
                    {{ nav_item.title }}
                </a>
            {% endfor %}
        </div>
    {% endif %}

    {% if charts %}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- User Registration Chart -->
        <div class="bg-white dark:bg-base-900 rounded-lg border border-base-200 dark:border-base-700 p-6 shadow-sm">
            <div class="mb-4">
                <h3 class="text-lg font-semibold text-font-important-light dark:text-font-important-dark">User Registrations</h3>
                <p class="text-sm text-font-subtle-light dark:text-font-subtle-dark">Last 7 days activity</p>
            </div>
            <div class="flex items-center mb-4">
                <span class="material-icons text-primary-600 dark:text-primary-500 mr-2">trending_up</span>
                <span class="text-sm text-font-subtle-light dark:text-font-subtle-dark">Growth Trends</span>
            </div>
            {% if charts.user_registrations %}
                <div class="relative h-[300px]">
                    <canvas id="userRegistrationsChart"></canvas>
                </div>
                <script>
                    document.addEventListener('DOMContentLoaded', function() {
                        const ctx = document.getElementById('userRegistrationsChart');
                        const chartData = {{ charts.user_registrations_json|safe }};

                        if (ctx && typeof Chart !== 'undefined') {
                            try {
                                new Chart(ctx, {
                                    type: 'line',
                                    data: chartData,
                                    options: {
                                        responsive: true,
                                        maintainAspectRatio: false,
                                        plugins: {
                                            legend: {
                                                display: true,
                                                position: 'top'
                                            }
                                        },
                                        scales: {
                                            y: {
                                                beginAtZero: true,
                                                ticks: {
                                                    precision: 0
                                                }
                                            }
                                        }
                                    }
                                });
                            } catch (error) {
                                console.error('Error creating registration chart:', error);
                            }
                        }
                    });
                </script>

                <!-- Fallback data table if chart doesn't render -->
                <div class="mt-4 text-xs text-font-subtle-light dark:text-font-subtle-dark">
                    <div class="flex justify-between items-center mb-2">
                        <span class="font-medium">Data Preview:</span>
                        <span>{{ charts.user_registrations.datasets.0.label }}</span>
                    </div>
                    <div class="grid grid-cols-7 gap-1 text-center">
                        {% for label in charts.user_registrations.labels %}
                            <div class="bg-base-100 dark:bg-base-700 p-1 rounded text-xs">{{ label }}</div>
                        {% endfor %}
                    </div>
                    <div class="grid grid-cols-7 gap-1 text-center mt-1">
                        {% for value in charts.user_registrations.datasets.0.data %}
                            <div class="bg-primary-50 dark:bg-primary-900/20 p-1 rounded text-xs font-medium">{{ value }}</div>
                        {% endfor %}
                    </div>
                </div>
            {% else %}
                <div class="h-[300px] flex items-center justify-center bg-base-50 dark:bg-base-800 rounded-lg border border-base-200 dark:border-base-700">
                    <p class="text-font-subtle-light dark:text-font-subtle-dark">No registration data available</p>
                </div>
            {% endif %}
        </div>

        <!-- User Activity Chart -->
        <div class="bg-white dark:bg-base-900 rounded-lg border border-base-200 dark:border-base-700 p-6 shadow-sm">
            <div class="mb-4">
                <h3 class="text-lg font-semibold text-font-important-light dark:text-font-important-dark">User Activity</h3>
                <p class="text-sm text-font-subtle-light dark:text-font-subtle-dark">Weekly engagement metrics</p>
            </div>
            <div class="flex items-center mb-4">
                <span class="material-icons text-green-600 dark:text-green-400 mr-2">bar_chart</span>
                <span class="text-sm text-font-subtle-light dark:text-font-subtle-dark">Activity Levels</span>
            </div>
            {% if charts.user_activity %}
                <div class="relative h-[300px]">
                    <canvas id="userActivityChart"></canvas>
                </div>
                <script>
                    document.addEventListener('DOMContentLoaded', function() {
                        const ctx = document.getElementById('userActivityChart');
                        const chartData = {{ charts.user_activity_json|safe }};

                        if (ctx && typeof Chart !== 'undefined') {
                            try {
                                new Chart(ctx, {
                                    type: 'bar',
                                    data: chartData,
                                    options: {
                                        responsive: true,
                                        maintainAspectRatio: false,
                                        plugins: {
                                            legend: {
                                                display: true,
                                                position: 'top'
                                            }
                                        },
                                        scales: {
                                            y: {
                                                beginAtZero: true,
                                                ticks: {
                                                    precision: 0
                                                }
                                            }
                                        }
                                    }
                                });
                            } catch (error) {
                                console.error('Error creating activity chart:', error);
                            }
                        }
                    });
                </script>

                <!-- Fallback data table if chart doesn't render -->
                <div class="mt-4 text-xs text-font-subtle-light dark:text-font-subtle-dark">
                    <div class="flex justify-between items-center mb-2">
                        <span class="font-medium">Data Preview:</span>
                        <span>{{ charts.user_activity.datasets.0.label }}</span>
                    </div>
                    <div class="grid grid-cols-7 gap-1 text-center">
                        {% for label in charts.user_activity.labels %}
                            <div class="bg-base-100 dark:bg-base-700 p-1 rounded text-xs">{{ label }}</div>
                        {% endfor %}
                    </div>
                    <div class="grid grid-cols-7 gap-1 text-center mt-1">
                        {% for value in charts.user_activity.datasets.0.data %}
                            <div class="bg-green-50 dark:bg-green-900/20 p-1 rounded text-xs font-medium">{{ value }}</div>
                        {% endfor %}
                    </div>
                </div>
            {% else %}
                <div class="h-[300px] flex items-center justify-center bg-base-50 dark:bg-base-800 rounded-lg border border-base-200 dark:border-base-700">
                    <p class="text-font-subtle-light dark:text-font-subtle-dark">No activity data available</p>
                </div>
            {% endif %}
        </div>
    </div>
    {% else %}
    <div class="bg-base-50 dark:bg-base-800 rounded-lg border border-base-200 dark:border-base-700 p-8 text-center">
        <span class="material-icons text-4xl text-base-400 dark:text-base-500 mb-4">analytics</span>
        <h3 class="text-lg font-medium text-font-default-light dark:text-font-default-dark mb-2">No Chart Data</h3>
        <p class="text-font-subtle-light dark:text-font-subtle-dark">Charts data is not available in the context</p>
    </div>
    {% endif %}
</div>