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

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

{% block content %}
<div class="space-y-4 sm:space-y-6">
    {# Header #}
    <div class="bg-gradient-to-r from-indigo-600 to-purple-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">{{ service.name }}</h1>
                    {% if service.isActive %}
                        <span class="px-2 py-0.5 text-xs rounded-full bg-green-400 text-green-900 font-semibold whitespace-nowrap">Actif</span>
                    {% else %}
                        <span class="px-2 py-0.5 text-xs rounded-full bg-gray-400 text-gray-900 font-semibold whitespace-nowrap">Inactif</span>
                    {% endif %}
                </div>
                <p class="mt-1 text-indigo-100 text-sm">{% if service.sku %}SKU: {{ service.sku }} | {% endif %}{% if service.serviceType %}<i class="fas fa-cog mr-1"></i>{{ service.serviceType }}{% endif %}</p>
            </div>
            <div class="flex gap-2 flex-shrink-0">
                <a href="{{ path('manager_pos_services_edit', {id: service.id}) }}" class="inline-flex items-center px-3 py-2 bg-white text-indigo-700 rounded-lg text-sm font-medium hover:bg-indigo-50 transition-colors">
                    <i class="fas fa-edit mr-2"></i><span class="hidden sm:inline">Modifier</span>
                </a>
                <a href="{{ path('manager_pos_services_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 service.category %}
                        <span class="inline-block px-2 py-0.5 rounded bg-{{ service.category.color|default('gray') }}-100 text-{{ service.category.color|default('gray') }}-800 text-xs sm:text-sm">{{ service.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 de service</dt>
                <dd class="text-sm font-medium text-gray-900 dark:text-white mt-1">
                    {% if service.serviceType %}
                        <span class="inline-block px-2 py-0.5 rounded bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400 text-xs sm:text-sm">{{ service.serviceType }}</span>
                    {% else %}
                        <span class="text-gray-400">Non defini</span>
                    {% endif %}
                </dd>
            </div>
            <div>
                <dt class="text-xs sm:text-sm text-gray-500 dark:text-gray-400">Duree estimee</dt>
                <dd class="text-sm font-medium text-gray-900 dark:text-white mt-1">
                    {% if service.estimatedDuration %}
                        <i class="fas fa-clock mr-1 text-gray-400"></i>{{ service.estimatedDuration }} min
                    {% else %}
                        <span class="text-gray-400">Non definie</span>
                    {% endif %}
                </dd>
            </div>
            {% if service.sku %}
            <div>
                <dt class="text-xs sm:text-sm text-gray-500 dark:text-gray-400">SKU</dt>
                <dd class="text-sm font-medium text-gray-900 dark:text-white mt-1 font-mono">{{ service.sku }}</dd>
            </div>
            {% endif %}
            {% if service.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">{{ service.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-indigo-50 dark:bg-indigo-900/20 rounded-lg">
                <div class="text-lg sm:text-2xl font-bold text-indigo-700 dark:text-indigo-400">{{ settings.formatPrice(service.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">{{ service.costPrice ? settings.formatPrice(service.costPrice) : '—' }}</div>
                <div class="text-[10px] sm:text-xs text-gray-500 mt-1">Cout de revient</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">{{ service.margin ? settings.formatPrice(service.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">{{ service.marginPercent ? service.marginPercent|number_format(1) ~ '%' : '—' }}</div>
                <div class="text-[10px] sm:text-xs text-gray-500 mt-1">Marge %</div>
            </div>
        </div>
    </div>

    {# Variantes #}
    {% if service.variants is defined and service.variants|length > 0 %}
    <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">Variantes ({{ service.variants|length }})</h2>
        <div class="hidden sm:block overflow-x-auto">
            <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-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">Statut</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                    {% for variant in service.variants %}
                    <tr>
                        <td class="px-4 py-2 text-sm font-medium text-gray-900 dark:text-white">{{ variant.name }}</td>
                        <td class="px-4 py-2 text-sm font-mono text-gray-600 dark:text-gray-400">{{ variant.sku }}</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, ',', ' ') }} FCFA
                        </td>
                        <td class="px-4 py-2 text-center">
                            {% if variant.isActive|default(true) %}
                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Actif</span>
                            {% else %}
                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">Inactif</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {# Cards mobile #}
        <div class="sm:hidden space-y-2">
            {% for variant in service.variants %}
            <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-3">
                <div class="flex items-center justify-between">
                    <span class="text-sm font-medium text-gray-900 dark:text-white">{{ variant.name }}</span>
                    <span class="text-xs font-mono text-gray-500">{{ variant.sku }}</span>
                </div>
                <div class="flex items-center gap-3 mt-1.5 text-xs text-gray-500">
                    <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>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    {# 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_services_edit', {id: service.id}) }}" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg text-sm hover:bg-indigo-700 transition-colors">
                <i class="fas fa-edit mr-2"></i>Modifier
            </a>
            <button type="button" data-modal-target="confirm-modal-dup-service" data-modal-toggle="confirm-modal-dup-service" 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-service',
                title: 'Dupliquer le service',
                message: 'Une copie de « ' ~ service.name ~ ' » sera creee avec un nouveau SKU. Confirmer ?',
                action_url: path('manager_pos_services_duplicate', {id: service.id}),
                csrf_token_name: 'duplicate_service_' ~ service.id,
                confirm_label: 'Dupliquer',
                confirm_color: 'purple',
            } %}
            <button type="button" data-modal-target="confirm-modal-del-service" data-modal-toggle="confirm-modal-del-service" 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-service',
                title: 'Supprimer le service',
                message: 'Supprimer « ' ~ service.name ~ ' » ? Cette action est irreversible.',
                action_url: path('manager_pos_services_delete', {id: service.id}),
                csrf_token_name: 'delete_service_' ~ service.id,
            } %}
        </div>
    </div>

    {# Historique #}
    <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 ({{ serviceHistory|length }})
            </h2>
        </div>

        {% if serviceHistory|length > 0 %}
            {% set actionColors = {
                'created': 'emerald', 'updated': 'blue', 'deleted': 'red', 'price_changed': 'purple',
                'sold': 'indigo', 'duplicated': 'purple', 'activated': 'green', 'deactivated': 'gray',
                'variant_added': 'violet', 'variant_removed': 'rose',
            } %}
            {% set actionIcons = {
                'created': 'fa-plus-circle', 'updated': 'fa-pen', 'deleted': 'fa-trash',
                'price_changed': 'fa-tag', 'sold': 'fa-shopping-cart', 'duplicated': 'fa-copy',
                'activated': 'fa-toggle-on', 'deactivated': 'fa-toggle-off',
                'variant_added': 'fa-layer-group', 'variant_removed': 'fa-layer-group',
            } %}

            <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 serviceHistory %}
                        {% 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 %}
                                <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 %}
                                </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 service</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">{{ service.createdAt|date('d/m/Y H:i') }}</dd></div>
            <div class="flex gap-1"><dt>Modifie le</dt><dd class="font-medium">{{ service.updatedAt|date('d/m/Y H:i') }}</dd></div>
            {% if service.createdBy is defined and service.createdBy %}<div class="flex gap-1"><dt>Cree par</dt><dd class="font-medium">{{ service.createdBy.fullName }}</dd></div>{% endif %}
        </dl>
    </div>
</div>
{% endblock %}