{% extends 'base.html.twig' %}

{% block title %}Rocket League — Pipou{% endblock %}
{% block theme_color %}#f5f5f4{% endblock %}
{% block status_bar_style %}default{% endblock %}

{% block body_class %}bg-stone-100 dark:bg-stone-950{% endblock %}

{% block body %}

{% embed 'ui/index_shell.html.twig' with {
    title: 'Rocket League',
    eyebrow: 'Arena',
    accent_rgb: '249,115,22',
    back_href: path('front.home'),
} %}
{% block index_card %}

    {% if dashboard.statsFromTracker %}
        <p class="text-xs text-stone-500 dark:text-stone-400 mb-4">Stats via <span class="text-orange-600 dark:text-orange-400 font-semibold">Tracker.gg</span> · Synchro auto au plus toutes les 2 min, ou immédiate ci-dessous.</p>
    {% else %}
        <p class="text-xs text-stone-500 dark:text-stone-400 mb-4">Saisie manuelle · Connectez Tracker.gg pour la synchro auto.</p>
    {% endif %}

    {% if dashboard.trackerProfileLinked and dashboard.trackerApiKeyPresent %}
        <form action="{{ path('front.rocket_league.tracker_refresh') }}" method="post" class="mb-6">
            <button type="submit" class="inline-flex items-center gap-2 rounded-xl border border-orange-300 dark:border-orange-700 bg-orange-50 dark:bg-orange-950/40 px-4 py-2.5 text-sm font-bold text-orange-800 dark:text-orange-200 hover:bg-orange-100 dark:hover:bg-orange-900/40 transition-all">
                <svg class="size-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"/>
                </svg>
                Actualiser l'API Tracker
            </button>
        </form>
    {% endif %}

    {% if dashboard.trackerProfileLinked and not dashboard.trackerApiKeyPresent %}
        <div class="mb-5 rounded-xl border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-950/40 px-4 py-3 text-sm text-amber-900 dark:text-amber-100">
            Profil Tracker renseigné mais <code class="text-xs bg-amber-100 dark:bg-amber-900/60 px-1.5 py-0.5 rounded">TRN_API_KEY</code> manquante.
        </div>
    {% endif %}

    {% if dashboard.trackerLastError %}
        <div class="mb-5 rounded-xl border border-red-200 dark:border-red-900/60 bg-red-50 dark:bg-red-950/30 px-4 py-3 text-sm text-red-800 dark:text-red-200 whitespace-pre-line">{{ dashboard.trackerLastError|nl2br }}</div>
    {% endif %}

    <div class="grid grid-cols-2 gap-3 mb-5">
        <div class="relative rounded-2xl overflow-hidden border border-emerald-200 dark:border-emerald-800 bg-emerald-50/80 dark:bg-emerald-950/40 p-5 text-center">
            <p class="text-[10px] font-bold uppercase tracking-widest text-emerald-700/80 dark:text-emerald-300/90 mb-2">
                Victoires{% if dashboard.statsFromTracker %} <span class="text-orange-500">●</span>{% endif %}
            </p>
            <p class="text-5xl font-black text-emerald-600 dark:text-emerald-400 tabular-nums">{{ dashboard.wins }}</p>
        </div>
        <div class="relative rounded-2xl overflow-hidden border border-red-200 dark:border-red-800 bg-red-50/80 dark:bg-red-950/40 p-5 text-center">
            <p class="text-[10px] font-bold uppercase tracking-widest text-red-700/80 dark:text-red-300/90 mb-2">
                Défaites{% if dashboard.statsFromTracker %} <span class="text-orange-500">●</span>{% endif %}
            </p>
            <p class="text-5xl font-black text-red-600 dark:text-red-400 tabular-nums">{{ dashboard.losses }}</p>
        </div>
    </div>

    <div class="relative rounded-2xl overflow-hidden mb-5">
        <div class="absolute inset-0 bg-gradient-to-br from-orange-500 to-red-500"></div>
        <div class="absolute inset-0 opacity-20" style="background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0,0,0,0.1) 10px, rgba(0,0,0,0.1) 11px)"></div>
        <div class="relative p-5">
            <p class="text-sm font-bold text-white/90 uppercase tracking-wide mb-1">Dette de pompes</p>
            <p class="text-6xl font-black text-white tabular-nums mb-2" style="text-shadow: 0 4px 20px rgba(0,0,0,0.3)">{{ dashboard.pushUpsRemaining }}</p>
            <p class="text-xs text-white/80">
                Cible : {{ dashboard.pushUpsTarget }}
                <span class="mx-1 opacity-40">·</span>
                {{ dashboard.pushUpsPerDefeat }} par défaite
                <span class="mx-1 opacity-40">·</span>
                {{ dashboard.pushUpsLogged }} déclaré{{ dashboard.pushUpsLogged > 1 ? 's' : '' }}
            </p>
            {% if dashboard.trackerSyncedAt %}
                <p class="text-[10px] text-white/60 mt-1.5">Synchro API : {{ dashboard.trackerSyncedAt|date('d/m/Y H:i') }}</p>
            {% endif %}
        </div>
    </div>

    <div class="space-y-2 mb-6">

        <details class="rounded-2xl overflow-hidden border border-stone-200 dark:border-stone-700 bg-stone-50 dark:bg-stone-900" {% if not dashboard.manualMatchEntryEnabled %}open{% endif %}>
            <summary class="flex items-center gap-3 px-5 py-4 cursor-pointer select-none font-semibold text-stone-700 dark:text-stone-200 hover:bg-stone-100 dark:hover:bg-stone-800 transition-all group">
                <div class="size-7 rounded-lg bg-orange-100 dark:bg-orange-950/50 border border-orange-200 dark:border-orange-800 flex items-center justify-center">
                    <span class="size-2 rounded-full bg-orange-500"></span>
                </div>
                <span>Tracker.gg</span>
                <svg class="size-4 text-stone-400 dark:text-stone-500 ml-auto" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
                </svg>
            </summary>
            <form action="{{ path('front.rocket_league.tracker_save') }}" method="post" class="px-5 pb-5 space-y-3">
                <div>
                    <label class="block text-xs font-bold text-stone-500 dark:text-stone-400 uppercase tracking-wide mb-1">Plateforme</label>
                    <select name="tracker_platform" class="w-full rounded-xl border border-stone-200 dark:border-stone-600 bg-white dark:bg-stone-800 text-stone-800 dark:text-stone-100 px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400 dark:focus:ring-orange-600 transition">
                        <option value="">— Désactiver —</option>
                        <option value="steam" {% if dashboard.trackerPlatformValue == 'steam' %}selected{% endif %}>Steam</option>
                        <option value="epic" {% if dashboard.trackerPlatformValue == 'epic' %}selected{% endif %}>Epic Games</option>
                        <option value="psn" {% if dashboard.trackerPlatformValue == 'psn' %}selected{% endif %}>PlayStation</option>
                        <option value="xbl" {% if dashboard.trackerPlatformValue == 'xbl' %}selected{% endif %}>Xbox</option>
                    </select>
                </div>
                <div>
                    <label class="block text-xs font-bold text-stone-500 dark:text-stone-400 uppercase tracking-wide mb-1">Identifiant</label>
                    <input type="text" name="tracker_handle" value="{{ dashboard.trackerHandle|default('') }}" placeholder="Steam64, pseudo Epic, PSN, Xbox"
                        class="w-full rounded-xl border border-stone-200 dark:border-stone-600 bg-white dark:bg-stone-800 text-stone-800 dark:text-stone-100 placeholder-stone-400 dark:placeholder-stone-500 px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400 dark:focus:ring-orange-600 transition">
                </div>
                <button type="submit" class="w-full rounded-xl bg-orange-500 hover:bg-orange-400 text-stone-900 dark:text-orange-950 font-bold py-2.5 transition-colors shadow-sm">
                    Enregistrer
                </button>
            </form>
        </details>

        {% if dashboard.manualMatchEntryEnabled %}
        <details class="rounded-2xl overflow-hidden border border-stone-200 dark:border-stone-700 bg-stone-50 dark:bg-stone-900">
            <summary class="flex items-center gap-3 px-5 py-4 cursor-pointer select-none font-semibold text-stone-700 dark:text-stone-200 hover:bg-stone-100 dark:hover:bg-stone-800 transition-all">
                <div class="size-7 rounded-lg bg-orange-100 dark:bg-orange-950/50 border border-orange-200 dark:border-orange-800 flex items-center justify-center">
                    <svg class="size-4 text-orange-600 dark:text-orange-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
                    </svg>
                </div>
                <span>Enregistrer un match</span>
                <svg class="size-4 text-stone-400 dark:text-stone-500 ml-auto" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
                </svg>
            </summary>
            <div class="px-5 pb-5">
                <form action="{{ path('front.rocket_league.match_new') }}" method="post" class="flex gap-2">
                    <button type="submit" name="outcome" value="win"
                        class="flex-1 rounded-xl bg-emerald-500 hover:bg-emerald-400 text-white font-bold py-3 shadow-sm transition-all">
                        Victoire
                    </button>
                    <button type="submit" name="outcome" value="loss"
                        class="flex-1 rounded-xl bg-red-500 hover:bg-red-400 text-white font-bold py-3 shadow-sm transition-all">
                        Défaite
                    </button>
                </form>
            </div>
        </details>
        {% endif %}

        <details class="rounded-2xl overflow-hidden border border-stone-200 dark:border-stone-700 bg-stone-50 dark:bg-stone-900">
            <summary class="flex items-center gap-3 px-5 py-4 cursor-pointer select-none font-semibold text-stone-700 dark:text-stone-200 hover:bg-stone-100 dark:hover:bg-stone-800 transition-all">
                <div class="size-7 rounded-lg bg-stone-200 dark:bg-stone-700 flex items-center justify-center">
                    <svg class="size-4 text-stone-600 dark:text-stone-300" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
                    </svg>
                </div>
                <span>Déclarer des pompes</span>
                <svg class="size-4 text-stone-400 dark:text-stone-500 ml-auto" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
                </svg>
            </summary>
            <form action="{{ path('front.rocket_league.pushups_log') }}" method="post" class="px-5 pb-5 space-y-3">
                <input type="number" name="amount" min="1" max="500" value="10" required
                    class="w-full rounded-xl border border-stone-200 dark:border-stone-600 bg-white dark:bg-stone-800 dark:text-stone-100 px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400 dark:focus:ring-orange-600 transition">
                <button type="submit" class="w-full rounded-xl bg-stone-700 hover:bg-stone-600 dark:bg-stone-600 dark:hover:bg-stone-500 text-white font-bold py-2.5 transition-colors">
                    Valider
                </button>
            </form>
        </details>

        <details class="rounded-2xl overflow-hidden border border-stone-200 dark:border-stone-700 bg-stone-50 dark:bg-stone-900">
            <summary class="flex items-center gap-3 px-5 py-4 cursor-pointer select-none font-semibold text-stone-700 dark:text-stone-200 hover:bg-stone-100 dark:hover:bg-stone-800 transition-all">
                <div class="size-7 rounded-lg bg-amber-100 dark:bg-amber-950/50 border border-amber-200 dark:border-amber-800 flex items-center justify-center">
                    <svg class="size-4 text-amber-600 dark:text-amber-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
                    </svg>
                </div>
                <span>Pompes par défaite</span>
                <svg class="size-4 text-stone-400 dark:text-stone-500 ml-auto" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
                </svg>
            </summary>
            <form action="{{ path('front.rocket_league.settings') }}" method="post" class="px-5 pb-5 space-y-3">
                <input type="number" name="push_ups_per_defeat" min="1" max="200" value="{{ dashboard.pushUpsPerDefeat }}" required
                    class="w-full rounded-xl border border-stone-200 dark:border-stone-600 bg-white dark:bg-stone-800 dark:text-stone-100 px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400 dark:focus:ring-orange-600 transition">
                <button type="submit" class="w-full rounded-xl bg-orange-500 hover:bg-orange-400 text-stone-900 dark:text-orange-950 font-bold py-2.5 transition-colors">
                    Enregistrer
                </button>
            </form>
        </details>

    </div>

    {% if dashboard.manualMatchEntryEnabled and recent_matches is not empty %}
        <p class="text-[10px] font-bold uppercase tracking-widest text-stone-400 dark:text-stone-500 mb-3">Derniers matchs</p>
        <ul class="space-y-1.5">
            {% for m in recent_matches %}
                <li class="flex items-center justify-between rounded-xl bg-stone-50 dark:bg-stone-900 border border-stone-200 dark:border-stone-700 px-4 py-3 text-sm">
                    <span class="text-stone-500 dark:text-stone-400 tabular-nums">{{ m.playedAt|date('d/m · H:i') }}</span>
                    {% if m.outcome.value == 'win' %}
                        <span class="font-bold text-emerald-600 dark:text-emerald-400">{{ m.outcome.label }}</span>
                    {% else %}
                        <span class="font-bold text-red-600 dark:text-red-400">{{ m.outcome.label }}</span>
                    {% endif %}
                </li>
            {% endfor %}
        </ul>
    {% endif %}

{% endblock %}
{% endembed %}

{% endblock %}