{% 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-calendar-check mr-2"></i>{{ maintenance.reference }}</h1>
                <p class="text-teal-100 text-sm mt-1">{{ maintenance.equipment.name }} — {{ maintenance.typeLabel }}</p>
            </div>
            <a href="{{ path('manager_equipment_maintenance_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-{{ maintenance.statusBadgeColor }}-100 text-{{ maintenance.statusBadgeColor }}-800 text-sm font-medium px-3 py-1 rounded-full">{{ maintenance.statusLabel }}</span>
        {% if maintenance.isOverdue %}<span class="bg-red-100 text-red-800 text-sm font-medium px-3 py-1 rounded-full"><i class="fas fa-clock mr-1"></i>En retard</span>{% endif %}
    </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">{{ maintenance.equipment.name }} ({{ maintenance.equipment.internalReference }})</dd></div>
                <div class="flex justify-between"><dt class="text-gray-500">Type</dt><dd>{{ maintenance.typeLabel }}</dd></div>
                <div class="flex justify-between"><dt class="text-gray-500">Date prévue</dt><dd>{{ maintenance.scheduledDate|date('d/m/Y') }}</dd></div>
                {% if maintenance.performedAt %}<div class="flex justify-between"><dt class="text-gray-500">Réalisée le</dt><dd>{{ maintenance.performedAt|date('d/m/Y H:i') }}</dd></div>{% endif %}
                {% if maintenance.performedBy %}<div class="flex justify-between"><dt class="text-gray-500">Réalisée par</dt><dd>{{ maintenance.performedBy.fullName ?? maintenance.performedBy.email }}</dd></div>{% endif %}
                {% if maintenance.cost %}<div class="flex justify-between"><dt class="text-gray-500">Coût</dt><dd class="font-medium">{{ maintenance.cost|number_format(0, ',', ' ') }} XOF</dd></div>{% endif %}
                {% if maintenance.nextMaintenanceDate %}<div class="flex justify-between"><dt class="text-gray-500">Prochaine maintenance</dt><dd>{{ maintenance.nextMaintenanceDate|date('d/m/Y') }}</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 maintenance.canStart %}
            <form method="post" action="{{ path('manager_equipment_maintenance_start', {id: maintenance.id}) }}" class="mb-3">
                <input type="hidden" name="_token" value="{{ csrf_token('start_maintenance_' ~ maintenance.id) }}">
                <button type="submit" class="w-full text-white bg-yellow-500 hover:bg-yellow-600 font-medium rounded-lg text-sm px-4 py-2.5"><i class="fas fa-play mr-2"></i>Démarrer la maintenance</button>
            </form>
            {% endif %}

            {% if maintenance.canComplete %}
            <form method="post" action="{{ path('manager_equipment_maintenance_complete', {id: maintenance.id}) }}" class="space-y-3">
                <input type="hidden" name="_token" value="{{ csrf_token('complete_maintenance_' ~ maintenance.id) }}">
                <textarea name="findings" rows="2" placeholder="Constatations..." 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>
                <textarea name="actionsPerformed" rows="2" placeholder="Actions réalisées..." 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>
                <div class="grid grid-cols-2 gap-2">
                    <select name="conditionBefore" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2.5">
                        <option value="">État avant</option>
                        <option value="good">Bon</option><option value="fair">Correct</option><option value="poor">Mauvais</option><option value="damaged">Endommagé</option>
                    </select>
                    <select name="conditionAfter" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2.5">
                        <option value="">État après</option>
                        <option value="new">Neuf</option><option value="good">Bon</option><option value="fair">Correct</option>
                    </select>
                </div>
                <input type="number" name="cost" placeholder="Coût (XOF)" step="0.01" 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">
                <input type="date" name="nextMaintenanceDate" 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" placeholder="Prochaine maintenance">
                <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>Terminer</button>
            </form>
            {% endif %}

            {% if maintenance.canCancel %}
            <form method="post" action="{{ path('manager_equipment_maintenance_cancel', {id: maintenance.id}) }}" data-controller="equipment-workflow" data-action="submit->equipment-workflow#confirm" data-equipment-workflow-confirm-param="Annuler cette maintenance ?" class="mt-3">
                <input type="hidden" name="_token" value="{{ csrf_token('cancel_maintenance_' ~ maintenance.id) }}">
                <button type="submit" class="w-full text-white bg-red-600 hover:bg-red-700 font-medium rounded-lg text-sm px-4 py-2.5"><i class="fas fa-times mr-2"></i>Annuler</button>
            </form>
            {% endif %}
        </div>
    </div>

    {% if maintenance.description or maintenance.findings or maintenance.actionsPerformed %}
    <div class="bg-white rounded-lg shadow p-4 sm:p-6">
        {% if maintenance.description %}<div class="mb-4"><h3 class="font-semibold text-gray-900 mb-1">Description</h3><p class="text-gray-600 text-sm">{{ maintenance.description|nl2br }}</p></div>{% endif %}
        {% if maintenance.findings %}<div class="mb-4"><h3 class="font-semibold text-gray-900 mb-1">Constatations</h3><p class="text-gray-600 text-sm">{{ maintenance.findings|nl2br }}</p></div>{% endif %}
        {% if maintenance.actionsPerformed %}<div><h3 class="font-semibold text-gray-900 mb-1">Actions réalisées</h3><p class="text-gray-600 text-sm">{{ maintenance.actionsPerformed|nl2br }}</p></div>{% endif %}
    </div>
    {% endif %}
</div>
{% endblock %}