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

{% block page_title %}{{ page_title|default('Reparation ' ~ repair.reference) }}{% endblock %}

{% block content %}
<div class="space-y-6">
    <div class="bg-gradient-to-r from-teal-600 to-cyan-600 rounded-lg shadow-lg p-6 text-white">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-3xl font-bold"><i class="fas fa-wrench mr-3"></i>{{ repair.reference }}</h1>
                <p class="mt-2 text-teal-100">Reparation d'equipement</p>
            </div>
            <div class="flex items-center gap-3">
                <span class="inline-flex items-center px-3 py-1.5 rounded-lg text-sm font-medium bg-white/20 text-white">
                    {{ repair.statusLabel }}
                </span>
                <a href="{{ path('manager_equipment_repairs_index') }}" class="inline-flex items-center px-4 py-2 bg-white/20 text-white rounded-lg text-sm hover:bg-white/30 transition-colors">
                    <i class="fas fa-arrow-left mr-2"></i>Retour
                </a>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {# Colonne principale #}
        <div class="lg:col-span-2 space-y-6">
            {# Informations generales #}
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Informations</h2>
                <dl class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <dt class="text-sm text-gray-500">Reference</dt>
                        <dd class="font-mono text-sm font-medium text-gray-900 dark:text-white">{{ repair.reference }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm text-gray-500">Statut</dt>
                        <dd>
                            {% set color = repair.statusBadgeColor %}
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded text-xs font-medium bg-{{ color }}-100 text-{{ color }}-800 dark:bg-{{ color }}-900/30 dark:text-{{ color }}-400">
                                {{ repair.statusLabel }}
                            </span>
                            {% if repair.isOverdue %}
                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800 ml-1">
                                    <i class="fas fa-clock mr-1"></i>En retard
                                </span>
                            {% endif %}
                        </dd>
                    </div>
                    <div>
                        <dt class="text-sm text-gray-500">Equipement</dt>
                        <dd class="font-medium text-gray-900 dark:text-white">{{ repair.equipment.name|default('—') }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm text-gray-500">Demande par</dt>
                        <dd class="font-medium text-gray-900 dark:text-white">{{ repair.requestedBy ? repair.requestedBy.fullName : '—' }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm text-gray-500">Date de demande</dt>
                        <dd class="font-medium text-gray-900 dark:text-white">{{ repair.requestedAt|date('d/m/Y a H:i') }}</dd>
                    </div>
                    {% if repair.repairProvider %}
                    <div>
                        <dt class="text-sm text-gray-500">Prestataire</dt>
                        <dd class="font-medium text-gray-900 dark:text-white">
                            {{ repair.repairProvider }}
                            {% if repair.repairProviderContact %}
                                <span class="text-xs text-gray-500 ml-1">({{ repair.repairProviderContact }})</span>
                            {% endif %}
                        </dd>
                    </div>
                    {% endif %}
                    {% if repair.expectedReturnDate %}
                    <div>
                        <dt class="text-sm text-gray-500">Date de retour prevue</dt>
                        <dd class="font-medium text-gray-900 dark:text-white {{ repair.isOverdue ? 'text-red-600' : '' }}">
                            {{ repair.expectedReturnDate|date('d/m/Y') }}
                            {% if repair.isOverdue %}
                                <i class="fas fa-exclamation-triangle text-red-500 ml-1"></i>
                            {% endif %}
                        </dd>
                    </div>
                    {% endif %}
                    {% if repair.repairedAt %}
                    <div>
                        <dt class="text-sm text-gray-500">Date de reparation</dt>
                        <dd class="font-medium text-gray-900 dark:text-white">{{ repair.repairedAt|date('d/m/Y a H:i') }}</dd>
                    </div>
                    {% endif %}
                    {% if repair.returnedAt %}
                    <div>
                        <dt class="text-sm text-gray-500">Date de retour effectif</dt>
                        <dd class="font-medium text-gray-900 dark:text-white">{{ repair.returnedAt|date('d/m/Y a H:i') }}</dd>
                    </div>
                    {% endif %}
                </dl>

                {# Couts #}
                {% if repair.estimatedCost or repair.actualCost %}
                <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
                    <h3 class="text-sm font-medium text-gray-500 mb-3">Couts</h3>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        {% if repair.estimatedCost %}
                        <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-3 text-center">
                            <div class="text-xs text-blue-600 dark:text-blue-400">Cout estime</div>
                            <div class="text-lg font-bold text-blue-800 dark:text-blue-200">{{ repair.estimatedCost|number_format(0, ',', ' ') }} <span class="text-xs">XOF</span></div>
                        </div>
                        {% endif %}
                        {% if repair.actualCost %}
                        <div class="bg-green-50 dark:bg-green-900/20 rounded-lg p-3 text-center">
                            <div class="text-xs text-green-600 dark:text-green-400">Cout reel</div>
                            <div class="text-lg font-bold text-green-800 dark:text-green-200">{{ repair.actualCost|number_format(0, ',', ' ') }} <span class="text-xs">XOF</span></div>
                        </div>
                        {% endif %}
                        {% if repair.costDifference is not null %}
                        <div class="bg-{{ repair.costDifference > 0 ? 'red' : 'green' }}-50 dark:bg-{{ repair.costDifference > 0 ? 'red' : 'green' }}-900/20 rounded-lg p-3 text-center">
                            <div class="text-xs text-{{ repair.costDifference > 0 ? 'red' : 'green' }}-600">Ecart</div>
                            <div class="text-lg font-bold text-{{ repair.costDifference > 0 ? 'red' : 'green' }}-800">
                                {{ repair.costDifference > 0 ? '+' : '' }}{{ repair.costDifference|number_format(0, ',', ' ') }} <span class="text-xs">XOF</span>
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </div>
                {% endif %}

                {% if repair.description %}
                <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
                    <dt class="text-sm text-gray-500 mb-1">Description du probleme</dt>
                    <dd class="text-gray-900 dark:text-white">{{ repair.description|nl2br }}</dd>
                </div>
                {% endif %}

                {% if repair.diagnosis %}
                <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
                    <dt class="text-sm text-gray-500 mb-1">Diagnostic</dt>
                    <dd class="text-gray-900 dark:text-white">{{ repair.diagnosis|nl2br }}</dd>
                </div>
                {% endif %}

                {% if repair.partsReplaced %}
                <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
                    <dt class="text-sm text-gray-500 mb-1">Pieces remplacees</dt>
                    <dd class="text-gray-900 dark:text-white">{{ repair.partsReplaced|nl2br }}</dd>
                </div>
                {% endif %}

                {% if repair.conditionAfterRepair %}
                <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
                    <dt class="text-sm text-gray-500 mb-1">Etat apres reparation</dt>
                    <dd class="font-medium text-gray-900 dark:text-white">{{ repair.conditionAfterRepair }}</dd>
                </div>
                {% endif %}

                {% if repair.notes %}
                <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
                    <dt class="text-sm text-gray-500 mb-1">Notes</dt>
                    <dd class="text-gray-900 dark:text-white">{{ repair.notes|nl2br }}</dd>
                </div>
                {% endif %}
            </div>

            {# Timeline de statut #}
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-6">Progression</h2>
                {% set steps = [
                    {key: 'requested', label: 'Demandee', icon: 'fa-clipboard'},
                    {key: 'diagnosed', label: 'Diagnostiquee', icon: 'fa-stethoscope'},
                    {key: 'in_repair', label: 'En reparation', icon: 'fa-wrench'},
                    {key: 'repaired', label: 'Reparee', icon: 'fa-check'},
                    {key: 'returned', label: 'Retournee', icon: 'fa-undo'}
                ] %}
                {% set statusOrder = {requested: 0, diagnosed: 1, in_repair: 2, repaired: 3, returned: 4, cancelled: -1} %}
                {% set currentIndex = statusOrder[repair.status]|default(0) %}

                {% if repair.status == 'cancelled' %}
                <div class="flex items-center justify-center p-4 bg-red-50 dark:bg-red-900/20 rounded-lg">
                    <i class="fas fa-ban text-red-500 mr-2"></i>
                    <span class="text-red-700 dark:text-red-400 font-medium">Reparation annulee</span>
                    {% if repair.cancelReason %}
                        <span class="text-red-600 dark:text-red-300 ml-2">- {{ repair.cancelReason }}</span>
                    {% endif %}
                </div>
                {% else %}
                <div class="flex items-center justify-between">
                    {% for step in steps %}
                        {% set stepIndex = loop.index0 %}
                        {% set isActive = repair.status == step.key %}
                        {% set isPast = stepIndex < currentIndex %}
                        <div class="flex flex-col items-center flex-1">
                            <div class="flex items-center justify-center w-10 h-10 rounded-full {{ isActive ? 'bg-teal-600 text-white ring-4 ring-teal-100 dark:ring-teal-900' : (isPast ? 'bg-green-500 text-white' : 'bg-gray-200 text-gray-500 dark:bg-gray-600 dark:text-gray-400') }}">
                                <i class="fas {{ isPast ? 'fa-check' : step.icon }} text-sm"></i>
                            </div>
                            <span class="mt-2 text-xs font-medium {{ isActive ? 'text-teal-700 dark:text-teal-400' : (isPast ? 'text-green-600 dark:text-green-400' : 'text-gray-500 dark:text-gray-400') }}">{{ step.label }}</span>
                        </div>
                        {% if not loop.last %}
                        <div class="flex-1 h-0.5 {{ stepIndex < currentIndex ? 'bg-green-500' : 'bg-gray-200 dark:bg-gray-600' }} mx-2 mb-6"></div>
                        {% endif %}
                    {% endfor %}
                </div>
                {% endif %}
            </div>
        </div>

        {# Sidebar: Actions #}
        <div class="space-y-6">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6" data-controller="equipment-workflow">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Actions</h2>
                <div class="space-y-3">
                    {# Diagnostiquer #}
                    {% if repair.canDiagnose %}
                    <button type="button" class="w-full px-4 py-3 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors text-left"
                            data-action="equipment-workflow#toggle" data-equipment-workflow-target-param="diagnose-form">
                        <i class="fas fa-stethoscope mr-2"></i>Diagnostiquer
                    </button>
                    <div id="diagnose-form" class="hidden" data-equipment-workflow-target="panel">
                        <form method="post" action="{{ path('manager_equipment_repairs_diagnose', {id: repair.id}) }}" class="space-y-3 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
                            <input type="hidden" name="_token" value="{{ csrf_token('diagnose_repair_' ~ repair.id) }}">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Diagnostic</label>
                                <textarea name="diagnosis" rows="3" required class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Resultat du diagnostic..."></textarea>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Cout estime (XOF)</label>
                                <input type="number" name="estimatedCost" min="0" step="1" class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="0">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Date de retour prevue</label>
                                <input type="date" name="expectedReturnDate" class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Prestataire</label>
                                <input type="text" name="repairProvider" class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Nom du prestataire">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Contact prestataire</label>
                                <input type="text" name="repairProviderContact" class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Telephone ou email">
                            </div>
                            <button type="submit" class="w-full px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700">
                                Valider le diagnostic
                            </button>
                        </form>
                    </div>
                    {% endif %}

                    {# Demarrer reparation #}
                    {% if repair.canStartRepair %}
                    <form method="post" action="{{ path('manager_equipment_repairs_start', {id: repair.id}) }}">
                        <input type="hidden" name="_token" value="{{ csrf_token('start_repair_' ~ repair.id) }}">
                        <button type="submit" class="w-full px-4 py-3 bg-purple-600 text-white rounded-lg text-sm font-medium hover:bg-purple-700 transition-colors text-left"
                                data-action="equipment-workflow#confirm" data-equipment-workflow-confirm-param="Démarrer la réparation ?">
                            <i class="fas fa-play mr-2"></i>Demarrer reparation
                        </button>
                    </form>
                    {% endif %}

                    {# Marquer reparee #}
                    {% if repair.canMarkRepaired %}
                    <button type="button" class="w-full px-4 py-3 bg-green-600 text-white rounded-lg text-sm font-medium hover:bg-green-700 transition-colors text-left"
                            data-action="equipment-workflow#toggle" data-equipment-workflow-target-param="repaired-form">
                        <i class="fas fa-check-circle mr-2"></i>Marquer reparee
                    </button>
                    <div id="repaired-form" class="hidden" data-equipment-workflow-target="panel">
                        <form method="post" action="{{ path('manager_equipment_repairs_complete', {id: repair.id}) }}" class="space-y-3 p-3 bg-green-50 dark:bg-green-900/20 rounded-lg">
                            <input type="hidden" name="_token" value="{{ csrf_token('complete_repair_' ~ repair.id) }}">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Cout reel (XOF)</label>
                                <input type="number" name="actualCost" min="0" step="1" class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="0">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Pieces remplacees</label>
                                <textarea name="partsReplaced" rows="2" class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Liste des pieces remplacees..."></textarea>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Etat apres reparation</label>
                                <select name="conditionAfterRepair" class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                                    <option value="">-- Choisir --</option>
                                    <option value="excellent">Excellent</option>
                                    <option value="good">Bon</option>
                                    <option value="fair">Correct</option>
                                    <option value="poor">Mediocre</option>
                                </select>
                            </div>
                            <button type="submit" class="w-full px-4 py-2 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700">
                                Confirmer la reparation
                            </button>
                        </form>
                    </div>
                    {% endif %}

                    {# Retourner equipement #}
                    {% if repair.canReturn %}
                    <form method="post" action="{{ path('manager_equipment_repairs_return', {id: repair.id}) }}">
                        <input type="hidden" name="_token" value="{{ csrf_token('return_repair_' ~ repair.id) }}">
                        <button type="submit" class="w-full px-4 py-3 bg-teal-600 text-white rounded-lg text-sm font-medium hover:bg-teal-700 transition-colors text-left"
                                data-action="equipment-workflow#confirm" data-equipment-workflow-confirm-param="Confirmer le retour de l'équipement ?">
                            <i class="fas fa-undo mr-2"></i>Retourner l'equipement
                        </button>
                    </form>
                    {% endif %}

                    {# Annuler #}
                    {% if repair.canCancel %}
                    <button type="button" class="w-full px-4 py-3 bg-red-600 text-white rounded-lg text-sm font-medium hover:bg-red-700 transition-colors text-left"
                            data-action="equipment-workflow#toggle" data-equipment-workflow-target-param="cancel-form">
                        <i class="fas fa-ban mr-2"></i>Annuler la reparation
                    </button>
                    <div id="cancel-form" class="hidden" data-equipment-workflow-target="panel">
                        <form method="post" action="{{ path('manager_equipment_repairs_cancel', {id: repair.id}) }}" class="space-y-3 p-3 bg-red-50 dark:bg-red-900/20 rounded-lg">
                            <input type="hidden" name="_token" value="{{ csrf_token('cancel_repair_' ~ repair.id) }}">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Motif d'annulation</label>
                                <textarea name="cancelReason" rows="3" required class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-red-500 focus:border-red-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Raison de l'annulation..."></textarea>
                            </div>
                            <button type="submit" class="w-full px-4 py-2 bg-red-600 text-white rounded-lg text-sm hover:bg-red-700">
                                Confirmer l'annulation
                            </button>
                        </form>
                    </div>
                    {% endif %}

                    {% if not repair.canDiagnose and not repair.canStartRepair and not repair.canMarkRepaired and not repair.canReturn and not repair.canCancel %}
                    <p class="text-sm text-gray-500 dark:text-gray-400 text-center py-4">
                        <i class="fas fa-lock mr-1"></i>Aucune action disponible
                    </p>
                    {% endif %}
                </div>
            </div>

            {# Timeline historique #}
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Historique</h2>
                <ol class="relative border-l border-gray-200 dark:border-gray-700 space-y-6 ml-3">
                    <li class="ml-6">
                        <span class="absolute flex items-center justify-center w-6 h-6 bg-yellow-100 rounded-full -left-3 ring-8 ring-white dark:ring-gray-800">
                            <i class="fas fa-clipboard text-yellow-600 text-xs"></i>
                        </span>
                        <p class="text-sm font-medium text-gray-900 dark:text-white">Demandee</p>
                        <time class="text-xs text-gray-500">{{ repair.requestedAt|date('d/m/Y a H:i') }}</time>
                    </li>

                    {% if repair.diagnosedAt %}
                    <li class="ml-6">
                        <span class="absolute flex items-center justify-center w-6 h-6 bg-blue-100 rounded-full -left-3 ring-8 ring-white dark:ring-gray-800">
                            <i class="fas fa-stethoscope text-blue-600 text-xs"></i>
                        </span>
                        <p class="text-sm font-medium text-gray-900 dark:text-white">Diagnostiquee</p>
                        <time class="text-xs text-gray-500">{{ repair.diagnosedAt|date('d/m/Y a H:i') }}</time>
                    </li>
                    {% endif %}

                    {% if repair.repairedAt %}
                    <li class="ml-6">
                        <span class="absolute flex items-center justify-center w-6 h-6 bg-green-100 rounded-full -left-3 ring-8 ring-white dark:ring-gray-800">
                            <i class="fas fa-check text-green-600 text-xs"></i>
                        </span>
                        <p class="text-sm font-medium text-gray-900 dark:text-white">Reparee</p>
                        <time class="text-xs text-gray-500">{{ repair.repairedAt|date('d/m/Y a H:i') }}</time>
                    </li>
                    {% endif %}

                    {% if repair.returnedAt %}
                    <li class="ml-6">
                        <span class="absolute flex items-center justify-center w-6 h-6 bg-gray-100 rounded-full -left-3 ring-8 ring-white dark:ring-gray-800">
                            <i class="fas fa-undo text-gray-600 text-xs"></i>
                        </span>
                        <p class="text-sm font-medium text-gray-900 dark:text-white">
                            Retournee
                            {% if repair.returnedBy %}par {{ repair.returnedBy.fullName }}{% endif %}
                        </p>
                        <time class="text-xs text-gray-500">{{ repair.returnedAt|date('d/m/Y a H:i') }}</time>
                    </li>
                    {% endif %}

                    {% if repair.cancelledAt %}
                    <li class="ml-6">
                        <span class="absolute flex items-center justify-center w-6 h-6 bg-red-100 rounded-full -left-3 ring-8 ring-white dark:ring-gray-800">
                            <i class="fas fa-ban text-red-600 text-xs"></i>
                        </span>
                        <p class="text-sm font-medium text-gray-900 dark:text-white">Annulee</p>
                        <time class="text-xs text-gray-500">{{ repair.cancelledAt|date('d/m/Y a H:i') }}</time>
                        {% if repair.cancelReason %}
                            <p class="text-xs text-red-600 mt-1">{{ repair.cancelReason }}</p>
                        {% endif %}
                    </li>
                    {% endif %}
                </ol>
            </div>
        </div>
    </div>
</div>
{% endblock %}