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

{% block page_title %}Import produits CSV{% endblock %}

{% block content %}
<div class="px-4 py-6 max-w-6xl mx-auto">
    <div class="mb-6 flex items-center justify-between">
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
            <svg class="w-7 h-7 inline mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg>
            Import produits CSV
        </h1>
        <a href="{{ path('manager_pos_products_index') }}" class="text-sm text-blue-600 hover:text-blue-700">&larr; Retour</a>
    </div>

    {# Formulaire upload #}
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-6">
        <form method="POST" action="{{ path('manager_pos_products_import') }}" enctype="multipart/form-data" class="space-y-5">
            <input type="hidden" name="_token" value="{{ csrf_token('import_products') }}">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Fichier CSV</label>
                <input type="file" name="csv_file" accept=".csv,.txt" required
                       class="w-full text-sm text-gray-500 file:mr-3 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
                <p class="text-xs text-gray-400 mt-1">Format CSV avec séparateur point-virgule (;). Encodage UTF-8.</p>
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Séparateur</label>
                    <select name="delimiter" class="w-full border border-gray-300 dark:border-gray-600 rounded-lg py-2 px-3 text-sm dark:bg-gray-700 dark:text-white">
                        <option value=";" selected>Point-virgule (;)</option>
                        <option value=",">Virgule (,)</option>
                        <option value="\t">Tabulation</option>
                    </select>
                </div>
                <div class="flex items-end">
                    <label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
                        <input type="checkbox" name="update_existing" value="1" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                        Mettre à jour les produits existants (par SKU)
                    </label>
                </div>
            </div>

            <div class="flex gap-3">
                <button type="submit" class="px-6 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors">
                    <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg>
                    Importer
                </button>
                <a href="{{ path('manager_pos_products_import_template') }}" class="px-6 py-2.5 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 font-medium rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                    <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                    Télécharger le template
                </a>
            </div>
        </form>
    </div>

    {# Colonnes attendues #}
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-6">
        <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">Colonnes attendues</h2>
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="text-xs text-gray-500 uppercase bg-gray-50 dark:bg-gray-700">
                    <tr>
                        <th class="px-3 py-2 text-left">Colonne</th>
                        <th class="px-3 py-2 text-left">Requis</th>
                        <th class="px-3 py-2 text-left">Description</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
                    <tr><td class="px-3 py-1.5 font-medium">name</td><td class="px-3 py-1.5 text-red-500">Oui</td><td class="px-3 py-1.5 text-gray-500">Nom du produit</td></tr>
                    <tr><td class="px-3 py-1.5 font-medium">sku</td><td class="px-3 py-1.5">Non</td><td class="px-3 py-1.5 text-gray-500">Code SKU (auto-généré si vide)</td></tr>
                    <tr><td class="px-3 py-1.5 font-medium">barcode</td><td class="px-3 py-1.5">Non</td><td class="px-3 py-1.5 text-gray-500">Code-barres</td></tr>
                    <tr><td class="px-3 py-1.5 font-medium">price</td><td class="px-3 py-1.5">Non</td><td class="px-3 py-1.5 text-gray-500">Prix de vente (FCFA)</td></tr>
                    <tr><td class="px-3 py-1.5 font-medium">costPrice</td><td class="px-3 py-1.5">Non</td><td class="px-3 py-1.5 text-gray-500">Prix d'achat</td></tr>
                    <tr><td class="px-3 py-1.5 font-medium">taxRate</td><td class="px-3 py-1.5">Non</td><td class="px-3 py-1.5 text-gray-500">Taux TVA (%)</td></tr>
                    <tr><td class="px-3 py-1.5 font-medium">currentStock</td><td class="px-3 py-1.5">Non</td><td class="px-3 py-1.5 text-gray-500">Stock initial</td></tr>
                    <tr><td class="px-3 py-1.5 font-medium">minStock</td><td class="px-3 py-1.5">Non</td><td class="px-3 py-1.5 text-gray-500">Seuil stock minimum</td></tr>
                    <tr><td class="px-3 py-1.5 font-medium">category</td><td class="px-3 py-1.5">Non</td><td class="px-3 py-1.5 text-gray-500">Nom de catégorie (doit exister)</td></tr>
                    <tr><td class="px-3 py-1.5 font-medium">unit</td><td class="px-3 py-1.5">Non</td><td class="px-3 py-1.5 text-gray-500">Unité (pièce, kg, litre...)</td></tr>
                    <tr><td class="px-3 py-1.5 font-medium">description</td><td class="px-3 py-1.5">Non</td><td class="px-3 py-1.5 text-gray-500">Description du produit</td></tr>
                    <tr><td class="px-3 py-1.5 font-medium">isService</td><td class="px-3 py-1.5">Non</td><td class="px-3 py-1.5 text-gray-500">1/oui pour service (pas de stock)</td></tr>
                    <tr><td class="px-3 py-1.5 font-medium">isActive</td><td class="px-3 py-1.5">Non</td><td class="px-3 py-1.5 text-gray-500">1/oui pour actif (défaut: oui)</td></tr>
                </tbody>
            </table>
        </div>
    </div>

    {# Résultats import #}
    {% if results is not null %}
    <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-3">Résultats de l'import</h2>

        <div class="grid grid-cols-3 gap-4 mb-4">
            <div class="bg-green-50 dark:bg-green-900/20 rounded-lg p-3 text-center">
                <p class="text-2xl font-bold text-green-600">{{ results.created }}</p>
                <p class="text-xs text-green-700">Créés</p>
            </div>
            <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-3 text-center">
                <p class="text-2xl font-bold text-blue-600">{{ results.updated }}</p>
                <p class="text-xs text-blue-700">Mis à jour</p>
            </div>
            <div class="bg-red-50 dark:bg-red-900/20 rounded-lg p-3 text-center">
                <p class="text-2xl font-bold text-red-600">{{ results.errors|length }}</p>
                <p class="text-xs text-red-700">Erreurs</p>
            </div>
        </div>

        {% if results.errors|length > 0 %}
            <div class="mt-4">
                <h3 class="text-sm font-semibold text-red-600 mb-2">Détail des erreurs</h3>
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead class="bg-red-50 dark:bg-red-900/20 text-red-700">
                            <tr>
                                <th class="px-3 py-2 text-left">Ligne</th>
                                <th class="px-3 py-2 text-left">Champ</th>
                                <th class="px-3 py-2 text-left">Message</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for error in results.errors %}
                                <tr class="border-b border-red-100">
                                    <td class="px-3 py-1.5 font-medium">{{ error.row }}</td>
                                    <td class="px-3 py-1.5">{{ error.field|default('—') }}</td>
                                    <td class="px-3 py-1.5 text-gray-600">{{ error.message }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        {% endif %}
    </div>
    {% endif %}
</div>
{% endblock %}