{% load i18n %}

<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
    <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
        <h3 class="text-lg font-semibold text-[#005696] flex items-center gap-2">
            <i data-lucide="shield-alert" class="w-5 h-5"></i>
            {% trans "Adverse Actions" %}
            {% if adverse_actions %}
                <span class="ml-2 px-2 py-0.5 bg-red-100 text-red-700 text-xs rounded-full">{{ adverse_actions.count }}</span>
            {% endif %}
        </h3>
        {% if can_edit %}
        <a href="{% url 'complaints:adverse_action_add' complaint.id %}" class="px-3 py-1.5 bg-[#005696] text-white text-sm rounded-lg hover:bg-[#007bbd] transition flex items-center gap-1">
            <i data-lucide="plus" class="w-4 h-4"></i>
            {% trans "Report" %}
        </a>
        {% endif %}
    </div>

    {% if adverse_actions %}
    <div class="divide-y divide-gray-100">
        {% for action in adverse_actions %}
        <div class="p-4 hover:bg-gray-50 transition">
            <div class="flex items-start justify-between mb-2">
                <div class="flex items-center gap-2">
                    {% if action.severity == 'critical' %}
                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800">
                            {{ action.get_severity_display }}
                        </span>
                    {% elif action.severity == 'high' %}
                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-orange-100 text-orange-800">
                            {{ action.get_severity_display }}
                        </span>
                    {% elif action.severity == 'medium' %}
                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-800">
                            {{ action.get_severity_display }}
                        </span>
                    {% else %}
                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">
                            {{ action.get_severity_display }}
                        </span>
                    {% endif %}
                    
                    <span class="text-sm font-medium text-gray-900">{{ action.get_action_type_display }}</span>
                    
                    {% if action.is_escalated %}
                        <i data-lucide="alert-triangle" class="w-4 h-4 text-red-500" title="{% trans 'Escalated' %}"></i>
                    {% endif %}
                </div>
                <span class="text-sm text-[#64748b]">{{ action.incident_date|date:"Y-m-d H:i" }}</span>
            </div>
            
            <p class="text-sm text-gray-700 mb-2">{{ action.description|truncatechars:150 }}</p>
            
            {% if action.patient_impact %}
            <p class="text-sm text-red-600 mb-2">
                <strong>{% trans "Impact:" %}</strong> {{ action.patient_impact|truncatechars:100 }}
            </p>
            {% endif %}
            
            {% if action.involved_staff.all %}
            <div class="flex flex-wrap gap-1 mb-2">
                {% for staff in action.involved_staff.all %}
                <span class="px-2 py-0.5 bg-gray-100 text-gray-600 text-xs rounded">{{ staff.get_full_name }}</span>
                {% endfor %}
            </div>
            {% endif %}
            
            <div class="flex items-center justify-between mt-3">
                <div class="flex items-center gap-2">
                    {% if action.status == 'reported' %}
                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-amber-100 text-amber-800">
                            {{ action.get_status_display }}
                        </span>
                    {% elif action.status == 'under_investigation' %}
                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">
                            {{ action.get_status_display }}
                        </span>
                    {% elif action.status == 'verified' %}
                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">
                            {{ action.get_status_display }}
                        </span>
                    {% elif action.status == 'resolved' %}
                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800">
                            {{ action.get_status_display }}
                        </span>
                    {% endif %}
                </div>
                
                {% if can_edit %}
                <div class="flex items-center gap-2">
                    <button onclick="toggleAdverseActionMenu('{{ action.id }}')" class="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded">
                        <i data-lucide="more-vertical" class="w-4 h-4"></i>
                    </button>
                    <div id="adverse-action-menu-{{ action.id }}" class="hidden absolute right-0 mt-8 w-48 bg-white border border-gray-200 rounded-lg shadow-lg z-10">
                        <a href="{% url 'complaints:adverse_action_edit' action.id %}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">
                            {% trans "Edit" %}
                        </a>
                        {% if not action.is_escalated %}
                        <form method="post" action="{% url 'complaints:adverse_action_escalate' action.id %}" class="block">
                            {% csrf_token %}
                            <button type="submit" class="w-full text-left px-4 py-2 text-sm text-amber-600 hover:bg-gray-50">
                                {% trans "Escalate" %}
                            </button>
                        </form>
                        {% endif %}
                        <form method="post" action="{% url 'complaints:adverse_action_delete' action.id %}" class="block" onsubmit="return confirm('{% trans "Are you sure you want to delete this adverse action?" %}')">
                            {% csrf_token %}
                            <button type="submit" class="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-gray-50">
                                {% trans "Delete" %}
                            </button>
                        </form>
                    </div>
                </div>
                {% endif %}
            </div>
            
            <!-- Status Update Form (for staff) -->
            {% if can_edit and action.requires_investigation %}
            <form method="post" action="{% url 'complaints:adverse_action_update_status' action.id %}" class="mt-3 pt-3 border-t border-gray-100 flex items-center gap-2">
                {% csrf_token %}
                <select name="status" class="text-sm px-2 py-1 border border-gray-200 rounded">
                    <option value="">{% trans "Update status..." %}</option>
                    <option value="under_investigation">{% trans "Mark Under Investigation" %}</option>
                    <option value="verified">{% trans "Mark Verified" %}</option>
                    <option value="unfounded">{% trans "Mark Unfounded" %}</option>
                    <option value="resolved">{% trans "Mark Resolved" %}</option>
                </select>
                <button type="submit" class="text-sm px-3 py-1 bg-[#005696] text-white rounded hover:bg-[#007bbd]">
                    {% trans "Update" %}
                </button>
            </form>
            {% endif %}
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="p-8 text-center text-[#64748b]">
        <i data-lucide="shield-check" class="w-12 h-12 mx-auto mb-3 text-gray-300"></i>
        <p>{% trans "No adverse actions reported for this complaint." %}</p>
        {% if can_edit %}
        <a href="{% url 'complaints:adverse_action_add' complaint.id %}" class="inline-block mt-3 text-[#005696] hover:text-[#007bbd] font-medium">
            {% trans "Report an adverse action" %}
        </a>
        {% endif %}
    </div>
    {% endif %}
</div>

<script>
function toggleAdverseActionMenu(actionId) {
    const menu = document.getElementById('adverse-action-menu-' + actionId);
    menu.classList.toggle('hidden');
    
    // Close other menus
    document.querySelectorAll('[id^="adverse-action-menu-"]').forEach(m => {
        if (m.id !== 'adverse-action-menu-' + actionId) {
            m.classList.add('hidden');
        }
    });
}

// Close menus when clicking outside
document.addEventListener('click', function(e) {
    if (!e.target.closest('[onclick^="toggleAdverseActionMenu"]')) {
        document.querySelectorAll('[id^="adverse-action-menu-"]').forEach(m => {
            m.classList.add('hidden');
        });
    }
});
</script>