{% extends 'layouts/authenticated.html.twig' %}

{% block page_title %}{{ page_title }}{% endblock %}

{% block content %}
<div class="space-y-4 sm:space-y-6">
    <div class="bg-gradient-to-r from-teal-600 to-cyan-600 rounded-lg shadow-lg p-4 sm:p-6 text-white">
        <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
            <div>
                <h1 class="text-xl sm:text-2xl font-bold"><i class="fas fa-bell mr-2"></i>{{ incident.reference }}</h1>
                <p class="text-teal-100 text-sm mt-1">{{ incident.title }}</p>
            </div>
            <a href="{{ path('manager_equipment_incidents_index') }}" class="inline-flex items-center px-3 py-2 text-sm font-medium text-teal-600 bg-white rounded-lg hover:bg-gray-100">
                <i class="fas fa-arrow-left mr-2"></i>Retour
            </a>
        </div>
    </div>

    <div class="flex flex-wrap gap-2">
        <span class="bg-{{ incident.severityBadgeColor }}-100 text-{{ incident.severityBadgeColor }}-800 text-sm font-medium px-3 py-1 rounded-full"><i class="fas fa-exclamation-circle mr-1"></i>{{ incident.severityLabel }}</span>
        <span class="bg-{{ incident.statusBadgeColor }}-100 text-{{ incident.statusBadgeColor }}-800 text-sm font-medium px-3 py-1 rounded-full">{{ incident.statusLabel }}</span>
        <span class="bg-gray-100 text-gray-800 text-sm font-medium px-3 py-1 rounded-full">{{ incident.typeLabel }}</span>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6">
        <div class="bg-white rounded-lg shadow p-4 sm:p-6">
            <h2 class="text-lg font-semibold text-gray-900 mb-4"><i class="fas fa-info-circle text-teal-600 mr-2"></i>Détails</h2>
            <dl class="space-y-3 text-sm">
                <div class="flex justify-between"><dt class="text-gray-500">Équipement</dt><dd class="font-medium">{{ incident.equipment.name }} ({{ incident.equipment.internalReference }})</dd></div>
                <div class="flex justify-between"><dt class="text-gray-500">Date incident</dt><dd>{{ incident.incidentDate|date('d/m/Y') }}</dd></div>
                <div class="flex justify-between"><dt class="text-gray-500">Signalé par</dt><dd>{{ incident.reportedBy.fullName ?? incident.reportedBy.email }}</dd></div>
                <div class="flex justify-between"><dt class="text-gray-500">Signalé le</dt><dd>{{ incident.reportedAt|date('d/m/Y H:i') }}</dd></div>
                {% if incident.location %}<div class="flex justify-between"><dt class="text-gray-500">Lieu</dt><dd>{{ incident.location }}</dd></div>{% endif %}
                {% if incident.investigatedBy %}<div class="flex justify-between"><dt class="text-gray-500">Enquêteur</dt><dd>{{ incident.investigatedBy.fullName ?? incident.investigatedBy.email }}</dd></div>{% endif %}
                {% if incident.resolvedBy %}<div class="flex justify-between"><dt class="text-gray-500">Résolu par</dt><dd>{{ incident.resolvedBy.fullName ?? incident.resolvedBy.email }}</dd></div>{% endif %}
            </dl>
        </div>

        <div class="bg-white rounded-lg shadow p-4 sm:p-6">
            <h2 class="text-lg font-semibold text-gray-900 mb-4"><i class="fas fa-tasks text-teal-600 mr-2"></i>Actions</h2>

            {% if incident.canInvestigate %}
            <form method="post" action="{{ path('manager_equipment_incidents_investigate', {id: incident.id}) }}" class="space-y-3 mb-4">
                <input type="hidden" name="_token" value="{{ csrf_token('investigate_incident_' ~ incident.id) }}">
                <textarea name="notes" rows="2" placeholder="Notes d'enquête..." class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-teal-500 focus:border-teal-500 block w-full p-2.5"></textarea>
                <button type="submit" class="w-full text-white bg-blue-600 hover:bg-blue-700 font-medium rounded-lg text-sm px-4 py-2.5"><i class="fas fa-search mr-2"></i>Ouvrir l'enquête</button>
            </form>
            {% endif %}

            {% if incident.canResolve %}
            <form method="post" action="{{ path('manager_equipment_incidents_resolve', {id: incident.id}) }}" class="space-y-3 mb-4">
                <input type="hidden" name="_token" value="{{ csrf_token('resolve_incident_' ~ incident.id) }}">
                <textarea name="resolution" rows="3" placeholder="Résolution de l'incident..." required class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-teal-500 focus:border-teal-500 block w-full p-2.5"></textarea>
                <button type="submit" class="w-full text-white bg-green-600 hover:bg-green-700 font-medium rounded-lg text-sm px-4 py-2.5"><i class="fas fa-check mr-2"></i>Résoudre</button>
            </form>
            {% endif %}

            {% if incident.canClose %}
            <form method="post" action="{{ path('manager_equipment_incidents_close', {id: incident.id}) }}">
                <input type="hidden" name="_token" value="{{ csrf_token('close_incident_' ~ incident.id) }}">
                <button type="submit" class="w-full text-white bg-gray-600 hover:bg-gray-700 font-medium rounded-lg text-sm px-4 py-2.5"><i class="fas fa-lock mr-2"></i>Clôturer</button>
            </form>
            {% endif %}
        </div>
    </div>

    <div class="bg-white rounded-lg shadow p-4 sm:p-6">
        <h2 class="text-lg font-semibold text-gray-900 mb-3">Description</h2>
        <p class="text-gray-600 text-sm">{{ incident.description|nl2br }}</p>
    </div>

    {% if incident.investigationNotes %}
    <div class="bg-blue-50 rounded-lg shadow p-4 sm:p-6">
        <h2 class="text-lg font-semibold text-blue-900 mb-2"><i class="fas fa-search mr-2"></i>Notes d'enquête</h2>
        <p class="text-blue-800 text-sm">{{ incident.investigationNotes|nl2br }}</p>
    </div>
    {% endif %}

    {% if incident.resolution %}
    <div class="bg-green-50 rounded-lg shadow p-4 sm:p-6">
        <h2 class="text-lg font-semibold text-green-900 mb-2"><i class="fas fa-check-circle mr-2"></i>Résolution</h2>
        <p class="text-green-800 text-sm">{{ incident.resolution|nl2br }}</p>
        {% if incident.resolvedAt %}<p class="text-green-600 text-xs mt-2">Résolu le {{ incident.resolvedAt|date('d/m/Y H:i') }}</p>{% endif %}
    </div>
    {% endif %}
</div>
{% endblock %}