{% load unfold %}

<!-- Activity Tracker -->
<div class="space-y-4">
    <!-- Legend -->
    <div class="flex items-center justify-between text-sm text-gray-600 dark:text-gray-400">
        <span>Less</span>
        <div class="flex items-center space-x-1">
            <div class="w-3 h-3 bg-gray-200 dark:bg-gray-700 rounded-sm"></div>
            <div class="w-3 h-3 bg-green-200 dark:bg-green-800 rounded-sm"></div>
            <div class="w-3 h-3 bg-green-400 dark:bg-green-600 rounded-sm"></div>
            <div class="w-3 h-3 bg-green-600 dark:bg-green-500 rounded-sm"></div>
            <div class="w-3 h-3 bg-green-800 dark:bg-green-400 rounded-sm"></div>
        </div>
        <span>More</span>
    </div>

    <!-- Activity Tracker Grid -->
    <div class="overflow-x-auto pb-2">
        {% if activity_tracker %}
            <!-- GitHub-style heatmap visualization -->
            <div id="activity-heatmap" class="inline-flex gap-1"></div>

            <script>
            (function() {
                const activityData = {{ activity_tracker }};
                const heatmap = document.getElementById('activity-heatmap');

                if (activityData && activityData.length > 0) {
                    // Group days into weeks (7 days per column)
                    const weeks = [];
                    for (let i = 0; i < activityData.length; i += 7) {
                        weeks.push(activityData.slice(i, i + 7));
                    }

                    // Create week columns
                    weeks.forEach(week => {
                        const weekColumn = document.createElement('div');
                        weekColumn.className = 'flex flex-col gap-1';

                        week.forEach(day => {
                            const cell = document.createElement('div');
                            cell.className = 'w-3 h-3 rounded-sm transition-all hover:ring-2 hover:ring-blue-400 cursor-pointer';

                            // Color based on activity level
                            if (day.count === 0) {
                                cell.className += ' bg-gray-200 dark:bg-gray-700';
                            } else if (day.count <= 2) {
                                cell.className += ' bg-green-200 dark:bg-green-800';
                            } else if (day.count <= 5) {
                                cell.className += ' bg-green-400 dark:bg-green-600';
                            } else if (day.count <= 10) {
                                cell.className += ' bg-green-600 dark:bg-green-500';
                            } else {
                                cell.className += ' bg-green-800 dark:bg-green-400';
                            }

                            cell.title = `${day.date}: ${day.count} activities`;
                            weekColumn.appendChild(cell);
                        });

                        heatmap.appendChild(weekColumn);
                    });
                }
            })();
            </script>
        {% else %}
            <div class="flex items-center justify-center p-8 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
                <div class="text-center">
                    <span class="material-icons text-4xl text-gray-400 dark:text-gray-500 mb-2">timeline</span>
                    <p class="text-gray-600 dark:text-gray-400">No activity data available</p>
                </div>
            </div>
        {% endif %}
    </div>

    <!-- Summary Stats -->
    <div class="grid grid-cols-3 gap-4 pt-4 border-t border-gray-200 dark:border-gray-700">
        <div class="text-center">
            <div class="text-lg font-semibold text-gray-900 dark:text-gray-100">365</div>
            <div class="text-xs text-gray-600 dark:text-gray-400">Days tracked</div>
        </div>
        <div class="text-center">
            <div class="text-lg font-semibold text-green-600 dark:text-green-400">52</div>
            <div class="text-xs text-gray-600 dark:text-gray-400">Weeks</div>
        </div>
        <div class="text-center">
            <div class="text-lg font-semibold text-blue-600 dark:text-blue-400">{{ activity_tracker|length|default:"0" }}</div>
            <div class="text-xs text-gray-600 dark:text-gray-400">Data points</div>
        </div>
    </div>
</div>