{% extends 'admin/layout.html' %}

{% block title %}Nuovo Post Blog - Admin{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                    <h4 class="mb-0">
                        <i class="fas fa-plus me-2"></i>Nuovo Post Blog
                    </h4>
                    <a href="{{ url_for('admin_blog.blog_list') }}" class="btn btn-light">
                        <i class="fas fa-arrow-left me-1"></i>Torna alla Lista
                    </a>
                </div>

                <div class="card-body">
                    <!-- AI Generator con Suggerimenti -->
                    <div class="card bg-light mb-4">
                        <div class="card-body">
                            <h5 class="card-title">
                                <i class="fas fa-robot me-2"></i>Genera con AI
                            </h5>
                            
                            <!-- Selettore Prodotto -->
                            <div class="mb-3">
                                <label class="form-label fw-bold">Oppure scegli un prodotto specifico:</label>
                                <div class="input-group">
                                    <input type="text" id="product-search" class="form-control" placeholder="Cerca prodotto per nome...">
                                    <button onclick="searchProducts()" class="btn btn-primary">
                                        <i class="fas fa-search me-1"></i>Cerca
                                    </button>
                                </div>
                                <div id="product-results" class="mt-2" style="display:none;"></div>
                            </div>
                            
                            <hr>
                            
                            <!-- Pulsante Suggerimenti -->
                            <div class="mb-3">
                                <button onclick="loadTopicSuggestions()" class="btn btn-info">
                                    <i class="fas fa-lightbulb me-1"></i>Mostra Suggerimenti Argomenti AI
                                </button>
                            </div>
                            
                            <!-- Lista Suggerimenti -->
                            <div id="topic-suggestions" class="mb-3" style="display:none;">
                                <h6>Argomenti Suggeriti:</h6>
                                <div id="suggestions-list" class="list-group mb-2"></div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <input type="text" id="ai-topic" class="form-control mb-2" 
                                           placeholder="Argomento (es: Come risparmiare con gli acquisti di gruppo)">
                                </div>
                                <div class="col-md-4">
                                    <input type="text" id="ai-keywords" class="form-control mb-2" 
                                           placeholder="Keywords (separate da virgola)">
                                </div>
                                <div class="col-md-2">
                                    <button onclick="generateWithAI()" class="btn btn-success w-100">
                                        <i class="fas fa-magic me-1"></i>Genera
                                    </button>
                                </div>
                            </div>
                            <div id="ai-loading" class="text-center mt-3" style="display:none;">
                                <div class="spinner-border text-primary" role="status">
                                    <span class="visually-hidden">Generazione in corso...</span>
                                </div>
                                <p class="mt-2">Generazione contenuto AI in corso...</p>
                            </div>
                        </div>
                    </div>

                    <!-- Form Post -->
                    <form method="POST" action="{{ url_for('admin_blog.blog_store') }}">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                        <input type="hidden" name="product_id" id="product_id" value="">
                        
                        <div class="row">
                            <div class="col-md-8">
                                <div class="mb-3">
                                    <label for="title" class="form-label">Titolo *</label>
                                    <input type="text" class="form-control" id="title" name="title" required>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="language" class="form-label">Lingua</label>
                                    <select class="form-select" id="language" name="language">
                                        <option value="it">Italiano</option>
                                        <option value="en">English</option>
                                        <option value="fr">Français</option>
                                        <option value="es">Español</option>
                                        <option value="de">Deutsch</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="meta_description" class="form-label">Meta Description</label>
                            <textarea class="form-control" id="meta_description" name="meta_description" 
                                      rows="2" maxlength="160"></textarea>
                            <small class="text-muted">Max 160 caratteri per SEO</small>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="category_id" class="form-label">Categoria</label>
                                    <select class="form-select" id="category_id" name="category_id">
                                        <option value="">Nessuna categoria</option>
                                        {% for category in categories %}
                                        <option value="{{ category.id }}">{{ category.name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Stato</label>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="published" name="published">
                                        <label class="form-check-label" for="published">
                                            Pubblica subito
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="content" class="form-label">Contenuto *</label>
                            <textarea class="form-control" id="content" name="content" rows="20" required></textarea>
                        </div>

                        <div class="d-flex justify-content-between">
                            <a href="{{ url_for('admin_blog.blog_list') }}" class="btn btn-secondary">
                                <i class="fas fa-times me-1"></i>Annulla
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-1"></i>Salva Post
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
async function searchProducts() {
    const searchTerm = document.getElementById('product-search').value;
    const resultsDiv = document.getElementById('product-results');
    
    if (!searchTerm || searchTerm.length < 2) {
        alert('Inserisci almeno 2 caratteri per la ricerca');
        return;
    }
    
    resultsDiv.style.display = 'block';
    resultsDiv.innerHTML = '<div class="text-center"><div class="spinner-border spinner-border-sm" role="status"></div> Ricerca in corso...</div>';
    
    try {
        const response = await fetch(`/admin/blog/search-products?q=${encodeURIComponent(searchTerm)}`);
        const data = await response.json();
        
        if (data.products && data.products.length > 0) {
            resultsDiv.innerHTML = '<div class="list-group">';
            data.products.forEach(product => {
                const imgUrl = product.images && product.images.length > 0 ? product.images[0] : '/static/images/logo.png';
                const priceInfo = product.price ? `€${product.price.toFixed(2)}` : 'N/A';
                const savingsInfo = product.market_savings > 0 ? `<span class="badge bg-success">-${product.market_savings}%</span>` : '';
                
                resultsDiv.innerHTML += `
                    <a href="#" class="list-group-item list-group-item-action" onclick="selectProduct(${JSON.stringify(product).replace(/"/g, '&quot;')}); return false;">
                        <div class="d-flex align-items-center">
                            <img loading="lazy" src="${imgUrl}" alt="${product.name}" style="width: 60px; height: 60px; object-fit: cover; border-radius: 5px; margin-right: 15px;">
                            <div class="flex-grow-1">
                                <h6 class="mb-1">${product.name}</h6>
                                <small class="text-muted">${priceInfo} ${savingsInfo}</small>
                            </div>
                        </div>
                    </a>
                `;
            });
            resultsDiv.innerHTML += '</div>';
        } else {
            resultsDiv.innerHTML = '<div class="alert alert-warning">Nessun prodotto trovato</div>';
        }
    } catch (error) {
        resultsDiv.innerHTML = '<div class="alert alert-danger">Errore durante la ricerca</div>';
        console.error('Errore:', error);
    }
}

function selectProduct(product) {
    // Popola il campo topic con il nome prodotto
    document.getElementById('ai-topic').value = `Guida completa: ${product.name}`;
    
    // Salva i dati prodotto
    selectedProductImages = product.images || [];
    selectedProductData = product;
    
    // Salva product_id nel campo hidden
    if (product.id) {
        document.getElementById('product_id').value = product.id;
    }
    
    // Mostra anteprima
    const previewDiv = document.getElementById('image-preview') || createImagePreview();
    previewDiv.innerHTML = '<h6 class="mt-3">? Prodotto selezionato:</h6>';
    previewDiv.innerHTML += `<div class="alert alert-success"><strong>${product.name}</strong><br>`;
    previewDiv.innerHTML += `Prezzo: €${product.price ? product.price.toFixed(2) : 'N/A'}`;
    if (product.market_savings > 0) {
        previewDiv.innerHTML += ` - Risparmio: ${product.market_savings}%`;
    }
    previewDiv.innerHTML += '</div>';
    
    if (selectedProductImages.length > 0) {
        previewDiv.innerHTML += '<div class="d-flex gap-2 mt-2">';
        selectedProductImages.slice(0, 3).forEach((img, idx) => {
            previewDiv.innerHTML += `<img loading="lazy" src="${img}" alt="Preview ${idx+1}" style="width: 80px; height: 80px; object-fit: cover; border-radius: 5px;">`;
        });
        previewDiv.innerHTML += '</div>';
    }
    
    // Nascondi risultati ricerca
    document.getElementById('product-results').style.display = 'none';
    document.getElementById('product-search').value = '';
    
    // Scroll al form
    document.getElementById('ai-topic').scrollIntoView({ behavior: 'smooth' });
}

async function loadTopicSuggestions() {
    const suggestionsDiv = document.getElementById('topic-suggestions');
    const suggestionsList = document.getElementById('suggestions-list');
    
    suggestionsDiv.style.display = 'block';
    suggestionsList.innerHTML = '<div class="text-center"><div class="spinner-border" role="status"></div><p>Caricamento suggerimenti...</p></div>';
    
    try {
        const response = await fetch('/admin/blog/suggest-topics');
        const data = await response.json();
        
        if (data.topics && data.topics.length > 0) {
            suggestionsList.innerHTML = '';
            data.topics.forEach((topic, index) => {
                const badge = topic.traffic_potential === 'Alto' ? 'success' : 
                             topic.traffic_potential === 'Medio' ? 'warning' : 'secondary';
                
                // Cerca prodotti correlati per mostrare immagini
                let productImages = '';
                let topicImages = [];  // Salva le immagini per questo topic
                
                if (data.products && topic.products_to_link) {
                    const relatedProducts = data.products.filter(p => 
                        topic.products_to_link.some(name => p.name.toLowerCase().includes(name.toLowerCase()))
                    );
                    
                    if (relatedProducts.length > 0 && relatedProducts[0].images) {
                        topicImages = relatedProducts[0].images;  // Salva le immagini
                        productImages = '<div class="mt-2 d-flex gap-2">';
                        topicImages.slice(0, 3).forEach(img => {
                            productImages += `<img loading="lazy" src="${img}" alt="Preview" style="width: 60px; height: 60px; object-fit: cover; border-radius: 5px;">`;
                        });
                        productImages += '</div>';
                    }
                }
                
                // Trova i dati completi del prodotto
                let fullProductData = {};
                if (data.products && topic.products_to_link) {
                    const relatedProducts = data.products.filter(p => 
                        topic.products_to_link.some(name => p.name.toLowerCase().includes(name.toLowerCase()))
                    );
                    if (relatedProducts.length > 0) {
                        fullProductData = relatedProducts[0];
                    }
                }
                
                const item = document.createElement('a');
                item.href = '#';
                item.className = 'list-group-item list-group-item-action';
                item.onclick = (e) => {
                    e.preventDefault();
                    selectTopic(topic, topicImages, fullProductData);  // Passa immagini e dati prodotto
                };
                item.innerHTML = `
                    <div class="d-flex w-100 justify-content-between">
                        <h6 class="mb-1">${topic.title}</h6>
                        <small>
                            <span class="badge bg-${badge}">${topic.traffic_potential || 'N/A'}</span>
                            <span class="badge bg-info">${topic.type || 'Generale'}</span>
                        </small>
                    </div>
                    <p class="mb-1 small">${topic.objective || ''}</p>
                    <small class="text-muted">Keywords: ${(topic.keywords || []).join(', ')}</small>
                    ${productImages}
                `;
                suggestionsList.appendChild(item);
            });
        } else {
            suggestionsList.innerHTML = '<div class="alert alert-info">Nessun suggerimento disponibile</div>';
        }
    } catch (error) {
        suggestionsList.innerHTML = '<div class="alert alert-danger">Errore caricamento suggerimenti</div>';
        console.error('Errore:', error);
    }
}

// Variabili globali per memorizzare i dati del prodotto selezionato
let selectedProductImages = [];
let selectedProductData = {};

function selectTopic(topic, images = [], productData = {}) {
    document.getElementById('ai-topic').value = topic.title;
    if (topic.keywords && topic.keywords.length > 0) {
        document.getElementById('ai-keywords').value = topic.keywords.join(', ');
    }
    
    // Salva le immagini e i dati prodotto per usarli nella generazione AI
    selectedProductImages = images || [];
    selectedProductData = productData || {};
    
    // Mostra anteprima immagini se disponibili
    if (images && images.length > 0) {
        const previewDiv = document.getElementById('image-preview') || createImagePreview();
        previewDiv.innerHTML = '<h6 class="mt-3">? Immagini che verranno incluse nell\'articolo:</h6><div class="d-flex gap-2">';
        images.slice(0, 3).forEach((img, idx) => {
            previewDiv.innerHTML += `
                <div class="position-relative">
                    <img loading="lazy" src="${img}" alt="Preview ${idx+1}" style="width: 100px; height: 100px; object-fit: cover; border-radius: 8px; cursor: pointer;" 
                         onclick="selectImage('${img}')">
                    <small class="d-block text-center mt-1">${idx === 0 ? 'Principale' : `#${idx+1}`}</small>
                </div>
            `;
        });
        previewDiv.innerHTML += '</div><small class="text-muted mt-2 d-block">L\'AI inserirà queste immagini in modo strategico nell\'articolo</small>';
    }
    
    // Scroll al form
    document.getElementById('ai-topic').scrollIntoView({ behavior: 'smooth' });
}

function createImagePreview() {
    const div = document.createElement('div');
    div.id = 'image-preview';
    div.className = 'alert alert-info';
    document.querySelector('.card.bg-light .card-body').appendChild(div);
    return div;
}

function selectImage(imageUrl) {
    // Copia URL negli appunti
    navigator.clipboard.writeText(imageUrl).then(() => {
        alert('? URL immagine copiato! Incollalo nel campo "Immagine in evidenza" se necessario.');
    });
}

async function generateWithAI() {
    const topic = document.getElementById('ai-topic').value;
    const keywordsStr = document.getElementById('ai-keywords').value;
    const language = document.getElementById('language').value;
    
    if (!topic) {
        alert('Inserisci un argomento per la generazione AI');
        return;
    }
    
    const keywords = keywordsStr ? keywordsStr.split(',').map(k => k.trim()) : [];
    
    document.getElementById('ai-loading').style.display = 'block';
    
    try {
        const response = await fetch('/admin/blog/generate-ai', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                topic: topic,
                keywords: keywords,
                product_images: selectedProductImages,  // Passa le immagini all'AI
                product_data: selectedProductData,  // Passa i dati prodotto completi
                language: language
            })
        });
        
        const data = await response.json();
        
        if (data.success && data.content) {
            const content = data.content;
            
            // Popola i campi del form
            if (content.title) document.getElementById('title').value = content.title;
            if (content.meta_description) document.getElementById('meta_description').value = content.meta_description;
            
            // Usa direttamente il campo content se presente (HTML formattato)
            let fullContent = '';
            if (content.content) {
                // L'AI ha generato HTML formattato
                fullContent = content.content;
            } else {
                // Fallback: costruisci da sections (vecchio formato)
                if (content.introduction) fullContent += content.introduction + '\n\n';
                
                if (content.sections && Array.isArray(content.sections)) {
                    content.sections.forEach(section => {
                        fullContent += `## ${section.heading}\n\n${section.content}\n\n`;
                    });
                }
                
                if (content.conclusion) fullContent += content.conclusion + '\n\n';
                
                if (content.faq && Array.isArray(content.faq)) {
                    fullContent += '## FAQ\n\n';
                    content.faq.forEach(faq => {
                        fullContent += `**${faq.question}**\n${faq.answer}\n\n`;
                    });
                }
            }
            
            document.getElementById('content').value = fullContent || data.raw_content;
            
            alert('? Contenuto generato con successo! Rivedi e modifica prima di salvare.');
        } else {
            alert('Errore nella generazione: ' + (data.error || 'Errore sconosciuto'));
        }
    } catch (error) {
        alert('Errore: ' + error.message);
    } finally {
        document.getElementById('ai-loading').style.display = 'none';
    }
}
</script>
{% endblock %}