{% extends "base.html" %}

{% block title %}{{ player.name }} - Pickleball ELO Tracker{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto">
    {% include "components/nav.html" %}
    
    <div class="card mb-8">
        <div class="flex justify-between items-start mb-6">
            <div>
                <h1 class="pitt-primary text-4xl font-bold">{{ player.name }}</h1>
                {% if player.has_email %}
                    <p class="text-gray-600 mt-2">📧 {{ player.email }}</p>
                {% endif %}
            </div>
            <a href="/players/{{ player.id }}/edit" class="btn-warning">✏️ Edit</a>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div class="bg-gradient-to-br from-blue-50 to-blue-100 p-6 rounded-lg">
                <div class="text-sm text-gray-600 mb-1">ELO Rating</div>
                <div class="text-4xl font-bold pitt-primary">{{ player.rating_display }}</div>
            </div>
            <div class="bg-gradient-to-br from-purple-50 to-purple-100 p-6 rounded-lg">
                <div class="text-sm text-gray-600 mb-1">Record</div>
                <div class="text-4xl font-bold">
                    <span class="text-green-600">{{ player.wins }}</span><span class="text-gray-400">-</span><span class="text-red-600">{{ player.losses }}</span>
                </div>
            </div>
            <div class="bg-gradient-to-br from-green-50 to-green-100 p-6 rounded-lg">
                <div class="text-sm text-gray-600 mb-1">Matches Played</div>
                <div class="text-4xl font-bold text-green-700">{{ match_count }}</div>
            </div>
            <div class="bg-gradient-to-br from-yellow-50 to-yellow-100 p-6 rounded-lg">
                <div class="text-sm text-gray-600 mb-1">Win Rate</div>
                <div class="text-4xl font-bold text-yellow-700">{{ win_rate_display }}</div>
            </div>
        </div>
    </div>
    
    {% if chart_data.is_empty() %}
        <div class="alert-info">
            No rating history yet. <a href="/matches/new" class="font-bold hover:underline">Record a match</a> to see the chart!
        </div>
    {% else %}
        <div class="card">
            <h2 class="pitt-primary text-2xl font-bold mb-4">📈 Rating History</h2>
            <canvas id="ratingChart"></canvas>
        </div>
        
        <script>
            const chartData = {
                labels: {{ chart_labels }},
                datasets: [
                    {
                        label: 'ELO Rating',
                        data: {{ chart_data }},
                        borderColor: '#003594',
                        backgroundColor: 'rgba(0, 53, 148, 0.1)',
                        borderWidth: 3,
                        fill: true,
                        tension: 0.4,
                        pointRadius: 4,
                        pointBackgroundColor: '#FFB81C',
                        pointBorderColor: '#003594',
                        pointBorderWidth: 2,
                    }
                ]
            };

            const ctx = document.getElementById('ratingChart').getContext('2d');
            new Chart(ctx, {
                type: 'line',
                data: chartData,
                options: {
                    responsive: true,
                    maintainAspectRatio: true,
                    plugins: {
                        legend: {
                            display: true,
                            labels: {
                                font: { size: 14 },
                                color: '#003594'
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: false,
                            grid: { color: 'rgba(0, 53, 148, 0.1)' },
                            ticks: { color: '#003594' }
                        },
                        x: {
                            grid: { color: 'rgba(0, 53, 148, 0.05)' },
                            ticks: { color: '#003594' }
                        }
                    }
                }
            });
        </script>
    {% endif %}
    
    <div class="card mt-8">
        <h2 class="pitt-primary text-2xl font-bold mb-4">📋 Recent Matches</h2>
        {% if recent_matches.is_empty() %}
            <p class="text-gray-600">No matches yet.</p>
        {% else %}
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-blue-900 text-white">
                        <tr>
                            <th class="px-4 py-3 text-left">Type</th>
                            <th class="px-4 py-3 text-left">Score</th>
                            <th class="px-4 py-3 text-left">Rating Change</th>
                            <th class="px-4 py-3 text-left">Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for match in recent_matches %}
                        <tr class="border-b hover:bg-gray-50">
                            <td class="px-4 py-3 capitalize">{{ match.match_type }}</td>
                            <td class="px-4 py-3 font-semibold">{{ match.score }}</td>
                            <td class="px-4 py-3">
                                <span class="{% if match.rating_change >= 0.0 %}text-green-600 font-bold{% else %}text-red-600 font-bold{% endif %}">
                                    {{ match.rating_change_display }}
                                </span>
                            </td>
                            <td class="px-4 py-3 text-sm text-gray-600">{{ match.date }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}