{% extends "base.html" %}
{% load i18n %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold">{% trans "Tags" %}</h1>
        <a href="{% url 'tag-create' %}" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
            {% trans "New Tag" %}
        </a>
    </div>

    <!-- Tag Cloud Section -->
    <div class="bg-white rounded-lg shadow-md p-6 mb-8">
        <h2 class="text-xl font-semibold mb-4">{% trans "Tag Cloud" %}</h2>
        <div id="tag-cloud-container" style="width: 100%; height: 400px;"></div>
    </div>

    <!-- Sort Controls -->
    <div class="flex flex-wrap gap-2 mb-6">
        <span class="text-gray-700 font-medium self-center mr-2">{% trans "Sort by:" %}</span>
        <a href="?sort=name" class="sort-btn px-3 py-1 rounded text-sm {% if current_sort == 'name' %}bg-blue-500 text-white{% else %}bg-gray-200 text-gray-700 hover:bg-gray-300{% endif %}">
            {% trans "Name (A-Z)" %}
        </a>
        <a href="?sort=name_desc" class="sort-btn px-3 py-1 rounded text-sm {% if current_sort == 'name_desc' %}bg-blue-500 text-white{% else %}bg-gray-200 text-gray-700 hover:bg-gray-300{% endif %}">
            {% trans "Name (Z-A)" %}
        </a>
        <a href="?sort=count" class="sort-btn px-3 py-1 rounded text-sm {% if current_sort == 'count' %}bg-blue-500 text-white{% else %}bg-gray-200 text-gray-700 hover:bg-gray-300{% endif %}">
            {% trans "Most Used" %}
        </a>
        <a href="?sort=count_asc" class="sort-btn px-3 py-1 rounded text-sm {% if current_sort == 'count_asc' %}bg-blue-500 text-white{% else %}bg-gray-200 text-gray-700 hover:bg-gray-300{% endif %}">
            {% trans "Least Used" %}
        </a>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        {% for tag in tags %}
        <a href="{% url 'tag-detail' tag.slug %}" class="block group">
            <div
                class="tag-card rounded-lg p-4 h-full flex flex-col items-center justify-center text-center shadow-md hover:shadow-lg transition-all duration-200">
                <div class="mb-2">
                    {% with icon_classes="w-8 h-8 mx-auto" %}
                    {% if forloop.counter|divisibleby:5 %}
                    <svg class="{{ icon_classes }}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
                    </svg>
                    {% elif forloop.counter|divisibleby:4 %}
                    <svg class="{{ icon_classes }}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                    </svg>
                    {% elif forloop.counter|divisibleby:3 %}
                    <svg class="{{ icon_classes }}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <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>
                    {% elif forloop.counter|divisibleby:2 %}
                    <svg class="{{ icon_classes }}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2" />
                    </svg>
                    {% else %}
                    <svg class="{{ icon_classes }}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
                    </svg>
                    {% endif %}
                    {% endwith %}
                </div>
                <h2 class="text-lg font-semibold mb-1">{{ tag.name }}</h2>
                <div class="mt-1">
                    <span
                        class="inline-flex items-center justify-center bg-white bg-opacity-30 text-xs font-medium px-2 py-1 rounded-full">
                        {{ tag.total_count }} {% trans "uses" %}
                    </span>
                </div>
            </div>
        </a>
        {% empty %}
        <div class="col-span-full text-center py-8 text-gray-500">
            {% trans "No tags found." %}
        </div>
        {% endfor %}
    </div>
</div>

<!-- Include ECharts and wordcloud extension -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-wordcloud@2.1.0/dist/echarts-wordcloud.min.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Debug message
        console.log('Script is running');

        // Define colors for tags - using colors from the image
        const tagColors = [
            '#3498db', // blue
            '#2ecc71', // green
            '#e74c3c', // red
            '#f39c12', // orange
            '#9b59b6', // purple
            '#1abc9c', // teal
            '#d35400', // dark orange
            '#34495e', // navy
            '#16a085', // dark green
            '#27ae60', // medium green
            '#8e44ad', // violet
            '#f1c40f'  // yellow
        ];

        // Apply colors to tag cards
        const tagCards = document.querySelectorAll('.tag-card');
        console.log('Found tag cards:', tagCards.length);

        tagCards.forEach((card, index) => {
            const randomColor = tagColors[Math.floor(Math.random() * tagColors.length)];
            card.style.backgroundColor = randomColor;
            card.style.color = 'white';
            console.log('Applied color:', randomColor, 'to card index:', index);
        });

        // Initialize ECharts instance
        const chartDom = document.getElementById('tag-cloud-container');
        const myChart = echarts.init(chartDom);
        
        // Prepare data for word cloud
        const tagCloudData = [];
        {% for tag in tag_cloud %}
        tagCloudData.push({
            name: '{{ tag.name }}',
            value: {{ tag.count }},
            slug: '{{ tag.slug }}'
        });
        {% endfor %}
        
        // Configure word cloud options
        const option = {
            series: [{
                type: 'wordCloud',
                shape: 'circle',
                left: 'center',
                top: 'center',
                width: '100%',
                height: '100%',
                right: null,
                bottom: null,
                sizeRange: [14, 60],  // Increased max size for better visibility
                rotationRange: [0, 0],  // No rotation for better readability like in the image
                rotationStep: 0,
                gridSize: 15,  // Increased grid size for better spacing
                drawOutOfBound: false,
                layoutAnimation: true,  // Enable animation when rendering
                textStyle: {
                    fontFamily: 'sans-serif',
                    fontWeight: 'bold',
                    color: function () {
                        return tagColors[Math.floor(Math.random() * tagColors.length)];
                    }
                },
                emphasis: {
                    textStyle: {
                        fontWeight: 'bold',
                        shadowBlur: 10,
                        shadowColor: '#333'
                    }
                },
                data: tagCloudData
            }]
        };
        
        // Set configuration and render chart
        myChart.setOption(option);
        
        // Add click event to navigate to tag detail page
        myChart.on('click', function(params) {
            const clickedTag = tagCloudData.find(tag => tag.name === params.name);
            if (clickedTag) {
                window.location.href = `/ui/tags/${clickedTag.slug}/`;
            }
        });
        
        // Make chart responsive
        window.addEventListener('resize', function() {
            myChart.resize();
        });
    });
</script>
{% endblock %}