{% extends 'admin/_layout.html.twig' %}

{% block title %}Gerer les services - Administration - Association E-Cosplay{% endblock %}

{% block admin_content %}
<div class="page-container">
    <div class="flex items-center justify-between mb-8">
        <h1 class="text-2xl font-bold heading-page">Gerer les services</h1>
        <a href="{{ path('app_admin_status_index') }}" class="px-4 py-2 glass font-bold uppercase text-xs tracking-widest hover:bg-gray-900 hover:text-white transition-all">Retour au status</a>
    </div>

    {% for type, messages in app.flashes %}
        {% for message in messages %}
            <div class="mb-6 p-4 glass font-medium text-sm {{ type == 'success' ? 'border-green-300 text-green-800' : 'border-red-300 text-red-800' }}">
                {{ message }}
            </div>
        {% endfor %}
    {% endfor %}

    <div class="flex flex-col gap-8">

        {# Creer une categorie #}
        <section>
            <h2 class="text-xl font-bold uppercase mb-4">Nouvelle categorie</h2>
            <div class="glass p-6">
                <form method="post" action="{{ path('app_admin_status_category_create') }}" class="flex flex-wrap items-end gap-4">
                    <div class="flex-1 min-w-[200px]">
                        <label for="category_name" class="block text-xs font-bold uppercase tracking-wider mb-2">Nom</label>
                        <input id="category_name" type="text" name="name" required placeholder="Ex: Hebergement Web"
                               class="w-full px-4 py-3 glass text-sm font-bold focus:outline-none focus:border-indigo-600">
                    </div>
                    <div class="w-24">
                        <label for="category_position" class="block text-xs font-bold uppercase tracking-wider mb-2">Position</label>
                        <input id="category_position" type="number" name="position" value="0"
                               class="w-full px-4 py-3 glass text-sm font-bold focus:outline-none focus:border-indigo-600">
                    </div>
                    <button type="submit" class="px-6 py-3 glass bg-[#fabf04] font-bold uppercase text-sm tracking-widest hover:bg-yellow-500 transition-all hover:shadow-[2px_2px_0px_rgba(0,0,0,1)] active:shadow-none active:translate-x-1 active:translate-y-1">
                        Creer
                    </button>
                </form>
            </div>
        </section>

        {# Liste des categories + services #}
        {% for category in categories %}
            <section>
                <div class="flex items-center justify-between mb-3">
                    <h2 class="text-xl font-bold uppercase">{{ category.name }}</h2>
                    <div class="flex items-center gap-2">
                        <span class="text-xs text-gray-400">{{ category.services|length }} service(s)</span>
                        <form method="post" action="{{ path('app_admin_status_category_delete', {id: category.id}) }}" data-confirm="Supprimer la categorie '{{ category.name }}' et tous ses services ?">
                            <button type="submit" class="px-2 py-1 btn-glass text-red-600 font-bold uppercase text-[10px] tracking-wider">Supprimer</button>
                        </form>
                    </div>
                </div>

                {# Services existants #}
                {% if category.services|length > 0 %}
                    <div class="glass mb-4">
                        <table class="w-full text-sm">
                            <thead>
                                <tr class="glass-dark text-white">
                                    <th class="px-4 py-2 text-left font-bold uppercase text-xs tracking-widest">Service</th>
                                    <th class="px-4 py-2 text-left font-bold uppercase text-xs tracking-widest">URL</th>
                                    <th class="px-4 py-2 text-center font-bold uppercase text-xs tracking-widest">Status</th>
                                    <th class="px-4 py-2 text-center font-bold uppercase text-xs tracking-widest">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for service in category.services %}
                                    <tr class="border-b border-white/20 hover:bg-white/50">
                                        <td class="px-4 py-2 font-bold">{{ service.name }}</td>
                                        <td class="px-4 py-2 text-xs font-mono text-gray-500">{{ service.url ?? '—' }}</td>
                                        <td class="px-4 py-2 text-center">
                                            <span class="w-2.5 h-2.5 inline-block
                                                {% if service.status == 'up' %}bg-green-500
                                                {% elseif service.status == 'degraded' %}bg-yellow-500
                                                {% elseif service.status == 'down' %}bg-red-500
                                                {% elseif service.status == 'maintenance' %}bg-blue-500
                                                {% else %}bg-gray-400
                                                {% endif %}
                                            "></span>
                                        </td>
                                        <td class="px-4 py-2 text-center">
                                            <form method="post" action="{{ path('app_admin_status_service_delete', {id: service.id}) }}" data-confirm="Supprimer le service '{{ service.name }}' ?">
                                                <button type="submit" class="px-2 py-1 btn-glass text-red-600 font-bold uppercase text-[10px] tracking-wider">Supprimer</button>
                                            </form>
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% endif %}

                {# Creer un service dans cette categorie #}
                <div class="border-2 border-gray-200 bg-gray-50 p-4">
                    <form method="post" action="{{ path('app_admin_status_service_create') }}" class="flex flex-wrap items-end gap-3">
                        <input type="hidden" name="category_id" value="{{ category.id }}">
                        <div class="flex-1 min-w-[120px]">
                            <label for="service_name_{{ category.id }}" class="block text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">Nom</label>
                            <input id="service_name_{{ category.id }}" type="text" name="name" required placeholder="Ex: CRM E-Cosplay"
                                   class="w-full px-3 py-2 glass text-xs font-bold focus:outline-none focus:border-indigo-600">
                        </div>
                        <div class="flex-1 min-w-[120px]">
                            <label for="service_url_{{ category.id }}" class="block text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">URL</label>
                            <input id="service_url_{{ category.id }}" type="url" name="url" placeholder="https://..."
                                   class="w-full px-3 py-2 glass text-xs font-bold focus:outline-none focus:border-indigo-600">
                        </div>
                        <div class="w-28">
                            <label for="service_external_type_{{ category.id }}" class="block text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">Type</label>
                            <select id="service_external_type_{{ category.id }}" name="external_type" class="w-full px-3 py-2 glass text-xs font-bold">
                                <option value="">Interne</option>
                                <option value="stripe">Stripe</option>
                                <option value="docuseal">DocuSeal</option>
                                <option value="vault">Vault</option>
                                <option value="minio">Minio</option>
                            </select>
                        </div>
                        <div class="w-16">
                            <label for="service_position_{{ category.id }}" class="block text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">Pos.</label>
                            <input id="service_position_{{ category.id }}" type="number" name="position" value="0"
                                   class="w-full px-3 py-2 glass text-xs font-bold focus:outline-none focus:border-indigo-600">
                        </div>
                        <button type="submit" class="px-4 py-2 btn-gold font-bold uppercase text-[10px] tracking-wider">
                            + Ajouter
                        </button>
                    </form>
                </div>
            </section>
        {% else %}
            <p class="text-gray-400 text-sm font-bold">Aucune categorie. Creez-en une pour commencer.</p>
        {% endfor %}

    </div>
</div>
{% endblock %}
