{% load i18n %}
<div id="aiHelperContent">
    <div class="text-center py-8">
        <button onclick="loadAIHelperSuggestions()" class="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-purple-500 to-indigo-500 text-white rounded-xl font-bold hover:from-purple-600 hover:to-indigo-600 transition text-sm shadow-lg">
            <i data-lucide="sparkles" class="w-5 h-5"></i>
            {% trans "Get AI Resolution Suggestions" %}
        </button>
        <p class="text-xs text-slate mt-3">{% trans "AI will analyze this complaint and suggest how to resolve it" %}</p>
    </div>
</div>

<script>
function loadAIHelperSuggestions() {
    const container = document.getElementById('aiHelperContent');
    container.innerHTML = '<div class="text-center py-8"><div class="inline-block w-8 h-8 border-4 border-purple-200 border-t-purple-500 rounded-full animate-spin"></div><p class="text-slate text-sm mt-3">{% trans "Analyzing complaint..." %}</p></div>';

    fetch('/complaints/api/complaints/{{ complaint.pk }}/ai_helper_suggestions/', {
        headers: {'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value},
        credentials: 'same-origin'
    })
    .then(r => r.json())
    .then(data => {
        if (!data.success) {
            container.innerHTML = '<div class="bg-red-50 border border-red-200 rounded-xl p-4 text-sm text-red-700">' + (data.error || 'Failed to generate suggestions') + '</div>';
            return;
        }

        let html = '';

        if (data.suggestions && data.suggestions.suggestions) {
            html += '<h4 class="font-bold text-navy mb-4 flex items-center gap-2"><i data-lucide="lightbulb" class="w-5 h-5 text-amber-500"></i> {% trans "Resolution Suggestions" %}</h4>';
            html += '<div class="space-y-3 mb-6">';
            data.suggestions.suggestions.forEach((s, i) => {
                html += '<div class="bg-gradient-to-r from-purple-50 to-indigo-50 border border-purple-100 rounded-xl p-4">';
                html += '<div class="flex items-start gap-3">';
                html += '<span class="flex-shrink-0 w-6 h-6 bg-purple-500 text-white rounded-full flex items-center justify-center text-xs font-bold">' + (i+1) + '</span>';
                html += '<div><p class="font-bold text-navy text-sm">' + s.title + '</p>';
                html += '<p class="text-slate text-sm mt-1">' + s.description + '</p></div>';
                html += '</div></div>';
            });
            html += '</div>';
        }

        if (data.suggestions && data.suggestions.recommended_actions) {
            html += '<h4 class="font-bold text-navy mb-3 flex items-center gap-2"><i data-lucide="list-checks" class="w-5 h-5 text-blue"></i> {% trans "Recommended Next Steps" %}</h4>';
            html += '<ul class="space-y-2 mb-6">';
            data.suggestions.recommended_actions.forEach(a => {
                html += '<li class="flex items-start gap-2 text-sm text-slate-700"><i data-lucide="arrow-right" class="w-4 h-4 text-green-500 flex-shrink-0 mt-0.5"></i>' + a + '</li>';
            });
            html += '</ul>';
        }

        if (data.suggestions && data.suggestions.communication_tip) {
            html += '<div class="bg-blue-50 border border-blue-200 rounded-xl p-4">';
            html += '<h4 class="font-bold text-blue mb-1 flex items-center gap-2"><i data-lucide="message-circle" class="w-4 h-4"></i> {% trans "Communication Tip" %}</h4>';
            html += '<p class="text-sm text-blue-800">' + data.suggestions.communication_tip + '</p>';
            html += '</div>';
        }

        html += '<div class="text-center mt-4"><button onclick="loadAIHelperSuggestions()" class="text-sm text-purple-600 hover:text-purple-800 font-semibold">{% trans "Regenerate suggestions" %}</button></div>';

        container.innerHTML = html;
        lucide.createIcons();
    })
    .catch(err => {
        container.innerHTML = '<div class="bg-red-50 border border-red-200 rounded-xl p-4 text-sm text-red-700">{% trans "An error occurred. Please try again." %}</div>';
    });
}
</script>