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

{% block title %}Générateur IA Conversationnel{% endblock %}
{% block breadcrumb %}Assistant IA{% endblock %}

{% block stylesheets %}
<style>
    .ai-chat-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        height: calc(100vh - 200px);
        max-height: 900px;
    }

    /* Chat panel */
    .chat-panel {
        display: flex;
        flex-direction: column;
        background: white;
        border-radius: 16px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        overflow: hidden;
    }

    .chat-header {
        background: linear-gradient(135deg, var(--colorTheme) 0%, #764ba2 100%);
        color: white;
        padding: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .chat-header h3 {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
    }

    .chat-status {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.875rem;
        opacity: 0.9;
    }

    .action-buttons {
        display: flex;
        gap: 0.75rem;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }

    .action-btn {
        padding: 0.75rem 1.5rem;
        border-radius: 10px;
        border: none;
        cursor: pointer;
        font-weight: 600;
        font-size: 0.9375rem;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .action-btn.primary {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        color: white;
        box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
    }

    .action-btn.primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
    }

    .action-btn.secondary {
        background: white;
        color: #6b7280;
        border: 2px solid #e5e7eb;
    }

    .action-btn.secondary:hover {
        background: #f9fafb;
        border-color: #d1d5db;
    }

    .success-indicator {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
        background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
        color: #065f46;
        border-radius: 10px;
        font-weight: 600;
        margin-top: 0.75rem;
        animation: successPulse 0.5s ease-out;
    }

    @keyframes successPulse {
        0% {
            transform: scale(0.95);
            opacity: 0;
        }
        50% {
            transform: scale(1.02);
        }
        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    .status-indicator {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #4ade80;
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
    }

    .chat-messages {
        flex: 1;
        overflow-y: auto;
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        background: #f8f9fa;
    }

    .message {
        display: flex;
        gap: 0.75rem;
        animation: slideIn 0.3s ease-out;
    }

    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .message.user {
        justify-content: flex-end;
    }

    .message-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.125rem;
        flex-shrink: 0;
    }

    .message.assistant .message-avatar {
        background: linear-gradient(135deg, var(--colorTheme) 0%, #764ba2 100%);
        color: white;
    }

    .message.user .message-avatar {
        background: #e5e7eb;
        color: #6b7280;
    }

    .message-content {
        max-width: 70%;
        padding: 1rem;
        border-radius: 12px;
        line-height: 1.6;
    }

    .message.assistant .message-content {
        background: white;
        color: #1f2937;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }

    .message.user .message-content {
        background: var(--colorTheme);
        color: white;
    }

    /* Styles Markdown pour les messages de l'assistant */
    .message.assistant .message-content h1,
    .message.assistant .message-content h2,
    .message.assistant .message-content h3 {
        margin: 1rem 0 0.75rem 0;
        font-weight: 700;
        color: #1f2937;
        line-height: 1.3;
    }

    .message.assistant .message-content h1 {
        font-size: 1.5rem;
        border-bottom: 2px solid #e5e7eb;
        padding-bottom: 0.5rem;
    }

    .message.assistant .message-content h2 {
        font-size: 1.25rem;
    }

    .message.assistant .message-content h3 {
        font-size: 1.125rem;
        color: var(--colorTheme);
    }

    .message.assistant .message-content p {
        margin: 0.75rem 0;
        line-height: 1.7;
    }

    .message.assistant .message-content ol,
    .message.assistant .message-content ul {
        margin: 1rem 0;
        padding-left: 1.5rem;
    }

    .message.assistant .message-content li {
        margin: 0.5rem 0;
        line-height: 1.6;
    }

    .message.assistant .message-content ol {
        list-style-type: decimal;
    }

    .message.assistant .message-content ul {
        list-style-type: disc;
    }

    .message.assistant .message-content strong {
        font-weight: 700;
        color: #1f2937;
    }

    .message.assistant .message-content em {
        font-style: italic;
        color: #4b5563;
    }

    .message.assistant .message-content code {
        background: #f3f4f6;
        padding: 0.125rem 0.375rem;
        border-radius: 4px;
        font-family: 'Courier New', monospace;
        font-size: 0.875em;
        color: #dc2626;
    }

    /* Espacements spécifiques */
    .message.assistant .message-content > *:first-child {
        margin-top: 0;
    }

    .message.assistant .message-content > *:last-child {
        margin-bottom: 0;
    }

    .message-time {
        font-size: 0.75rem;
        color: #9ca3af;
        margin-top: 0.25rem;
    }

    .chat-input-container {
        padding: 1.5rem;
        background: white;
        border-top: 1px solid #e5e7eb;
    }

    .chat-input-wrapper {
        display: flex;
        gap: 0.75rem;
        align-items: flex-end;
    }

    .chat-input {
        flex: 1;
        border: 2px solid #e5e7eb;
        border-radius: 12px;
        padding: 0.875rem 1rem;
        font-size: 0.9375rem;
        resize: none;
        min-height: 50px;
        max-height: 120px;
        transition: all 0.2s;
    }

    .chat-input:focus {
        outline: none;
        border-color: var(--colorTheme);
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    .chat-send-btn {
        background: linear-gradient(135deg, var(--colorTheme) 0%, #764ba2 100%);
        color: white;
        border: none;
        border-radius: 12px;
        padding: 0.875rem 1.5rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .chat-send-btn:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }

    .chat-send-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    /* Preview panel */
    .preview-panel {
        display: flex;
        flex-direction: column;
        background: white;
        border-radius: 16px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        overflow: hidden;
    }

    .preview-header {
        background: #1f2937;
        color: white;
        padding: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .preview-actions {
        display: flex;
        gap: 0.75rem;
    }

    .preview-btn {
        padding: 0.5rem 1rem;
        border-radius: 8px;
        border: 1px solid rgba(255,255,255,0.2);
        background: rgba(255,255,255,0.1);
        color: white;
        cursor: pointer;
        transition: all 0.2s;
        font-size: 0.875rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .preview-btn:hover {
        background: rgba(255,255,255,0.2);
    }

    .preview-btn.primary {
        background: #10b981;
        border-color: #10b981;
    }

    .preview-btn.primary:hover {
        background: #059669;
    }

    .preview-content {
        flex: 1;
        overflow: hidden;
        background: #f9fafb;
        position: relative;
    }

    .preview-iframe {
        width: 100%;
        height: 100%;
        border: none;
        background: white;
    }

    .preview-empty {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #9ca3af;
        text-align: center;
        padding: 2rem;
    }

    .preview-empty i {
        font-size: 4rem;
        margin-bottom: 1rem;
        opacity: 0.5;
    }

    /* Page preview */
    .page-preview-container {
        background: white;
        border-radius: 12px;
        padding: 2rem;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }

    .page-preview-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 1.5rem;
    }

    .widget-preview {
        margin-bottom: 2rem;
        padding: 1.5rem;
        border: 2px dashed #e5e7eb;
        border-radius: 8px;
    }

    .widget-preview-type {
        display: inline-block;
        background: var(--colorTheme);
        color: white;
        padding: 0.25rem 0.75rem;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 600;
        margin-bottom: 0.75rem;
    }

    /* Loader */
    .message-loader {
        display: flex;
        gap: 0.5rem;
        padding: 1rem;
    }

    .loader-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--colorTheme);
        animation: bounce 1.4s infinite ease-in-out both;
    }

    .loader-dot:nth-child(1) { animation-delay: -0.32s; }
    .loader-dot:nth-child(2) { animation-delay: -0.16s; }

    @keyframes bounce {
        0%, 80%, 100% { transform: scale(0); }
        40% { transform: scale(1); }
    }

    @media (max-width: 1200px) {
        .ai-chat-container {
            grid-template-columns: 1fr;
        }

        .preview-panel {
            display: none;
        }
    }
</style>
{% endblock %}

{% block body %}
<div class="content-header" data-aos="fade-down">
    <h1 class="content-title">
        <i class="fas fa-robot me-3"></i>
        Assistant IA Conversationnel
    </h1>
    <p class="content-subtitle">Créez et modifiez vos pages en dialoguant avec l'IA</p>
</div>

<div class="ai-chat-container">
    <!-- Chat Panel -->
    <div class="chat-panel">
        <div class="chat-header">
            <div>
                <h3><i class="fas fa-comments me-2"></i> Conversation</h3>
                <div class="chat-status">
                    <span class="status-indicator"></span>
                    <span>Assistant IA actif</span>
                </div>
            </div>
            <button class="preview-btn" onclick="resetConversation()">
                <i class="fas fa-redo"></i> Nouvelle conversation
            </button>
        </div>

        <div class="chat-messages" id="chatMessages">
            <!-- Messages will be inserted here -->
        </div>

        <div class="chat-input-container">
            <div class="chat-input-wrapper">
                <textarea
                    id="chatInput"
                    class="chat-input"
                    placeholder="Décrivez ce que vous souhaitez créer ou modifier..."
                    rows="2"
                ></textarea>
                <button class="chat-send-btn" id="sendBtn" onclick="sendMessage()">
                    <i class="fas fa-paper-plane"></i>
                    Envoyer
                </button>
            </div>
        </div>
    </div>

    <!-- Preview Panel -->
    <div class="preview-panel">
        <div class="preview-header">
            <h3><i class="fas fa-eye me-2"></i> Aperçu en temps réel</h3>
            <div class="preview-actions">
                <button class="preview-btn" onclick="refreshPreview()">
                    <i class="fas fa-sync"></i> Rafraîchir
                </button>
                <button class="preview-btn" onclick="openInNewTab()">
                    <i class="fas fa-external-link-alt"></i> Ouvrir
                </button>
            </div>
        </div>

        <div class="preview-content" id="previewContent">
            <div class="preview-empty" id="previewEmpty">
                <i class="fas fa-magic"></i>
                <p>L'aperçu de votre page apparaîtra ici</p>
                <small>Commencez à discuter avec l'IA pour générer du contenu</small>
            </div>
            <iframe id="previewIframe" class="preview-iframe" style="display: none;"></iframe>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
<script>
let conversationId = null;
let currentPageUrl = null;
let conversationMode = 'advice'; // Mode par défaut : toujours conseil au début

// Données guidées depuis le formulaire
const guidedData = {{ guidedData|json_encode|raw }};

// Initialisation
document.addEventListener('DOMContentLoaded', function() {
    startConversation();

    // Envoyer avec Entrée (Shift+Entrée pour nouvelle ligne)
    document.getElementById('chatInput').addEventListener('keydown', function(e) {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            sendMessage();
        }
    });
});

// Démarrer une nouvelle conversation
async function startConversation() {
    try {
        const requestBody = {
            mode: 'add_page',
            conversationMode: conversationMode,
            metadata: {}
        };

        // Ajouter les données guidées si présentes
        if (guidedData) {
            requestBody.industry = guidedData.industry;
            requestBody.answers = guidedData.answers;
            requestBody.metadata.industry = guidedData.industry;
            requestBody.metadata.answers = guidedData.answers;
        }

        const response = await fetch('{{ path('admin_ai_conversation_start') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(requestBody)
        });

        const data = await response.json();

        if (data.success) {
            conversationId = data.conversationId;
            addMessage('assistant', data.message);
        } else {
            showError('Erreur lors du démarrage de la conversation');
        }
    } catch (error) {
        console.error('Error starting conversation:', error);
        showError('Erreur de connexion');
    }
}

// Envoyer un message
async function sendMessage() {
    const input = document.getElementById('chatInput');
    const message = input.value.trim();

    if (!message || !conversationId) return;

    // Désactiver l'input
    input.disabled = true;
    document.getElementById('sendBtn').disabled = true;

    // Afficher le message utilisateur
    addMessage('user', message);
    input.value = '';

    // Afficher le loader
    addLoader();

    try {
        const response = await fetch('{{ path('admin_ai_conversation_message') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                conversationId: conversationId,
                message: message,
                conversationMode: conversationMode
            })
        });

        const data = await response.json();

        // Retirer le loader
        removeLoader();

        if (data.success) {
            // Si basculement automatique détecté
            if (data.autoSwitched) {
                conversationMode = data.newMode; // Mettre à jour le mode interne
                addMessage('assistant', data.switchMessage);
            }

            // Afficher la réponse
            addMessage('assistant', data.response, data.showApplyButton);

            // Si une page a été créée/modifiée, charger l'aperçu
            if (data.pageUrl) {
                currentPageUrl = data.pageUrl;
                loadPreview(data.pageUrl);
            }
        } else {
            showError(data.error || 'Erreur lors de l\'envoi du message');
        }
    } catch (error) {
        removeLoader();
        console.error('Error sending message:', error);
        showError('Erreur de connexion');
    } finally {
        // Réactiver l'input
        input.disabled = false;
        document.getElementById('sendBtn').disabled = false;
        input.focus();
    }
}

// Parser Markdown simple pour formater les messages de l'IA
function parseMarkdown(text) {
    // Titres (### Titre)
    text = text.replace(/^### (.+)$/gm, '<h3>$1</h3>');
    text = text.replace(/^## (.+)$/gm, '<h2>$1</h2>');
    text = text.replace(/^# (.+)$/gm, '<h1>$1</h1>');

    // Gras (**texte**)
    text = text.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');

    // Italique (*texte*)
    text = text.replace(/\*(.+?)\*/g, '<em>$1</em>');

    // Listes numérotées
    text = text.replace(/^(\d+)\.\s+(.+)$/gm, '<li>$2</li>');
    text = text.replace(/(<li>.*<\/li>\n?)+/g, '<ol>$&</ol>');

    // Listes à puces (- item ou * item)
    text = text.replace(/^[-*]\s+(.+)$/gm, '<li>$1</li>');

    // Code inline (`code`)
    text = text.replace(/`(.+?)`/g, '<code>$1</code>');

    // Sauts de ligne doubles = nouveau paragraphe
    text = text.replace(/\n\n/g, '</p><p>');
    text = '<p>' + text + '</p>';

    // Nettoyer les paragraphes vides
    text = text.replace(/<p><\/p>/g, '');
    text = text.replace(/<p>\s*<\/p>/g, '');

    return text;
}

// Ajouter un message au chat
function addMessage(role, content, showApplyButton = false) {
    const messagesContainer = document.getElementById('chatMessages');
    const messageDiv = document.createElement('div');
    messageDiv.className = `message ${role}`;

    const avatar = role === 'assistant' ? '<i class="fas fa-robot"></i>' : '<i class="fas fa-user"></i>';
    const time = new Date().toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });

    // Parser le Markdown pour les messages de l'assistant
    const formattedContent = role === 'assistant' ? parseMarkdown(content) : content;

    let actionButtons = '';
    if (showApplyButton && role === 'assistant') {
        actionButtons = `
            <div class="action-buttons">
                <button class="action-btn primary" onclick="applyChanges()">
                    <i class="fas fa-check"></i>
                    Appliquer ces modifications
                </button>
                <button class="action-btn secondary" onclick="continueDiscussion()">
                    <i class="fas fa-comments"></i>
                    Continuer la discussion
                </button>
            </div>
        `;
    }

    messageDiv.innerHTML = `
        ${role === 'assistant' ? `<div class="message-avatar">${avatar}</div>` : ''}
        <div class="message-content">
            ${formattedContent}
            ${actionButtons}
            <div class="message-time">${time}</div>
        </div>
        ${role === 'user' ? `<div class="message-avatar">${avatar}</div>` : ''}
    `;

    messagesContainer.appendChild(messageDiv);
    messagesContainer.scrollTop = messagesContainer.scrollHeight;
}

// Ajouter un loader
function addLoader() {
    const messagesContainer = document.getElementById('chatMessages');
    const loaderDiv = document.createElement('div');
    loaderDiv.id = 'messageLoader';
    loaderDiv.className = 'message assistant';
    loaderDiv.innerHTML = `
        <div class="message-avatar"><i class="fas fa-robot"></i></div>
        <div class="message-content message-loader">
            <div class="loader-dot"></div>
            <div class="loader-dot"></div>
            <div class="loader-dot"></div>
        </div>
    `;
    messagesContainer.appendChild(loaderDiv);
    messagesContainer.scrollTop = messagesContainer.scrollHeight;
}

// Retirer le loader
function removeLoader() {
    const loader = document.getElementById('messageLoader');
    if (loader) loader.remove();
}

// Charger le preview dans l'iframe
function loadPreview(pageUrl) {
    const iframe = document.getElementById('previewIframe');
    const emptyState = document.getElementById('previewEmpty');

    // Masquer l'état vide
    emptyState.style.display = 'none';

    // Afficher et charger l'iframe
    iframe.style.display = 'block';
    iframe.src = pageUrl + '?preview=1&t=' + Date.now(); // Ajouter timestamp pour forcer le refresh

    console.log('Loading preview:', pageUrl);
}

// Rafraîchir le preview
function refreshPreview() {
    if (currentPageUrl) {
        loadPreview(currentPageUrl);
        addMessage('assistant', '✅ Aperçu rafraîchi !');
    }
}

// Ouvrir dans un nouvel onglet
function openInNewTab() {
    if (currentPageUrl) {
        window.open(currentPageUrl, '_blank');
    }
}

// Régénérer
async function regenerate() {
    if (!conversationId) return;

    const instruction = prompt('Instructions pour la régénération (ou laissez vide pour une variation) :');

    addLoader();

    try {
        const response = await fetch('{{ path('admin_ai_conversation_regenerate') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                conversationId: conversationId,
                instruction: instruction || ''
            })
        });

        const data = await response.json();
        removeLoader();

        if (data.success) {
            addMessage('assistant', data.response);
            if (data.preview) {
                updatePreview(data.preview);
                currentPreview = data.preview;
            }
        }
    } catch (error) {
        removeLoader();
        console.error('Error regenerating:', error);
    }
}

// Note: validateGeneration() supprimée car l'application est maintenant automatique

// Réinitialiser
function resetConversation() {
    if (!confirm('Voulez-vous recommencer une nouvelle conversation ?')) {
        return;
    }

    document.getElementById('chatMessages').innerHTML = '';
    document.getElementById('previewContent').innerHTML = `
        <div class="preview-empty">
            <i class="fas fa-magic"></i>
            <p>L'aperçu de votre génération apparaîtra ici</p>
        </div>
    `;
    document.getElementById('previewActions').style.display = 'none';
    currentPreview = null;
    startConversation();
}

// Afficher une erreur
function showError(message) {
    addMessage('assistant', '❌ ' + message);
}

// Appliquer les changements (bascule auto en mode Action et envoie "oui")
async function applyChanges() {
    // Désactiver tous les boutons d'action pour éviter les doubles clics
    document.querySelectorAll('.action-btn').forEach(btn => btn.disabled = true);

    // Afficher un message de confirmation de l'utilisateur
    addMessage('user', 'Oui, applique ces modifications');

    // Préparer l'envoi avec basculement automatique vers mode Action
    const input = document.getElementById('chatInput');
    input.disabled = true;
    document.getElementById('sendBtn').disabled = true;

    // Afficher le loader
    addLoader();

    try {
        const response = await fetch('{{ path('admin_ai_conversation_message') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                conversationId: conversationId,
                message: 'Oui, applique ces modifications',
                conversationMode: conversationMode // Le backend détectera et basculera automatiquement
            })
        });

        const data = await response.json();

        // Retirer le loader
        removeLoader();

        if (data.success) {
            // Si basculement automatique détecté
            if (data.autoSwitched) {
                conversationMode = data.newMode;
                addMessage('assistant', data.switchMessage);
            }

            // Afficher la réponse
            addMessage('assistant', data.response);

            // Si une page a été créée/modifiée, charger l'aperçu
            if (data.pageUrl) {
                currentPageUrl = data.pageUrl;
                loadPreview(data.pageUrl);
            }
        } else {
            showError(data.error || 'Erreur lors de l\'envoi du message');
        }
    } catch (error) {
        removeLoader();
        console.error('Error sending message:', error);
        showError('Erreur de connexion');
    } finally {
        // Réactiver l'input
        input.disabled = false;
        document.getElementById('sendBtn').disabled = false;
        input.focus();
    }
}

// Continuer la discussion sans appliquer
function continueDiscussion() {
    // Masquer les boutons d'action du dernier message
    const lastMessage = document.querySelector('.message.assistant:last-of-type .action-buttons');
    if (lastMessage) {
        lastMessage.style.display = 'none';
    }

    // Focus sur l'input pour encourager la continuation
    document.getElementById('chatInput').focus();
}
</script>
{% endblock %}