{% extends 'layout/app.html.twig' %}

{% block title %}Paramètres PÉPITE - Portail{% endblock %}

{% block breadcrumb %}Paramètres PÉPITE{% endblock %}

{% block app_content %}
    <div class="flex flex-wrap items-center gap-3">
        <h1 class="font-display text-2xl text-pepite-ink">Paramètres PÉPITE</h1>
        {% for status in statuses %}
            {% if statusCounts[status.value] > 0 %}
                <span class="rounded-full px-2.5 py-0.5 font-structure text-xs font-semibold
                    {{ status.value == 'acted' ? 'bg-emerald-100 text-emerald-800' : (status.value == 'hypothesis' ? 'bg-amber-100 text-amber-800' : 'bg-red-100 text-red-700') }}">
                    {{ statusCounts[status.value] }} {{ status.label|lower }}{{ statusCounts[status.value] > 1 and status.value != 'open' ? 's' : '' }}
                </span>
            {% endif %}
        {% endfor %}
    </div>
    <p class="mt-1 font-structure text-sm text-pepite-ink/60">
        Les limites et valeurs par défaut du Portail. Un changement s'applique tout de suite et reste dans l'historique
        (ancienne valeur, nouvelle valeur, qui, quand).
        <span class="font-semibold text-pepite-ink/70">Acté</span> = décision prise ·
        <span class="font-semibold text-pepite-ink/70">Hypothèse</span> = valeur de travail à confirmer ·
        <span class="font-semibold text-pepite-ink/70">Ouvert</span> = pas encore tranché.
    </p>

    {% for group, items in groups %}
        <h2 class="mt-8 font-structure text-sm font-semibold uppercase tracking-wide text-pepite-ink/60">{{ group }}</h2>

        <div class="mt-3 space-y-3">
            {% for item in items %}
                {% set def = item.definition %}
                {% set rule = item.rule %}
                <form method="post" action="{{ path('app_parameter_update', { key: rule.key }) }}" id="rule-{{ rule.key|replace({'.': '-'}) }}"
                      class="rounded-md border border-gray-200 bg-white p-4">
                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('rule_' ~ rule.key) }}">
                    <fieldset class="contents">
                    <div class="flex flex-wrap items-start justify-between gap-4">
                        <div class="min-w-0 flex-1 basis-80">
                            <p class="font-structure font-semibold text-pepite-ink">{{ def.label }}</p>
                            <p class="mt-0.5 text-sm text-pepite-ink/60">{{ def.description }}</p>
                            <p class="mt-1 font-mono text-[11px] text-pepite-ink/30">{{ rule.key }} · modifiée le {{ rule.updatedAt|date('d/m/Y H:i') }}</p>
                        </div>

                        <div class="flex flex-wrap items-end gap-2{{ def.type.value == 'text' ? ' w-full' : '' }}">
                            <label class="text-xs text-pepite-ink/50{{ def.type.value == 'text' ? ' w-full' : '' }}">
                                Valeur
                                {% if def.type.value == 'text' %}
                                    <textarea name="value" rows="22" maxlength="20000" spellcheck="true"
                                              class="mt-0.5 block w-full rounded-md border border-gray-300 px-3 py-2 font-mono text-xs leading-relaxed text-pepite-ink">{{ rule.value }}</textarea>
                                {% elseif def.type.value == 'bool' %}
                                    <select name="value" class="mt-0.5 block w-24 rounded-md border border-gray-300 px-2 py-1.5 text-sm text-pepite-ink">
                                        <option value="1" {{ rule.value == '1' ? 'selected' : '' }}>Oui</option>
                                        <option value="0" {{ rule.value == '0' ? 'selected' : '' }}>Non</option>
                                    </select>
                                {% else %}
                                    <span class="mt-0.5 flex items-center gap-1">
                                        <input type="number" name="value" value="{{ rule.value }}" step="{{ def.type.value == 'int' ? '1' : 'any' }}"
                                               {% if def.min is not null %}min="{{ def.min }}"{% endif %} {% if def.max is not null %}max="{{ def.max }}"{% endif %}
                                               class="w-24 rounded-md border border-gray-300 px-2 py-1.5 text-sm text-pepite-ink">
                                        {% if def.unit %}<span class="text-sm text-pepite-ink/60">{{ def.unit }}</span>{% endif %}
                                    </span>
                                {% endif %}
                            </label>
                            <label class="text-xs text-pepite-ink/50">
                                Statut
                                <select name="status" class="mt-0.5 block rounded-md border border-gray-300 px-2 py-1.5 text-sm text-pepite-ink">
                                    {% for status in statuses %}
                                        <option value="{{ status.value }}" {{ rule.status == status ? 'selected' : '' }}>{{ status.label }}</option>
                                    {% endfor %}
                                </select>
                            </label>
                            <label class="text-xs text-pepite-ink/50">
                                Commentaire
                                <input type="text" name="comment" maxlength="500" placeholder="Pourquoi (optionnel)"
                                       class="mt-0.5 block w-52 rounded-md border border-gray-300 px-2 py-1.5 text-sm text-pepite-ink">
                            </label>
                            <button type="submit" class="rounded-md bg-pepite-navy px-3 py-1.5 font-structure text-sm font-medium text-white hover:bg-pepite-navy-light">
                                Enregistrer
                            </button>
                        </div>
                    </div>
                    </fieldset>

                    <details class="mt-3 border-t border-pepite-ink/10 pt-2">
                        <summary class="cursor-pointer text-xs font-semibold text-blue-700">
                            Historique {% if item.history %}({{ item.history|length }}{{ item.history|length >= 10 ? '+' : '' }}){% else %}— aucun changement depuis la création{% endif %}
                        </summary>
                        {% if item.history %}
                            <ul class="mt-1 space-y-1 text-xs text-pepite-ink/70">
                                {% for h in item.history %}
                                    <li>
                                        {{ h.changedAt|date('d/m/Y H:i') }} —
                                        {% if h.oldValue != h.newValue and def.type.value == 'text' %}
                                            <span class="font-medium text-pepite-ink">texte modifié ({{ h.oldValue|length }} → {{ h.newValue|length }} caractères)</span>
                                            <details class="ml-4 inline-block align-top"><summary class="cursor-pointer text-blue-700">voir l'ancienne version</summary><pre class="mt-1 max-h-72 overflow-auto whitespace-pre-wrap rounded bg-pepite-stone p-2 text-[11px]">{{ h.oldValue }}</pre></details>
                                        {% elseif h.oldValue != h.newValue %}
                                            <span class="font-medium text-pepite-ink">{{ def.type.value == 'bool' ? (h.oldValue == '1' ? 'Oui' : 'Non') : h.oldValue }} → {{ def.type.value == 'bool' ? (h.newValue == '1' ? 'Oui' : 'Non') : h.newValue }}</span>
                                        {% endif %}
                                        {% if h.oldStatus != h.newStatus %}
                                            <span>statut {{ h.oldStatus.label }} → {{ h.newStatus.label }}</span>
                                        {% endif %}
                                        {% if h.changedBy %}· par {{ h.changedBy.firstName }} {{ h.changedBy.lastName }}{% endif %}
                                        {% if h.comment %}· « {{ h.comment }} »{% endif %}
                                    </li>
                                {% endfor %}
                            </ul>
                        {% endif %}
                    </details>
                </form>
            {% endfor %}
        </div>
    {% endfor %}
{% endblock %}