{% extends "admin/base.html" %}

{% block title %}Paramètres Généraux{% endblock %}
{% block page_title %}Paramètres Généraux{% endblock %}

{% block content %}
<div class="max-w-4xl">
    <!-- Header -->
    <div class="mb-8">
        <h1 class="text-2xl font-bold text-white mb-2">
            <i class="fas fa-sliders-h mr-3 text-yellow-400"></i>
            Configuration de l'Application
        </h1>
        <p class="text-gray-400">
            Modifiez dynamiquement le nom, le logo et les paramètres d'affichage de votre application.
        </p>
    </div>

    <!-- Settings Form -->
    <form method="POST" enctype="multipart/form-data" class="space-y-8">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() if csrf_token is defined else '' }}">

        <!-- User Counter Section -->
        <div class="bg-gradient-to-r from-blue-500/10 to-purple-500/10 rounded-xl border border-blue-500/30 p-6">
            <div class="flex items-start space-x-4">
                <div class="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-users text-blue-400 text-xl"></i>
                </div>
                <div class="flex-1">
                    <h3 class="text-lg font-semibold text-white mb-1">Compteur d'Utilisateurs (Landing Page)</h3>
                    <p class="text-sm text-gray-400 mb-4">
                        Configurez le nombre d'utilisateurs affiché sur la page d'accueil. Ce nombre sera additionné aux vraies inscriptions.
                    </p>

                    <!-- Current Stats -->
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                        <div class="bg-gray-800 rounded-lg p-4 border border-gray-700">
                            <p class="text-xs text-gray-400 uppercase tracking-wider mb-1">Utilisateurs Réels</p>
                            <p class="text-2xl font-bold text-green-400">{{ real_user_count }}</p>
                        </div>
                        <div class="bg-gray-800 rounded-lg p-4 border border-gray-700">
                            <p class="text-xs text-gray-400 uppercase tracking-wider mb-1">Utilisateurs Ajoutés</p>
                            <p class="text-2xl font-bold text-yellow-400">{{ current_fake_user_count }}</p>
                        </div>
                        <div class="bg-gray-800 rounded-lg p-4 border border-gray-700">
                            <p class="text-xs text-gray-400 uppercase tracking-wider mb-1">Total Affiché</p>
                            <p class="text-2xl font-bold text-blue-400">{{ displayed_user_count }}</p>
                        </div>
                    </div>

                    <div class="max-w-md">
                        <label for="fake_user_count" class="block text-sm font-medium text-gray-300 mb-2">
                            Nombre d'utilisateurs à ajouter
                        </label>
                        <div class="relative">
                            <input type="number"
                                   id="fake_user_count"
                                   name="fake_user_count"
                                   value="{{ current_fake_user_count }}"
                                   min="0"
                                   placeholder="Ex: 10000"
                                   class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                            <div class="absolute inset-y-0 right-0 flex items-center pr-3">
                                <i class="fas fa-plus text-gray-400"></i>
                            </div>
                        </div>
                        <p class="mt-2 text-xs text-gray-500">
                            Ce nombre sera ajouté aux {{ real_user_count }} utilisateurs réels pour l'affichage public.
                        </p>
                    </div>

                    <!-- Preview -->
                    <div class="mt-4 p-4 bg-gray-900/50 rounded-lg border border-gray-700">
                        <p class="text-xs text-gray-400 mb-2">Aperçu sur la landing page:</p>
                        <div class="flex items-center space-x-2">
                            <span class="text-3xl font-bold text-yellow-400" id="preview_user_count">{{ displayed_user_count }}</span>
                            <span class="text-gray-400">Investisseurs</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- App Name Section -->
        <div class="bg-gray-800 rounded-xl border border-gray-700 p-6">
            <div class="flex items-start space-x-4">
                <div class="w-12 h-12 bg-purple-500/20 rounded-lg flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-font text-purple-400 text-xl"></i>
                </div>
                <div class="flex-1">
                    <h3 class="text-lg font-semibold text-white mb-1">Nom de l'Application</h3>
                    <p class="text-sm text-gray-400 mb-4">
                        Ce nom sera affiché dans la navigation, le pied de page et les titres de pages.
                    </p>
                    <div class="max-w-md">
                        <label for="app_name" class="block text-sm font-medium text-gray-300 mb-2">
                            Nom de l'application
                        </label>
                        <input type="text"
                               id="app_name"
                               name="app_name"
                               value="{{ current_app_name }}"
                               placeholder="Ex: Apex Ores, MonApp, etc."
                               class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 transition-colors">
                        <p class="mt-2 text-xs text-gray-500">
                            Maximum 50 caractères. Laissez vide pour utiliser "Apex Ores" par défaut.
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <!-- App Logo Section -->
        <div class="bg-gray-800 rounded-xl border border-gray-700 p-6">
            <div class="flex items-start space-x-4">
                <div class="w-12 h-12 bg-green-500/20 rounded-lg flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-image text-green-400 text-xl"></i>
                </div>
                <div class="flex-1">
                    <h3 class="text-lg font-semibold text-white mb-1">Logo de l'Application</h3>
                    <p class="text-sm text-gray-400 mb-4">
                        Le logo sera affiché dans la barre de navigation et le pied de page.
                    </p>

                    <!-- Current Logo Preview -->
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-300 mb-2">Logo actuel</label>
                        <div class="flex items-center space-x-4">
                            {% if current_app_logo %}
                            <div class="w-16 h-16 rounded-lg overflow-hidden border border-gray-600">
                                <img src="{{ current_app_logo }}" alt="Logo actuel" class="w-full h-full object-cover">
                            </div>
                            <div class="text-sm text-gray-400">
                                <p>Logo personnalisé</p>
                                <button type="submit" name="remove_logo" value="1" class="text-red-400 hover:text-red-300 text-xs mt-1">
                                    <i class="fas fa-trash mr-1"></i> Supprimer le logo
                                </button>
                            </div>
                            {% else %}
                            <div class="w-16 h-16 bg-gradient-to-br from-yellow-400 to-yellow-600 rounded-lg flex items-center justify-center">
                                <i class="fas fa-coins text-white text-2xl"></i>
                            </div>
                            <div class="text-sm text-gray-400">
                                <p>Logo par défaut</p>
                                <p class="text-xs">Aucun logo personnalisé</p>
                            </div></p>
                            {% endif %}
                        </div>
                    </div>

                    <!-- Logo URL Input -->
                    <div class="max-w-md">
                        <label for="app_logo" class="block text-sm font-medium text-gray-300 mb-2">
                            URL du nouveau logo
                        </label>
                        <input type="url"
                               id="app_logo"
                               name="app_logo"
                               value="{{ current_app_logo or '' }}"
                               placeholder="https://exemple.com/logo.png"
                               class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 transition-colors">
                        <p class="mt-2 text-xs text-gray-500">
                            Entrez l'URL complète de votre logo (format PNG, JPG ou SVG recommandé). Taille recommandée: 200x200 pixels.
                        </p>
                    </div>

                    <!-- Or Upload Section -->
                    <div class="mt-4 max-w-md">
                        <div class="relative">
                            <div class="absolute inset-0 flex items-center">
                                <div class="w-full border-t border-gray-600"></div>
                            </div>
                            <div class="relative flex justify-center text-sm">
                                <span class="px-2 bg-gray-800 text-gray-400">ou</span>
                            </div>
                        </div>

                        <div class="mt-4">
                            <label for="logo_file" class="block text-sm font-medium text-gray-300 mb-2">
                                Téléverser un fichier
                            </label>
                            <div class="flex items-center justify-center w-full">
                                <label for="logo_file" class="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-600 border-dashed rounded-lg cursor-pointer bg-gray-700/50 hover:bg-gray-700 transition-colors">
                                    <div class="flex flex-col items-center justify-center pt-5 pb-6">
                                        <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
                                        <p class="mb-2 text-sm text-gray-400">
                                            <span class="font-semibold text-yellow-400">Cliquez pour téléverser</span>
                                        </p>
                                        <p class="text-xs text-gray-500">PNG, JPG ou SVG (Max. 2MB)</p>
                                    </div>
                                    <input id="logo_file" name="logo_file" type="file" class="hidden" accept="image/png,image/jpeg,image/svg+xml">
                                </label>
                            </div>
                            <p id="file_name" class="mt-2 text-sm text-yellow-400 hidden"></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Preview Section -->
        <div class="bg-gray-800 rounded-xl border border-gray-700 p-6">
            <h3 class="text-lg font-semibold text-white mb-4">
                <i class="fas fa-eye mr-2 text-green-400"></i>
                Aperçu en Direct
            </h3>
            <div class="bg-gray-900 rounded-lg p-4">
                <div class="flex items-center space-x-3">
                    <div id="preview_logo" class="w-12 h-12 bg-gradient-to-br from-yellow-400 to-yellow-600 rounded-xl flex items-center justify-center overflow-hidden">
                        {% if current_app_logo %}
                        <img src="{{ current_app_logo }}" alt="Logo" class="w-full h-full object-cover" id="preview_logo_img">
                        {% else %}
                        <i class="fas fa-coins text-white text-xl" id="preview_logo_icon"></i>
                        {% endif %}
                    </div>
                    <h1 id="preview_name" class="text-2xl font-black bg-gradient-to-r from-yellow-400 to-yellow-600 text-transparent bg-clip-text">
                        {{ current_app_name }}
                    </h1>
                </div>
                <p class="text-xs text-gray-500 mt-3">
                    Voici comment le logo et le nom apparaîtront dans la barre de navigation.
                </p>
            </div>
        </div>

        <!-- Submit Button -->
        <div class="flex items-center justify-between pt-4">
            <p class="text-sm text-gray-400">
                <i class="fas fa-info-circle mr-1"></i>
                Les modifications seront appliquées immédiatement sur tout le site.
            </p>
            <button type="submit"
                    class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-yellow-500 to-yellow-600 hover:from-yellow-600 hover:to-yellow-700 text-gray-900 font-bold rounded-lg transition-all duration-300 shadow-lg hover:shadow-yellow-500/25">
                <i class="fas fa-save mr-2"></i>
                Enregistrer les Modifications
            </button>
        </div>
    </form>
</div>

{% block scripts %}
<script>
    // Live preview for app name
    const appNameInput = document.getElementById('app_name');
    const previewName = document.getElementById('preview_name');

    appNameInput.addEventListener('input', function() {
        previewName.textContent = this.value || 'Apex Ores';
    });

    // Live preview for logo URL
    const appLogoInput = document.getElementById('app_logo');
    const previewLogo = document.getElementById('preview_logo');

    appLogoInput.addEventListener('input', function() {
        if (this.value) {
            previewLogo.innerHTML = `<img src="${this.value}" alt="Logo" class="w-full h-full object-cover" onerror="this.parentElement.innerHTML='<i class=\\'fas fa-exclamation-triangle text-red-400 text-xl\\'></i>'">`;
        } else {
            previewLogo.innerHTML = '<i class="fas fa-coins text-white text-xl"></i>';
        }
    });

    // File input display
    const fileInput = document.getElementById('logo_file');
    const fileNameDisplay = document.getElementById('file_name');

    fileInput.addEventListener('change', function() {
        if (this.files && this.files[0]) {
            fileNameDisplay.textContent = 'Fichier sélectionné: ' + this.files[0].name;
            fileNameDisplay.classList.remove('hidden');

            // Preview the uploaded file
            const reader = new FileReader();
            reader.onload = function(e) {
                previewLogo.innerHTML = `<img src="${e.target.result}" alt="Logo" class="w-full h-full object-cover">`;
            };
            reader.readAsDataURL(this.files[0]);
        } else {
            fileNameDisplay.classList.add('hidden');
        }
    });

    // Live preview for user count
    const fakeUserCountInput = document.getElementById('fake_user_count');
    const previewUserCount = document.getElementById('preview_user_count');
    const realUserCount = {{ real_user_count }};

    fakeUserCountInput.addEventListener('input', function() {
        const fakeCount = parseInt(this.value) || 0;
        const total = realUserCount + fakeCount;
        previewUserCount.textContent = total.toLocaleString('fr-FR');
    });
</script>
{% endblock %}
{% endblock %}