{% extends "base.html" %}

{% block content %}
<div class="space-y-6">
    <!-- Header -->
    <div class="bg-white dark:bg-slate-800 shadow rounded-lg p-6">
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">{{ lineup.name }}</h1>
        <p class="text-gray-500 mt-2">{{ lineup.description }}</p>
    </div>

    <!-- Players Grid -->
    <div class="grid grid-cols-1 md:grid-cols-5 gap-4">
        {% for p in players %}
        <div class="bg-white dark:bg-slate-800 shadow rounded-lg p-4 flex flex-col items-center">
            <img class="h-16 w-16 rounded-full mb-2" src="{{ p.avatar_url or 'https://via.placeholder.com/64' }}" alt="">
            <a href="{{ url_for('players.detail', steam_id=p.steam_id_64) }}" class="text-sm font-medium text-gray-900 dark:text-white hover:text-yrtv-600 truncate w-full text-center">
                {{ p.username }}
            </a>
            <span class="text-xs text-gray-500">Rating: {{ "%.2f"|format(p.rating if p.rating else 0) }}</span>
        </div>
        {% endfor %}
    </div>

    <!-- Aggregate Stats -->
    <div class="bg-white dark:bg-slate-800 shadow rounded-lg p-6">
        <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">阵容综合能力</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div>
                <dl class="grid grid-cols-1 gap-5 sm:grid-cols-2">
                    <div class="px-4 py-5 bg-gray-50 dark:bg-slate-700 shadow rounded-lg overflow-hidden sm:p-6">
                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">平均 Rating</dt>
                        <dd class="mt-1 text-3xl font-semibold text-gray-900 dark:text-white">{{ "%.2f"|format(agg_stats.avg_rating or 0) }}</dd>
                    </div>
                    <div class="px-4 py-5 bg-gray-50 dark:bg-slate-700 shadow rounded-lg overflow-hidden sm:p-6">
                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">平均 K/D</dt>
                        <dd class="mt-1 text-3xl font-semibold text-gray-900 dark:text-white">{{ "%.2f"|format(agg_stats.avg_kd or 0) }}</dd>
                    </div>
                </dl>
            </div>
            
            <!-- Radar Chart -->
            <div class="relative h-64">
                <canvas id="teamRadarChart"></canvas>
            </div>
        </div>
    </div>

    <!-- Shared History -->
    <div class="bg-white dark:bg-slate-800 shadow rounded-lg p-6">
        <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">共同经历 (Shared Matches)</h3>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                <thead class="bg-gray-50 dark:bg-slate-700">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Date</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Map</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Score</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Link</th>
                    </tr>
                </thead>
                <tbody class="bg-white dark:bg-slate-800 divide-y divide-gray-200 dark:divide-gray-700">
                    {% for m in shared_matches %}
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">{{ m.start_time }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ m.map_name }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ m.score_team1 }} : {{ m.score_team2 }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <a href="{{ url_for('matches.detail', match_id=m.match_id) }}" class="text-yrtv-600 hover:text-yrtv-900">View</a>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="4" class="px-6 py-4 text-center text-gray-500">No shared matches found for this lineup.</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const radarData = {{ radar_data|tojson }};
    const ctx = document.getElementById('teamRadarChart').getContext('2d');
    
    new Chart(ctx, {
        type: 'radar',
        data: {
            labels: ['STA', 'BAT', 'HPS', 'PTL', 'SIDE', 'UTIL'],
            datasets: [{
                label: 'Team Average',
                data: [
                    radarData.STA, radarData.BAT, radarData.HPS, 
                    radarData.PTL, radarData.SIDE, radarData.UTIL
                ],
                backgroundColor: 'rgba(124, 58, 237, 0.2)',
                borderColor: 'rgba(124, 58, 237, 1)',
                pointBackgroundColor: 'rgba(124, 58, 237, 1)',
            }]
        },
        options: {
            maintainAspectRatio: false,
            scales: {
                r: {
                    beginAtZero: true,
                    suggestedMax: 2.0
                }
            }
        }
    });
});
</script>
{% endblock %}