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

{% block title %}Récap détaillé — {{ team.name }} | LPF 2026{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('css/team-show.css') }}?v=11">
    <link rel="stylesheet" href="{{ asset('css/team-recap.css') }}?v=1">
{% endblock %}

{% block body %}
    <section class="ta-topbar">
        <div>
            <p class="ta-page-subtitle team-show-back">
                <a href="{{ path('app_team_recap', { id: team.id }) }}" class="ta-link">← Retour au récap Stories</a>
            </p>
            <h1 class="ta-page-title">Récap détaillé — {{ team.name }}</h1>
        </div>
    </section>

    {# Hero équipe #}
    <section class="ta-card team-recap-hero">
        {% set team_logo_src = team.logo
            ? (team.logo starts with 'http' ? team.logo : asset(team.logo))
            : null %}
        {% if team.slogan %}
            <p class="team-show-slogan team-recap-hero__slogan">« {{ team.slogan }} »</p>
        {% endif %}
        <div class="team-show-hero__layout">
            <div class="team-show-hero__logo">
                {% include 'shared/_lpf_lightbox_trigger.html.twig' with {
                    src: team_logo_src,
                    title: 'Logo — ' ~ team.name,
                    alt: 'Logo de l\'équipe ' ~ team.name,
                    img_class: 'team-show-team-logo',
                    btn_class: 'team-show-team-logo-btn',
                    placeholder: team.name|first|upper,
                    placeholder_class: 'team-show-team-logo-placeholder ranking-team-logo-placeholder',
                } %}
            </div>
            <div class="team-show-hero__players">
                {% for member in team.members %}
                    {% set player_avatar_src = null %}
                    {% if member.player and member.player.avatar %}
                        {% set av = member.player.avatar %}
                        {% set player_avatar_src = av starts with 'http' ? av : asset(av) %}
                    {% endif %}
                    <div class="team-show-hero__player">
                        <div class="team-show-hero__player-avatar">
                            {% include 'shared/_lpf_lightbox_trigger.html.twig' with {
                                src: player_avatar_src,
                                title: member.nickname,
                                alt: 'Avatar de ' ~ member.nickname,
                                img_class: 'team-show-player-avatar',
                                btn_class: 'team-show-player-avatar-btn',
                                placeholder: member.nickname|first|upper,
                                placeholder_class: 'team-show-player-avatar-placeholder ranking-team-logo-placeholder',
                            } %}
                        </div>
                        <p class="team-show-hero__player-nick">{{ member.nickname }}</p>
                    </div>
                {% endfor %}
            </div>
        </div>
    </section>

    {# Bilan final du classement #}
    <section class="ta-card team-recap-ranking-summary">
        <h2 class="ta-card-title">Bilan classement</h2>
        <div class="team-recap-ranking-summary__grid">
            {% if final_snapshot %}
                <div class="team-recap-stat-block team-recap-stat-block--highlight">
                    <span class="team-recap-stat-block__label">Position finale</span>
                    <span class="team-recap-stat-block__value">#{{ final_snapshot.position }}</span>
                    <span class="team-recap-stat-block__sub">sur {{ latest_teams_count }} équipes</span>
                </div>
            {% endif %}
            {% if best_snapshot %}
                <div class="team-recap-stat-block">
                    <span class="team-recap-stat-block__label">Meilleure position</span>
                    <span class="team-recap-stat-block__value">#{{ best_snapshot.position }}</span>
                    <span class="team-recap-stat-block__sub">
                        {% if best_snapshot.matchRef %}
                            après {{ best_snapshot.matchRef.paysDomicile ? best_snapshot.matchRef.paysDomicile.nom : '?' }}
                            — {{ best_snapshot.matchRef.paysExterieur ? best_snapshot.matchRef.paysExterieur.nom : '?' }}
                        {% endif %}
                    </span>
                </div>
            {% endif %}
            <div class="team-recap-stat-block">
                <span class="team-recap-stat-block__label">Total de points</span>
                <span class="team-recap-stat-block__value">{{ team_total_points|number_format(0, ',', ' ') }} pts</span>
                <span class="team-recap-stat-block__sub">sur {{ matchday_count }} journée(s)</span>
            </div>
        </div>
    </section>

    {# Évolution du classement #}
    {% if ranking_chart and ranking_chart.points is not empty %}
        <section class="ta-card team-recap-evolution-card" aria-labelledby="recap-evolution-heading">
            <h2 id="recap-evolution-heading" class="ta-card-title">Évolution du classement</h2>
            <p class="ta-card-text">Rang après le dernier match classé de chaque journée calendaire.</p>
            {% include 'competition/_team_show_ranking_chart.html.twig' with {
                ranking_evolution_chart: ranking_chart,
            } only %}
        </section>
    {% endif %}

    {# Stats collectives #}
    <section class="ta-card team-recap-collective-stats">
        <h2 class="ta-card-title">Stats collectives</h2>
        <div class="ta-table-wrap">
            <table class="ta-table team-recap-table">
                <thead>
                    <tr>
                        <th scope="col">Catégorie</th>
                        <th scope="col" class="ta-num">Nb</th>
                        <th scope="col" class="ta-num">Points</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">Scores exacts</th>
                        <td class="ta-num">{{ team_summary.scores_exacts_count }}</td>
                        <td class="ta-num">{{ team_summary.points_score_exact|number_format(0, ',', ' ') }}</td>
                    </tr>
                    <tr>
                        <th scope="row">Bons résultats</th>
                        <td class="ta-num">{{ team_summary.bons_resultats_count }}</td>
                        <td class="ta-num">{{ team_summary.points_bon_resultat|number_format(0, ',', ' ') }}</td>
                    </tr>
                    <tr>
                        <th scope="row">Résultats faux</th>
                        <td class="ta-num">{{ team_summary.resultats_faux_count }}</td>
                        <td class="ta-num ta-muted">—</td>
                    </tr>
                    <tr>
                        <th scope="row">Buteur</th>
                        <td class="ta-num">{{ team_summary.buteur_goals_count }} but(s)</td>
                        <td class="ta-num">{{ team_summary.points_buteur|number_format(0, ',', ' ') }}</td>
                    </tr>
                    <tr>
                        <th scope="row" title="{{ bigballs_term('column_ratio_title') }}">
                            {{ bigballs_term('name') }}
                        </th>
                        <td class="ta-num">
                            {{ team_summary.bigballs_succeeded }}/{{ team_summary.bigballs_attempted }}
                        </td>
                        <td class="ta-num">{{ team_summary.points_bigballs|number_format(0, ',', ' ') }}</td>
                    </tr>
                    <tr class="team-recap-table__total-row">
                        <th scope="row">Total équipe</th>
                        <td class="ta-num" colspan="2">
                            <strong>{{ team_total_points|number_format(0, ',', ' ') }} pts</strong>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </section>

    {# Stats individuelles #}
    {% if players is not empty %}
        <section class="ta-card team-recap-player-stats">
            <h2 class="ta-card-title">Stats par joueur</h2>
            <div class="ta-table-wrap">
                <table class="ta-table team-recap-table">
                    <thead>
                        <tr>
                            <th scope="col">Joueur</th>
                            <th scope="col" class="ta-num">Pronos</th>
                            <th scope="col" class="ta-num">Exacts</th>
                            <th scope="col" class="ta-num">Bons</th>
                            <th scope="col" class="ta-num">Faux</th>
                            <th scope="col" class="ta-num">Buteur</th>
                            <th scope="col" class="ta-num">Total</th>
                            <th scope="col" class="ta-num">% équipe</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for player in players %}
                            <tr>
                                <th scope="row">{{ player.nickname }}</th>
                                <td class="ta-num">{{ player.pronostics_count }}</td>
                                <td class="ta-num">{{ player.scores_exacts_count }}</td>
                                <td class="ta-num">{{ player.bons_resultats_count }}</td>
                                <td class="ta-num ta-muted">{{ player.resultats_faux }}</td>
                                <td class="ta-num">
                                    {{ player.points_buteur|number_format(0, ',', ' ') }}
                                    {% if player.buteur_goals_count > 0 %}
                                        <span class="team-recap-goals-count">({{ player.buteur_goals_count }} but{{ player.buteur_goals_count > 1 ? 's' : '' }})</span>
                                    {% endif %}
                                </td>
                                <td class="ta-num"><strong>{{ player.points_total|number_format(0, ',', ' ') }} pts</strong></td>
                                <td class="ta-num">
                                    <span class="team-recap-percent-bar">
                                        <span class="team-recap-percent-bar__fill" style="width: {{ player.percent_of_team }}%"></span>
                                        <span class="team-recap-percent-bar__label">{{ player.percent_of_team }}%</span>
                                    </span>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </section>
    {% endif %}

    {# Jokers posés #}
    <section class="ta-card team-recap-jokers">
        <h2 class="ta-card-title">
            <i class="ti ti-cards" aria-hidden="true"></i>
            Jokers utilisés
        </h2>
        {% if jokers_placed is empty %}
            <p class="ta-card-text">Aucun joker posé au cours de la compétition.</p>
        {% else %}
            <p class="ta-card-text">{{ jokers_placed|length }} joker{{ jokers_placed|length > 1 ? 's' : '' }} posé{{ jokers_placed|length > 1 ? 's' : '' }} sur la compétition.</p>
            <ul class="team-recap-joker-list">
                {% for row in jokers_placed %}
                    <li class="team-recap-joker-item">
                        <span class="team-recap-joker-item__icon">
                            <i class="ti ti-cards" aria-hidden="true"></i>
                        </span>
                        <span class="team-recap-joker-item__body">
                            <span class="team-recap-joker-item__name">{{ row.joker_name }}</span>
                            {% if row.joker_tag %}
                                <span class="team-recap-joker-item__tag">{{ row.joker_tag }}</span>
                            {% endif %}
                            <span class="team-recap-joker-item__meta">
                                {{ row.match_label }}
                                {% if row.match_date %}· {{ row.match_date }}{% endif %}
                                {% if row.target_team %}
                                    · cible : <strong>{{ row.target_team }}</strong>
                                {% endif %}
                            </span>
                        </span>
                    </li>
                {% endfor %}
            </ul>
        {% endif %}
    </section>

    {# Jokers subis #}
    <section class="ta-card team-recap-jokers team-recap-jokers--suffered">
        <h2 class="ta-card-title">
            <i class="ti ti-shield-x" aria-hidden="true"></i>
            Jokers subis
        </h2>
        {% if jokers_suffered is empty %}
            <p class="ta-card-text">Aucun joker offensif reçu au cours de la compétition.</p>
        {% else %}
            <p class="ta-card-text">{{ jokers_suffered|length }} joker{{ jokers_suffered|length > 1 ? 's' : '' }} offensif{{ jokers_suffered|length > 1 ? 's' : '' }} subi{{ jokers_suffered|length > 1 ? 's' : '' }}.</p>
            <ul class="team-recap-joker-list">
                {% for row in jokers_suffered %}
                    <li class="team-recap-joker-item team-recap-joker-item--suffered">
                        <span class="team-recap-joker-item__icon">
                            <i class="ti ti-shield-x" aria-hidden="true"></i>
                        </span>
                        <span class="team-recap-joker-item__body">
                            <span class="team-recap-joker-item__name">{{ row.joker_name }}</span>
                            <span class="team-recap-joker-item__meta">
                                {{ row.match_label }}
                                {% if row.match_date %}· {{ row.match_date }}{% endif %}
                                · par <strong>{{ row.attacker_team ?? 'une autre équipe' }}</strong>
                            </span>
                        </span>
                    </li>
                {% endfor %}
            </ul>
        {% endif %}
    </section>

    {# BigBalls détail #}
    <section class="ta-card team-recap-bigballs">
        <h2 class="ta-card-title">
            <i class="ti ti-circle" aria-hidden="true"></i>
            {{ bigballs_term('name') }}
        </h2>
        <p class="ta-card-text">
            {{ bigballs_term('short_description') }}
        </p>
        {% if team_summary.bigballs_attempted == 0 %}
            <p class="ta-card-text">Aucun {{ bigballs_term('name')|lower }} tenté.</p>
        {% else %}
            <div class="team-recap-ranking-summary__grid">
                <div class="team-recap-stat-block">
                    <span class="team-recap-stat-block__label">Tentatives</span>
                    <span class="team-recap-stat-block__value">{{ team_summary.bigballs_attempted }}</span>
                </div>
                <div class="team-recap-stat-block team-recap-stat-block--success">
                    <span class="team-recap-stat-block__label">Réussites</span>
                    <span class="team-recap-stat-block__value">{{ team_summary.bigballs_succeeded }}</span>
                    {% if team_summary.bigballs_attempted > 0 %}
                        <span class="team-recap-stat-block__sub">
                            {{ (team_summary.bigballs_succeeded / team_summary.bigballs_attempted * 100)|round }}% de réussite
                        </span>
                    {% endif %}
                </div>
                <div class="team-recap-stat-block">
                    <span class="team-recap-stat-block__label">Points gagnés</span>
                    <span class="team-recap-stat-block__value">{{ team_summary.points_bigballs|number_format(0, ',', ' ') }} pts</span>
                </div>
            </div>
        {% endif %}
    </section>

    {# Lien retour #}
    <div class="team-recap-back-footer">
        <a href="{{ path('app_team_recap', { id: team.id }) }}" class="btn btn-outline">← Retour au récap Stories</a>
        <a href="{{ path('app_team_show', { id: team.id }) }}" class="btn btn-outline">Fiche équipe</a>
        <a href="{{ path('app_ranking') }}" class="btn btn-outline">Voir le classement</a>
    </div>
{% endblock %}