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

{% block page_title %}Licences e-commerce{% endblock %}

{% set status_colors = {
    'active': 'bg-green-100 text-green-800',
    'suspended': 'bg-yellow-100 text-yellow-800',
    'expired': 'bg-gray-100 text-gray-800',
    'revoked': 'bg-red-100 text-red-800'
} %}
{% set status_labels = {
    'active': 'Active', 'suspended': 'Suspendue', 'expired': 'Expirée', 'revoked': 'Révoquée'
} %}

{% block content %}
<div class="mb-8">
    <div class="sm:flex sm:items-center sm:justify-between">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Licences</h1>
            <p class="mt-2 text-sm text-gray-700">Licences du connecteur e-commerce (WooCommerce), par boutique.</p>
        </div>
        <div class="mt-4 sm:mt-0">
            <a href="{{ path('admin_licenses_new') }}" class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                <i class="fas fa-plus mr-2"></i>
                Émettre une licence
            </a>
        </div>
    </div>
</div>

{# Filtres #}
<div class="bg-white shadow rounded-lg mb-6">
    <div class="px-4 py-5 sm:p-6">
        <form method="get" action="{{ path('admin_licenses_index') }}" class="grid grid-cols-1 gap-4 sm:grid-cols-3">
            <div>
                <label for="search" class="block text-sm font-medium text-gray-700 mb-1">Recherche</label>
                <input type="text" name="search" id="search" value="{{ filters.search|default('') }}"
                       class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm text-gray-900 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                       placeholder="Boutique, préfixe de clé, URL...">
            </div>
            <div>
                <label for="status" class="block text-sm font-medium text-gray-700 mb-1">Statut</label>
                <select name="status" id="status" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm text-gray-900 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                    <option value="">Tous</option>
                    {% for value, label in status_labels %}
                        <option value="{{ value }}" {{ filters.status == value ? 'selected' : '' }}>{{ label }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="flex items-end">
                <button type="submit" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                    Filtrer
                </button>
            </div>
        </form>
    </div>
</div>

<div class="bg-white shadow rounded-lg overflow-hidden">
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Boutique</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Clé</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Statut</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Plan</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Expiration</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Site</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Dernier contact</th>
                    <th class="px-4 py-3"></th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                {% for license in licenses %}
                    <tr class="hover:bg-gray-50">
                        <td class="px-4 py-3 text-sm font-medium text-gray-900">{{ license.company.name }}</td>
                        <td class="px-4 py-3 text-sm font-mono text-gray-600">{{ license.keyPrefix }}…</td>
                        <td class="px-4 py-3">
                            <span class="inline-flex px-2 text-xs font-semibold leading-5 rounded-full {{ status_colors[license.status.value] }}">
                                {{ status_labels[license.status.value] }}
                            </span>
                        </td>
                        <td class="px-4 py-3 text-sm text-gray-600">{{ license.plan }}</td>
                        <td class="px-4 py-3 text-sm text-gray-600">
                            {{ license.expiresAt ? license.expiresAt|date('d/m/Y') : 'Perpétuelle' }}
                        </td>
                        <td class="px-4 py-3 text-sm text-gray-600">{{ license.siteUrl ?? '—' }}</td>
                        <td class="px-4 py-3 text-sm text-gray-600">
                            {{ license.lastSeenAt ? license.lastSeenAt|date('d/m/Y H:i') : '—' }}
                        </td>
                        <td class="px-4 py-3 text-right text-sm">
                            <a href="{{ path('admin_licenses_show', {uuid: license.uuid}) }}" class="text-indigo-600 hover:text-indigo-900">Détail</a>
                        </td>
                    </tr>
                {% else %}
                    <tr>
                        <td colspan="8" class="px-4 py-8 text-center text-sm text-gray-500">Aucune licence.</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% if licenses.getTotalItemCount > 0 %}
        <div class="px-4 py-3 border-t border-gray-200">
            {{ knp_pagination_render(licenses) }}
        </div>
    {% endif %}
</div>
{% endblock %}