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

{% block page_title %}{{ product.name }}{% endblock %}

{% block content %}
{% set stockStatus = product.getStockStatus(settings.lowStockThreshold, settings.criticalStockThreshold) %}
{% set stockColors = { 'ok': 'green', 'low': 'orange', 'critical': 'red', 'out': 'gray', 'service': 'purple' } %}
{% set stockLabels = { 'ok': 'En stock', 'low': 'Stock bas', 'critical': 'Critique', 'out': 'Rupture', 'service': 'Service' } %}

<div class="space-y-4 sm:space-y-6">
    {# Header #}
    <div class="bg-gradient-to-r from-emerald-600 to-teal-600 rounded-lg shadow-lg p-4 sm:p-6 text-white">
        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 sm:gap-4">
            <div class="min-w-0">
                <div class="flex items-center gap-2 sm:gap-3 flex-wrap">
                    <h1 class="text-xl sm:text-3xl font-bold truncate">{{ product.name }}</h1>
                    {% if product.isFeatured %}
                        <span class="px-2 py-0.5 text-xs rounded-full bg-yellow-400 text-yellow-900 font-semibold whitespace-nowrap"><i class="fas fa-star mr-1"></i>Mis en avant</span>
                    {% endif %}
                </div>
                <p class="mt-1 text-emerald-100 text-sm">SKU: {{ product.sku }} {% if product.barcode %}| <i class="fas fa-barcode mr-1"></i>{{ product.barcode }}{% endif %}</p>
            </div>
            <div class="flex gap-2 flex-shrink-0">
                <a href="{{ path('manager_pos_products_edit', {id: product.id}) }}" class="inline-flex items-center px-3 py-2 bg-white text-emerald-700 rounded-lg text-sm font-medium hover:bg-emerald-50 transition-colors">
                    <i class="fas fa-edit mr-2"></i><span class="hidden sm:inline">Modifier</span>
                </a>
                <a href="{{ path('manager_pos_products_index') }}" class="inline-flex items-center px-3 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><span class="hidden sm:inline">Retour</span>
                </a>
            </div>
        </div>
    </div>

    {# Informations #}
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 sm:p-6">
        <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-3 sm:mb-4">Informations</h2>
        <dl class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
            <div>
                <dt class="text-xs sm:text-sm text-gray-500 dark:text-gray-400">Categorie</dt>
                <dd class="text-sm font-medium text-gray-900 dark:text-white mt-1">
                    {% if product.category %}
                        <span class="inline-block px-2 py-0.5 rounded bg-{{ product.category.color }}-100 text-{{ product.category.color }}-800 text-xs sm:text-sm">{{ product.category.name }}</span>
                    {% else %}
                        <span class="text-gray-400">Sans categorie</span>
                    {% endif %}
                </dd>
            </div>
            <div>
                <dt class="text-xs sm:text-sm text-gray-500 dark:text-gray-400">Type</dt>
                <dd class="text-sm font-medium text-gray-900 dark:text-white mt-1">{{ product.isService ? 'Service' : 'Produit physique' }}</dd>
            </div>
            <div>
                <dt class="text-xs sm:text-sm text-gray-500 dark:text-gray-400">Unite</dt>
                <dd class="text-sm font-medium text-gray-900 dark:text-white mt-1">{{ product.unitLabel }}</dd>
            </div>
            {% if product.weight %}
            <div>
                <dt class="text-xs sm:text-sm text-gray-500 dark:text-gray-400">Poids</dt>
                <dd class="text-sm font-medium text-gray-900 dark:text-white mt-1">{{ product.weight }} kg</dd>
            </div>
            {% endif %}
            {% if product.description %}
            <div class="sm:col-span-2">
                <dt class="text-xs sm:text-sm text-gray-500 dark:text-gray-400">Description</dt>
                <dd class="text-sm text-gray-900 dark:text-white mt-1">{{ product.description|nl2br }}</dd>
            </div>
            {% endif %}
        </dl>
    </div>

    {# Prix & Marges #}
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 sm:p-6">
        <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-3 sm:mb-4">Prix & Marges</h2>
        <div class="grid grid-cols-2 sm:grid-cols-4 gap-2 sm:gap-4">
            <div class="text-center p-3 sm:p-4 bg-emerald-50 dark:bg-emerald-900/20 rounded-lg">
                <div class="text-lg sm:text-2xl font-bold text-emerald-700 dark:text-emerald-400">{{ settings.formatPrice(product.price) }}</div>
                <div class="text-[10px] sm:text-xs text-gray-500 mt-1">Prix de vente</div>
            </div>
            <div class="text-center p-3 sm:p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                <div class="text-lg sm:text-2xl font-bold text-gray-700 dark:text-gray-300">{{ product.costPrice ? settings.formatPrice(product.costPrice) : '—' }}</div>
                <div class="text-[10px] sm:text-xs text-gray-500 mt-1">Prix d'achat</div>
            </div>
            <div class="text-center p-3 sm:p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
                <div class="text-lg sm:text-2xl font-bold text-blue-700 dark:text-blue-400">{{ product.margin ? settings.formatPrice(product.margin) : '—' }}</div>
                <div class="text-[10px] sm:text-xs text-gray-500 mt-1">Marge</div>
            </div>
            <div class="text-center p-3 sm:p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg">
                <div class="text-lg sm:text-2xl font-bold text-purple-700 dark:text-purple-400">{{ product.marginPercent ? product.marginPercent|number_format(1) ~ '%' : '—' }}</div>
                <div class="text-[10px] sm:text-xs text-gray-500 mt-1">Marge %</div>
            </div>
        </div>
    </div>

    {# Stock & Ventes - cote a cote #}
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
        {# Stock #}
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 sm:p-6">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-3 sm:mb-4">
                <i class="fas fa-warehouse mr-2 text-gray-400"></i>Stock
            </h2>
            <div class="text-center mb-4">
                <div class="text-3xl sm:text-4xl font-bold text-{{ stockColors[stockStatus] }}-600">{{ product.isService ? '∞' : product.currentStock }}</div>
                <span class="inline-flex items-center mt-2 px-3 py-1 rounded-full text-sm font-medium bg-{{ stockColors[stockStatus] }}-100 text-{{ stockColors[stockStatus] }}-800">
                    {{ stockLabels[stockStatus] }}
                </span>
            </div>
            {% if not product.isService %}
            <dl class="space-y-2 text-sm">
                {% if product.minStock is not null %}
                <div class="flex justify-between"><dt class="text-gray-500">Stock minimum</dt><dd class="font-medium">{{ product.minStock }}</dd></div>
                {% endif %}
                {% if product.maxStock is not null %}
                <div class="flex justify-between"><dt class="text-gray-500">Stock maximum</dt><dd class="font-medium">{{ product.maxStock }}</dd></div>
                {% endif %}
                <div class="flex justify-between"><dt class="text-gray-500">Reserve</dt><dd class="font-medium">{{ product.reservedStock }}</dd></div>
                <div class="flex justify-between"><dt class="text-gray-500">Disponible</dt><dd class="font-medium">{{ product.availableStock }}</dd></div>
            </dl>
            <div class="mt-4 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 transition-colors">
                    <i class="fas fa-plus"></i>Entree
                </a>
                <a href="{{ path('manager_pos_stock_adjust', {product: product.id}) }}" class="flex-1 inline-flex items-center justify-center gap-1 px-3 py-2 bg-yellow-500 text-white rounded-lg text-xs font-medium hover:bg-yellow-600 transition-colors">
                    <i class="fas fa-sliders-h"></i>Ajuster
                </a>
                <a href="{{ path('manager_pos_stock_movements', {productId: product.id}) }}" class="flex-1 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 transition-colors">
                    <i class="fas fa-history"></i>Mouvements
                </a>
            </div>
            {% endif %}
        </div>

        {# Ventes #}
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 sm:p-6">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-3 sm:mb-4">
                <i class="fas fa-chart-line mr-2 text-gray-400"></i>Ventes
            </h2>
            <div class="grid grid-cols-1 gap-4">
                <div class="text-center p-4 bg-indigo-50 dark:bg-indigo-900/20 rounded-lg">
                    <div class="text-3xl sm:text-4xl font-bold text-indigo-700 dark:text-indigo-400">{{ product.totalSold }}</div>
                    <div class="text-xs text-gray-500 mt-1">{{ product.unitLabel|lower }}s vendus</div>
                </div>
                <dl class="space-y-2 text-sm">
                    <div class="flex justify-between"><dt class="text-gray-500">Chiffre d'affaires</dt><dd class="font-medium text-emerald-600">{{ settings.formatPrice(product.totalRevenue) }}</dd></div>
                    <div class="flex justify-between"><dt class="text-gray-500">Derniere vente</dt><dd class="font-medium">{{ product.lastSoldAt ? product.lastSoldAt|date('d/m/Y') : 'Jamais' }}</dd></div>
                    <div class="flex justify-between"><dt class="text-gray-500">Derniere restock</dt><dd class="font-medium">{{ product.lastRestockedAt ? product.lastRestockedAt|date('d/m/Y') : 'Jamais' }}</dd></div>
                </dl>
            </div>
        </div>
    </div>

    {# Images produit #}
    {% include 'manager/pos/products/_media_gallery.html.twig' %}

    {# Variantes #}
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 sm:p-6">
        <div class="mb-3 sm:mb-4">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Variantes ({{ product.variants|length }})</h2>
            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Les variantes permettent de decliner un produit selon ses caracteristiques (taille, couleur, poids, dimensions...). Chaque variante a son propre stock, code-barres et ajustement de prix.</p>
        </div>

        {% if product.variants|length > 0 %}
        {# Table desktop #}
        <div class="hidden sm:block overflow-x-auto mb-4">
            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                <thead>
                    <tr>
                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Nom</th>
                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">SKU</th>
                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Attributs</th>
                        <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase">Ajust. prix</th>
                        <th class="px-4 py-2 text-center text-xs font-medium text-gray-500 uppercase">Stock</th>
                        <th class="px-4 py-2 text-center text-xs font-medium text-gray-500 uppercase">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                    {% for variant in product.variants %}
                    <tr>
                        <td class="px-4 py-2 text-sm font-medium">{{ variant.name }}</td>
                        <td class="px-4 py-2 text-sm font-mono text-gray-600">{{ variant.sku }}</td>
                        <td class="px-4 py-2 text-sm text-gray-500">{{ variant.attributesSummary }}</td>
                        <td class="px-4 py-2 text-sm text-right font-semibold {{ variant.priceAdjustment > 0 ? 'text-green-600' : (variant.priceAdjustment < 0 ? 'text-red-600' : '') }}">
                            {{ variant.priceAdjustment > 0 ? '+' : '' }}{{ variant.priceAdjustment|number_format(0, ',', ' ') }}
                        </td>
                        <td class="px-4 py-2 text-sm text-center">{{ variant.currentStock }}</td>
                        <td class="px-4 py-2 text-center">
                            <button type="button" data-modal-target="confirm-modal-del-var-{{ variant.id }}" data-modal-toggle="confirm-modal-del-var-{{ variant.id }}" data-no-loader class="text-red-500 hover:text-red-700 text-xs">
                                <i class="fas fa-trash"></i>
                            </button>
                            {% include 'components/pos/_confirm_modal.html.twig' with {
                                modal_id: 'del-var-' ~ variant.id,
                                title: 'Supprimer la variante',
                                message: 'Supprimer la variante « ' ~ variant.name ~ ' » ?',
                                action_url: path('manager_pos_products_delete_variant', {id: product.id, variantId: variant.id}),
                                csrf_token_name: 'delete_variant_' ~ variant.id,
                            } %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {# Cards mobile pour variantes #}
        <div class="sm:hidden space-y-2 mb-4">
            {% for variant in product.variants %}
            <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-3">
                <div class="flex items-center justify-between">
                    <div>
                        <span class="text-sm font-medium text-gray-900 dark:text-white">{{ variant.name }}</span>
                        <span class="text-xs text-gray-500 font-mono ml-2">{{ variant.sku }}</span>
                    </div>
                    <button type="button" data-modal-target="confirm-modal-del-var-m-{{ variant.id }}" data-modal-toggle="confirm-modal-del-var-m-{{ variant.id }}" data-no-loader class="text-red-500 hover:text-red-700">
                        <i class="fas fa-trash text-xs"></i>
                    </button>
                    {% include 'components/pos/_confirm_modal.html.twig' with {
                        modal_id: 'del-var-m-' ~ variant.id,
                        title: 'Supprimer la variante',
                        message: 'Supprimer la variante « ' ~ variant.name ~ ' » ?',
                        action_url: path('manager_pos_products_delete_variant', {id: product.id, variantId: variant.id}),
                        csrf_token_name: 'delete_variant_' ~ variant.id,
                    } %}
                </div>
                <div class="flex items-center gap-3 mt-1.5 text-xs text-gray-500 flex-wrap">
                    {% if variant.attributesSummary %}<span>{{ variant.attributesSummary }}</span>{% endif %}
                    <span class="font-semibold {{ variant.priceAdjustment > 0 ? 'text-green-600' : (variant.priceAdjustment < 0 ? 'text-red-600' : '') }}">
                        {{ variant.priceAdjustment > 0 ? '+' : '' }}{{ variant.priceAdjustment|number_format(0, ',', ' ') }} FCFA
                    </span>
                    <span>Stock: {{ variant.currentStock }}</span>
                </div>
            </div>
            {% endfor %}
        </div>
        {% endif %}

        {# Formulaire ajout variante #}
        <details class="border border-gray-200 dark:border-gray-700 rounded-lg">
            <summary class="cursor-pointer px-4 py-2 text-sm font-medium text-emerald-600 hover:text-emerald-700">
                <i class="fas fa-plus mr-1"></i>Ajouter une variante
            </summary>
            <form method="POST" action="{{ path('manager_pos_products_add_variant', {id: product.id}) }}" class="p-3 sm:p-4 space-y-4 border-t border-gray-200 dark:border-gray-700">
                <input type="hidden" name="_token" value="{{ csrf_token('add_variant_' ~ product.id) }}">
                <div>
                    <p class="text-xs font-semibold text-gray-700 dark:text-gray-300 mb-2 uppercase tracking-wide">Identification</p>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        <div>
                            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Nom *</label>
                            <input type="text" name="name" required placeholder="Ex: Taille L - Rouge" class="w-full text-sm border border-gray-300 dark:border-gray-600 rounded-lg py-1.5 px-2.5 dark:bg-gray-700 dark:text-white focus:ring-emerald-500 focus:border-emerald-500">
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">SKU *</label>
                            <input type="text" name="sku" required placeholder="Ex: PRD-001-L-RG" class="w-full text-sm border border-gray-300 dark:border-gray-600 rounded-lg py-1.5 px-2.5 dark:bg-gray-700 dark:text-white focus:ring-emerald-500 focus:border-emerald-500">
                        </div>
                    </div>
                </div>
                <div>
                    <p class="text-xs font-semibold text-gray-700 dark:text-gray-300 mb-2 uppercase tracking-wide">Prix & Stock</p>
                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                        <div>
                            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Ajustement prix (FCFA)</label>
                            <input type="number" name="price_adjustment" value="0" step="1" class="w-full text-sm border border-gray-300 dark:border-gray-600 rounded-lg py-1.5 px-2.5 dark:bg-gray-700 dark:text-white focus:ring-emerald-500 focus:border-emerald-500">
                            <p class="text-[10px] text-gray-400 mt-0.5">+500 = prix de base + 500</p>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Stock initial</label>
                            <input type="number" name="current_stock" value="0" min="0" class="w-full text-sm border border-gray-300 dark:border-gray-600 rounded-lg py-1.5 px-2.5 dark:bg-gray-700 dark:text-white focus:ring-emerald-500 focus:border-emerald-500">
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Code-barres</label>
                            <input type="text" name="barcode" placeholder="EAN13 / Code128" class="w-full text-sm border border-gray-300 dark:border-gray-600 rounded-lg py-1.5 px-2.5 dark:bg-gray-700 dark:text-white focus:ring-emerald-500 focus:border-emerald-500">
                        </div>
                    </div>
                </div>
                <div>
                    <p class="text-xs font-semibold text-gray-700 dark:text-gray-300 mb-1 uppercase tracking-wide">Attributs</p>
                    <p class="text-[10px] text-gray-400 mb-2">Decrivez les caracteristiques de cette variante.</p>
                    <div class="grid grid-cols-2 gap-2">
                        <input type="text" name="attr_key[]" value="Taille" class="text-sm border border-gray-300 dark:border-gray-600 rounded-lg py-1.5 px-2.5 dark:bg-gray-700 dark:text-white bg-gray-50 focus:ring-emerald-500 focus:border-emerald-500">
                        <input type="text" name="attr_value[]" placeholder="Ex: L, XL, 42..." class="text-sm border border-gray-300 dark:border-gray-600 rounded-lg py-1.5 px-2.5 dark:bg-gray-700 dark:text-white focus:ring-emerald-500 focus:border-emerald-500">
                        <input type="text" name="attr_key[]" value="Couleur" class="text-sm border border-gray-300 dark:border-gray-600 rounded-lg py-1.5 px-2.5 dark:bg-gray-700 dark:text-white bg-gray-50 focus:ring-emerald-500 focus:border-emerald-500">
                        <input type="text" name="attr_value[]" placeholder="Ex: Rouge, Bleu, Noir..." class="text-sm border border-gray-300 dark:border-gray-600 rounded-lg py-1.5 px-2.5 dark:bg-gray-700 dark:text-white focus:ring-emerald-500 focus:border-emerald-500">
                        <input type="text" name="attr_key[]" value="Poids" class="text-sm border border-gray-300 dark:border-gray-600 rounded-lg py-1.5 px-2.5 dark:bg-gray-700 dark:text-white bg-gray-50 focus:ring-emerald-500 focus:border-emerald-500">
                        <input type="text" name="attr_value[]" placeholder="Ex: 500g, 1kg, 25kg..." class="text-sm border border-gray-300 dark:border-gray-600 rounded-lg py-1.5 px-2.5 dark:bg-gray-700 dark:text-white focus:ring-emerald-500 focus:border-emerald-500">
                        <input type="text" name="attr_key[]" value="Dimensions" class="text-sm border border-gray-300 dark:border-gray-600 rounded-lg py-1.5 px-2.5 dark:bg-gray-700 dark:text-white bg-gray-50 focus:ring-emerald-500 focus:border-emerald-500">
                        <input type="text" name="attr_value[]" placeholder="Ex: 30x20x10 cm" class="text-sm border border-gray-300 dark:border-gray-600 rounded-lg py-1.5 px-2.5 dark:bg-gray-700 dark:text-white focus:ring-emerald-500 focus:border-emerald-500">
                        <input type="text" name="attr_key[]" value="Matiere" class="text-sm border border-gray-300 dark:border-gray-600 rounded-lg py-1.5 px-2.5 dark:bg-gray-700 dark:text-white bg-gray-50 focus:ring-emerald-500 focus:border-emerald-500">
                        <input type="text" name="attr_value[]" placeholder="Ex: Coton, Cuir, Plastique..." class="text-sm border border-gray-300 dark:border-gray-600 rounded-lg py-1.5 px-2.5 dark:bg-gray-700 dark:text-white focus:ring-emerald-500 focus:border-emerald-500">
                        <input type="text" name="attr_key[]" placeholder="Autre attribut..." class="text-sm border border-gray-300 dark:border-gray-600 rounded-lg py-1.5 px-2.5 dark:bg-gray-700 dark:text-white focus:ring-emerald-500 focus:border-emerald-500">
                        <input type="text" name="attr_value[]" placeholder="Valeur..." class="text-sm border border-gray-300 dark:border-gray-600 rounded-lg py-1.5 px-2.5 dark:bg-gray-700 dark:text-white focus:ring-emerald-500 focus:border-emerald-500">
                    </div>
                </div>
                <button type="submit" class="w-full sm:w-auto px-4 py-2 text-sm bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 font-medium transition-colors">
                    <i class="fas fa-plus mr-1"></i>Ajouter la variante
                </button>
            </form>
        </details>
    </div>

    {# Actions #}
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 sm:p-6">
        <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-3 sm:mb-4">Actions</h2>
        <div class="flex flex-wrap gap-2">
            <a href="{{ path('manager_pos_products_edit', {id: product.id}) }}" class="inline-flex items-center px-4 py-2 bg-emerald-600 text-white rounded-lg text-sm hover:bg-emerald-700 transition-colors">
                <i class="fas fa-edit mr-2"></i>Modifier
            </a>
            <button type="button" data-modal-target="confirm-modal-dup-product" data-modal-toggle="confirm-modal-dup-product" data-no-loader class="inline-flex items-center px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700 transition-colors">
                <i class="fas fa-copy mr-2"></i>Dupliquer
            </button>
            {% include 'components/pos/_confirm_modal.html.twig' with {
                modal_id: 'dup-product',
                title: 'Dupliquer le produit',
                message: 'Une copie de « ' ~ product.name ~ ' » sera creee avec un nouveau SKU. Confirmer ?',
                action_url: path('manager_pos_products_duplicate', {id: product.id}),
                csrf_token_name: 'duplicate_product_' ~ product.id,
                confirm_label: 'Dupliquer',
                confirm_color: 'purple',
            } %}
            <button type="button" data-modal-target="confirm-modal-del-product" data-modal-toggle="confirm-modal-del-product" data-no-loader class="inline-flex items-center px-4 py-2 bg-red-600 text-white rounded-lg text-sm hover:bg-red-700 transition-colors">
                <i class="fas fa-trash mr-2"></i>Supprimer
            </button>
            {% include 'components/pos/_confirm_modal.html.twig' with {
                modal_id: 'del-product',
                title: 'Supprimer le produit',
                message: 'Supprimer « ' ~ product.name ~ ' » ? Cette action est irreversible.',
                action_url: path('manager_pos_products_delete', {id: product.id}),
                csrf_token_name: 'delete_product_' ~ product.id,
            } %}
        </div>
    </div>

    {# Historique / Journal d'audit produit #}
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 sm:p-6">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
                <i class="fas fa-clock-rotate-left mr-2 text-gray-400"></i>Historique ({{ productHistory|length }})
            </h2>
        </div>

        {% if productHistory|length > 0 %}
            {% set actionColors = {
                'created': 'emerald', 'updated': 'blue', 'deleted': 'red', 'price_changed': 'purple',
                'stock_adjusted': 'orange', 'image_added': 'teal', 'image_removed': 'pink',
                'image_primary_set': 'cyan', 'sold': 'indigo', 'variant_added': 'violet',
                'variant_removed': 'rose', 'duplicated': 'purple', 'imported': 'sky',
                'activated': 'green', 'deactivated': 'gray', 'stock_in': 'emerald',
                'stock_out': 'orange', 'stock_loss': 'red', 'stock_return': 'blue',
                'inventory_adjusted': 'yellow',
                'sale_voided': 'pink',
                'refunded': 'cyan',
                'restocked': 'teal',
            } %}
            {% set actionIcons = {
                'created': 'fa-plus-circle', 'updated': 'fa-pen', 'deleted': 'fa-trash',
                'price_changed': 'fa-tag', 'stock_adjusted': 'fa-sliders', 'image_added': 'fa-image',
                'image_removed': 'fa-image', 'image_primary_set': 'fa-star', 'sold': 'fa-shopping-cart',
                'variant_added': 'fa-layer-group', 'variant_removed': 'fa-layer-group',
                'duplicated': 'fa-copy', 'imported': 'fa-file-import', 'activated': 'fa-toggle-on',
                'deactivated': 'fa-toggle-off', 'stock_in': 'fa-arrow-down', 'stock_out': 'fa-arrow-up',
                'stock_loss': 'fa-exclamation-triangle', 'stock_return': 'fa-undo',
                'inventory_adjusted': 'fa-clipboard-check',
                'sale_voided': 'fa-ban',
                'refunded': 'fa-hand-holding-dollar',
                'restocked': 'fa-truck-loading',
            } %}

            <div class="relative">
                <div class="absolute left-4 top-0 bottom-0 w-0.5 bg-gray-200 dark:bg-gray-700"></div>
                <div class="space-y-3">
                    {% for entry in productHistory %}
                        {% set color = actionColors[entry.action]|default('gray') %}
                        {% set icon = actionIcons[entry.action]|default('fa-circle') %}
                        <div class="relative pl-10">
                            <div class="absolute left-2.5 top-1 w-3 h-3 rounded-full bg-{{ color }}-500 ring-2 ring-white dark:ring-gray-800"></div>
                            <div class="bg-gray-50 dark:bg-gray-900/30 rounded-lg p-3">
                                <div class="flex items-start justify-between gap-2">
                                    <span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-full bg-{{ color }}-100 text-{{ color }}-700 dark:bg-{{ color }}-900/30 dark:text-{{ color }}-400 whitespace-nowrap">
                                        <i class="fas {{ icon }} text-[10px]"></i>
                                        {{ entry.actionLabel }}
                                    </span>
                                    <span class="text-xs text-gray-400 whitespace-nowrap">{{ entry.createdAt|date('d/m/Y H:i') }}</span>
                                </div>
                                {% if entry.description %}
                                    <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">{{ entry.description }}</p>
                                {% endif %}
                                {% if entry.oldValues or entry.newValues %}
                                    <div class="mt-2 flex flex-wrap gap-2 text-xs">
                                        {% if entry.oldValues %}
                                            {% for key, val in entry.oldValues %}
                                                {% if entry.newValues[key] is defined and entry.newValues[key] != val %}
                                                    <span class="inline-flex items-center gap-1 px-1.5 py-0.5 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded">
                                                        <strong>{{ key }}</strong>: {{ val }} <i class="fas fa-arrow-right text-[8px] mx-0.5"></i> {{ entry.newValues[key] }}
                                                    </span>
                                                {% endif %}
                                            {% endfor %}
                                        {% endif %}
                                    </div>
                                {% endif %}
                                <div class="mt-1.5 flex items-center gap-3 text-xs text-gray-400">
                                    {% if entry.user %}
                                        <span><i class="fas fa-user mr-1"></i>{{ entry.user.fullName }}</span>
                                    {% else %}
                                        <span><i class="fas fa-robot mr-1"></i>Systeme</span>
                                    {% endif %}
                                    {% if entry.ipAddress %}
                                        <span><i class="fas fa-globe mr-1"></i>{{ entry.ipAddress }}</span>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        {% else %}
            <div class="text-center py-6 text-gray-400">
                <i class="fas fa-clock-rotate-left text-3xl text-gray-300 dark:text-gray-600 mb-2"></i>
                <p class="text-sm">Aucun historique pour ce produit</p>
            </div>
        {% endif %}
    </div>

    {# Metadonnees #}
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 sm:p-6">
        <dl class="flex flex-wrap gap-x-6 gap-y-1 text-xs text-gray-500 dark:text-gray-400">
            <div class="flex gap-1"><dt>Cree le</dt><dd class="font-medium">{{ product.createdAt|date('d/m/Y H:i') }}</dd></div>
            <div class="flex gap-1"><dt>Modifie le</dt><dd class="font-medium">{{ product.updatedAt|date('d/m/Y H:i') }}</dd></div>
            {% if product.createdBy %}<div class="flex gap-1"><dt>Cree par</dt><dd class="font-medium">{{ product.createdBy.fullName }}</dd></div>{% endif %}
        </dl>
    </div>
</div>
{% endblock %}