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

{% block page_title %}Alertes Stock{% endblock %}

{% block content %}
<div class="space-y-6">
    {# Header #}
    <div class="bg-gradient-to-r from-red-600 to-orange-600 rounded-lg shadow-lg p-4 sm:p-6 text-white">
        <div class="flex items-center justify-between flex-wrap gap-4">
            <div>
                <h1 class="text-2xl sm:text-3xl font-bold"><i class="fas fa-exclamation-triangle mr-3"></i>Alertes Stock</h1>
                <p class="mt-1 text-red-100 text-sm">Seuils: bas &le; {{ settings.lowStockThreshold }}, critique &le; {{ settings.criticalStockThreshold }}</p>
            </div>
            <div class="flex gap-2">
                <a href="{{ path('manager_pos_stock_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 Stock
                </a>
            </div>
        </div>
    </div>

    {# Recap cards #}
    <div class="grid grid-cols-3 gap-3 sm:gap-4">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 border-l-4 border-red-500">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center">
                    <i class="fas fa-times-circle text-red-600"></i>
                </div>
                <div>
                    <div class="text-2xl font-bold text-red-600">{{ outOfStockProducts|length }}</div>
                    <div class="text-xs text-gray-500">Rupture</div>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 border-l-4 border-orange-500">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-full bg-orange-100 dark:bg-orange-900/30 flex items-center justify-center">
                    <i class="fas fa-exclamation-circle text-orange-600"></i>
                </div>
                <div>
                    <div class="text-2xl font-bold text-orange-600">{{ criticalProducts|length }}</div>
                    <div class="text-xs text-gray-500">Critique</div>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 border-l-4 border-yellow-500">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-full bg-yellow-100 dark:bg-yellow-900/30 flex items-center justify-center">
                    <i class="fas fa-arrow-down text-yellow-600"></i>
                </div>
                <div>
                    <div class="text-2xl font-bold text-yellow-600">{{ lowStockProducts|length }}</div>
                    <div class="text-xs text-gray-500">Bas</div>
                </div>
            </div>
        </div>
    </div>

    {# Macro pour section d'alerte #}
    {% macro alertSection(products, title, icon, headerColor, bgTint, textColor, badge, thresholdLabel, settings, csrfProvider) %}
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
            <div class="bg-{{ headerColor }} px-4 py-3 flex items-center justify-between">
                <h2 class="text-white font-semibold"><i class="fas {{ icon }} mr-2"></i>{{ title }} ({{ products|length }})</h2>
            </div>
            {% if products|length > 0 %}
                {# Desktop table #}
                <div class="hidden sm:block overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                        <thead class="bg-gray-50 dark:bg-gray-700">
                            <tr>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Produit</th>
                                <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">Stock</th>
                                <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">{{ thresholdLabel }}</th>
                                <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                            {% for product in products %}
                                <tr class="bg-{{ bgTint }}-50/50 dark:bg-{{ bgTint }}-900/5 hover:bg-{{ bgTint }}-50 dark:hover:bg-{{ bgTint }}-900/10">
                                    <td class="px-4 py-3">
                                        <a href="{{ path('manager_pos_products_show', {id: product.id}) }}" class="hover:text-blue-600 transition-colors">
                                            <div class="font-medium text-gray-900 dark:text-white">{{ product.name }}</div>
                                            <div class="text-xs text-gray-500">{{ product.sku }}{% if product.category %} &middot; {{ product.category.name }}{% endif %}</div>
                                        </a>
                                    </td>
                                    <td class="px-4 py-3 text-center">
                                        <span class="text-lg font-bold text-{{ textColor }}-600">{{ product.currentStock }}</span>
                                    </td>
                                    <td class="px-4 py-3 text-center text-sm text-gray-500">{{ badge }}</td>
                                    <td class="px-4 py-3 text-right">
                                        <div class="flex justify-end gap-1.5">
                                            <a href="{{ path('manager_pos_stock_add', {product: product.id}) }}" class="inline-flex items-center gap-1 px-3 py-1.5 bg-green-600 text-white rounded-lg text-xs font-medium hover:bg-green-700 transition-colors">
                                                <i class="fas fa-plus"></i><span>Approvisionner</span>
                                            </a>
                                            <form method="POST" action="{{ path('manager_pos_stock_notify_restock', {id: product.id}) }}" class="inline" data-no-loader>
                                                <input type="hidden" name="_token" value="{{ csrf_token('notify_restock_' ~ product.id) }}">
                                                <button type="submit" class="inline-flex items-center gap-1 px-3 py-1.5 bg-blue-600 text-white rounded-lg text-xs font-medium hover:bg-blue-700 transition-colors" title="Notifier l'equipe">
                                                    <i class="fas fa-bell"></i><span>Notifier</span>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                {# Mobile cards #}
                <div class="sm:hidden divide-y divide-gray-100 dark:divide-gray-700">
                    {% for product in products %}
                        <div class="p-4 bg-{{ bgTint }}-50/30 dark:bg-{{ bgTint }}-900/5">
                            <div class="flex items-start justify-between gap-3">
                                <div class="min-w-0 flex-1">
                                    <a href="{{ path('manager_pos_products_show', {id: product.id}) }}" class="font-medium text-gray-900 dark:text-white hover:text-blue-600">{{ product.name }}</a>
                                    <div class="text-xs text-gray-500 mt-0.5">{{ product.sku }}</div>
                                </div>
                                <div class="text-right flex-shrink-0">
                                    <div class="text-xl font-bold text-{{ textColor }}-600">{{ product.currentStock }}</div>
                                    <div class="text-[10px] text-gray-400">Min: {{ product.minStock ?? '-' }}</div>
                                </div>
                            </div>
                            <div class="mt-3 flex gap-2">
                                <a href="{{ path('manager_pos_stock_add', {product: product.id}) }}" class="flex-1 inline-flex items-center justify-center gap-1 px-3 py-2 bg-green-600 text-white rounded-lg text-xs font-medium hover:bg-green-700">
                                    <i class="fas fa-plus"></i>Approvisionner
                                </a>
                                <form method="POST" action="{{ path('manager_pos_stock_notify_restock', {id: product.id}) }}" class="flex-1" data-no-loader>
                                    <input type="hidden" name="_token" value="{{ csrf_token('notify_restock_' ~ product.id) }}">
                                    <button type="submit" class="w-full inline-flex items-center justify-center gap-1 px-3 py-2 bg-blue-600 text-white rounded-lg text-xs font-medium hover:bg-blue-700">
                                        <i class="fas fa-bell"></i>Notifier
                                    </button>
                                </form>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% else %}
                <div class="p-6 text-center text-gray-500 dark:text-gray-400">
                    <i class="fas fa-check-circle text-green-500 text-xl mr-2"></i>Aucun produit dans cette categorie
                </div>
            {% endif %}
        </div>
    {% endmacro %}

    {% import _self as alerts %}

    {# Rupture de stock #}
    {{ alerts.alertSection(outOfStockProducts, 'Rupture de stock', 'fa-times-circle', 'red-600', 'red', 'red', '-', 'Min requis', settings) }}

    {# Stock critique #}
    {{ alerts.alertSection(criticalProducts, 'Stock critique', 'fa-exclamation-circle', 'orange-500', 'orange', 'orange', '≤ ' ~ settings.criticalStockThreshold, 'Seuil critique', settings) }}

    {# Stock bas #}
    {{ alerts.alertSection(lowStockProducts, 'Stock bas', 'fa-arrow-down', 'yellow-500', 'yellow', 'yellow', '≤ ' ~ settings.lowStockThreshold, 'Seuil bas', settings) }}
</div>
{% endblock %}