{% extends 'base.html.twig' %}

{% block title %}Catalogue | CARTECADEAU{% endblock %}

{% block body %}
{# ============================================================
   Mapping marque → couleurs — IDENTIQUE à home/index.html.twig.
   Pour éviter la duplication, tu peux extraire ce bloc dans un
   fichier partiel : templates/_partials/_brand_map.html.twig
   puis : {% include '_partials/_brand_map.html.twig' %}
   ============================================================ #}
{% set brandMap = {
    'PlayStation':    {'primary': '#0070D1', 'secondary': '#003791', 'initials': 'PS'},
    'Xbox':           {'primary': '#107C10', 'secondary': '#0E5E0E', 'initials': 'XB'},
    'Steam':          {'primary': '#1B2838', 'secondary': '#66C0F4', 'initials': 'ST'},
    'Netflix':        {'primary': '#E50914', 'secondary': '#831010', 'initials': 'N'},
    'Spotify':        {'primary': '#1DB954', 'secondary': '#0E6B2F', 'initials': 'SP'},
    'Amazon':         {'primary': '#FF9900', 'secondary': '#232F3E', 'initials': 'AZ'},
    'Apple':          {'primary': '#A2AAAD', 'secondary': '#1C1C1E', 'initials': 'iT'},
    'iTunes':         {'primary': '#A2AAAD', 'secondary': '#1C1C1E', 'initials': 'iT'},
    'Google Play':    {'primary': '#34A853', 'secondary': '#FBBC04', 'initials': 'GP'},
    'Free Fire':      {'primary': '#FF6A00', 'secondary': '#E2231A', 'initials': 'FF'},
    'Mobile Legends': {'primary': '#22D3EE', 'secondary': '#1E1B4B', 'initials': 'ML'},
    'PUBG Mobile':    {'primary': '#F2A900', 'secondary': '#1A1A1A', 'initials': 'PG'},
    'Genshin Impact': {'primary': '#FFB347', 'secondary': '#5B3E91', 'initials': 'GI'},
    'Valorant':       {'primary': '#FF4655', 'secondary': '#0F1923', 'initials': 'VA'},
    'Riot':           {'primary': '#FF4655', 'secondary': '#0F1923', 'initials': 'RT'},
    'Fortnite':       {'primary': '#9F4DEA', 'secondary': '#00FFFF', 'initials': 'FN'},
    'Roblox':         {'primary': '#E2231A', 'secondary': '#393B3F', 'initials': 'RB'},
    'Nintendo':       {'primary': '#E60012', 'secondary': '#1F1F1F', 'initials': 'NS'},
    'Twitch':         {'primary': '#9146FF', 'secondary': '#392E5C', 'initials': 'TV'},
} %}

<section class="container catalog-shell">
    <div class="catalog-headline">
        <p class="kicker">Wupex Marketplace</p>
        <h1>Catalogue <span class="accent">Aurora Noir</span></h1>
        <p>Produits synchronisés depuis Wupex. Prix convertis de {{ pricingContext.baseCurrency }} vers {{ pricingContext.displayCurrency }} avec commission {{ pricingContext.commissionPercent|number_format(2, ',', ' ') }}%.</p>
        <p class="meta">Taux: 1 {{ pricingContext.baseCurrency }} = {{ pricingContext.exchangeRate|number_format(6, '.', ' ') }} {{ pricingContext.displayCurrency }} (source: {{ pricingContext.rateSource }})</p>
    </div>

    {% set baseParams = {} %}
    {% if activeCategory %}{% set baseParams = baseParams|merge({category: activeCategory}) %}{% endif %}
    {% if searchTerm %}{% set baseParams = baseParams|merge({q: searchTerm}) %}{% endif %}
    {% if sort %}{% set baseParams = baseParams|merge({sort: sort}) %}{% endif %}
    {% set typedParams = activeType ? baseParams|merge({type: activeType}) : baseParams %}

    <div class="catalog-filters">
        <a href="{{ path('app_catalog_index', baseParams) }}" class="chip {{ activeType is null ? 'active' : '' }}">Tout</a>
        <a href="{{ path('app_catalog_index', baseParams|merge({type: 'voucher'})) }}" class="chip {{ activeType == 'voucher' ? 'active' : '' }}">Vouchers</a>
        <a href="{{ path('app_catalog_index', baseParams|merge({type: 'topup'})) }}" class="chip {{ activeType == 'topup' ? 'active' : '' }}">Top-up jeux</a>
    </div>

    <div class="catalog-toolbar">
        <form method="get" action="{{ path('app_catalog_index') }}" class="catalog-search">
            {% if activeType %}<input type="hidden" name="type" value="{{ activeType }}">{% endif %}
            <input type="search" name="q" value="{{ searchTerm }}" placeholder="Rechercher un produit, un SKU...">
            <select name="category">
                <option value="">Toutes les catégories</option>
                {% for cat in categories %}
                    <option value="{{ cat }}" {{ activeCategory == cat ? 'selected' : '' }}>{{ cat }}</option>
                {% endfor %}
            </select>
            <select name="sort">
                <option value="popularity" {{ sort == 'popularity' ? 'selected' : '' }}>Tri par défaut</option>
                <option value="price_asc" {{ sort == 'price_asc' ? 'selected' : '' }}>Prix croissant</option>
                <option value="price_desc" {{ sort == 'price_desc' ? 'selected' : '' }}>Prix décroissant</option>
                <option value="newest" {{ sort == 'newest' ? 'selected' : '' }}>Nouveautés</option>
            </select>
            <button type="submit" class="btn">Filtrer</button>
            {% if searchTerm or activeCategory %}
                <a href="{{ path('app_catalog_index', activeType ? {type: activeType} : {}) }}" class="chip">Réinitialiser</a>
            {% endif %}
        </form>
        <span class="catalog-count">{{ pagination.total }} produit{{ pagination.total > 1 ? 's' : '' }}</span>
    </div>

    {% if catalogItems is empty %}
        <div class="card empty-state">
            <h3>Aucun produit</h3>
            {% if searchTerm or activeCategory or activeType %}
                <p>Aucun résultat pour ces filtres. Essaie d'élargir ta recherche.</p>
            {% else %}
                <p>Lance la commande <strong>app:catalog:sync-wupex</strong> pour charger tes produits depuis Wupex.</p>
            {% endif %}
        </div>
    {% else %}
        <div class="catalog-grid">
            {% for item in catalogItems %}
                {% set product = item.product %}
                {% set b = brandMap[product.category] ?? null %}
                <article class="product-card {{ b ? 'branded' : '' }} {{ product.type }}"
                         {% if b %}style="--brand-1: {{ b.primary }}; --brand-2: {{ b.secondary }};"{% endif %}>
                    <div class="pill">{{ product.type == 'topup' ? 'Top-up' : 'Voucher' }}</div>
                    <div class="product-media">
                        {% if product.imageUrl %}
                            <img src="{{ product.imageUrl }}" alt="{{ product.name }}" class="product-thumb" loading="lazy"
                                 onerror="this.style.display='none';this.nextElementSibling.style.display='grid';">
                            <div class="product-emblem {{ b ? 'branded' : '' }}" style="display:none" aria-hidden="true">
                                {% if b %}<span class="emblem-shine"></span><span class="emblem-text">{{ b.initials }}</span>
                                {% else %}{{ (product.category ?: product.name)|slice(0, 2)|upper }}{% endif %}
                            </div>
                        {% else %}
                            <div class="product-emblem {{ b ? 'branded' : '' }}" aria-hidden="true">
                                {% if b %}<span class="emblem-shine"></span><span class="emblem-text">{{ b.initials }}</span>
                                {% else %}{{ (product.category ?: product.name)|slice(0, 2)|upper }}{% endif %}
                            </div>
                        {% endif %}
                    </div>
                    {% if product.category %}<p class="meta cat">{{ product.category }}</p>{% endif %}
                    {% if catalogShowStock %}
                        <p class="stock-badge {{ product.enabled ? 'ok' : 'ko' }}">{{ product.enabled ? 'En stock' : 'Rupture' }}</p>
                    {% endif %}
                    <h3>{{ product.name }}</h3>
                    <p class="meta">SKU: {{ product.sku }}</p>
                    {% if product.subType %}
                        <p class="meta">SubType top-up: {{ product.subType }}</p>
                    {% endif %}
                    <div class="price-row">
                        <div>
                            <span class="price">{{ item.displayPrice|number_format(pricingContext.decimals, ',', ' ') }} {{ pricingContext.displayCurrency }}</span>
                            <small>Prix achat: {{ product.purchasePrice|number_format(2, ',', ' ') }} {{ pricingContext.baseCurrency }}</small>
                        </div>
                        <form method="post" action="{{ path('app_cart_add', {id: product.id}) }}">
                            <input type="hidden" name="_token" value="{{ csrf_token('cart_add_' ~ product.id) }}">
                            {% if product.enabled %}
                                <button type="submit" class="btn btn-buy">Ajouter</button>
                            {% else %}
                                <button type="button" class="btn btn-ghost btn-buy" disabled>Indisponible</button>
                            {% endif %}
                        </form>
                    </div>
                </article>
            {% endfor %}
        </div>

        {% if pagination.pages > 1 %}
            <nav class="pagination" aria-label="Pagination du catalogue">
                {% if pagination.page > 1 %}
                    <a class="page-link" href="{{ path('app_catalog_index', typedParams|merge({page: pagination.page - 1})) }}">&laquo; Précédent</a>
                {% else %}
                    <span class="page-link disabled">&laquo; Précédent</span>
                {% endif %}

                {% for p in 1..pagination.pages %}
                    {% if p == pagination.page %}
                        <span class="page-current">{{ p }}</span>
                    {% elseif p == 1 or p == pagination.pages or (p >= pagination.page - 2 and p <= pagination.page + 2) %}
                        <a class="page-link" href="{{ path('app_catalog_index', typedParams|merge({page: p})) }}">{{ p }}</a>
                    {% elseif p == pagination.page - 3 or p == pagination.page + 3 %}
                        <span class="page-link disabled">&hellip;</span>
                    {% endif %}
                {% endfor %}

                {% if pagination.page < pagination.pages %}
                    <a class="page-link" href="{{ path('app_catalog_index', typedParams|merge({page: pagination.page + 1})) }}">Suivant &raquo;</a>
                {% else %}
                    <span class="page-link disabled">Suivant &raquo;</span>
                {% endif %}
            </nav>
        {% endif %}
    {% endif %}
</section>
{% endblock %}