{% extends "base.html" %}

{% block title %}{{ player_name }} - Pickleball ELO Tracker{% endblock %}

{% block content %}
<h1>{{ player_name }}</h1>
{% include "components/nav.html" %}

<div class="form-row">
    <div class="card">
        <h3>Rating</h3>
        <div style="font-size: 36px; font-weight: bold; color: #003594; margin: 20px 0;">
            {{ current_rating }}
        </div>
        <p style="color: #666; margin: 0;">
            {% if rating_change >= 0.0 %}
                <span style="color: #27ae60;">+{{ rating_change }}</span>
            {% else %}
                <span style="color: #e74c3c;">{{ rating_change }}</span>
            {% endif %}
            in last match
        </p>
    </div>
    
    <div class="card">
        <h3>Match Statistics</h3>
        <div style="margin: 15px 0;">
            <p><strong>Total Matches:</strong> {{ total_matches }}</p>
            <p><strong>Wins:</strong> {{ wins }}</p>
            <p><strong>Losses:</strong> {{ losses }}</p>
            <p><strong>Win Rate:</strong> {{ win_rate }}%</p>
        </div>
    </div>
</div>

{% if email %}
<div class="card">
    <p><strong>Email:</strong> {{ email }}</p>
</div>
{% endif %}

<div style="margin-top: 30px; text-align: center;">
    <a href="/players/{{ player_id }}/edit" class="btn btn-warning">✏️ Edit Player</a>
    <a href="/players/{{ player_id }}/delete" class="btn btn-danger" onclick="return confirm('Are you sure?')">🗑️ Delete Player</a>
</div>

{% if history_chart_data %}
<div class="card">
    <h2>📈 Rating Trend</h2>
    <div style="overflow-x: auto;">
        <canvas id="ratingChart" width="400" height="200"></canvas>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('ratingChart').getContext('2d');
const chart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: Array.from({length: {{ history_chart_data | length }}}. (_, i) => i + 1),
        datasets: [{
            label: 'Rating',
            data: [{{ history_chart_data | join(",") }}],
            borderColor: '#003594',
            backgroundColor: 'rgba(0, 53, 148, 0.1)',
            tension: 0.3,
            fill: true,
            pointRadius: 3,
            pointBackgroundColor: '#003594'
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: { display: true }
        },
        scales: {
            y: {
                title: { display: true, text: 'ELO Rating' },
                min: 1000,
                max: 2000
            }
        }
    }
});
</script>
{% endif %}

{% if head_to_head %}
<div class="card">
    <h2>⚔️ Head-to-Head</h2>
    <table>
        <thead>
            <tr>
                <th>Opponent</th>
                <th>Wins</th>
                <th>Losses</th>
                <th>Win Rate</th>
            </tr>
        </thead>
        <tbody>
            {% for opp in head_to_head %}
            <tr>
                <td><a href="/players/{{ opp.id }}">{{ opp.name }}</a></td>
                <td>{{ opp.wins }}</td>
                <td>{{ opp.losses }}</td>
                <td>{{ opp.win_percentage }}%</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}

{% if achievements %}
<div class="card">
    <h2>🏆 Achievements</h2>
    <div style="display: flex; flex-wrap: wrap; gap: 10px;">
        {% for achievement in achievements %}
        <span style="background: #FFB81C; color: #003594; padding: 8px 12px; border-radius: 20px; font-weight: bold;">
            {{ achievement }}
        </span>
        {% endfor %}
    </div>
</div>
{% endif %}
{% endblock %}