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

{% block page_title %}{{ page_title|default('Declaration ' ~ declaration.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-search-minus mr-3"></i>{{ declaration.reference }}</h1>
                <p class="mt-2 text-teal-100">Declaration de perte</p>
            </div>
            <div class="flex items-center gap-3">
                {% set color = declaration.statusBadgeColor %}
                <span class="inline-flex items-center px-3 py-1.5 rounded-lg text-sm font-medium bg-white/20 text-white">
                    {{ declaration.statusLabel }}
                </span>
                <a href="{{ path('manager_equipment_losses_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">{{ declaration.reference }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm text-gray-500">Statut</dt>
                        <dd>
                            {% set color = declaration.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">
                                {{ declaration.statusLabel }}
                            </span>
                        </dd>
                    </div>
                    <div>
                        <dt class="text-sm text-gray-500">Equipement</dt>
                        <dd class="font-medium text-gray-900 dark:text-white">
                            {{ declaration.equipment.name|default('—') }}
                            {% if declaration.equipment.reference is defined and declaration.equipment.reference %}
                                <span class="text-xs text-gray-500 ml-1">({{ declaration.equipment.reference }})</span>
                            {% endif %}
                        </dd>
                    </div>
                    <div>
                        <dt class="text-sm text-gray-500">Declare par</dt>
                        <dd class="font-medium text-gray-900 dark:text-white">
                            {{ declaration.declaredBy ? declaration.declaredBy.fullName : '—' }}
                        </dd>
                    </div>
                    <div>
                        <dt class="text-sm text-gray-500">Date de perte</dt>
                        <dd class="font-medium text-gray-900 dark:text-white">{{ declaration.lossDate|date('d/m/Y') }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm text-gray-500">Date de declaration</dt>
                        <dd class="font-medium text-gray-900 dark:text-white">{{ declaration.declaredAt|date('d/m/Y a H:i') }}</dd>
                    </div>
                    {% if declaration.lastKnownLocation %}
                    <div>
                        <dt class="text-sm text-gray-500">Dernier emplacement connu</dt>
                        <dd class="font-medium text-gray-900 dark:text-white">{{ declaration.lastKnownLocation }}</dd>
                    </div>
                    {% endif %}
                    {% if declaration.estimatedValue %}
                    <div>
                        <dt class="text-sm text-gray-500">Valeur estimee</dt>
                        <dd class="text-xl font-bold text-gray-900 dark:text-white">{{ declaration.estimatedValue|number_format(0, ',', ' ') }} <span class="text-sm font-normal">XOF</span></dd>
                    </div>
                    {% endif %}
                </dl>

                {% if declaration.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</dt>
                    <dd class="text-gray-900 dark:text-white">{{ declaration.description|nl2br }}</dd>
                </div>
                {% endif %}

                {% if declaration.circumstances %}
                <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
                    <dt class="text-sm text-gray-500 mb-1">Circonstances</dt>
                    <dd class="text-gray-900 dark:text-white">{{ declaration.circumstances|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: 'declared', label: 'Declaree', icon: 'fa-flag'},
                    {key: 'under_investigation', label: 'En enquete', icon: 'fa-search'},
                    {key: 'confirmed_lost', label: 'Confirmee', icon: 'fa-times-circle'},
                    {key: 'found', label: 'Retrouvee', icon: 'fa-check-circle'},
                    {key: 'closed', label: 'Cloturee', icon: 'fa-lock'}
                ] %}
                {% set statusOrder = {declared: 0, under_investigation: 1, confirmed_lost: 2, found: 3, closed: 4} %}
                {% set currentIndex = statusOrder[declaration.status]|default(0) %}

                <div class="flex items-center justify-between">
                    {% for step in steps %}
                        {% set stepIndex = loop.index0 %}
                        {% set isActive = declaration.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>
            </div>

            {# Informations de revue #}
            {% if declaration.reviewedBy %}
            <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-6">
                <h2 class="text-lg font-semibold text-blue-800 dark:text-blue-400 mb-2">
                    <i class="fas fa-search mr-2"></i>Revue / Enquete
                </h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                    <div>
                        <span class="text-blue-600 dark:text-blue-300">Revu par :</span>
                        <span class="font-medium text-blue-900 dark:text-blue-100 ml-1">{{ declaration.reviewedBy.fullName }}</span>
                    </div>
                    {% if declaration.reviewedAt %}
                    <div>
                        <span class="text-blue-600 dark:text-blue-300">Date :</span>
                        <span class="font-medium text-blue-900 dark:text-blue-100 ml-1">{{ declaration.reviewedAt|date('d/m/Y a H:i') }}</span>
                    </div>
                    {% endif %}
                </div>
                {% if declaration.reviewNotes %}
                <div class="mt-3 pt-3 border-t border-blue-200 dark:border-blue-700">
                    <p class="text-blue-800 dark:text-blue-200">{{ declaration.reviewNotes|nl2br }}</p>
                </div>
                {% endif %}
            </div>
            {% endif %}

            {# Resolution #}
            {% if declaration.resolution %}
            <div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-6">
                <h2 class="text-lg font-semibold text-green-800 dark:text-green-400 mb-2">
                    <i class="fas fa-check-circle mr-2"></i>Resolution
                </h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                    <div>
                        <span class="text-green-600 dark:text-green-300">Type :</span>
                        <span class="font-medium text-green-900 dark:text-green-100 ml-1">{{ declaration.resolutionLabel }}</span>
                    </div>
                    {% if declaration.resolvedBy %}
                    <div>
                        <span class="text-green-600 dark:text-green-300">Resolu par :</span>
                        <span class="font-medium text-green-900 dark:text-green-100 ml-1">{{ declaration.resolvedBy.fullName }}</span>
                    </div>
                    {% endif %}
                    {% if declaration.resolvedAt %}
                    <div>
                        <span class="text-green-600 dark:text-green-300">Date :</span>
                        <span class="font-medium text-green-900 dark:text-green-100 ml-1">{{ declaration.resolvedAt|date('d/m/Y a H:i') }}</span>
                    </div>
                    {% endif %}
                </div>
                {% if declaration.resolutionNotes %}
                <div class="mt-3 pt-3 border-t border-green-200 dark:border-green-700">
                    <p class="text-green-800 dark:text-green-200">{{ declaration.resolutionNotes|nl2br }}</p>
                </div>
                {% endif %}
            </div>
            {% endif %}
        </div>

        {# Sidebar: Actions #}
        <div class="space-y-6">
            {# Actions #}
            <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">
                    {# Ouvrir enquete #}
                    {% if declaration.canReview %}
                    <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="investigate-form">
                        <i class="fas fa-search mr-2"></i>Ouvrir enquete
                    </button>
                    <div id="investigate-form" class="hidden" data-equipment-workflow-target="panel">
                        <form method="post" action="{{ path('manager_equipment_losses_investigate', {id: declaration.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('investigate_loss_' ~ declaration.id) }}">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Notes d'enquete</label>
                                <textarea name="notes" rows="3" 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="Notes sur l'enquete..."></textarea>
                            </div>
                            <button type="submit" class="w-full px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700">
                                Confirmer l'enquete
                            </button>
                        </form>
                    </div>
                    {% endif %}

                    {# Confirmer perte #}
                    {% if declaration.canConfirmLost %}
                    <form method="post" action="{{ path('manager_equipment_losses_confirm', {id: declaration.id}) }}">
                        <input type="hidden" name="_token" value="{{ csrf_token('confirm_loss_' ~ declaration.id) }}">
                        <button type="submit" 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#confirm" data-equipment-workflow-confirm-param="Confirmer la perte de cet équipement ?">
                            <i class="fas fa-times-circle mr-2"></i>Confirmer perte
                        </button>
                    </form>
                    {% endif %}

                    {# Marquer retrouve #}
                    {% if declaration.canMarkFound %}
                    <form method="post" action="{{ path('manager_equipment_losses_found', {id: declaration.id}) }}">
                        <input type="hidden" name="_token" value="{{ csrf_token('found_loss_' ~ declaration.id) }}">
                        <button type="submit" 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#confirm" data-equipment-workflow-confirm-param="Marquer cet équipement comme retrouvé ?">
                            <i class="fas fa-check-circle mr-2"></i>Marquer retrouve
                        </button>
                    </form>
                    {% endif %}

                    {# Resoudre #}
                    {% if declaration.canResolve %}
                    <button type="button" 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#toggle" data-equipment-workflow-target-param="resolve-form">
                        <i class="fas fa-gavel mr-2"></i>Resoudre
                    </button>
                    <div id="resolve-form" class="hidden" data-equipment-workflow-target="panel">
                        <form method="post" action="{{ path('manager_equipment_losses_resolve', {id: declaration.id}) }}" class="space-y-3 p-3 bg-teal-50 dark:bg-teal-900/20 rounded-lg">
                            <input type="hidden" name="_token" value="{{ csrf_token('resolve_loss_' ~ declaration.id) }}">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Resolution</label>
                                <select name="resolution" required class="bg-white 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 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                                    <option value="">-- Choisir --</option>
                                    <option value="found">Retrouve</option>
                                    <option value="replaced">Remplace</option>
                                    <option value="written_off">Passe en perte</option>
                                    <option value="employee_reimbursed">Rembourse par l'employe</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Notes de resolution</label>
                                <textarea name="resolutionNotes" rows="3" class="bg-white 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 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Details de la resolution..."></textarea>
                            </div>
                            <button type="submit" class="w-full px-4 py-2 bg-teal-600 text-white rounded-lg text-sm hover:bg-teal-700">
                                Confirmer la resolution
                            </button>
                        </form>
                    </div>
                    {% endif %}

                    {# Cloturer #}
                    {% if declaration.canClose %}
                    <form method="post" action="{{ path('manager_equipment_losses_close', {id: declaration.id}) }}">
                        <input type="hidden" name="_token" value="{{ csrf_token('close_loss_' ~ declaration.id) }}">
                        <button type="submit" class="w-full px-4 py-3 bg-gray-600 text-white rounded-lg text-sm font-medium hover:bg-gray-700 transition-colors text-left"
                                data-action="equipment-workflow#confirm" data-equipment-workflow-confirm-param="Clôturer cette déclaration ?">
                            <i class="fas fa-lock mr-2"></i>Cloturer
                        </button>
                    </form>
                    {% endif %}

                    {% if not declaration.canReview and not declaration.canConfirmLost and not declaration.canMarkFound and not declaration.canResolve and not declaration.canClose %}
                    <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-flag text-yellow-600 text-xs"></i>
                        </span>
                        <p class="text-sm font-medium text-gray-900 dark:text-white">Declaree</p>
                        <time class="text-xs text-gray-500">{{ declaration.declaredAt|date('d/m/Y a H:i') }}</time>
                    </li>

                    {% if declaration.reviewedAt %}
                    <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-search text-blue-600 text-xs"></i>
                        </span>
                        <p class="text-sm font-medium text-gray-900 dark:text-white">
                            Enquete ouverte
                            {% if declaration.reviewedBy %}par {{ declaration.reviewedBy.fullName }}{% endif %}
                        </p>
                        <time class="text-xs text-gray-500">{{ declaration.reviewedAt|date('d/m/Y a H:i') }}</time>
                    </li>
                    {% endif %}

                    {% if declaration.resolvedAt %}
                    <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">
                            Resolue : {{ declaration.resolutionLabel }}
                            {% if declaration.resolvedBy %}par {{ declaration.resolvedBy.fullName }}{% endif %}
                        </p>
                        <time class="text-xs text-gray-500">{{ declaration.resolvedAt|date('d/m/Y a H:i') }}</time>
                    </li>
                    {% endif %}
                </ol>
            </div>
        </div>
    </div>
</div>
{% endblock %}