{% load i18n %}
<section class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100">
    <h3 class="text-xl font-bold text-navy mb-6 flex items-center gap-2">
        <i data-lucide="bot" class="w-6 h-6"></i> {% trans "AI Analysis" %}
    </h3>
    
    {% if complaint.emotion %}
    <div class="bg-gradient-to-r from-light to-blue-50 border border-blue-200 rounded-2xl p-6 mb-6">
        <h4 class="font-bold text-navy mb-4 flex items-center gap-2">
            <i data-lucide="cpu" class="w-5 h-5"></i> {% trans "Emotion Analysis" %}
        </h4>
        
        <div class="flex items-center justify-between mb-4">
            <span class="px-4 py-2 bg-navy text-white rounded-xl font-bold flex items-center gap-2">
                <i data-lucide="frown" class="w-5 h-5"></i> {{ complaint.get_emotion_display }}
            </span>
            <span class="text-slate">{% trans "Confidence" %}: {{ complaint.emotion_confidence_percent|floatformat:0 }}%</span>
        </div>
        
        <div>
            <div class="flex justify-between text-sm mb-1">
                <span class="text-slate">{% trans "Intensity" %}</span>
                <span class="font-semibold">{{ complaint.emotion_intensity|floatformat:2 }} / 1.0</span>
            </div>
            <div class="h-2 bg-slate-200 rounded-full overflow-hidden">
                <div class="h-full bg-gradient-to-r from-navy to-blue rounded-full" style="width: {{ complaint.emotion_intensity_percent }}%"></div>
            </div>
        </div>
    </div>
    {% endif %}
    
    {% if complaint.short_description_en %}
    <div class="bg-light/50 border border-slate-200 rounded-2xl p-6 mb-6">
        <h4 class="font-bold text-navy mb-3">{% trans "AI Summary (English)" %}</h4>
        <p class="text-slate">{{ complaint.short_description_en }}</p>
    </div>
    {% endif %}
    
    {% if complaint.short_description_ar %}
    <div class="bg-light/50 border border-slate-200 rounded-2xl p-6 mb-6">
        <h4 class="font-bold text-navy mb-3">{% trans "AI Summary (Arabic)" %}</h4>
        <p class="text-slate" dir="rtl">{{ complaint.short_description_ar }}</p>
    </div>
    {% endif %}
    
    {% if complaint.suggested_action_en %}
    <div class="bg-blue-50 border border-blue-200 rounded-2xl p-6">
        <h4 class="font-bold text-navy mb-3">{% trans "Suggested Action" %}</h4>
        <p class="text-slate">{{ complaint.suggested_action_en }}</p>
    </div>
    {% endif %}
    
    {% if not complaint.emotion and not complaint.short_description_en %}
    <div class="text-center py-12">
        <i data-lucide="bot" class="w-16 h-16 mx-auto text-slate-300 mb-4"></i>
        <p class="text-slate">{% trans "No AI analysis available for this complaint" %}</p>
    </div>
    {% endif %}
</section>