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

{% block title %}Bienvenue - Créez votre site{% endblock %}
{% block breadcrumb %}Dashboard / Bienvenue{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
    .welcome-hero {
        text-align: center;
        padding: 3rem 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 20px;
        color: white;
        margin-bottom: 3rem;
    }

    .welcome-hero h1 {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 1rem;
    }

    .welcome-hero .wave {
        display: inline-block;
        animation: wave 2s infinite;
    }

    @keyframes wave {
        0%, 100% { transform: rotate(0deg); }
        25% { transform: rotate(20deg); }
        75% { transform: rotate(-20deg); }
    }

    .welcome-hero .lead {
        font-size: 1.25rem;
        opacity: 0.95;
    }

    .section-header {
        text-align: center;
        margin-bottom: 2.5rem;
    }

    .section-header h2 {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    .pack-card {
        background: white;
        border-radius: 16px;
        padding: 2rem;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        transition: all 0.3s;
        position: relative;
        height: 100%;
        display: flex;
        flex-direction: column;
        border: 2px solid transparent;
        cursor: pointer;
    }

    .pack-card.selected {
        border-color: #667eea;
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
        transform: translateY(-4px);
    }

    .pack-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 24px rgba(0,0,0,0.15);
    }

    .badge-popular {
        position: absolute;
        top: -12px;
        right: 20px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 600;
        box-shadow: 0 4px 10px rgba(102, 126, 234, 0.4);
    }

    .badge-category {
        position: absolute;
        top: -12px;
        right: 20px;
        background: white;
        color: #667eea;
        border: 2px solid #667eea;
        padding: 0.5rem 1rem;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 600;
    }

    .pack-icon {
        font-size: 4rem;
        text-align: center;
        margin-bottom: 1rem;
    }

    .pack-title {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 1rem;
        text-align: center;
    }

    .pack-description {
        text-align: center;
        color: #6c757d;
        margin-bottom: 1.5rem;
    }

    .pack-includes {
        background: #f8f9fa;
        border-radius: 10px;
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .pack-includes strong {
        display: block;
        margin-bottom: 0.5rem;
        color: #495057;
    }

    .pack-includes ul {
        list-style: none;
        padding-left: 0;
        margin: 0;
    }

    .pack-includes ul li {
        padding: 0.3rem 0;
        font-size: 0.9rem;
        color: #495057;
    }

    .pack-duration {
        display: block;
        text-align: center;
        font-size: 0.85rem;
        color: #6c757d;
        margin-bottom: 1rem;
    }

    .btn-pack-create {
        width: 100%;
        padding: 1rem;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s;
        margin-top: auto;
        font-size: 1rem;
    }

    .btn-pack-create:hover {
        transform: scale(1.05);
        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    }

    .btn-pack-create:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

    .custom-card {
        background: white;
        border-radius: 12px;
        padding: 2rem;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        transition: transform 0.3s;
        height: 100%;
    }

    .custom-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 16px rgba(0,0,0,0.15);
    }

    .icon-circle {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1.5rem;
        font-size: 2.5rem;
    }

    .gradient-purple { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
    .gradient-blue { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
    .gradient-green { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }

    .help-section {
        background: #f8f9fa;
        border-radius: 12px;
        padding: 2rem;
        text-align: center;
    }

    .help-section h5 {
        font-weight: 700;
        margin-bottom: 1.5rem;
    }

    .help-links {
        display: flex;
        justify-content: center;
        gap: 2rem;
        flex-wrap: wrap;
    }

    .help-link {
        color: #667eea;
        text-decoration: none;
        font-weight: 600;
        transition: color 0.3s;
    }

    .help-link:hover {
        color: #764ba2;
        text-decoration: underline;
    }

    .help-link i {
        margin-right: 0.5rem;
    }

    /* Styles pour les cards de sélection de secteur */
    .industry-card {
        width: 100%;
        padding: 1.5rem 1rem;
        background: white;
        border: 2px solid #e0e0e0;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.3s;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .industry-card:hover {
        border-color: #667eea;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
        transform: translateY(-3px);
        box-shadow: 0 8px 16px rgba(102, 126, 234, 0.2);
    }

    .industry-icon {
        font-size: 2.5rem;
    }

    .industry-name {
        font-weight: 600;
        color: #333;
        font-size: 0.9rem;
    }

    .modal-header.bg-gradient {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }

    #pages-list li {
        padding: 0.5rem 0;
        border-bottom: 1px solid #f0f0f0;
    }

    #pages-list li:last-child {
        border-bottom: none;
    }

    #pages-list li i {
        color: #667eea;
        margin-right: 0.5rem;
    }
    </style>
{% endblock %}

{% block body %}
<!-- Hero Section -->
<div class="welcome-hero" data-aos="fade-down">
    <h1><span class="wave">👋</span> Bienvenue {{ app.user.firstName }} !</h1>
    <p class="lead">Créons ensemble votre site web professionnel en quelques minutes</p>
</div>

<!-- SECTION 1 : Packs Complets -->
<div class="section-header" data-aos="fade-up">
    <h2><i class="fas fa-gift me-2"></i>Packs de démarrage rapide</h2>
    <p class="text-muted">Créez un site complet en un clic avec l'IA</p>
</div>

<div class="row g-4 mb-5">
    <!-- Pack 1 : Site Vitrine -->
    <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="100">
        <div class="pack-card" data-pack-type="vitrine">
            <span class="badge-popular">⭐ Populaire</span>
            <div class="pack-icon">🏢</div>
            <h3 class="pack-title">Site Vitrine Complet</h3>
            <p class="pack-description">Site professionnel avec toutes les pages essentielles</p>

            <div class="pack-includes">
                <strong>Inclus :</strong>
                <ul>
                    <li>✅ Page d'accueil</li>
                    <li>✅ Présentation</li>
                    <li>✅ Services</li>
                    <li>✅ Tarifs</li>
                    <li>✅ Contact</li>
                </ul>
            </div>

            <span class="pack-duration">⏱️ ~2 minutes</span>

            <button class="btn-pack-create" data-bs-toggle="modal" data-bs-target="#selectIndustryModal-vitrine" data-pack="vitrine">
                <i class="fas fa-magic me-2"></i>Créer mon site vitrine
            </button>
        </div>
    </div>

    <!-- Pack 2 : Blog -->
    <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="200">
        <div class="pack-card" data-pack-type="blog">
            <span class="badge-category">📝 Blog</span>
            <div class="pack-icon">📝</div>
            <h3 class="pack-title">Site avec Blog</h3>
            <p class="pack-description">Partagez votre expertise via un blog</p>

            <div class="pack-includes">
                <strong>Inclus :</strong>
                <ul>
                    <li>✅ Accueil</li>
                    <li>✅ Blog</li>
                    <li>✅ À propos</li>
                    <li>✅ Contact</li>
                </ul>
            </div>

            <span class="pack-duration">⏱️ ~1m30</span>

            <button class="btn-pack-create" data-bs-toggle="modal" data-bs-target="#selectIndustryModal-blog" data-pack="blog">
                <i class="fas fa-magic me-2"></i>Créer mon blog
            </button>
        </div>
    </div>

    <!-- Pack 3 : One-Page -->
    <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="300">
        <div class="pack-card" data-pack-type="onepage">
            <span class="badge-category">⚡ Rapide</span>
            <div class="pack-icon">⚡</div>
            <h3 class="pack-title">Site One-Page</h3>
            <p class="pack-description">Tout sur une page moderne</p>

            <div class="pack-includes">
                <strong>Inclus :</strong>
                <ul>
                    <li>✅ Hero</li>
                    <li>✅ Présentation</li>
                    <li>✅ Services</li>
                    <li>✅ Portfolio</li>
                    <li>✅ Contact</li>
                </ul>
            </div>

            <span class="pack-duration">⏱️ ~1 minute</span>

            <button class="btn-pack-create" data-bs-toggle="modal" data-bs-target="#selectIndustryModal-onepage" data-pack="onepage">
                <i class="fas fa-magic me-2"></i>Créer mon one-page
            </button>
        </div>
    </div>

    <!-- Pack 4 : Portfolio -->
    <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="400">
        <div class="pack-card" data-pack-type="portfolio">
            <span class="badge-category">🎨 Créatif</span>
            <div class="pack-icon">🎨</div>
            <h3 class="pack-title">Portfolio Créatif</h3>
            <p class="pack-description">Showcasez vos créations</p>

            <div class="pack-includes">
                <strong>Inclus :</strong>
                <ul>
                    <li>✅ Accueil visuel</li>
                    <li>✅ Portfolio</li>
                    <li>✅ À propos</li>
                    <li>✅ Contact</li>
                </ul>
            </div>

            <span class="pack-duration">⏱️ ~1m30</span>

            <button class="btn-pack-create" data-bs-toggle="modal" data-bs-target="#selectIndustryModal-portfolio" data-pack="portfolio">
                <i class="fas fa-magic me-2"></i>Créer mon portfolio
            </button>
        </div>
    </div>
</div>

<!-- SECTION 2 : Création personnalisée -->
<div class="section-header" data-aos="fade-up">
    <h2><i class="fas fa-tools me-2"></i>Ou créez sur-mesure</h2>
</div>

<div class="row g-4 mb-5">
    <div class="col-lg-6" data-aos="fade-up">
        <div class="custom-card">
            <div class="icon-circle gradient-blue">✍️</div>
            <h4>Créer manuellement</h4>
            <p>Créez vos pages une par une</p>
            <a href="{{ path('bo-page-add') }}" class="btn btn-outline-primary">
                <i class="fas fa-plus-circle me-2"></i>Ajouter une page
            </a>
        </div>
    </div>

    <div class="col-lg-6" data-aos="fade-up" data-aos-delay="100">
        <div class="custom-card">
            <div class="icon-circle gradient-green">💬</div>
            <h4>Chat avec l'IA</h4>
            <p>Mode conversationnel</p>
            <a href="{{ path('admin_ai_conversation_new') }}" class="btn btn-outline-primary">
                <i class="fas fa-comments me-2"></i>Ouvrir le chat
            </a>
        </div>
    </div>
</div>

<!-- SECTION 3 : Aide (masquée temporairement)
<div class="help-section" data-aos="fade-up">
    <h5>📚 Besoin d'aide ?</h5>
    <div class="help-links">
        <a href="#" class="help-link"><i class="fas fa-video"></i> Tutoriel vidéo</a>
        <a href="#" class="help-link"><i class="fas fa-images"></i> Voir des exemples</a>
        <a href="#" class="help-link"><i class="fas fa-book"></i> Documentation</a>
    </div>
</div>
-->

<!-- ============================================ -->
<!-- MODALES BOOTSTRAP : Sélection de secteur    -->
<!-- ============================================ -->

{% set industries = [
    {'id': 'restaurant', 'icon': '🍽️', 'name': 'Restaurant / Café'},
    {'id': 'coach', 'icon': '💪', 'name': 'Coach sportif'},
    {'id': 'artisan', 'icon': '🔨', 'name': 'Artisan'},
    {'id': 'startup', 'icon': '🚀', 'name': 'Startup / Tech'},
    {'id': 'services', 'icon': '🏢', 'name': 'Services pro'},
    {'id': 'creative', 'icon': '🎨', 'name': 'Créatif / Artiste'},
    {'id': 'education', 'icon': '📚', 'name': 'Formation'},
    {'id': 'health', 'icon': '🏥', 'name': 'Santé'},
    {'id': 'generic', 'icon': '⚙️', 'name': 'Générique'}
] %}

{% for packType in ['vitrine', 'blog', 'onepage', 'portfolio'] %}
<!-- Modale sélection secteur pour {{ packType }} -->
<div class="modal fade" id="selectIndustryModal-{{ packType }}" tabindex="-1" aria-labelledby="selectIndustryModalLabel-{{ packType }}" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-gradient">
                <h5 class="modal-title" id="selectIndustryModalLabel-{{ packType }}">
                    <i class="fas fa-briefcase me-2"></i>
                    Choisissez votre secteur d'activité
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p class="text-muted mb-4 text-center">
                    Sélectionnez votre secteur pour un contenu ultra-personnalisé par l'IA
                </p>

                <div class="row g-3">
                    {% for industry in industries %}
                    <div class="col-md-4 col-sm-6">
                        <button class="industry-card" data-industry="{{ industry.id }}" data-pack="{{ packType }}">
                            <div class="industry-icon">{{ industry.icon }}</div>
                            <div class="industry-name">{{ industry.name }}</div>
                        </button>
                    </div>
                    {% endfor %}
                </div>

                <div class="alert alert-info mt-4 mb-0">
                    <i class="fas fa-info-circle me-2"></i>
                    <small>Choisissez "Générique" si votre activité ne correspond à aucune catégorie</small>
                </div>
            </div>
        </div>
    </div>
</div>
{% endfor %}

<!-- Modale de confirmation unique (réutilisée pour tous les packs) -->
<div class="modal fade" id="confirmGenerationModal" tabindex="-1" aria-labelledby="confirmGenerationModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-gradient text-white">
                <h5 class="modal-title" id="confirmGenerationModalLabel">
                    <i class="fas fa-magic me-2"></i>
                    Confirmer la génération
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-info mb-3">
                    <i class="fas fa-sparkles me-2"></i>
                    <strong id="pack-name-display">Site Vitrine Restaurant</strong>
                </div>

                <h6 class="fw-bold mb-3">Pages incluses :</h6>
                <ul id="pages-list" class="list-unstyled">
                    <!-- Rempli dynamiquement par JavaScript -->
                </ul>

                <div class="d-flex justify-content-between align-items-center p-3 bg-light rounded mb-3">
                    <div>
                        <i class="fas fa-clock text-primary me-2"></i>
                        <span class="fw-semibold">Durée estimée :</span>
                    </div>
                    <span id="duration-display" class="badge bg-primary">~2 minutes</span>
                </div>

                <p class="text-muted small mb-0">
                    <i class="fas fa-lightbulb me-1"></i>
                    L'IA va générer du contenu professionnel adapté à votre secteur.
                    Vous pourrez le personnaliser ensuite.
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-2"></i>Annuler
                </button>
                <button type="button" class="btn btn-gradient" id="confirm-generation-btn">
                    <i class="fas fa-magic me-2"></i>Générer mon site
                </button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        let selectedPack = null;
        let selectedIndustry = null;
        let selectedPackData = {};

        // Gestion visuelle de la sélection des pack-cards
        document.querySelectorAll('.btn-pack-create').forEach(button => {
            button.addEventListener('click', function(e) {
                // Retirer la classe selected de toutes les cards
                document.querySelectorAll('.pack-card').forEach(card => {
                    card.classList.remove('selected');
                });

                // Ajouter la classe selected à la card du bouton cliqué
                const packCard = this.closest('.pack-card');
                if (packCard) {
                    packCard.classList.add('selected');
                }

                // Stocker le pack sélectionné
                selectedPack = this.dataset.pack;
            });
        });

        // Configuration des packs (infos affichées dans la modale de confirmation)
        const packsConfig = {
            'vitrine': {
                name: 'Site Vitrine Complet',
                pages: ['Page d\'accueil', 'Présentation', 'Services', 'Tarifs', 'Contact'],
                duration: '~2 minutes'
            },
            'blog': {
                name: 'Site avec Blog',
                pages: ['Accueil', 'Blog', 'À propos', 'Contact'],
                duration: '~1m30'
            },
            'onepage': {
                name: 'Site One-Page',
                pages: ['Accueil complet (Hero, Présentation, Services, Portfolio, Contact)'],
                duration: '~1 minute'
            },
            'portfolio': {
                name: 'Portfolio Créatif',
                pages: ['Accueil visuel', 'Portfolio', 'À propos', 'Contact'],
                duration: '~1m30'
            }
        };

        const industriesLabels = {
            'restaurant': 'Restaurant / Café',
            'coach': 'Coach sportif',
            'artisan': 'Artisan',
            'startup': 'Startup / Tech',
            'services': 'Services pro',
            'creative': 'Créatif / Artiste',
            'education': 'Formation',
            'health': 'Santé',
            'generic': 'Générique'
        };

        // ÉTAPE 2 : Sélection du secteur d'activité
        // Quand l'utilisateur clique sur une industry-card
        document.querySelectorAll('.industry-card').forEach(card => {
            card.addEventListener('click', function() {
                selectedIndustry = this.dataset.industry;
                selectedPack = this.dataset.pack;
                selectedPackData = packsConfig[selectedPack];

                // Fermer la modale de sélection secteur
                const currentModal = bootstrap.Modal.getInstance(this.closest('.modal'));
                if (currentModal) {
                    currentModal.hide();
                }

                // Remplir la modale de confirmation
                fillConfirmationModal(selectedPack, selectedIndustry);

                // Ouvrir la modale de confirmation après un court délai
                setTimeout(() => {
                    const confirmModal = new bootstrap.Modal(document.getElementById('confirmGenerationModal'));
                    confirmModal.show();
                }, 300);
            });
        });

        // ÉTAPE 3 : Confirmation et génération
        document.getElementById('confirm-generation-btn').addEventListener('click', function() {
            if (!selectedPack || !selectedIndustry) {
                alert('Erreur : sélection manquante');
                return;
            }

            // Désactiver le bouton et afficher le loader
            this.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Génération en cours...';
            this.disabled = true;

            // Rediriger vers la route de génération avec pack ET industry
            const url = "{{ path('bo-dashboard-generate-pack', {packType: 'PACK', industry: 'IND'}) }}"
                .replace('PACK', selectedPack)
                .replace('IND', selectedIndustry);

            window.location.href = url;
        });

        // Fonction pour remplir la modale de confirmation
        function fillConfirmationModal(pack, industry) {
            const packData = packsConfig[pack];
            const industryLabel = industriesLabels[industry] || industry;

            // Titre
            document.getElementById('pack-name-display').textContent =
                `${packData.name} - ${industryLabel}`;

            // Liste des pages
            const pagesList = document.getElementById('pages-list');
            pagesList.innerHTML = '';
            packData.pages.forEach(page => {
                const li = document.createElement('li');
                li.innerHTML = `<i class="fas fa-check-circle"></i> ${page}`;
                pagesList.appendChild(li);
            });

            // Durée
            document.getElementById('duration-display').textContent = packData.duration;
        }
    });
    </script>
{% endblock %}