{% extends "base.html" %}

{% block title %}战队履历 - YRTV{% endblock %}

{% block content %}
<div class="space-y-8 px-4 sm:px-0">
    <div class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
        <div>
            <p class="text-xs font-bold uppercase tracking-widest text-yrtv-600">{{ brand.primary }} · Team Career</p>
            <h1 class="mt-1 text-3xl font-black text-gray-900 dark:text-white">战队履历与阵容表现</h1>
            <p class="mt-2 text-sm text-gray-500">只统计 roster 成员在同一队伍实际共同出场的比赛。</p>
        </div>
        <a href="{{ url_for('teams.index') }}" class="rounded-lg bg-yrtv-600 px-4 py-2 text-sm font-bold text-white hover:bg-yrtv-500">
            返回 Clubhouse
        </a>
    </div>

    <div class="grid grid-cols-2 gap-4 lg:grid-cols-5">
        {% for label, value, style in [
            ('Matches', summary.matches, ''),
            ('Wins', summary.wins, 'text-green-600'),
            ('Losses', summary.losses, 'text-red-500'),
            ('Win Rate', '%.1f%%'|format(summary.win_rate * 100), 'text-yrtv-600'),
            ('Team Rating', '%.2f'|format(summary.avg_rating), '')
        ] %}
        <div class="rounded-2xl border border-gray-100 bg-white p-5 shadow dark:border-slate-700 dark:bg-slate-800">
            <div class="text-xs font-bold uppercase text-gray-400">{{ label }}</div>
            <div class="mt-2 text-3xl font-black text-gray-900 dark:text-white {{ style }}">{{ value }}</div>
        </div>
        {% endfor %}
    </div>

    <section class="rounded-2xl border border-gray-100 bg-white p-6 shadow dark:border-slate-700 dark:bg-slate-800">
        <div class="flex items-center justify-between">
            <h2 class="text-xl font-bold text-gray-900 dark:text-white">战队赛季</h2>
            <a href="{{ url_for('awards.index') }}" class="text-sm font-bold text-amber-600">查看周期荣誉</a>
        </div>
        <div class="mt-5 grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
            {% for season in seasons %}
            <div class="rounded-xl bg-gradient-to-br from-slate-900 to-slate-700 p-5 text-white">
                <div class="text-xs font-bold uppercase tracking-widest text-slate-300">{{ season.season_label }}</div>
                <div class="mt-3 grid grid-cols-3 gap-3 text-center">
                    <div><div class="text-2xl font-black">{{ season.matches }}</div><div class="text-[10px] uppercase text-slate-400">Matches</div></div>
                    <div><div class="text-2xl font-black text-green-400">{{ '%.0f%%'|format(season.win_rate * 100) }}</div><div class="text-[10px] uppercase text-slate-400">Win</div></div>
                    <div><div class="text-2xl font-black">{{ '%.2f'|format(season.avg_team_rating) }}</div><div class="text-[10px] uppercase text-slate-400">Rating</div></div>
                </div>
                <div class="mt-4 border-t border-white/10 pt-3 text-xs text-slate-300">
                    最佳地图 {{ season.best_map }} ({{ '%.0f%%'|format(season.best_map_win_rate * 100) }})<br>
                    赛季选手 {{ season.top_player.username or season.top_player_steam_id }} ({{ '%.2f'|format(season.top_player_rating) }})
                </div>
            </div>
            {% else %}
            <div class="text-gray-400">暂无赛季数据</div>
            {% endfor %}
        </div>
    </section>

    <section class="rounded-2xl border border-gray-100 bg-white p-6 shadow dark:border-slate-700 dark:bg-slate-800">
        <div class="flex items-center justify-between">
            <h2 class="text-xl font-bold text-gray-900 dark:text-white">当前 Roster Version</h2>
            {% if versions %}
            <span class="rounded-full bg-green-100 px-3 py-1 text-xs font-bold text-green-700">{{ versions[0].name }}</span>
            {% endif %}
        </div>
        <div class="mt-5 grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
            {% for member in roster %}
            <div class="rounded-xl bg-gray-50 p-3 transition hover:bg-yrtv-50 dark:bg-slate-700/40">
                <a href="{{ url_for('players.detail', steam_id=member.steam_id_64) }}"
                   class="block truncate font-bold text-gray-900 dark:text-white">{{ member.username or member.steam_id_64 }}</a>
                {% if session.get('is_admin') %}
                <form action="{{ url_for('teams.roster_role') }}" method="POST" class="mt-2">
                    <input type="hidden" name="steam_id" value="{{ member.steam_id_64 }}">
                    <select name="member_role" onchange="this.form.submit()"
                            class="w-full rounded border-gray-200 bg-white py-1 text-xs uppercase dark:border-slate-600 dark:bg-slate-700">
                        {% for role in ['starter', 'substitute', 'member'] %}
                        <option value="{{ role }}" {% if member.member_role == role %}selected{% endif %}>{{ role }}</option>
                        {% endfor %}
                    </select>
                </form>
                {% else %}
                <div class="mt-1 text-xs uppercase text-gray-400">{{ member.member_role }}</div>
                {% endif %}
            </div>
            {% endfor %}
        </div>
    </section>

    <div class="grid grid-cols-1 gap-8 xl:grid-cols-2">
        <section class="rounded-2xl border border-gray-100 bg-white p-6 shadow dark:border-slate-700 dark:bg-slate-800">
            <h2 class="text-xl font-bold text-gray-900 dark:text-white">二人组表现</h2>
            <div class="mt-5 space-y-3">
                {% for duo in duos %}
                <div class="flex items-center justify-between rounded-xl bg-gray-50 p-4 dark:bg-slate-700/40">
                    <div>
                        <div class="font-bold text-gray-900 dark:text-white">
                            {{ duo.player_a.username or duo.steam_id_a }} + {{ duo.player_b.username or duo.steam_id_b }}
                        </div>
                        <div class="mt-1 text-xs text-gray-400">{{ duo.matches }} 场 · 平均 Rating {{ '%.2f'|format(duo.avg_combined_rating) }}</div>
                    </div>
                    <div class="text-right">
                        <div class="text-xl font-black {% if duo.win_rate >= 0.5 %}text-green-600{% else %}text-red-500{% endif %}">
                            {{ '%.0f%%'|format(duo.win_rate * 100) }}
                        </div>
                        <div class="text-[10px] text-gray-400">{{ '可靠样本' if duo.sample_reliable else '小样本' }}</div>
                    </div>
                </div>
                {% else %}
                <div class="py-8 text-center text-gray-400">暂无二人组数据</div>
                {% endfor %}
            </div>
        </section>

        <section class="rounded-2xl border border-gray-100 bg-white p-6 shadow dark:border-slate-700 dark:bg-slate-800">
            <h2 class="text-xl font-bold text-gray-900 dark:text-white">实际阵容组合</h2>
            <div class="mt-5 space-y-3">
                {% for lineup in lineups %}
                <div class="rounded-xl bg-gray-50 p-4 dark:bg-slate-700/40">
                    <div class="flex items-start justify-between gap-4">
                        <div>
                            <div class="flex flex-wrap gap-1">
                                {% for player in lineup.players %}
                                <span class="rounded bg-white px-2 py-1 text-xs font-bold text-gray-700 dark:bg-slate-600 dark:text-white">{{ player.username }}</span>
                                {% endfor %}
                            </div>
                            <div class="mt-2 text-xs text-gray-400">{{ lineup.player_count }} 人 · {{ lineup.matches }} 场 · Rating {{ '%.2f'|format(lineup.avg_team_rating) }}</div>
                        </div>
                        <div class="text-xl font-black {% if lineup.win_rate >= 0.5 %}text-green-600{% else %}text-red-500{% endif %}">
                            {{ '%.0f%%'|format(lineup.win_rate * 100) }}
                        </div>
                    </div>
                </div>
                {% else %}
                <div class="py-8 text-center text-gray-400">暂无阵容组合数据</div>
                {% endfor %}
            </div>
        </section>
    </div>

    <section class="rounded-2xl border border-gray-100 bg-white p-6 shadow dark:border-slate-700 dark:bg-slate-800">
        <h2 class="text-xl font-bold text-gray-900 dark:text-white">Roster Version 历史</h2>
        <div class="mt-5 divide-y divide-gray-100 dark:divide-slate-700">
            {% for version in versions %}
            <div class="flex items-center justify-between py-3">
                <div>
                    <div class="font-bold text-gray-900 dark:text-white">{{ version.name }}</div>
                    <div class="text-xs text-gray-400">{{ version.member_count }} members · {{ version.effective_from }}</div>
                </div>
                <span class="rounded-full px-3 py-1 text-xs font-bold {% if version.is_current %}bg-green-100 text-green-700{% else %}bg-gray-100 text-gray-500{% endif %}">
                    {{ 'Current' if version.is_current else 'Archived' }}
                </span>
            </div>
            {% endfor %}
        </div>
    </section>
</div>
{% endblock %}