{% extends 'dashboard/base.html.twig' %}

{% block title %}{{ 'tags.page_title'|trans({}, 'dashboard') }}{% endblock %}

{% block dashboard_content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                <h1 class="h2">
                    <i class="bi bi-tags me-2"></i>
                    {{ 'tags.title'|trans({}, 'dashboard') }}
                </h1>
                <div class="btn-toolbar mb-2 mb-md-0">
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createTagModal">
                        <i class="bi bi-plus-circle me-1"></i>
                        {{ 'tags.actions.new_tag'|trans({}, 'dashboard') }}
                    </button>
                </div>
            </div>

            <!-- Statistiques -->
            <div class="row mb-4">
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-body text-center">
                            <h3 class="text-primary">{{ tag_stats.total_tags }}</h3>
                            <p class="card-text">{{ 'tags.stats.created_tags'|trans({}, 'dashboard') }}</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">{{ 'tags.stats.most_used_title'|trans({}, 'dashboard') }}</h5>
                        </div>
                        <div class="card-body">
                            {% if tag_stats.most_used %}
                                {% for stat in tag_stats.most_used %}
                                    <span class="badge me-2 mb-2" style="background-color: {{ stat[0].color }}; font-size: 0.9em;">
                                        {{ stat[0].name }} ({{ stat.itemCount ?? 0 }})
                                    </span>
                                {% endfor %}
                            {% else %}
                                <p class="text-muted">{{ 'tags.stats.no_tags_used'|trans({}, 'dashboard') }}</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

            <!-- Liste des tags -->
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">{{ 'tags.list.title'|trans({}, 'dashboard') }}</h5>
                    <small class="text-muted">{{ 'tags.list.count'|trans({'%count%': tags|length}, 'dashboard') }}</small>
                </div>
                <div class="card-body">
                    {% if tags %}
                        <div class="row">
                            {% for tag in tags %}
                                <div class="col-md-6 col-lg-4 mb-3">
                                    <div class="card border-start-0" style="border-left: 4px solid {{ tag.color }};">
                                        <div class="card-body">
                                            <div class="d-flex justify-content-between align-items-start">
                                                <div>
                                                    <h6 class="card-title">{{ tag.name }}</h6>
                                                    <p class="small text-muted">
                                                        {{ 'tags.list.item.associated_objects'|trans({'%count%': tag.items|length}, 'dashboard') }}
                                                    </p>
                                                    <p class="small text-muted">
                                                        {{ 'tags.list.item.created_date'|trans({'%date%': tag.createdAt|date('d/m/Y')}, 'dashboard') }}
                                                    </p>
                                                </div>
                                                <div class="dropdown">
                                                    <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="dropdown">
                                                        <i class="bi bi-three-dots-vertical"></i>
                                                    </button>
                                                    <ul class="dropdown-menu">
                                                        <li>
                                                            <a class="dropdown-item" href="#" 
                                                               onclick="editTag({{ tag.id }}, '{{ tag.name }}', '{{ tag.color }}')">
                                                                <i class="bi bi-pencil me-2"></i>{{ 'tags.actions.edit'|trans({}, 'dashboard') }}
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a class="dropdown-item text-danger" href="#"
                                                               onclick="deleteTag({{ tag.id }}, '{{ tag.name }}')">
                                                                <i class="bi bi-trash me-2"></i>{{ 'tags.actions.delete'|trans({}, 'dashboard') }}
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="text-center py-5">
                            <i class="bi bi-tags display-4 text-muted"></i>
                            <h4 class="mt-3">{{ 'tags.empty.title'|trans({}, 'dashboard') }}</h4>
                            <p class="text-muted">{{ 'tags.empty.description'|trans({}, 'dashboard') }}</p>
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createTagModal">
                                {{ 'tags.empty.create_button'|trans({}, 'dashboard') }}
                            </button>
                        </div>
                    {% endif %}
                </div>
            </div>


<!-- Modal de création/édition de tag -->
<div class="modal fade" id="createTagModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="tagModalTitle">{{ 'tags.modal.create.title'|trans({}, 'dashboard') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="tagForm">
                    <input type="hidden" id="tagId" name="tagId">
                    <div class="mb-3">
                        <label for="tagName" class="form-label">{{ 'tags.modal.form.name_label'|trans({}, 'dashboard') }}</label>
                        <input type="text" class="form-control" id="tagName" name="name" required maxlength="100">
                    </div>
                    <div class="mb-3">
                        <label for="tagColor" class="form-label">{{ 'tags.modal.form.color_label'|trans({}, 'dashboard') }}</label>
                        <input type="color" class="form-control form-control-color" id="tagColor" name="color" value="#6c757d">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ 'tags.modal.actions.cancel'|trans({}, 'dashboard') }}</button>
                <button type="button" class="btn btn-primary" onclick="saveTag()">{{ 'tags.modal.actions.save'|trans({}, 'dashboard') }}</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal de confirmation de suppression -->
<div class="modal fade" id="deleteTagModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ 'tags.modal.delete.title'|trans({}, 'dashboard') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>{{ 'tags.modal.delete.confirm_message'|trans({}, 'dashboard') }} <strong id="deleteTagName"></strong> ?</p>
                <p class="text-muted small">{{ 'tags.modal.delete.warning'|trans({}, 'dashboard') }}</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ 'tags.modal.actions.cancel'|trans({}, 'dashboard') }}</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteTag">{{ 'tags.modal.actions.delete_confirm'|trans({}, 'dashboard') }}</button>
            </div>
        </div>
    </div>
</div>

<script>
// Traductions JavaScript
const translations = {
    edit_title: "{{ 'tags.js.edit_title'|trans({}, 'dashboard') }}",
    delete_log: "{{ 'tags.js.delete_log'|trans({}, 'dashboard') }}",
    save_log: "{{ 'tags.js.save_log'|trans({}, 'dashboard') }}"
};

function editTag(id, name, color) {
    document.getElementById('tagModalTitle').textContent = translations.edit_title;
    document.getElementById('tagId').value = id;
    document.getElementById('tagName').value = name;
    document.getElementById('tagColor').value = color;
    
    new bootstrap.Modal(document.getElementById('createTagModal')).show();
}

function deleteTag(id, name) {
    document.getElementById('deleteTagName').textContent = name;
    document.getElementById('confirmDeleteTag').onclick = function() {
        // Ici on ajoutera l'appel AJAX pour supprimer le tag
        console.log(translations.delete_log, id);
        bootstrap.Modal.getInstance(document.getElementById('deleteTagModal')).hide();
    };
    
    new bootstrap.Modal(document.getElementById('deleteTagModal')).show();
}

function saveTag() {
    const form = document.getElementById('tagForm');
    const formData = new FormData(form);
    
    // Ici on ajoutera l'appel AJAX pour sauvegarder le tag
    console.log(translations.save_log, Object.fromEntries(formData));
    
    bootstrap.Modal.getInstance(document.getElementById('createTagModal')).hide();
    // Recharger la page ou mettre à jour dynamiquement
    location.reload();
}

// Réinitialiser le formulaire quand on ferme le modal
document.getElementById('createTagModal').addEventListener('hidden.bs.modal', function () {
    document.getElementById('tagForm').reset();
    document.getElementById('tagModalTitle').textContent = "{{ 'tags.modal.create.title'|trans({}, 'dashboard') }}";
    document.getElementById('tagId').value = '';
});
</script>
{% endblock %}