{% extends "base.html" %}

{% block title %}Monthly Show & Tell Contest - Five Cities Orchid Society{% endblock %}

{% block extra_css %}
<style>
.contest-header {
    background: linear-gradient(135deg, #6B3FA0 0%, #28a745 100%);
    color: white;
    padding: 60px 0;
    text-align: center;
    border-radius: 15px;
    margin-bottom: 40px;
}

.contest-info-bar {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.deadline-countdown {
    background: #e74c3c;
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: bold;
    font-size: 1.1rem;
}

.deadline-countdown.inactive {
    background: #6c757d;
}

.category-tabs {
    display: flex;
    background: #f8f9fa;
    border-radius: 12px;
    padding: 8px;
    margin-bottom: 30px;
    overflow-x: auto;
}

.category-tab {
    flex: 1;
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.category-tab.active {
    background: #6B3FA0;
    color: white;
}

.category-tab:hover:not(.active) {
    background: #e9ecef;
}

.category-section {
    display: none;
    margin-bottom: 40px;
}

.category-section.active {
    display: block;
}

.entries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 25px;
    margin-bottom: 30px;
}

.entry-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    position: relative;
}

.entry-card:hover {
    transform: translateY(-3px);
}

.entry-image-container {
    position: relative;
    height: 250px;
    background: #f8f9fa;
    overflow: hidden;
}

.entry-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.entry-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 8px 15px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.9rem;
    background: rgba(255,255,255,0.95);
    color: #333;
    display: none;
}

.entry-badge.winner {
    display: block;
}

.entry-badge.first {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    color: #333;
}

.entry-badge.second {
    background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
    color: #333;
}

.entry-badge.third {
    background: linear-gradient(135deg, #cd7f32, #daa520);
    color: white;
}

.entry-content {
    padding: 20px;
}

.entry-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 8px;
}

.entry-caption {
    color: #6c757d;
    line-height: 1.5;
    margin-bottom: 15px;
    font-size: 0.95rem;
}

.entry-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    border-top: 1px solid #e9ecef;
}

.vote-btn {
    background: #28a745;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.vote-btn:hover {
    background: #218838;
    transform: scale(1.05);
}

.vote-btn:disabled {
    background: #6c757d;
    cursor: not-allowed;
    transform: none;
}

.vote-count {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #6c757d;
    font-weight: bold;
}

.contest-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: linear-gradient(135deg, #6b73ff 0%, #000dff 100%);
    color: white;
    padding: 25px;
    border-radius: 12px;
    text-align: center;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 8px;
}

.stat-label {
    font-size: 0.9rem;
    opacity: 0.9;
}

.leaderboard-section {
    background: white;
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.leaderboard-item {
    display: flex;
    align-items: center;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 10px;
    transition: background 0.3s ease;
}

.leaderboard-item:hover {
    background: #f8f9fa;
}

.leaderboard-rank {
    font-size: 1.5rem;
    font-weight: bold;
    margin-right: 20px;
    width: 40px;
    text-align: center;
}

.leaderboard-rank.first { color: #ffd700; }
.leaderboard-rank.second { color: #c0c0c0; }
.leaderboard-rank.third { color: #cd7f32; }

.leaderboard-info {
    flex: 1;
}

.leaderboard-name {
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 5px;
}

.leaderboard-caption {
    color: #6c757d;
    font-size: 0.9rem;
}

.leaderboard-votes {
    font-size: 1.2rem;
    font-weight: bold;
    color: #28a745;
}

.empty-category {
    text-align: center;
    padding: 60px 20px;
    color: #6c757d;
}

.cta-section {
    background: #f8f9fa;
    padding: 40px;
    border-radius: 15px;
    text-align: center;
    margin-top: 40px;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .contest-header {
        padding: 40px 20px;
    }
    
    .contest-info-bar {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    
    .category-tabs {
        flex-direction: column;
        gap: 5px;
    }
    
    .entries-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .contest-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .leaderboard-item {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    
    .entry-footer {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }
}
</style>
{% endblock %}

{% block content %}
<div class="contest-container">
    <!-- Contest Header -->
    <div class="contest-header">
        <div class="container">
            <h1 class="display-4 mb-3">🌿 Monthly Show & Tell Contest</h1>
            <p class="lead mb-3">
                Vote for your favorite orchids! Members submit up to 5 plants each month.
            </p>
            <p class="mb-0">
                Categories: <strong>Species • Hybrids • Cattleyas • Intergenerics</strong>
            </p>
        </div>
    </div>

    <div class="container">
        <!-- Contest Info Bar -->
        <div class="contest-info-bar">
            <div>
                <h5 class="mb-1">{{ period.month_name }} {{ period.year }} Contest</h5>
                <p class="mb-0 text-muted">{{ stats.total_entries }} entries • {{ stats.total_votes }} votes</p>
            </div>
            
            <div class="deadline-countdown {% if not period.is_active %}inactive{% endif %}">
                {% if period.is_active %}
                ⏰ Deadline: {{ period.deadline_str }}
                {% else %}
                🔒 Submission Closed
                {% endif %}
            </div>
            
            <div>
                <a href="/contest/submit" class="btn btn-primary btn-lg {% if not period.is_active %}disabled{% endif %}">
                    <i data-feather="plus" class="me-2"></i>Submit Entry
                </a>
            </div>
        </div>

        <!-- Contest Statistics -->
        <div class="contest-stats">
            <div class="stat-card">
                <div class="stat-number">{{ stats.total_entries }}</div>
                <div class="stat-label">Total Entries</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">{{ stats.total_votes }}</div>
                <div class="stat-label">Total Votes</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">{{ stats.total_members }}</div>
                <div class="stat-label">Participating Members</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">{{ categories|length }}</div>
                <div class="stat-label">Categories</div>
            </div>
        </div>

        <!-- Category Navigation -->
        <div class="category-tabs">
            {% for category in categories %}
            <button class="category-tab {% if loop.first %}active{% endif %}" 
                    onclick="showCategory('{{ category }}')" 
                    data-category="{{ category }}">
                {{ category }}
                <span class="badge bg-light text-dark ms-2">{{ stats.category_breakdown[category].approved_entries }}</span>
            </button>
            {% endfor %}
        </div>

        <!-- Category Sections -->
        {% for category in categories %}
        <div class="category-section {% if loop.first %}active{% endif %}" id="category-{{ category }}">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h3>
                    <i data-feather="award" class="me-2"></i>
                    {{ category }} Category
                </h3>
                <span class="badge bg-primary">
                    {{ stats.category_breakdown[category].approved_entries }} entries
                </span>
            </div>

            {% set category_entries = leaderboard[category] %}
            {% if category_entries %}
            <!-- Entries Grid -->
            <div class="entries-grid" id="entries-{{ category }}">
                <!-- Entries will be loaded here via JavaScript -->
            </div>

            <!-- Category Leaderboard -->
            <div class="leaderboard-section">
                <h4 class="mb-3">
                    <i data-feather="trophy" class="me-2"></i>
                    Top Entries - {{ category }}
                </h4>
                
                <div class="leaderboard-list">
                    {% for entry in category_entries[:5] %}
                    <div class="leaderboard-item">
                        <div class="leaderboard-rank {% if loop.index == 1 %}first{% elif loop.index == 2 %}second{% elif loop.index == 3 %}third{% endif %}">
                            {% if loop.index <= 3 %}
                                {{ ['🥇', '🥈', '🥉'][loop.index - 1] }}
                            {% else %}
                                {{ loop.index }}
                            {% endif %}
                        </div>
                        <div class="leaderboard-info">
                            <div class="leaderboard-name">{{ entry.orchid_name }}</div>
                            <div class="leaderboard-caption">{{ entry.caption[:80] }}{% if entry.caption|length > 80 %}...{% endif %}</div>
                        </div>
                        <div class="leaderboard-votes">{{ entry.vote_count }} votes</div>
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% else %}
            <div class="empty-category">
                <i data-feather="camera" style="width: 64px; height: 64px;" class="mb-3"></i>
                <h4>No Entries Yet</h4>
                <p>Be the first to submit an orchid in the {{ category }} category!</p>
                {% if period.is_active %}
                <a href="/contest/submit" class="btn btn-primary">Submit Entry</a>
                {% endif %}
            </div>
            {% endif %}
        </div>
        {% endfor %}

        <!-- Call to Action -->
        {% if period.is_active %}
        <div class="cta-section">
            <h3 class="mb-3">Join the Contest!</h3>
            <p class="mb-4">
                FCOS members can submit up to 5 currently blooming orchids. 
                All visitors can vote for their favorites in each category.
            </p>
            <div class="d-flex gap-3 justify-content-center flex-wrap">
                <a href="/contest/submit" class="btn btn-primary btn-lg">
                    <i data-feather="camera" class="me-2"></i>Submit Your Orchids
                </a>
                <button class="btn btn-outline-primary btn-lg" onclick="scrollToVoting()">
                    <i data-feather="heart" class="me-2"></i>Start Voting
                </button>
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    feather.replace();
    loadCategoryEntries('{{ categories[0] }}');
});

function showCategory(category) {
    // Update tab active state
    document.querySelectorAll('.category-tab').forEach(tab => {
        tab.classList.remove('active');
    });
    document.querySelector(`[data-category="${category}"]`).classList.add('active');
    
    // Update section visibility
    document.querySelectorAll('.category-section').forEach(section => {
        section.classList.remove('active');
    });
    document.getElementById(`category-${category}`).classList.add('active');
    
    // Load entries for this category
    loadCategoryEntries(category);
}

function loadCategoryEntries(category) {
    const container = document.getElementById(`entries-${category}`);
    
    fetch(`/api/contest/entries?category=${category}`)
        .then(response => response.json())
        .then(data => {
            if (data.entries) {
                container.innerHTML = data.entries.map(entry => createEntryCard(entry)).join('');
                feather.replace();
            }
        })
        .catch(error => console.error('Error loading entries:', error));
}

function createEntryCard(entry) {
    const hasVoted = {{ voting_status|tojson }}[entry.category]?.has_voted || false;
    const isWinner = entry.rank && entry.rank <= 3;
    
    return `
        <div class="entry-card">
            <div class="entry-image-container">
                <img src="${entry.image_url || '/static/images/placeholder.png'}" 
                     alt="${entry.orchid_name}" 
                     class="entry-image">
                ${isWinner ? `<div class="entry-badge winner ${['first', 'second', 'third'][entry.rank - 1]}">${entry.badge}</div>` : ''}
            </div>
            <div class="entry-content">
                <h4 class="entry-title">${entry.orchid_name}</h4>
                <p class="entry-caption">${entry.caption}</p>
                <div class="entry-footer">
                    <button class="vote-btn" 
                            onclick="voteForEntry('${entry.id}')"
                            ${hasVoted ? 'disabled' : ''}>
                        <i data-feather="thumbs-up"></i>
                        ${hasVoted ? 'Voted' : 'Vote'}
                    </button>
                    <div class="vote-count">
                        <i data-feather="heart"></i>
                        <span id="votes-${entry.id}">${entry.vote_count}</span>
                    </div>
                </div>
            </div>
        </div>
    `;
}

function voteForEntry(entryId) {
    fetch('/api/contest/vote', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ entry_id: entryId })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Update vote count
            document.getElementById(`votes-${entryId}`).textContent = data.new_vote_count;
            
            // Disable vote button
            const voteBtn = event.target.closest('.vote-btn');
            voteBtn.disabled = true;
            voteBtn.innerHTML = '<i data-feather="check"></i> Voted';
            feather.replace();
            
            showOrchidToast('Vote cast successfully!', 'success');
            
            // Reload current category to update rankings
            const activeTab = document.querySelector('.category-tab.active');
            if (activeTab) {
                setTimeout(() => loadCategoryEntries(activeTab.dataset.category), 1000);
            }
        } else {
            showOrchidToast(data.error || 'Error casting vote', 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showOrchidToast('Network error occurred', 'error');
    });
}

function scrollToVoting() {
    document.querySelector('.category-tabs').scrollIntoView({ 
        behavior: 'smooth' 
    });
}

// Auto-refresh entries every 30 seconds during active contest
{% if period.is_active %}
setInterval(() => {
    const activeTab = document.querySelector('.category-tab.active');
    if (activeTab) {
        loadCategoryEntries(activeTab.dataset.category);
    }
}, 30000);
{% endif %}
</script>
{% endblock %}