{% extends "base.html" %}

{% block title %}Player of the Year - HKFC MOTM System{% endblock %}

{% block content %}
<!-- Page Header -->
<div class="row mb-4">
  <div class="col-12">
    <div class="card">
      <div class="card-body text-center">
        <h1 class="card-title">
          <i class="fas fa-trophy text-warning me-2"></i>Player of the Year
        </h1>
        <p class="lead text-muted">MOTM and DotD vote standings</p>
      </div>
    </div>
  </div>
</div>

<!-- Chart Container -->
<div class="row">
  <div class="col-12">
    <div class="card">
      <div class="card-header bg-primary text-white">
        <h5 class="card-title mb-0">
          <i class="fas fa-chart-bar me-2"></i>Current Standings
        </h5>
      </div>
      <div class="card-body">
        <div id="poty-chart-container">
          <!-- Chart will be loaded here -->
          <div class="text-center py-5">
            <div class="spinner-border text-primary" role="status">
              <span class="visually-hidden">Loading...</span>
            </div>
            <p class="mt-3 text-muted">Loading player data...</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Legend -->
<div class="row mt-4">
  <div class="col-12">
    <div class="card">
      <div class="card-body">
        <h6 class="card-title">
          <i class="fas fa-info-circle me-2"></i>Legend
        </h6>
        <div class="row">
          <div class="col-md-6">
            <div class="d-flex align-items-center mb-2">
              <div class="motm-bar me-3" style="width: 20px; height: 20px; background: linear-gradient(135deg, #28a745, #20c997); border-radius: 4px;"></div>
              <span><strong>MOTM Votes</strong> - Man of the Match</span>
            </div>
          </div>
          <div class="col-md-6">
            <div class="d-flex align-items-center mb-2">
              <div class="dotd-bar me-3" style="width: 20px; height: 20px; background: linear-gradient(135deg, #dc3545, #fd7e14); border-radius: 4px;"></div>
              <span><strong>DotD Votes</strong> - Dick of the Day</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Navigation -->
<div class="row mt-4">
  <div class="col-12 text-center">
    <a href="/admin" class="btn btn-primary">
      <i class="fas fa-arrow-left me-2"></i>Back to Admin
    </a>
  </div>
</div>

<style>
.poty-player-card {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}

.poty-player-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.poty-player-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 0.5rem;
}

.poty-stats {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.poty-stat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.poty-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  min-width: 2rem;
  text-align: center;
}

.poty-stat-label {
  font-size: 0.9rem;
  color: #6c757d;
  font-weight: 500;
}

.poty-bar-container {
  flex: 1;
  margin-left: 1rem;
}

.poty-bar {
  height: 8px;
  border-radius: 4px;
  margin-bottom: 4px;
  position: relative;
  overflow: hidden;
  background-color: #e9ecef; /* Light gray background for empty bars */
}

.poty-bar-motm {
  background-color: rgba(40, 167, 69, 0.1); /* Very light green background */
}

.poty-bar-dotd {
  background-color: rgba(220, 53, 69, 0.1); /* Very light red background */
}

.poty-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.8s ease-in-out;
}

.poty-bar-motm .poty-bar-fill {
  background: linear-gradient(90deg, #28a745, #20c997);
}

.poty-bar-dotd .poty-bar-fill {
  background: linear-gradient(90deg, #dc3545, #fd7e14);
}

.poty-no-data {
  text-align: center;
  padding: 3rem;
  color: #6c757d;
}

.poty-no-data i {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: #dee2e6;
}

.poty-ranking {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: linear-gradient(135deg, #007bff, #0056b3);
  color: white;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.9rem;
  margin-right: 1rem;
}

.poty-ranking.gold {
  background: linear-gradient(135deg, #ffd700, #ffb347);
}

.poty-ranking.silver {
  background: linear-gradient(135deg, #c0c0c0, #a8a8a8);
}

.poty-ranking.bronze {
  background: linear-gradient(135deg, #cd7f32, #b8860b);
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    loadPOTYData();
});

function loadPOTYData() {
    fetch('/api/poty-results')
        .then(response => {
            console.log('Response status:', response.status);
            return response.json();
        })
        .then(data => {
            console.log('Raw API data:', data);
            renderPOTYChart(data);
        })
        .catch(error => {
            console.error('Error loading POTY data:', error);
            renderNoData();
        });
}

function renderPOTYChart(data) {
    const container = document.getElementById('poty-chart-container');
    
    console.log('POTY Data received:', data);
    
    if (!data || data.length === 0) {
        renderNoData();
        return;
    }
    
    // Sort by MOTM votes (descending), then by DotD votes (ascending for better ranking)
    data.sort((a, b) => {
        if (b.motmTotal !== a.motmTotal) {
            return b.motmTotal - a.motmTotal;
        }
        return a.dotdTotal - b.dotdTotal;
    });
    
    // Find max values for independent scaling - each bar type scales to its own maximum
    const maxMotm = Math.max(...data.map(p => p.motmTotal || 0));
    const maxDotd = Math.max(...data.map(p => p.dotdTotal || 0));
    
    let html = '';
    
    data.forEach((player, index) => {
        console.log('Processing player:', player);
        const ranking = index + 1;
        const rankingClass = ranking === 1 ? 'gold' : ranking === 2 ? 'silver' : ranking === 3 ? 'bronze' : '';
        
        const motmVotes = player.motmTotal || 0;
        const dotdVotes = player.dotdTotal || 0;
        
        html += '<div class="poty-player-card">';
        html += '<div class="d-flex align-items-center">';
        html += '<div class="poty-ranking ' + rankingClass + '">' + ranking + '</div>';
        html += '<div class="flex-grow-1">';
        html += '<div class="poty-player-name">' + (player.playerName || 'Unknown Player') + '</div>';
        html += '<div class="poty-stats">';
        html += '<div class="poty-stat">';
        html += '<div class="poty-stat-value text-success">' + motmVotes + '</div>';
        html += '<div class="poty-stat-label">MOTM</div>';
        html += '</div>';
        html += '<div class="poty-stat">';
        html += '<div class="poty-stat-value text-danger">' + dotdVotes + '</div>';
        html += '<div class="poty-stat-label">DotD</div>';
        html += '</div>';
        html += '<div class="poty-bar-container">';
        html += '<div class="poty-bar poty-bar-motm">';
        html += '<div class="poty-bar-fill" style="width: ' + (maxMotm > 0 ? (motmVotes / maxMotm * 100) : 0) + '%"></div>';
        html += '</div>';
        html += '<div class="poty-bar poty-bar-dotd">';
        html += '<div class="poty-bar-fill" style="width: ' + (maxDotd > 0 ? (dotdVotes / maxDotd * 100) : 0) + '%"></div>';
        html += '</div>';
        html += '</div>';
        html += '</div>';
        html += '</div>';
        html += '</div>';
        html += '</div>';
    });
    
    container.innerHTML = html;
    
    // Animate bars after a short delay
    setTimeout(() => {
        const bars = container.querySelectorAll('.poty-bar-fill');
        bars.forEach(bar => {
            const width = bar.style.width;
            bar.style.width = '0%';
            setTimeout(() => {
                bar.style.width = width;
            }, 100);
        });
    }, 200);
}

function renderNoData() {
    const container = document.getElementById('poty-chart-container');
    container.innerHTML = '<div class="poty-no-data">' +
        '<i class="fas fa-chart-line"></i>' +
        '<h4>No Vote Data Available</h4>' +
        '<p>No players have received MOTM or DotD votes yet.</p>' +
        '<p class="text-muted">Votes will appear here once players start receiving votes.</p>' +
        '</div>';
}

// Test function to verify basic functionality
function testPOTYChart() {
    const testData = [
        {playerName: 'Test Player 1', motmTotal: 5, dotdTotal: 1},
        {playerName: 'Test Player 2', motmTotal: 3, dotdTotal: 2}
    ];
    console.log('Testing with sample data:', testData);
    renderPOTYChart(testData);
}
</script>
{% endblock %}