=================================================================
MODIFICATIONS À APPORTER À ia.php POUR INTÉGRATION N8N
=================================================================

Je vais te guider étape par étape pour modifier ia.php manuellement.

=================================================================
ÉTAPE 1 : AJOUTER LA GESTION AJAX (après la ligne 71)
=================================================================

Ajoute ce code juste après la fonction getUserBasicData() (ligne 71) :

```php
// Vérifier si l'utilisateur a un profil chat
function getUserChatProfile($user_id) {
    try {
        $pdo = getDatabaseConnection();
        if (!$pdo) return null;

        $stmt = $pdo->prepare("SELECT * FROM user_chat_profiles WHERE user_id = ?");
        $stmt->execute([$user_id]);
        return $stmt->fetch(PDO::FETCH_ASSOC);
    } catch (Exception $e) {
        error_log("Erreur getUserChatProfile: " . $e->getMessage());
        return null;
    }
}

// Gestion des requêtes AJAX
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
    header('Content-Type: application/json');

    try {
        switch ($_POST['action']) {
            case 'save_chat_profile':
                $user_id = $_SESSION['user_id'];
                $bio = trim($_POST['bio'] ?? '');
                $additional_info = trim($_POST['additional_info'] ?? '');

                $pdo = getDatabaseConnection();
                if (!$pdo) throw new Exception('Erreur de connexion à la base de données');

                $stmt = $pdo->prepare("
                    INSERT INTO user_chat_profiles (user_id, bio, additional_info, created_at, updated_at)
                    VALUES (?, ?, ?, NOW(), NOW())
                    ON DUPLICATE KEY UPDATE bio = ?, additional_info = ?, updated_at = NOW()
                ");
                $stmt->execute([$user_id, $bio, $additional_info, $bio, $additional_info]);

                echo json_encode(['success' => true]);
                exit();

            case 'save_message':
                $user_id = $_SESSION['user_id'];
                $message = trim($_POST['message'] ?? '');
                $response = trim($_POST['response'] ?? '');
                $is_user = (int)($_POST['is_user'] ?? 1);

                if (!empty($message) || !empty($response)) {
                    $pdo = getDatabaseConnection();
                    if ($pdo) {
                        $stmt = $pdo->prepare("
                            INSERT INTO chat_ia_messages (user_id, message, response, is_user, created_at)
                            VALUES (?, ?, ?, ?, NOW())
                        ");
                        $stmt->execute([$user_id, $message, $response, $is_user]);
                    }
                }

                echo json_encode(['success' => true]);
                exit();
        }
    } catch (Exception $e) {
        echo json_encode(['success' => false, 'error' => $e->getMessage()]);
        exit();
    }
}
```

=================================================================
ÉTAPE 2 : RÉCUPÉRER LE PROFIL CHAT (après les variables $user_id, $user_data_nav, etc.)
=================================================================

Ajoute ces lignes juste avant la ligne où tu inclus sidebar.php (vers ligne 204) :

```php
// Vérifier si l'utilisateur a déjà rempli son profil chat
$chat_profile = getUserChatProfile($user_id);
$is_first_time = !$chat_profile;

// Récupérer la configuration N8N depuis .env
$n8n_webhook_url = $_ENV['N8N_WEBHOOK_URL'] ?? 'https://n8n.srv1082026.hstgr.cloud/webhook-test/testdev12345678910101010101';
```

=================================================================
ÉTAPE 3 : AJOUTER LE MODAL DE PREMIÈRE CONNEXION
=================================================================

Cherche la fin du HTML (juste avant la balise </body>) et ajoute ce modal AVANT la balise </body> :

```html
<!-- Modal for first-time profile setup -->
<div class="modal-overlay <?= $is_first_time ? 'active' : '' ?>" id="profileModal">
    <div class="modal-profile">
        <div class="modal-header">
            <i class="fas fa-user-circle" style="font-size: 48px; color: var(--noir); margin-bottom: 16px;"></i>
            <h2 style="font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 700; margin-bottom: 8px;">Complétez votre profil</h2>
            <p style="color: #666; font-size: 14px;">C'est votre première connexion ! Veuillez renseigner vos informations pour personnaliser votre expérience.</p>
        </div>

        <form id="profileForm" style="margin-top: 24px;">
            <div style="margin-bottom: 20px;">
                <label style="display: block; margin-bottom: 8px; font-weight: 500; font-size: 13px;">Bio / Présentation</label>
                <textarea
                    id="bio"
                    name="bio"
                    style="width: 100%; padding: 12px 16px; border: 2px solid var(--beige); border-radius: 8px; font-size: 14px; font-family: 'Inter', sans-serif; background-color: var(--beige-clair); min-height: 100px; resize: vertical;"
                    placeholder="Parlez-nous un peu de vous, vos objectifs, votre parcours..."></textarea>
            </div>

            <div style="margin-bottom: 20px;">
                <label style="display: block; margin-bottom: 8px; font-weight: 500; font-size: 13px;">Informations supplémentaires</label>
                <textarea
                    id="additional_info"
                    name="additional_info"
                    style="width: 100%; padding: 12px 16px; border: 2px solid var(--beige); border-radius: 8px; font-size: 14px; font-family: 'Inter', sans-serif; background-color: var(--beige-clair); min-height: 100px; resize: vertical;"
                    placeholder="Domaines d'intérêt, besoins spécifiques, préférences..."></textarea>
            </div>

            <div style="display: flex; justify-content: flex-end; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--beige);">
                <button type="submit" style="padding: 12px 24px; background-color: var(--noir); color: var(--blanc); border: none; border-radius: 8px; cursor: pointer; font-weight: 500; font-size: 14px;">
                    <i class="fas fa-check"></i> Enregistrer et continuer
                </button>
            </div>
        </form>
    </div>
</div>
```

=================================================================
ÉTAPE 4 : AJOUTER LES STYLES DU MODAL
=================================================================

Ajoute ces styles CSS dans la balise <style> (cherche la fin des styles existants, juste avant </style>) :

```css
/* Modal Styles for First-Time Profile */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-profile {
    background-color: var(--blanc);
    border-radius: 16px;
    padding: 32px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
    transform: translateY(20px);
    transition: var(--transition);
    text-align: center;
}

.modal-overlay.active .modal-profile {
    transform: translateY(0);
}
```

=================================================================
ÉTAPE 5 : MODIFIER LA FONCTION submitQuery() DANS LE JAVASCRIPT
=================================================================

Cherche la fonction submitQuery() (vers ligne 2339) et REMPLACE TOUT son contenu par :

```javascript
async function submitQuery() {
    if (!hasAccess) {
        alert('Vous devez avoir un abonnement actif pour utiliser l\'IA.');
        return;
    }

    const query = textarea.value.trim();
    if (!query) return;

    // Add user message
    addMessage('user', query);

    // Clear input
    textarea.value = '';
    textarea.dispatchEvent(new Event('input'));
    attachedFiles = [];
    document.getElementById('attachedFiles').innerHTML = '';

    // Disable send button
    const sendBtn = document.querySelector('.send-btn');
    if (sendBtn) {
        sendBtn.disabled = true;
        sendBtn.innerHTML = '<span class="loading"></span>';
    }

    try {
        // ============================================
        // ENVOI À N8N WEBHOOK
        // ============================================

        const response = await fetch('<?= htmlspecialchars($n8n_webhook_url) ?>', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                sessionId: '<?= $user_id ?>',
                userId: '<?= $user_id ?>',
                userName: '<?= htmlspecialchars($user_name) ?>',
                userRole: '<?= htmlspecialchars($user_role) ?>',
                userBio: '<?= htmlspecialchars($chat_profile['bio'] ?? '') ?>',
                userAdditionalInfo: '<?= htmlspecialchars($chat_profile['additional_info'] ?? '') ?>',
                message: query,
                timestamp: new Date().toISOString()
            })
        });

        if (!response.ok) {
            throw new Error('Erreur de communication avec N8N');
        }

        const data = await response.json();

        // Display bot response
        const botResponse = data.response || data.message || data.output || 'Désolé, je n\'ai pas pu traiter votre demande.';
        addMessage('assistant', botResponse);

        // Save messages to database
        saveMessageToDB(query, botResponse);

    } catch (error) {
        console.error('Erreur:', error);
        addMessage('assistant', '❌ Erreur: Impossible de se connecter au serveur. Vérifiez que votre webhook N8N est correctement configuré.');
    } finally {
        if (sendBtn) {
            sendBtn.disabled = false;
            sendBtn.innerHTML = '<i class="fas fa-paper-plane"></i>';
        }
    }

    // Close mobile conversations if open
    if (window.innerWidth <= 768) {
        const panel = document.querySelector('.conversations-panel');
        const overlay = document.getElementById('mobileOverlay');
        if (panel) panel.classList.remove('active');
        if (overlay) overlay.classList.remove('active');
    }
}
```

=================================================================
ÉTAPE 6 : AJOUTER LES FONCTIONS JAVASCRIPT MANQUANTES
=================================================================

Ajoute ces fonctions JavaScript à la fin de la balise <script> (juste avant </script>) :

```javascript
// Function to save messages to database
async function saveMessageToDB(message, response) {
    try {
        const formData = new FormData();
        formData.append('action', 'save_message');
        formData.append('message', message);
        formData.append('response', response);
        formData.append('is_user', '1');

        await fetch('ia.php', {
            method: 'POST',
            body: formData
        });
    } catch (error) {
        console.error('Erreur sauvegarde message:', error);
    }
}

// Handle profile form submission
document.getElementById('profileForm').addEventListener('submit', async function(e) {
    e.preventDefault();

    const formData = new FormData();
    formData.append('action', 'save_chat_profile');
    formData.append('bio', document.getElementById('bio').value);
    formData.append('additional_info', document.getElementById('additional_info').value);

    try {
        const response = await fetch('ia.php', {
            method: 'POST',
            body: formData
        });

        const data = await response.json();

        if (data.success) {
            document.getElementById('profileModal').classList.remove('active');
            // Reload to update chat_profile variable
            setTimeout(() => window.location.reload(), 300);
        } else {
            alert('Erreur lors de l\'enregistrement: ' + (data.error || 'Erreur inconnue'));
        }
    } catch (error) {
        console.error('Erreur:', error);
        alert('Erreur de connexion');
    }
});

// Add loading animation CSS
const loadingStyle = document.createElement('style');
loadingStyle.textContent = `
    .loading {
        display: inline-block;
        width: 16px;
        height: 16px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        border-top-color: white;
        animation: spin 0.6s linear infinite;
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }
`;
document.head.appendChild(loadingStyle);
```

=================================================================
RÉSUMÉ DES MODIFICATIONS
=================================================================

1. ✅ Ajout de la gestion AJAX pour sauvegarder le profil chat
2. ✅ Récupération du profil chat de l'utilisateur
3. ✅ Ajout du modal de première connexion
4. ✅ Ajout des styles CSS pour le modal
5. ✅ Modification de submitQuery() pour envoyer à N8N
6. ✅ Ajout des fonctions JavaScript pour gérer le profil et sauvegarder les messages

=================================================================
TESTER
=================================================================

Après avoir fait ces modifications :

1. Importe le fichier SQL : `database/migration_chat_ia_n8n.sql`
2. Configure ton webhook N8N dans le .env
3. Rafraîchis la page ia.php
4. Le modal devrait apparaître à la première connexion
5. Remplis le formulaire
6. Envoie un message pour tester N8N

=================================================================