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

{% block page_title %}Rapport Stock{% endblock %}

{% block content %}
<div class="space-y-6">
    <div class="bg-gradient-to-r from-blue-600 to-indigo-600 rounded-lg shadow-lg p-6 text-white">
        <div class="flex items-center justify-between flex-wrap gap-4">
            <div>
                <h1 class="text-3xl font-bold"><i class="fas fa-boxes mr-3"></i>Rapport Stock</h1>
                <p class="mt-2 text-blue-100">État des stocks et alertes</p>
            </div>
            <div class="flex gap-2">
                <a href="{{ path('manager_pos_export_stock_report_pdf') }}" target="_blank"
                   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-file-pdf mr-2"></i>PDF
                </a>
                <a href="{{ path('manager_pos_export_products_csv') }}"
                   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-file-csv mr-2"></i>Produits CSV
                </a>
                <a href="{{ path('manager_pos_reports_dashboard') }}" 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>Tableau de bord
                </a>
            </div>
        </div>
    </div>

    {# KPIs #}
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-5">
            <div class="text-xs text-gray-500 uppercase">Produits actifs</div>
            <div class="text-3xl font-bold text-gray-900 dark:text-white mt-1">{{ report.productStats.total|default(0) }}</div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-5">
            <div class="text-xs text-gray-500 uppercase">Valeur totale stock</div>
            <div class="text-3xl font-bold text-purple-600 mt-1">{{ report.stockValuation.totalValue|default('0')|number_format(0, ',', ' ') }}</div>
            <div class="text-xs text-gray-500">{{ settings.currencySymbol }} — {{ report.stockValuation.totalUnits|default(0) }} unités</div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-5">
            <div class="text-xs text-gray-500 uppercase">Stock bas</div>
            <div class="text-3xl font-bold text-orange-600 mt-1">{{ report.lowStockProducts|length }}</div>
            <div class="text-xs text-gray-500">seuil: {{ report.settings.lowStockThreshold }}</div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-5">
            <div class="text-xs text-gray-500 uppercase">Ruptures</div>
            <div class="text-3xl font-bold text-red-600 mt-1">{{ report.outOfStockProducts|length }}</div>
        </div>
    </div>

    {# Movement stats #}
    {% if report.movementStats|length > 0 %}
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
            <div class="p-4 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-exchange-alt mr-2 text-blue-600"></i>Mouvements de stock</h2>
            </div>
            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 p-4">
                {% for stat in report.movementStats %}
                    <div class="text-center p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                        <div class="text-lg font-bold text-gray-900 dark:text-white">{{ stat.count }}</div>
                        <div class="text-xs text-gray-500 capitalize">{{ stat.type|replace({'_': ' '}) }}</div>
                        <div class="text-xs text-gray-400">{{ stat.totalQuantity }} unités</div>
                    </div>
                {% endfor %}
            </div>
        </div>
    {% endif %}

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {# Out of stock #}
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
            <div class="p-4 border-b border-gray-200 dark:border-gray-700 bg-red-50 dark:bg-red-900/20">
                <h2 class="text-lg font-semibold text-red-700 dark:text-red-300"><i class="fas fa-exclamation-triangle mr-2"></i>Ruptures de stock ({{ report.outOfStockProducts|length }})</h2>
            </div>
            {% if report.outOfStockProducts|length > 0 %}
                <div class="divide-y divide-gray-200 dark:divide-gray-700">
                    {% for product in report.outOfStockProducts|slice(0, 15) %}
                        <div class="px-4 py-3 flex items-center justify-between">
                            <div>
                                <div class="font-medium text-gray-900 dark:text-white text-sm">{{ product.name }}</div>
                                <div class="text-xs text-gray-500">{{ product.sku }}</div>
                            </div>
                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">{{ product.currentStock }}</span>
                        </div>
                    {% endfor %}
                </div>
            {% else %}
                <div class="p-8 text-center text-green-500"><i class="fas fa-check-circle text-2xl mb-2"></i><p class="text-sm">Aucune rupture</p></div>
            {% endif %}
        </div>

        {# Critical + Low stock #}
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
            <div class="p-4 border-b border-gray-200 dark:border-gray-700 bg-orange-50 dark:bg-orange-900/20">
                <h2 class="text-lg font-semibold text-orange-700 dark:text-orange-300"><i class="fas fa-exclamation-circle mr-2"></i>Stock critique & bas ({{ report.criticalStockProducts|length + report.lowStockProducts|length }})</h2>
            </div>
            {% set allLow = report.criticalStockProducts|merge(report.lowStockProducts) %}
            {% if allLow|length > 0 %}
                <div class="divide-y divide-gray-200 dark:divide-gray-700">
                    {% for product in allLow|slice(0, 15) %}
                        <div class="px-4 py-3 flex items-center justify-between">
                            <div>
                                <div class="font-medium text-gray-900 dark:text-white text-sm">{{ product.name }}</div>
                                <div class="text-xs text-gray-500">{{ product.sku }}</div>
                            </div>
                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium {{ product.currentStock <= report.settings.criticalStockThreshold ? 'bg-red-100 text-red-800' : 'bg-orange-100 text-orange-800' }}">
                                {{ product.currentStock }}
                            </span>
                        </div>
                    {% endfor %}
                </div>
            {% else %}
                <div class="p-8 text-center text-green-500"><i class="fas fa-check-circle text-2xl mb-2"></i><p class="text-sm">Stock OK</p></div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}