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

{% block title %}Status des 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">Status des services</h1>
        <a href="{{ path('app_admin_status_manage') }}" class="px-4 py-2 btn-gold font-bold uppercase text-xs tracking-wider">Gerer les services</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 %}

    {# Messages actifs #}
    {% if activeMessages|length > 0 %}
        <div class="mb-6">
            <h2 class="text-sm font-bold uppercase tracking-wider text-gray-400 mb-3">Messages actifs</h2>
            <div class="flex flex-col gap-2">
                {% for msg in activeMessages %}
                    <div class="flex items-center justify-between p-3 border-2
                        {% if msg.severity == 'critical' %}border-red-600 bg-red-50
                        {% elseif msg.severity == 'warning' %}border-yellow-600 bg-yellow-50
                        {% else %}border-blue-600 bg-blue-50
                        {% endif %}
                    ">
                        <div>
                            <span class="px-1.5 py-0.5 font-bold uppercase text-[9px] tracking-widest
                                {% if msg.severity == 'critical' %}bg-red-600 text-white
                                {% elseif msg.severity == 'warning' %}bg-yellow-600 text-white
                                {% else %}bg-blue-600 text-white
                                {% endif %}
                            ">{{ msg.severity }}</span>
                            <strong class="text-xs ml-2">{{ msg.service.name }}</strong>
                            <span class="text-xs ml-1">— {{ msg.title }}</span>
                            <span class="text-[10px] text-gray-400 ml-2">{{ msg.createdAt|date('d/m H:i') }}</span>
                        </div>
                        <form method="post" action="{{ path('app_admin_status_message_resolve', {id: msg.id}) }}">
                            <button type="submit" class="px-2 py-1 border-2 border-green-600 bg-white text-green-600 font-bold uppercase text-[10px] tracking-widest hover:bg-green-600 hover:text-white transition-all">Resoudre</button>
                        </form>
                    </div>
                {% endfor %}
            </div>
        </div>
    {% endif %}

    {# Formulaire nouveau message #}
    <div class="mb-8 glass p-4">
        <h2 class="text-sm font-bold uppercase tracking-wider mb-3">Publier un message</h2>
        <form method="post" action="{{ path('app_admin_status_message_create') }}" class="flex flex-wrap items-end gap-3">
            <div class="w-40">
                <label for="service_id" class="block text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">Service</label>
                <select id="service_id" name="service_id" required class="w-full input-glass px-3 py-2 text-xs font-bold">
                    {% for service in allServices %}
                        <option value="{{ service.id }}">{{ service.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="w-24">
                <label for="severity" class="block text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">Severite</label>
                <select id="severity" name="severity" class="w-full input-glass px-3 py-2 text-xs font-bold">
                    <option value="info">Info</option>
                    <option value="warning">Warning</option>
                    <option value="critical">Critical</option>
                </select>
            </div>
            <div class="flex-1 min-w-[120px]">
                <label for="title" class="block text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">Titre</label>
                <input id="title" type="text" name="title" required placeholder="Ex: Maintenance prevue..."
                       class="w-full input-glass px-3 py-2 text-xs font-bold">
            </div>
            <div class="flex-1 min-w-[150px]">
                <label for="content" class="block text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">Message</label>
                <input id="content" type="text" name="content" required placeholder="Details..."
                       class="w-full input-glass px-3 py-2 text-xs font-bold">
            </div>
            <button type="submit" class="px-4 py-2 btn-gold font-bold uppercase text-[10px] tracking-wider">
                Publier
            </button>
        </form>
    </div>

    <div class="flex flex-col gap-8">
        {% for data in servicesData %}
            <section>
                <h2 class="text-xl font-bold uppercase mb-4">{{ data.category.name }}</h2>

                <div class="flex flex-col gap-4">
                    {% for item in data.services %}
                        {% set service = item.service %}
                        {% set uptime = item.uptime %}
                        {% set dailyStatus = item.dailyStatus %}

                        <div class="glass">
                            <div class="flex items-center justify-between px-4 py-3 border-b border-white/20">
                                <div class="flex items-center gap-3">
                                    <span class="w-3 h-3 flex-shrink-0
                                        {% 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
                                        {% elseif service.status == 'soon' %}bg-gray-400
                                        {% endif %}
                                    "></span>
                                    <div>
                                        <span class="font-bold text-sm uppercase">{{ service.name }}</span>
                                        {% if service.url %}
                                            <a href="{{ service.url }}" class="text-[10px] text-gray-400 ml-2 hover:text-indigo-600" target="_blank" rel="noopener">{{ service.url }}</a>
                                        {% endif %}
                                    </div>
                                </div>
                                <div class="flex items-center gap-3">
                                    <span class="px-2 py-0.5 font-bold uppercase text-[10px] tracking-widest
                                        {% if service.status == 'up' %}bg-green-100 text-green-800
                                        {% elseif service.status == 'degraded' %}bg-yellow-100 text-yellow-800
                                        {% elseif service.status == 'down' %}bg-red-100 text-red-800
                                        {% elseif service.status == 'maintenance' %}bg-blue-100 text-blue-800
                                        {% elseif service.status == 'soon' %}bg-gray-100 text-gray-600
                                        {% endif %}
                                    ">{{ service.status }}</span>
                                    <span class="text-xs font-bold {{ uptime >= 99 ? 'text-green-600' : (uptime >= 95 ? 'text-yellow-600' : 'text-red-600') }}">{{ uptime }}%</span>
                                </div>
                            </div>

                            {% if service.message %}
                                <div class="px-4 py-2 bg-gray-50 text-xs text-gray-600 border-b border-white/20">
                                    {{ service.message }}
                                </div>
                            {% endif %}

                            {# Graphique uptime 30 jours #}
                            <div class="px-4 py-2 flex items-center gap-[2px]">
                                {% for day in dailyStatus %}
                                    <div class="flex-1 h-6
                                        {% if day.status == 'up' %}bg-green-400
                                        {% elseif day.status == 'degraded' %}bg-yellow-400
                                        {% elseif day.status == 'down' %}bg-red-400
                                        {% elseif day.status == 'maintenance' %}bg-blue-400
                                        {% elseif day.status == 'soon' %}bg-gray-300
                                        {% endif %}
                                    " title="{{ day.date }} : {{ day.status }}"></div>
                                {% endfor %}
                            </div>
                            <div class="px-4 pb-1 flex justify-between text-[9px] text-gray-400">
                                <span>30 jours</span>
                                <span>Aujourd'hui</span>
                            </div>

                            {# Formulaire de mise a jour #}
                            <div class="px-4 py-3 border-t border-gray-200 bg-gray-50">
                                <form method="post" action="{{ path('app_admin_status_update', {id: service.id}) }}" class="flex flex-wrap items-end gap-3">
                                    <div>
                                        <label for="status_{{ service.id }}" class="block text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">Statut</label>
                                        <select id="status_{{ service.id }}" name="status" class="px-3 py-1.5 glass text-xs font-bold bg-white">
                                            <option value="up" {{ service.status == 'up' ? 'selected' }}>Up</option>
                                            <option value="degraded" {{ service.status == 'degraded' ? 'selected' }}>Degrade</option>
                                            <option value="down" {{ service.status == 'down' ? 'selected' }}>Down</option>
                                            <option value="maintenance" {{ service.status == 'maintenance' ? 'selected' }}>Maintenance</option>
                                            <option value="soon" {{ service.status == 'soon' ? 'selected' }}>Bientot</option>
                                        </select>
                                    </div>
                                    <div class="flex-1">
                                        <label for="message_{{ service.id }}" class="block text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">Message</label>
                                        <input id="message_{{ service.id }}" type="text" name="message" value="{{ service.message }}" placeholder="Message optionnel..."
                                               class="w-full px-3 py-1.5 glass text-xs font-bold bg-white">
                                    </div>
                                    <button type="submit" class="px-4 py-1.5 btn-gold font-bold uppercase text-[10px] tracking-wider">
                                        Mettre a jour
                                    </button>
                                </form>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </section>
        {% else %}
            <p class="text-gray-400 text-sm font-bold">Aucun service configure.</p>
        {% endfor %}
    </div>
</div>
{% endblock %}
