{% load i18n social_filters %}

<div class="ai-analysis-container">
    <!-- Language Toggle -->
    <div class="analysis-header d-flex justify-content-between align-items-center mb-3">
        <h5 class="mb-0">
            <i class="fas fa-brain text-primary me-2"></i>
            {% trans "AI Analysis" %}
        </h5>
        <div class="language-toggle btn-group" role="group">
            <button type="button" class="btn btn-outline-primary btn-sm active" onclick="setAnalysisLanguage('en')">
                🇬🇧 English
            </button>
            <button type="button" class="btn btn-outline-primary btn-sm" onclick="setAnalysisLanguage('ar')">
                🇸🇦 العربية
            </button>
        </div>
    </div>

    {% if comment.ai_analysis %}
        <!-- Sentiment Section -->
        <div class="analysis-section mb-4">
            <h6 class="section-title">
                <i class="fas fa-heart text-danger me-2"></i>
                <span data-i18n="sentiment">{% trans "Sentiment" %}</span>
            </h6>
            
            <div class="sentiment-card card">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="sentiment-display">
                            <span class="sentiment-badge badge fs-5" 
                                  data-lang="en">
                                {% get_sentiment_emoji comment.ai_analysis.sentiment.classification.en %}
                                {{ comment.ai_analysis.sentiment.classification.en|title }}
                            </span>
                            <span class="sentiment-badge badge fs-5 d-none"
                                  data-lang="ar">
                                {% get_sentiment_emoji comment.ai_analysis.sentiment.classification.en %}
                                {{ comment.ai_analysis.sentiment.classification.ar }}
                            </span>
                        </div>
                        
                        <div class="sentiment-scores">
                            <div class="score-indicator">
                                <small class="text-muted d-block" data-i18n="score">{% trans "Score" %}</small>
                                <div class="progress" style="height: 20px;">
                                    <div class="progress-bar sentiment-bar" 
                                         role="progressbar"
                                         style="width: {{ comment.ai_analysis.sentiment.score|floatformat:2|multiply:100|add:50 }}%">
                                        {{ comment.ai_analysis.sentiment.score|floatformat:2 }}
                                    </div>
                                </div>
                            </div>
                            <div class="confidence-indicator">
                                <small class="text-muted d-block" data-i18n="confidence">{% trans "Confidence" %}</small>
                                <div class="progress" style="height: 20px;">
                                    <div class="progress-bar bg-info" 
                                         role="progressbar"
                                         style="width: {{ comment.ai_analysis.sentiment.confidence|multiply:100 }}%">
                                        {{ comment.ai_analysis.sentiment.confidence|floatformat:2 }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Summary Section -->
        <div class="analysis-section mb-4">
            <h6 class="section-title">
                <i class="fas fa-file-alt text-primary me-2"></i>
                <span data-i18n="summary">{% trans "Summary" %}</span>
            </h6>
            
            <div class="summary-card card">
                <div class="card-body p-3">
                    <div class="summary-text summary-en" data-lang="en">
                        <p class="mb-0">{{ comment.ai_analysis.summaries.en }}</p>
                        <button class="btn-link btn-sm copy-btn" onclick="copyText(this)" data-i18n="copy">
                            <i class="fas fa-copy me-1"></i>{% trans "Copy" %}
                        </button>
                    </div>
                    <div class="summary-text summary-ar d-none" data-lang="ar">
                        <p class="mb-0" dir="rtl">{{ comment.ai_analysis.summaries.ar }}</p>
                        <button class="btn-link btn-sm copy-btn" onclick="copyText(this)" data-i18n="copy">
                            <i class="fas fa-copy me-1"></i>{% trans "Copy" %}
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Keywords & Topics -->
        <div class="row mb-4">
            <div class="col-md-6">
                <div class="analysis-section">
                    <h6 class="section-title">
                        <i class="fas fa-tags text-warning me-2"></i>
                        <span data-i18n="keywords">{% trans "Keywords" %}</span>
                    </h6>
                    
                    <div class="keywords-container">
                        <div class="keywords-list keywords-en" data-lang="en">
                            {% for keyword in comment.ai_analysis.keywords.en %}
                                <span class="keyword-tag badge bg-light text-dark border">
                                    {{ keyword }}
                                </span>
                            {% endfor %}
                        </div>
                        <div class="keywords-list keywords-ar d-none" data-lang="ar">
                            {% for keyword in comment.ai_analysis.keywords.ar %}
                                <span class="keyword-tag badge bg-light text-dark border">
                                    {{ keyword }}
                                </span>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="analysis-section">
                    <h6 class="section-title">
                        <i class="fas fa-folder text-success me-2"></i>
                        <span data-i18n="topics">{% trans "Topics" %}</span>
                    </h6>
                    
                    <div class="topics-container">
                        <div class="topics-list topics-en" data-lang="en">
                            {% for topic in comment.ai_analysis.topics.en %}
                                <span class="topic-tag badge bg-success">
                                    {{ topic }}
                                </span>
                            {% endfor %}
                        </div>
                        <div class="topics-list topics-ar d-none" data-lang="ar">
                            {% for topic in comment.ai_analysis.topics.ar %}
                                <span class="topic-tag badge bg-success">
                                    {{ topic }}
                                </span>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Entities Section -->
        {% if comment.ai_analysis.entities %}
        <div class="analysis-section mb-4">
            <h6 class="section-title">
                <i class="fas fa-building text-info me-2"></i>
                <span data-i18n="entities">{% trans "Entities" %}</span>
            </h6>
            
            <div class="entities-grid">
                {% for entity in comment.ai_analysis.entities %}
                    <div class="entity-card card mb-2">
                        <div class="card-body p-2">
                            <div class="entity-name" data-lang="en">
                                {{ entity.text.en }}
                            </div>
                            <div class="entity-name d-none" data-lang="ar">
                                {{ entity.text.ar }}
                            </div>
                            <span class="entity-type badge bg-info text-light" data-lang="en">
                                {{ entity.type.en }}
                            </span>
                            <span class="entity-type badge bg-info text-light d-none" data-lang="ar">
                                {{ entity.type.ar }}
                            </span>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        <!-- Emotions Section -->
        {% if comment.ai_analysis.emotions %}
        <div class="analysis-section mb-4">
            <h6 class="section-title">
                <i class="fas fa-theater-masks text-purple me-2"></i>
                <span data-i18n="emotions">{% trans "Emotions" %}</span>
            </h6>
            
            <div class="emotions-grid">
                {% for emotion_name, score in comment.ai_analysis.emotions.items %}
                    {% if emotion_name != 'labels' %}
                        <div class="emotion-item">
                            <div class="emotion-label" data-lang="en">
                                <i class="fas {% if emotion_name == 'joy' %}fa-smile{% elif emotion_name == 'anger' %}fa-angry{% elif emotion_name == 'sadness' %}fa-sad-tear{% elif emotion_name == 'fear' %}fa-surprise{% elif emotion_name == 'surprise' %}fa-surprise{% else %}fa-meh{% endif %} me-2"></i>
                                {{ comment.ai_analysis.emotions.labels.emotion_name.en|default:emotion_name|title }}
                            </div>
                            <div class="emotion-label d-none" data-lang="ar">
                                <i class="fas {% if emotion_name == 'joy' %}fa-smile{% elif emotion_name == 'anger' %}fa-angry{% elif emotion_name == 'sadness' %}fa-sad-tear{% elif emotion_name == 'fear' %}fa-surprise{% elif emotion_name == 'surprise' %}fa-surprise{% else %}fa-meh{% endif %} me-2"></i>
                                {{ comment.ai_analysis.emotions.labels.emotion_name.ar|default:emotion_name|title }}
                            </div>
                            <div class="progress emotion-progress">
                                <div class="progress-bar bg-purple" 
                                     role="progressbar"
                                     style="width: {{ score|multiply:100 }}%">
                                    {{ score|floatformat:2 }}
                                </div>
                            </div>
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
        </div>
        {% endif %}

        <!-- Metadata -->
        <div class="analysis-footer text-muted small">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                <span>
                    <i class="fas fa-robot me-1"></i>
                    <span data-i18n="analyzed_with">{% trans "Analyzed with" %}</span> 
                    {{ comment.ai_analysis.metadata.model|default:"AI" }}
                </span>
                {% if comment.ai_analysis.metadata.analyzed_at %}
                    <span>
                        <i class="fas fa-clock me-1"></i>
                        {{ comment.ai_analysis.metadata.analyzed_at|date:"Y-m-d H:i" }}
                    </span>
                {% endif %}
            </div>
        </div>

    {% else %}
        <div class="alert alert-info">
            <i class="fas fa-info-circle me-2"></i>
            {% trans "No AI analysis available for this comment yet." %}
        </div>
    {% endif %}
</div>

<style>
.ai-analysis-container {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.section-title {
    color: #495057;
    font-weight: 600;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
}

.sentiment-bar {
    transition: width 0.5s ease-in-out;
}

.keyword-tag, .topic-tag {
    margin: 0.25rem;
    padding: 0.5rem 0.75rem;
    font-weight: 500;
    transition: transform 0.2s, box-shadow 0.2s;
}

.keyword-tag:hover, .topic-tag:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.entity-card {
    display: inline-block;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

.emotion-item {
    margin-bottom: 0.75rem;
}

.emotion-progress {
    height: 8px;
    margin-top: 0.25rem;
}

.copy-btn {
    text-decoration: none;
    color: #6c757d;
    margin-top: 0.5rem;
}

.copy-btn:hover {
    color: #0d6efd;
}

.summary-text {
    line-height: 1.6;
}

[data-lang="ar"] {
    font-family: 'Segoe UI', Tahoma, 'Arial Unicode MS', sans-serif;
}
</style>

<script>
let currentLanguage = 'en';

function setAnalysisLanguage(lang) {
    currentLanguage = lang;
    
    // Update toggle buttons
    document.querySelectorAll('.language-toggle .btn').forEach(btn => {
        btn.classList.remove('active');
    });
    event.target.classList.add('active');
    
    // Show/hide content based on language
    document.querySelectorAll('[data-lang]').forEach(el => {
        if (el.dataset.lang === lang) {
            el.classList.remove('d-none');
        } else {
            el.classList.add('d-none');
        }
    });
}

function copyText(button) {
    const summaryEl = button.closest('.summary-text');
    const text = summaryEl.querySelector('p').textContent;
    
    navigator.clipboard.writeText(text).then(() => {
        const originalText = button.innerHTML;
        button.innerHTML = '<i class="fas fa-check me-1"></i>{% trans "Copied!" %}';
        setTimeout(() => {
            button.innerHTML = originalText;
        }, 2000);
    });
}

// Initialize with English
document.addEventListener('DOMContentLoaded', function() {
    setAnalysisLanguage('en');
});
</script>