{% extends "base.html" %}

{% block title %}Configuration des compétences - Notytex{% endblock %}

{% block content %}
<div class="space-y-8">
    <!-- Breadcrumb -->
    <nav class="flex" aria-label="Breadcrumb">
        <ol class="flex items-center space-x-4">
            <li>
                <a href="{{ url_for('config.index') }}" class="text-gray-400 hover:text-gray-500">
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"/>
                    </svg>
                    <span class="sr-only">Configuration</span>
                </a>
            </li>
            <li>
                <div class="flex items-center">
                    <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
                    </svg>
                    <span class="ml-4 text-sm font-medium text-gray-500">Compétences</span>
                </div>
            </li>
        </ol>
    </nav>

    <!-- En-tête -->
    <div class="bg-gradient-to-r from-purple-600 to-pink-600 text-white rounded-xl p-8 shadow-lg">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-3xl font-bold mb-2">⭐ Gestion des compétences</h1>
                <p class="text-xl opacity-90">Configurez les compétences avec leurs couleurs et icônes</p>
            </div>
            <div class="hidden md:block">
                <div class="w-20 h-20 bg-white/20 rounded-full flex items-center justify-center">
                    <svg class="w-10 h-10" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                    </svg>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- Liste des compétences existantes -->
        <div class="lg:col-span-2">
            <div class="bg-white rounded-lg shadow-md">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">📋 Compétences configurées</h3>
                    <p class="text-sm text-gray-500 mt-1">{{ competences|length }} compétence(s) définie(s)</p>
                </div>
                
                <div class="p-6">
                    {% if competences %}
                        <div class="space-y-4">
                            {% for competence in competences %}
                                <div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg hover:border-gray-300 transition-colors">
                                    <div class="flex items-center space-x-3">
                                        <!-- Couleur -->
                                        <div 
                                            class="w-6 h-6 rounded-full border-2 border-white shadow-sm"
                                            style="background-color: {{ competence.color }}"
                                        ></div>
                                        
                                        <!-- Icône -->
                                        <div class="w-8 h-8 flex items-center justify-center">
                                            {% if competence.icon == 'calculator' %}
                                                <svg class="w-5 h-5 text-gray-600" fill="currentColor" viewBox="0 0 20 20">
                                                    <path d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V4a2 2 0 00-2-2H6zM6 4h8v2H6V4zm0 4h8v2H6V8zm0 4h8v2H6v-2z"/>
                                                </svg>
                                            {% elif competence.icon == 'lightbulb' %}
                                                <svg class="w-5 h-5 text-gray-600" fill="currentColor" viewBox="0 0 20 20">
                                                    <path d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.477.859h4z"/>
                                                </svg>
                                            {% elif competence.icon == 'chat-bubble-left-right' %}
                                                <svg class="w-5 h-5 text-gray-600" fill="currentColor" viewBox="0 0 20 20">
                                                    <path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z" clip-rule="evenodd"/>
                                                </svg>
                                            {% elif competence.icon == 'cube' %}
                                                <svg class="w-5 h-5 text-gray-600" fill="currentColor" viewBox="0 0 20 20">
                                                    <path d="M11 17a1 1 0 001.447.894l4-2A1 1 0 0017 15V9.236a1 1 0 00-1.447-.894l-4 2a1 1 0 00-.553.894V17zM15.211 6.276a1 1 0 000-1.788l-4.764-2.382a1 1 0 00-.894 0L4.789 4.488a1 1 0 000 1.788l4.764 2.382a1 1 0 00.894 0l4.764-2.382zM4.447 8.342A1 1 0 003 9.236V15a1 1 0 00.553.894l4 2A1 1 0 009 17v-5.764a1 1 0 00-.553-.894l-4-2z"/>
                                                </svg>
                                            {% elif competence.icon == 'chart-bar' %}
                                                <svg class="w-5 h-5 text-gray-600" fill="currentColor" viewBox="0 0 20 20">
                                                    <path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z"/>
                                                </svg>
                                            {% elif competence.icon == 'magnifying-glass' %}
                                                <svg class="w-5 h-5 text-gray-600" fill="currentColor" viewBox="0 0 20 20">
                                                    <path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd"/>
                                                </svg>
                                            {% else %}
                                                <svg class="w-5 h-5 text-gray-600" fill="currentColor" viewBox="0 0 20 20">
                                                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                                                </svg>
                                            {% endif %}
                                        </div>
                                        
                                        <!-- Nom -->
                                        <div>
                                            <h4 class="font-medium text-gray-900">{{ competence.name }}</h4>
                                            <p class="text-xs text-gray-500">Icône: {{ competence.icon }}</p>
                                        </div>
                                    </div>
                                    
                                    <!-- Actions -->
                                    <div class="flex items-center space-x-2">
                                        <button 
                                            onclick="editCompetence({{ loop.index0 }}, '{{ competence.name }}', '{{ competence.color }}', '{{ competence.icon }}')"
                                            class="p-2 text-gray-400 hover:text-blue-600 transition-colors"
                                            title="Modifier"
                                        >
                                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                                <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"/>
                                            </svg>
                                        </button>
                                        
                                        <form method="POST" action="{{ url_for('config.delete_competence', index=loop.index0) }}" class="inline">
                                            <button 
                                                type="submit"
                                                onclick="return confirm('Supprimer la compétence « {{ competence.name }} » ?')"
                                                class="p-2 text-gray-400 hover:text-red-600 transition-colors"
                                                title="Supprimer"
                                            >
                                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                                    <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                                </svg>
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="text-center py-8">
                            <svg class="w-12 h-12 text-gray-400 mx-auto mb-4" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                            </svg>
                            <h3 class="text-lg font-medium text-gray-900 mb-2">Aucune compétence définie</h3>
                            <p class="text-gray-500">Commencez par ajouter votre première compétence</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Formulaire d'ajout/modification -->
        <div class="lg:col-span-1">
            <div class="bg-white rounded-lg shadow-md sticky top-8">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900" id="form-title">➕ Ajouter une compétence</h3>
                </div>
                
                <form method="POST" action="{{ url_for('config.add_competence') }}" class="p-6 space-y-4" id="competence-form">
                    <input type="hidden" id="edit-index" name="edit_index" value="">
                    
                    <div>
                        <label for="name" class="block text-sm font-medium text-gray-700 mb-1">
                            Nom de la compétence
                        </label>
                        <input 
                            type="text" 
                            id="name" 
                            name="name" 
                            placeholder="Ex: Calculer, Raisonner..."
                            class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
                            required
                        >
                    </div>
                    
                    <div>
                        <label for="color" class="block text-sm font-medium text-gray-700 mb-1">
                            Couleur
                        </label>
                        <div class="flex items-center space-x-3">
                            <input 
                                type="color" 
                                id="color" 
                                name="color" 
                                value="#3b82f6"
                                class="w-12 h-10 border border-gray-300 rounded-md cursor-pointer"
                            >
                            <input 
                                type="text" 
                                id="color-text" 
                                placeholder="#3b82f6"
                                class="flex-1 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
                                pattern="#[0-9a-fA-F]{6}"
                            >
                        </div>
                    </div>
                    
                    <div>
                        <label for="icon" class="block text-sm font-medium text-gray-700 mb-1">
                            Icône
                        </label>
                        <select 
                            id="icon" 
                            name="icon"
                            class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
                        >
                            <option value="calculator">🧮 Calculer</option>
                            <option value="lightbulb">💡 Raisonner</option>
                            <option value="chat-bubble-left-right">💬 Communiquer</option>
                            <option value="cube">📦 Modéliser</option>
                            <option value="chart-bar">📊 Représenter</option>
                            <option value="magnifying-glass">🔍 Chercher</option>
                            <option value="star">⭐ Autre</option>
                        </select>
                    </div>
                    
                    <div class="flex space-x-3 pt-4">
                        <button 
                            type="button"
                            onclick="resetForm()"
                            class="flex-1 px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
                            id="cancel-btn"
                            style="display: none;"
                        >
                            Annuler
                        </button>
                        
                        <button 
                            type="submit"
                            class="flex-1 px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
                            id="submit-btn"
                        >
                            Ajouter
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Actions -->
    <div class="flex justify-between items-center">
        <a 
            href="{{ url_for('config.index') }}" 
            class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
        >
            <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0L2.586 11H13a1 1 0 110 2H2.586l3.707 3.707a1 1 0 01-1.414 1.414l-5-5a1 1 0 010-1.414l5-5a1 1 0 011.414 1.414L2.586 9H13a1 1 0 110 2H7.707z" clip-rule="evenodd"/>
            </svg>
            Retour à la configuration
        </a>
        
        <div class="text-sm text-gray-500">
            {{ competences|length }} compétence(s) configurée(s)
        </div>
    </div>
</div>

<script>
// Synchroniser les champs de couleur
document.getElementById('color').addEventListener('input', function() {
    document.getElementById('color-text').value = this.value;
});

document.getElementById('color-text').addEventListener('input', function() {
    if (this.value.match(/^#[0-9a-fA-F]{6}$/)) {
        document.getElementById('color').value = this.value;
    }
});

// Fonction pour éditer une compétence
function editCompetence(index, name, color, icon) {
    document.getElementById('form-title').textContent = '✏️ Modifier la compétence';
    document.getElementById('edit-index').value = index;
    document.getElementById('name').value = name;
    document.getElementById('color').value = color;
    document.getElementById('color-text').value = color;
    document.getElementById('icon').value = icon;
    document.getElementById('submit-btn').textContent = 'Modifier';
    document.getElementById('cancel-btn').style.display = 'block';
    
    // Changer l'action du formulaire
    document.getElementById('competence-form').action = '{{ url_for("config.update_competence") }}';
}

// Fonction pour réinitialiser le formulaire
function resetForm() {
    document.getElementById('form-title').textContent = '➕ Ajouter une compétence';
    document.getElementById('edit-index').value = '';
    document.getElementById('name').value = '';
    document.getElementById('color').value = '#3b82f6';
    document.getElementById('color-text').value = '#3b82f6';
    document.getElementById('icon').value = 'calculator';
    document.getElementById('submit-btn').textContent = 'Ajouter';
    document.getElementById('cancel-btn').style.display = 'none';
    
    // Remettre l'action d'origine
    document.getElementById('competence-form').action = '{{ url_for("config.add_competence") }}';
}
</script>
{% endblock %}