{% extends "base.html" %}

{% block title %}Orchid Memory Games - Five Cities Orchid Society{% endblock %}

{% block content %}
<div class="container py-4">
    <!-- Game Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="text-center">
                <h1 class="display-4 mb-3">
                    <i data-feather="cpu" class="me-3 text-success"></i>
                    Orchid Memory Challenge
                </h1>
                <p class="lead text-muted">
                    Test your orchid knowledge with our concentration-style memory games!
                </p>
            </div>
        </div>
    </div>

    <!-- Difficulty Level Cards -->
    <div class="row g-4 mb-5">
        {% for level_key, level in difficulty_levels.items() %}
        <div class="col-lg-4">
            <div class="card h-100 shadow-sm level-card" data-level="{{ level_key }}">
                <div class="card-header text-center level-{{ level_key }}">
                    <h4 class="mb-0">
                        {% if level_key == 'easy' %}
                            <i data-feather="smile" class="me-2"></i>
                        {% elif level_key == 'medium' %}
                            <i data-feather="zap" class="me-2"></i>
                        {% else %}
                            <i data-feather="target" class="me-2"></i>
                        {% endif %}
                        {{ level.name }}
                    </h4>
                    <small class="text-muted">{{ level_key.title() }} Level</small>
                </div>
                <div class="card-body d-flex flex-column">
                    <p class="card-text mb-3">{{ level.description }}</p>
                    
                    <!-- Game Stats -->
                    <div class="row text-center mb-4">
                        <div class="col-4">
                            <div class="stat-item">
                                <i data-feather="grid" class="stat-icon text-primary"></i>
                                <small class="d-block">{{ level.grid_size }}×{{ level.grid_size }}</small>
                                <small class="text-muted">Grid</small>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="stat-item">
                                <i data-feather="clock" class="stat-icon text-warning"></i>
                                <small class="d-block">{{ (level.time_limit // 60) }}:{{ '{:02d}'.format(level.time_limit % 60) }}</small>
                                <small class="text-muted">Time</small>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="stat-item">
                                <i data-feather="star" class="stat-icon text-success"></i>
                                <small class="d-block">{{ level.points_base }}</small>
                                <small class="text-muted">Base Points</small>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-auto">
                        <a href="/games/memory/{{ level_key }}" class="btn btn-primary btn-lg w-100">
                            <i data-feather="play" class="me-2"></i>
                            Start {{ level_key.title() }} Game
                        </a>
                        <button class="btn btn-outline-secondary btn-sm w-100 mt-2" onclick="showLeaderboard('{{ level_key }}')">
                            <i data-feather="trophy" class="me-2"></i>
                            View Leaderboard
                        </button>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- Badge Showcase -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card bg-dark border-warning">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i data-feather="award" class="me-2 text-warning"></i>
                        Achievement Badges
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-2">
                            <div class="badge-showcase text-center">
                                <div class="badge-icon mb-2">
                                    <i data-feather="cpu" style="width: 48px; height: 48px; color: #17a2b8;"></i>
                                </div>
                                <h6>Memory Rookie</h6>
                                <small class="text-muted">Complete first game</small>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="badge-showcase text-center">
                                <div class="badge-icon mb-2">
                                    <i data-feather="zap" style="width: 48px; height: 48px; color: #ffc107;"></i>
                                </div>
                                <h6>Speed Demon</h6>
                                <small class="text-muted">Hard mode under 2 min</small>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="badge-showcase text-center">
                                <div class="badge-icon mb-2">
                                    <i data-feather="star" style="width: 48px; height: 48px; color: #28a745;"></i>
                                </div>
                                <h6>Perfect Memory</h6>
                                <small class="text-muted">Perfect efficiency</small>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="badge-showcase text-center">
                                <div class="badge-icon mb-2">
                                    <i data-feather="award" style="width: 48px; height: 48px; color: #dc3545;"></i>
                                </div>
                                <h6>Genus Master</h6>
                                <small class="text-muted">400+ points medium</small>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="badge-showcase text-center">
                                <div class="badge-icon mb-2">
                                    <i data-feather="target" style="width: 48px; height: 48px; color: #6f42c1;"></i>
                                </div>
                                <h6>Species Expert</h6>
                                <small class="text-muted">600+ points hard</small>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="badge-showcase text-center">
                                <div class="badge-icon mb-2">
                                    <i data-feather="crown" style="width: 48px; height: 48px; color: #fd7e14;"></i>
                                </div>
                                <h6>Coming Soon</h6>
                                <small class="text-muted">More badges...</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Game Instructions -->
    <div class="row">
        <div class="col-lg-8 mx-auto">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i data-feather="help-circle" class="me-2"></i>
                        How to Play
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6><i data-feather="mouse-pointer" class="me-2 text-primary"></i>Gameplay</h6>
                            <ul class="list-unstyled">
                                <li>• Click cards to flip them over</li>
                                <li>• Find matching pairs</li>
                                <li>• Clear the board to win</li>
                                <li>• Beat the clock for bonus points</li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <h6><i data-feather="target" class="me-2 text-success"></i>Scoring</h6>
                            <ul class="list-unstyled">
                                <li>• Base points per pair found</li>
                                <li>• Time bonus for speed</li>
                                <li>• Efficiency bonus for fewer moves</li>
                                <li>• Achievement badges for milestones</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Leaderboard Modal -->
<div class="modal fade" id="leaderboardModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i data-feather="trophy" class="me-2"></i>
                    Leaderboard - <span id="leaderboardLevel"></span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="leaderboardContent">
                    <div class="text-center">
                        <div class="spinner-border text-primary" role="status"></div>
                        <p class="mt-2">Loading leaderboard...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<style>
.level-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.level-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.level-easy .card-header {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
}

.level-medium .card-header {
    background: linear-gradient(135deg, #ffc107, #fd7e14);
    color: #212529;
}

.level-hard .card-header {
    background: linear-gradient(135deg, #dc3545, #e83e8c);
    color: white;
}

.stat-item {
    padding: 0.5rem 0;
}

.stat-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 0.25rem;
}

.badge-showcase {
    padding: 1rem;
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    transition: background 0.2s ease;
}

.badge-showcase:hover {
    background: rgba(255,255,255,0.1);
}

.badge-icon {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}
</style>

<script>
function showLeaderboard(level) {
    document.getElementById('leaderboardLevel').textContent = level.charAt(0).toUpperCase() + level.slice(1);
    
    const modal = new bootstrap.Modal(document.getElementById('leaderboardModal'));
    modal.show();
    
    // Load leaderboard data
    fetch(`/api/games/memory/leaderboard/${level}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                displayLeaderboard(data.leaderboard);
            } else {
                document.getElementById('leaderboardContent').innerHTML = 
                    '<div class="alert alert-warning">Unable to load leaderboard</div>';
            }
        })
        .catch(error => {
            document.getElementById('leaderboardContent').innerHTML = 
                '<div class="alert alert-danger">Error loading leaderboard</div>';
        });
}

function displayLeaderboard(scores) {
    const content = document.getElementById('leaderboardContent');
    
    if (scores.length === 0) {
        content.innerHTML = '<div class="text-center text-muted">No scores yet. Be the first!</div>';
        return;
    }
    
    let html = `
        <div class="table-responsive">
            <table class="table table-dark table-striped">
                <thead>
                    <tr>
                        <th>Rank</th>
                        <th>Player</th>
                        <th>Score</th>
                        <th>Time</th>
                        <th>Moves</th>
                        <th>Date</th>
                    </tr>
                </thead>
                <tbody>
    `;
    
    scores.forEach(score => {
        const minutes = Math.floor(score.time_taken / 60);
        const seconds = score.time_taken % 60;
        const timeStr = `${minutes}:${seconds.toString().padStart(2, '0')}`;
        
        html += `
            <tr>
                <td>
                    ${score.rank <= 3 ? 
                        `<i data-feather="${score.rank === 1 ? 'award' : score.rank === 2 ? 'star' : 'circle'}" 
                            class="me-2 text-${score.rank === 1 ? 'warning' : score.rank === 2 ? 'secondary' : 'warning'}"></i>` : 
                        ''
                    }
                    #${score.rank}
                </td>
                <td>${score.username}</td>
                <td><strong>${score.score.toLocaleString()}</strong></td>
                <td>${timeStr}</td>
                <td>${score.moves_made}</td>
                <td>${score.date}</td>
            </tr>
        `;
    });
    
    html += '</tbody></table></div>';
    content.innerHTML = html;
    feather.replace();
}

// Initialize page
document.addEventListener('DOMContentLoaded', function() {
    feather.replace();
});
</script>
{% endblock %}