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

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

{% block content %}
<div class="space-y-6">

    {# ============================================================
       1. HEADER GRADIENT
       ============================================================ #}
    <div class="bg-gradient-to-r from-teal-600 to-cyan-600 rounded-lg shadow-lg p-6 text-white">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
            <div>
                <h1 class="text-3xl font-bold">
                    <i class="fas fa-toolbox mr-3"></i>Gestion du Mat&eacute;riel
                </h1>
                <p class="mt-2 text-teal-100">Vue d'ensemble - {{ "now"|date('d/m/Y &agrave; H:i') }}</p>
            </div>
            <a href="{{ path('manager_equipment_create') }}"
               class="inline-flex items-center gap-2 bg-white/20 hover:bg-white/30 text-white font-medium rounded-lg px-5 py-2.5 transition-colors">
                <i class="fas fa-plus"></i>
                Nouvel &Eacute;quipement
            </a>
        </div>
    </div>

    {# ============================================================
       2. OVERVIEW STATS (6 cards)
       ============================================================ #}
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
        {# Total #}
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-5 text-center">
            <div class="text-3xl font-bold text-gray-900 dark:text-white">{{ equipmentStats.total }}</div>
            <div class="text-sm text-gray-500 dark:text-gray-400 mt-1">Total</div>
            <div class="mt-2"><i class="fas fa-boxes text-gray-400 text-lg"></i></div>
        </div>
        {# Disponibles #}
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-5 text-center border-t-4 border-green-500">
            <div class="text-3xl font-bold text-green-600 dark:text-green-400">{{ equipmentStats.available }}</div>
            <div class="text-sm text-gray-500 dark:text-gray-400 mt-1">Disponibles</div>
            <div class="mt-2"><i class="fas fa-check-circle text-green-400 text-lg"></i></div>
        </div>
        {# Assign&eacute;s #}
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-5 text-center border-t-4 border-blue-500">
            <div class="text-3xl font-bold text-blue-600 dark:text-blue-400">{{ equipmentStats.assigned }}</div>
            <div class="text-sm text-gray-500 dark:text-gray-400 mt-1">Assign&eacute;s</div>
            <div class="mt-2"><i class="fas fa-user-check text-blue-400 text-lg"></i></div>
        </div>
        {# En r&eacute;paration #}
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-5 text-center border-t-4 border-yellow-500">
            <div class="text-3xl font-bold text-yellow-600 dark:text-yellow-400">{{ equipmentStats.in_repair }}</div>
            <div class="text-sm text-gray-500 dark:text-gray-400 mt-1">En r&eacute;paration</div>
            <div class="mt-2"><i class="fas fa-wrench text-yellow-400 text-lg"></i></div>
        </div>
        {# Perdus #}
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-5 text-center border-t-4 border-red-500">
            <div class="text-3xl font-bold text-red-600 dark:text-red-400">{{ equipmentStats.lost }}</div>
            <div class="text-sm text-gray-500 dark:text-gray-400 mt-1">Perdus</div>
            <div class="mt-2"><i class="fas fa-exclamation-triangle text-red-400 text-lg"></i></div>
        </div>
        {# En maintenance #}
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-5 text-center border-t-4 border-purple-500">
            <div class="text-3xl font-bold text-purple-600 dark:text-purple-400">{{ equipmentStats.in_maintenance }}</div>
            <div class="text-sm text-gray-500 dark:text-gray-400 mt-1">En maintenance</div>
            <div class="mt-2"><i class="fas fa-cogs text-purple-400 text-lg"></i></div>
        </div>
    </div>

    {# ============================================================
       3. VALUE SUMMARY (2 cards)
       ============================================================ #}
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
            <div class="flex items-center gap-4">
                <div class="w-12 h-12 rounded-lg bg-teal-100 dark:bg-teal-900 flex items-center justify-center">
                    <i class="fas fa-receipt text-teal-600 dark:text-teal-400 text-xl"></i>
                </div>
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Valeur totale d'achat</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ valueSummary.total_purchase_value|number_format(0, ',', ' ') }} <span class="text-base font-normal text-gray-500">XOF</span></p>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
            <div class="flex items-center gap-4">
                <div class="w-12 h-12 rounded-lg bg-cyan-100 dark:bg-cyan-900 flex items-center justify-center">
                    <i class="fas fa-coins text-cyan-600 dark:text-cyan-400 text-xl"></i>
                </div>
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Valeur actuelle estim&eacute;e</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ valueSummary.total_current_value|number_format(0, ',', ' ') }} <span class="text-base font-normal text-gray-500">XOF</span></p>
                </div>
            </div>
        </div>
    </div>

    {# ============================================================
       4. MODULE STATS GRID (4 cards)
       ============================================================ #}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        {# Pertes en cours #}
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-5">
            <div class="flex items-center justify-between mb-3">
                <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300">
                    <i class="fas fa-search text-red-500 mr-2"></i>Pertes en cours
                </h3>
                <a href="{{ path('manager_equipment_losses_index') }}" class="text-xs text-teal-600 hover:text-teal-800 dark:text-teal-400 font-medium">
                    Voir tout <i class="fas fa-arrow-right ml-1"></i>
                </a>
            </div>
            <div class="text-3xl font-bold text-gray-900 dark:text-white">{{ lossStats.total }}</div>
            <div class="mt-2 flex flex-wrap gap-2 text-xs">
                <span class="bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300 px-2 py-0.5 rounded">D&eacute;clar&eacute;es: {{ lossStats.declared }}</span>
                <span class="bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300 px-2 py-0.5 rounded">En enqu&ecirc;te: {{ lossStats.under_investigation }}</span>
            </div>
        </div>

        {# R&eacute;parations actives #}
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-5">
            <div class="flex items-center justify-between mb-3">
                <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300">
                    <i class="fas fa-tools text-yellow-500 mr-2"></i>R&eacute;parations actives
                </h3>
                <a href="{{ path('manager_equipment_repairs_index') }}" class="text-xs text-teal-600 hover:text-teal-800 dark:text-teal-400 font-medium">
                    Voir tout <i class="fas fa-arrow-right ml-1"></i>
                </a>
            </div>
            <div class="text-3xl font-bold text-gray-900 dark:text-white">{{ repairStats.total }}</div>
            <div class="mt-2 flex flex-wrap gap-2 text-xs">
                <span class="bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300 px-2 py-0.5 rounded">Demand&eacute;es: {{ repairStats.requested }}</span>
                <span class="bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300 px-2 py-0.5 rounded">En cours: {{ repairStats.in_repair }}</span>
            </div>
        </div>

        {# Maintenances planifi&eacute;es #}
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-5">
            <div class="flex items-center justify-between mb-3">
                <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300">
                    <i class="fas fa-calendar-check text-purple-500 mr-2"></i>Maintenances planifi&eacute;es
                </h3>
                <a href="{{ path('manager_equipment_maintenance_index') }}" class="text-xs text-teal-600 hover:text-teal-800 dark:text-teal-400 font-medium">
                    Voir tout <i class="fas fa-arrow-right ml-1"></i>
                </a>
            </div>
            <div class="text-3xl font-bold text-gray-900 dark:text-white">{{ maintenanceStats.total }}</div>
            <div class="mt-2 flex flex-wrap gap-2 text-xs">
                <span class="bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-300 px-2 py-0.5 rounded">Planifi&eacute;es: {{ maintenanceStats.scheduled }}</span>
                <span class="bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300 px-2 py-0.5 rounded">En cours: {{ maintenanceStats.in_progress }}</span>
            </div>
        </div>

        {# Incidents ouverts #}
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-5">
            <div class="flex items-center justify-between mb-3">
                <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300">
                    <i class="fas fa-exclamation-circle text-red-500 mr-2"></i>Incidents ouverts
                </h3>
                <a href="{{ path('manager_equipment_incidents_index') }}" class="text-xs text-teal-600 hover:text-teal-800 dark:text-teal-400 font-medium">
                    Voir tout <i class="fas fa-arrow-right ml-1"></i>
                </a>
            </div>
            <div class="text-3xl font-bold text-gray-900 dark:text-white">{{ incidentStats.total }}</div>
            <div class="mt-2 flex flex-wrap gap-2 text-xs">
                <span class="bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300 px-2 py-0.5 rounded">Critiques: {{ incidentStats.critical }}</span>
                <span class="bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300 px-2 py-0.5 rounded">Haute: {{ incidentStats.high }}</span>
            </div>
        </div>
    </div>

    {# ============================================================
       5. ALERTS SECTION
       ============================================================ #}
    {% if overdueRepairs|length > 0 or openCriticalIncidents|length > 0 or pendingLossDeclarations|length > 0 %}
    <div class="space-y-4">
        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
            <i class="fas fa-bell text-red-500 mr-2"></i>Alertes
        </h2>

        {# Overdue repairs #}
        {% if overdueRepairs|length > 0 %}
        <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
            <h3 class="font-semibold text-yellow-800 dark:text-yellow-200 mb-3">
                <i class="fas fa-clock mr-2"></i>R&eacute;parations en retard ({{ overdueRepairs|length }})
            </h3>
            <div class="space-y-2">
                {% for repair in overdueRepairs %}
                <div class="flex items-center justify-between bg-white dark:bg-gray-800 rounded-lg p-3">
                    <div class="flex items-center gap-3">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300">
                            En retard
                        </span>
                        <span class="text-sm text-gray-900 dark:text-white font-medium">
                            {{ repair.equipment.name|default('N/A') }}
                        </span>
                        <span class="text-xs text-gray-500 dark:text-gray-400">
                            {{ repair.description|default('')|slice(0, 60) }}{% if repair.description|default('')|length > 60 %}...{% endif %}
                        </span>
                    </div>
                    <a href="{{ path('manager_equipment_repairs_show', {id: repair.id}) }}" class="text-sm text-teal-600 hover:text-teal-800 dark:text-teal-400">
                        <i class="fas fa-eye"></i>
                    </a>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        {# Critical incidents #}
        {% if openCriticalIncidents|length > 0 %}
        <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
            <h3 class="font-semibold text-red-800 dark:text-red-200 mb-3">
                <i class="fas fa-radiation mr-2"></i>Incidents critiques ({{ openCriticalIncidents|length }})
            </h3>
            <div class="space-y-2">
                {% for incident in openCriticalIncidents %}
                <div class="flex items-center justify-between bg-white dark:bg-gray-800 rounded-lg p-3">
                    <div class="flex items-center gap-3">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300">
                            Critique
                        </span>
                        <span class="text-sm text-gray-900 dark:text-white font-medium">
                            {{ incident.title|default(incident.equipment.name|default('N/A')) }}
                        </span>
                        <span class="text-xs text-gray-500 dark:text-gray-400">
                            {{ incident.reportedAt|date('d/m/Y') }}
                        </span>
                    </div>
                    <a href="{{ path('manager_equipment_incidents_show', {id: incident.id}) }}" class="text-sm text-teal-600 hover:text-teal-800 dark:text-teal-400">
                        <i class="fas fa-eye"></i>
                    </a>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        {# Pending losses #}
        {% if pendingLossDeclarations|length > 0 %}
        <div class="bg-orange-50 dark:bg-orange-900/20 border border-orange-200 dark:border-orange-800 rounded-lg p-4">
            <h3 class="font-semibold text-orange-800 dark:text-orange-200 mb-3">
                <i class="fas fa-question-circle mr-2"></i>Pertes en attente ({{ pendingLossDeclarations|length }})
            </h3>
            <div class="space-y-2">
                {% for loss in pendingLossDeclarations %}
                <div class="flex items-center justify-between bg-white dark:bg-gray-800 rounded-lg p-3">
                    <div class="flex items-center gap-3">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300">
                            En attente
                        </span>
                        <span class="text-sm text-gray-900 dark:text-white font-medium">
                            {{ loss.equipment.name|default('N/A') }}
                        </span>
                        <span class="text-xs text-gray-500 dark:text-gray-400">
                            D&eacute;clar&eacute;e le {{ loss.declaredAt|date('d/m/Y') }}
                        </span>
                    </div>
                    <a href="{{ path('manager_equipment_losses_show', {id: loss.id}) }}" class="text-sm text-teal-600 hover:text-teal-800 dark:text-teal-400">
                        <i class="fas fa-eye"></i>
                    </a>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}
    </div>
    {% endif %}

    {# ============================================================
       6. UPCOMING MAINTENANCES TABLE
       ============================================================ #}
    {% if upcomingMaintenances|length > 0 %}
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow">
        <div class="p-5 border-b border-gray-200 dark:border-gray-700">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
                <i class="fas fa-calendar-alt text-purple-500 mr-2"></i>Maintenances &agrave; venir
            </h2>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
                <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                    <tr>
                        <th class="px-6 py-3">&Eacute;quipement</th>
                        <th class="px-6 py-3">Type</th>
                        <th class="px-6 py-3">Date pr&eacute;vue</th>
                        <th class="px-6 py-3">Statut</th>
                        <th class="px-6 py-3 text-right">Action</th>
                    </tr>
                </thead>
                <tbody>
                    {% for maintenance in upcomingMaintenances %}
                    <tr class="bg-white dark:bg-gray-800 border-b dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700">
                        <td class="px-6 py-4 font-medium text-gray-900 dark:text-white">
                            {{ maintenance.equipment.name|default('N/A') }}
                        </td>
                        <td class="px-6 py-4">
                            {{ maintenance.type|default('N/A') }}
                        </td>
                        <td class="px-6 py-4">
                            {{ maintenance.scheduledAt|date('d/m/Y') }}
                        </td>
                        <td class="px-6 py-4">
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-300">
                                Planifi&eacute;e
                            </span>
                        </td>
                        <td class="px-6 py-4 text-right">
                            <a href="{{ path('manager_equipment_maintenance_show', {id: maintenance.id}) }}" class="text-teal-600 hover:text-teal-800 dark:text-teal-400">
                                <i class="fas fa-eye mr-1"></i>D&eacute;tails
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}

    {# ============================================================
       7. QUICK ACTION BUTTONS
       ============================================================ #}
    <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">
            <i class="fas fa-bolt text-teal-500 mr-2"></i>Actions rapides
        </h2>
        <div class="flex flex-wrap gap-3">
            <a href="{{ path('manager_equipment_create') }}"
               class="inline-flex items-center gap-2 bg-teal-600 hover:bg-teal-700 text-white font-medium rounded-lg px-4 py-2.5 transition-colors text-sm">
                <i class="fas fa-plus-circle"></i>
                Nouvel &Eacute;quipement
            </a>
            <a href="{{ path('manager_equipment_losses_create') }}"
               class="inline-flex items-center gap-2 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg px-4 py-2.5 transition-colors text-sm">
                <i class="fas fa-search-minus"></i>
                D&eacute;clarer Perte
            </a>
            <a href="{{ path('manager_equipment_repairs_create') }}"
               class="inline-flex items-center gap-2 bg-yellow-500 hover:bg-yellow-600 text-white font-medium rounded-lg px-4 py-2.5 transition-colors text-sm">
                <i class="fas fa-wrench"></i>
                Demander R&eacute;paration
            </a>
            <a href="{{ path('manager_equipment_maintenance_create') }}"
               class="inline-flex items-center gap-2 bg-purple-600 hover:bg-purple-700 text-white font-medium rounded-lg px-4 py-2.5 transition-colors text-sm">
                <i class="fas fa-calendar-plus"></i>
                Planifier Maintenance
            </a>
            <a href="{{ path('manager_equipment_incidents_create') }}"
               class="inline-flex items-center gap-2 bg-orange-600 hover:bg-orange-700 text-white font-medium rounded-lg px-4 py-2.5 transition-colors text-sm">
                <i class="fas fa-flag"></i>
                Signaler Incident
            </a>
        </div>
    </div>

</div>
{% endblock %}