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

{% block title %}Configuration IA - {{ site.name }}{% endblock %}

{% block breadcrumb %}Paramètres <i class="fas fa-chevron-right"></i> Configuration IA{% endblock %}

{% block body %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <h1><i class="fas fa-brain"></i> Configuration Intelligence Artificielle</h1>
            <p class="text-muted">Site : <strong>{{ site.name }}</strong></p>

            {% for message in app.flashes('success') %}
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <i class="fas fa-check-circle"></i> {{ message }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            {% endfor %}

            <div class="card">
                <div class="card-header">
                    <h4 class="mb-0"><i class="fas fa-image"></i> Génération automatique d'images</h4>
                </div>

                <div class="card-body">
                    <form method="POST" id="ai-settings-form">
                        {# Activation #}
                        <div class="alert alert-info">
                            <i class="fas fa-info-circle"></i>
                            <strong>À propos de Pollinations.ai :</strong>
                            <ul class="mb-0 mt-2">
                                <li>Service de génération d'images IA <strong>gratuit et illimité</strong></li>
                                <li>Les images sont générées automatiquement lors de la création de pages avec l'IA</li>
                                <li>Temps de génération : <strong>10-30 secondes par image</strong></li>
                                <li>Les images sont sauvegardées dans votre bibliothèque média</li>
                            </ul>
                        </div>

                        <div class="form-group mb-4">
                            <div class="form-check form-switch">
                                <input type="checkbox" class="form-check-input" name="ai_auto_generate_images"
                                       id="ai_auto_generate_images" value="1"
                                       {% if settings.aiAutoGenerateImages %}checked{% endif %}>
                                <label class="form-check-label" for="ai_auto_generate_images">
                                    <strong>Activer la génération automatique d'images avec IA</strong>
                                </label>
                            </div>
                            <small class="form-text text-muted">
                                Quand activé, l'IA générera automatiquement des images pour les widgets hero, image, gallery et team-members lors de la création de nouvelles pages.
                            </small>
                        </div>

                        <hr class="my-4">

                        {# Modèle de génération #}
                        <h5><i class="fas fa-sliders"></i> Paramètres de génération</h5>

                        <div class="form-group mb-3">
                            <label for="ai_image_model">Modèle de génération</label>
                            <select class="form-control" name="ai_image_model" id="ai_image_model">
                                <option value="flux-realism" {% if settings.aiImageModel == 'flux-realism' %}selected{% endif %}>
                                    Flux Realism (Recommandé - Images réalistes)
                                </option>
                                <option value="flux" {% if settings.aiImageModel == 'flux' %}selected{% endif %}>
                                    Flux Standard (Polyvalent)
                                </option>
                                <option value="flux-anime" {% if settings.aiImageModel == 'flux-anime' %}selected{% endif %}>
                                    Flux Anime (Style anime/manga)
                                </option>
                                <option value="flux-3d" {% if settings.aiImageModel == 'flux-3d' %}selected{% endif %}>
                                    Flux 3D (Rendu 3D)
                                </option>
                                <option value="turbo" {% if settings.aiImageModel == 'turbo' %}selected{% endif %}>
                                    Turbo (Plus rapide, qualité réduite)
                                </option>
                            </select>
                            <small class="form-text text-muted">
                                Le modèle détermine le style des images générées
                            </small>
                        </div>

                        {# Dimensions par défaut #}
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="ai_image_default_width">Largeur par défaut (px)</label>
                                    <input type="number" class="form-control" name="ai_image_default_width"
                                           id="ai_image_default_width" value="{{ settings.aiImageDefaultWidth }}"
                                           min="256" max="2048" step="64">
                                    <small class="form-text text-muted">Entre 256 et 2048 pixels</small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="ai_image_default_height">Hauteur par défaut (px)</label>
                                    <input type="number" class="form-control" name="ai_image_default_height"
                                           id="ai_image_default_height" value="{{ settings.aiImageDefaultHeight }}"
                                           min="256" max="2048" step="64">
                                    <small class="form-text text-muted">Entre 256 et 2048 pixels</small>
                                </div>
                            </div>
                        </div>

                        <div class="alert alert-warning">
                            <i class="fas fa-exclamation-triangle"></i>
                            <strong>Note importante :</strong> La génération d'images peut ralentir considérablement la création de pages (10-30 secondes par image). Les dimensions sont adaptées automatiquement selon le type de widget (hero, gallery, portraits, etc.).
                        </div>

                        <hr class="my-4">

                        {# Bouton d'enregistrement #}
                        <div class="d-flex justify-content-between align-items-center">
                            <a href="{{ path('dashboard') }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left"></i> Retour
                            </a>
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="fas fa-save"></i> Enregistrer la configuration
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            {# Informations complémentaires #}
            <div class="card mt-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-question-circle"></i> Widgets concernés par la génération d'images</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <ul class="list-unstyled">
                                <li class="mb-2">
                                    <i class="fas fa-check text-success"></i>
                                    <strong>Hero</strong> : Image de fond (1920x1080px)
                                </li>
                                <li class="mb-2">
                                    <i class="fas fa-check text-success"></i>
                                    <strong>Image</strong> : Image simple (1200x800px)
                                </li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <ul class="list-unstyled">
                                <li class="mb-2">
                                    <i class="fas fa-check text-success"></i>
                                    <strong>Gallery</strong> : Galerie d'images (800x600px, max 6 images)
                                </li>
                                <li class="mb-2">
                                    <i class="fas fa-check text-success"></i>
                                    <strong>Team Members</strong> : Photos de profil (400x400px)
                                </li>
                            </ul>
                        </div>
                    </div>
                    <p class="text-muted mb-0 mt-3">
                        <i class="fas fa-lightbulb"></i>
                        Les images sont générées en fonction du secteur d'activité détecté (restaurant, coach, artisan, startup) et du contexte de la page.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
<script>
    // Confirmation avant de désactiver si c'était activé
    const checkbox = document.getElementById('ai_auto_generate_images');
    const initialState = checkbox.checked;

    document.getElementById('ai-settings-form').addEventListener('submit', function(e) {
        if (initialState && !checkbox.checked) {
            if (!confirm('Êtes-vous sûr de vouloir désactiver la génération automatique d\'images ?')) {
                e.preventDefault();
            }
        }
    });
</script>
{% endblock %}