{% extends "base.html" %}

{% block title %}Configuration - Notytex{% endblock %}

{% block content %}
<div class="space-y-8">
    <!-- En-tête -->
    <div class="bg-gradient-to-r from-purple-600 to-blue-600 text-white rounded-xl p-8 shadow-lg">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-4xl font-bold mb-2">⚙️ Configuration</h1>
                <p class="text-xl opacity-90">Personnalisez votre application Notytex</p>
            </div>
            <div class="hidden md:block">
                <div class="w-24 h-24 bg-white/20 rounded-full flex items-center justify-center">
                    <svg class="w-12 h-12" 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>
                </div>
            </div>
        </div>
    </div>

    <!-- Sections de configuration -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        
        <!-- Configuration générale -->
        <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
            <div class="flex items-center mb-4">
                <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4">
                    <svg class="w-6 h-6 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"/>
                    </svg>
                </div>
                <h3 class="text-lg font-semibold text-gray-900">Configuration générale</h3>
            </div>
            <p class="text-gray-600 mb-4">Base de données, année scolaire et paramètres système</p>
            <div class="space-y-3">
                <div class="flex justify-between">
                    <span class="text-sm text-gray-500">Année scolaire :</span>
                    <span class="text-sm font-medium text-gray-900" id="school-year">{{ app_config.get_school_year() }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm text-gray-500">Base de données :</span>
                    <span class="text-sm font-medium text-gray-900">SQLite</span>
                </div>
            </div>
            <a href="{{ url_for('config.general') }}" class="mt-4 block w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition-colors text-center">
                Modifier
            </a>
        </div>

        <!-- Configuration des compétences -->
        <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
            <div class="flex items-center mb-4">
                <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mr-4">
                    <svg class="w-6 h-6 text-purple-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>
                </div>
                <h3 class="text-lg font-semibold text-gray-900">Compétences</h3>
            </div>
            <p class="text-gray-600 mb-4">Gérez la liste des compétences et leurs couleurs</p>
            <div class="space-y-2 mb-4">
                <div class="flex items-center space-x-2">
                    <div class="w-3 h-3 rounded-full bg-blue-500"></div>
                    <span class="text-sm">Calculer</span>
                </div>
                <div class="flex items-center space-x-2">
                    <div class="w-3 h-3 rounded-full bg-purple-500"></div>
                    <span class="text-sm">Raisonner</span>
                </div>
                <div class="text-xs text-gray-500">+4 autres compétences</div>
            </div>
            <a href="{{ url_for('config.competences') }}" class="block w-full bg-purple-600 text-white py-2 px-4 rounded-md hover:bg-purple-700 transition-colors text-center">
                Gérer les compétences
            </a>
        </div>

        <!-- Configuration de l'échelle -->
        <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
            <div class="flex items-center mb-4">
                <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mr-4">
                    <svg class="w-6 h-6 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2a2 2 0 002-2V5a1 1 0 100-2H3zm6 2a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1zm1 5a1 1 0 100 2h6a1 1 0 100-2h-6zm0 4a1 1 0 100 2h6a1 1 0 100-2h-6z" clip-rule="evenodd"/>
                    </svg>
                </div>
                <h3 class="text-lg font-semibold text-gray-900">Échelle de réussite</h3>
            </div>
            <p class="text-gray-600 mb-4">Personnalisez l'échelle de réussite pour compétences et domaines</p>
            <div class="space-y-2 mb-4">
                <div class="flex justify-between">
                    <span class="text-sm">0 - Non acquis</span>
                    <div class="w-3 h-3 rounded bg-red-500"></div>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm">3 - Expert</span>
                    <div class="w-3 h-3 rounded bg-blue-500"></div>
                </div>
                <div class="text-xs text-gray-500">5 valeurs configurées</div>
            </div>
            <a href="{{ url_for('config.scale') }}" class="block w-full bg-green-600 text-white py-2 px-4 rounded-md hover:bg-green-700 transition-colors text-center">
                Configurer l'échelle
            </a>
        </div>
    </div>

    <!-- Actions globales -->
    <div class="bg-white rounded-lg shadow-md p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Actions système</h3>
        <div class="flex flex-wrap gap-4">
            <button onclick="exportConfig()" class="bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition-colors">
                📤 Exporter la configuration
            </button>
            <button onclick="importConfig()" class="bg-yellow-600 text-white py-2 px-4 rounded-md hover:bg-yellow-700 transition-colors">
                📥 Importer une configuration
            </button>
            <button onclick="resetConfig()" class="bg-red-600 text-white py-2 px-4 rounded-md hover:bg-red-700 transition-colors">
                🔄 Réinitialiser
            </button>
        </div>
    </div>
</div>

<!-- Modals et JavaScript -->
<script>
function editGeneralConfig() {
    alert('Édition de configuration générale - Fonctionnalité en développement');
}

function exportConfig() {
    alert('Export de configuration - Fonctionnalité en développement');
}

function importConfig() {
    alert('Import de configuration - Fonctionnalité en développement');
}

function resetConfig() {
    if (confirm('Êtes-vous sûr de vouloir réinitialiser toute la configuration ?')) {
        fetch('{{ url_for("config.reset_config") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
        }).then(response => {
            if (response.ok) {
                location.reload();
            }
        });
    }
}
</script>
{% endblock %}