{% extends "base.html" %}
{% block title %}🚀 ارزهای دیجیتال در حال صعود{% endblock %}
{% block page_title %}🚀 ارزهای دیجیتال در حال صعود{% endblock %}
{% block subtitle %}لیست ارزهای دیجیتال با بیشترین رشد قیمت در 24 ساعت - داده‌های لحظه‌ای از CoinMarketCap{% endblock %}

{% block content %}
<style>
    .crypto-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 20px;
        margin-top: 20px;
    }
    .crypto-card {
        background: linear-gradient(135deg, rgba(30, 40, 70, 0.95), rgba(20, 25, 50, 0.95));
        border-radius: 20px;
        padding: 20px;
        border: 1px solid rgba(0, 212, 255, 0.2);
        transition: all 0.3s ease;
        cursor: pointer;
    }
    .crypto-card:hover {
        transform: translateY(-5px);
        border-color: #00d4ff;
        box-shadow: 0 10px 30px rgba(0, 212, 255, 0.2);
    }
    .crypto-icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: rgba(0, 212, 255, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
    }
    .crypto-icon img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }
    .price-positive {
        color: #00ff88;
    }
    .price-negative {
        color: #ff6666;
    }
    .rank-badge {
        background: rgba(0, 212, 255, 0.2);
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 0.7rem;
        color: #00d4ff;
    }
    .filter-bar {
        background: rgba(20, 25, 50, 0.95);
        border-radius: 16px;
        padding: 16px;
        margin-bottom: 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 15px;
    }
    .search-input {
        background: rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(0, 212, 255, 0.3);
        border-radius: 30px;
        padding: 10px 20px;
        color: white;
        width: 250px;
    }
    .search-input:focus {
        outline: none;
        border-color: #00d4ff;
    }
    .market-cap {
        font-size: 0.75rem;
        color: #94a3b8;
    }
    .loading-more {
        text-align: center;
        padding: 20px;
    }
    .tab-button {
        padding: 8px 20px;
        border-radius: 30px;
        background: rgba(255, 255, 255, 0.05);
        color: #94a3b8;
        cursor: pointer;
        transition: all 0.3s;
    }
    .tab-button.active {
        background: linear-gradient(135deg, #00d4ff, #0066ff);
        color: white;
    }
    .tab-button:hover:not(.active) {
        background: rgba(0, 212, 255, 0.2);
        color: #00d4ff;
    }
    .market-cap-value {
        font-weight: 600;
        color: #00d4ff;
    }
</style>

<div class="filter-bar">
    <div class="flex gap-3">
        <div class="tab-button active" data-tab="gainers" onclick="switchTab('gainers')">🚀 در حال صعود</div>
        <div class="tab-button" data-tab="losers" onclick="switchTab('losers')">📉 در حال نزول</div>
    </div>
    <div>
        <input type="text" id="searchInput" class="search-input" placeholder="🔍 جستجوی نماد یا نام..." onkeyup="searchCrypto()">
        <select id="limitSelect" class="bg-gray-800 border border-gray-700 rounded-xl px-3 py-2 ml-2" onchange="loadCryptos()">
            <option value="20">20</option>
            <option value="50" selected>50</option>
            <option value="100">100</option>
        </select>
    </div>
</div>

<div id="cryptoContainer" class="crypto-grid">
    <div class="text-center py-8 col-span-full">
        <div class="loading-spinner"></div>
        <p class="mt-4 text-gray-400">در حال بارگذاری داده‌ها از CoinMarketCap...</p>
    </div>
</div>

<div id="loadingMore" class="loading-more" style="display: none;">
    <div class="loading-spinner"></div>
    <p class="mt-2 text-gray-400">در حال بارگذاری بیشتر...</p>
</div>

<script>
    let currentTab = 'gainers';
    let currentLimit = 50;
    let isLoading = false;
    let allCryptos = [];
    
    function switchTab(tab) {
        currentTab = tab;
        document.querySelectorAll('.tab-button').forEach(btn => {
            btn.classList.remove('active');
            if (btn.getAttribute('data-tab') === tab) btn.classList.add('active');
        });
        loadCryptos();
    }
    
    async function loadCryptos() {
        const container = document.getElementById('cryptoContainer');
        const limit = document.getElementById('limitSelect').value;
        currentLimit = parseInt(limit);
        
        container.innerHTML = `<div class="text-center py-8 col-span-full"><div class="loading-spinner"></div><p class="mt-4 text-gray-400">در حال بارگذاری داده‌ها از CoinMarketCap...</p></div>`;
        
        try {
            const endpoint = currentTab === 'gainers' ? '/api/crypto/top-gainers' : '/api/crypto/top-losers';
            const response = await fetch(`${endpoint}?limit=${currentLimit}`);
            const data = await response.json();
            
            if (data.status === 'success' && data.cryptocurrencies) {
                allCryptos = data.cryptocurrencies;
                renderCryptos(allCryptos);
                if (data.is_mock) {
                    container.insertAdjacentHTML('beforeend', `<div class="col-span-full text-center text-yellow-400 text-sm p-4">⚠️ داده‌های شبیه‌سازی شده (API Key معتبر نیست)</div>`);
                }
            } else {
                container.innerHTML = `<div class="text-center text-red-400 p-8 col-span-full">❌ خطا در دریافت داده‌ها</div>`;
            }
        } catch(e) {
            console.error('Error:', e);
            container.innerHTML = `<div class="text-center text-red-400 p-8 col-span-full">❌ خطا در ارتباط با سرور</div>`;
        }
    }
    
    function renderCryptos(cryptos) {
        const container = document.getElementById('cryptoContainer');
        
        if (!cryptos || cryptos.length === 0) {
            container.innerHTML = `<div class="text-center text-gray-400 p-8 col-span-full">🔍 هیچ ارز دیجیتالی یافت نشد</div>`;
            return;
        }
        
        container.innerHTML = cryptos.map(crypto => `
            <div class="crypto-card" onclick="showCryptoDetail('${crypto.symbol}')">
                <div class="flex justify-between items-start mb-3">
                    <div class="flex items-center gap-3">
                        <div class="crypto-icon">
                            <img src="${crypto.icon_url}" alt="${crypto.symbol}" onerror="this.src='https://cryptologos.cc/logos/${crypto.symbol.toLowerCase()}-${crypto.symbol.toLowerCase()}-logo.png'">
                        </div>
                        <div>
                            <div class="font-bold text-lg">${crypto.symbol}</div>
                            <div class="text-xs text-gray-400">${crypto.name}</div>
                        </div>
                    </div>
                    <div class="rank-badge">#${crypto.rank}</div>
                </div>
                
                <div class="mt-3">
                    <div class="text-2xl font-bold">$${formatPrice(crypto.price)}</div>
                    <div class="flex items-center gap-2 mt-1">
                        <span class="${crypto.price_change_24h >= 0 ? 'price-positive' : 'price-negative'}">
                            ${crypto.price_change_24h >= 0 ? '▲' : '▼'} ${Math.abs(crypto.price_change_24h)}%
                        </span>
                        <span class="text-xs text-gray-500">(24h)</span>
                        <span class="text-xs text-gray-500 ml-2">7d: ${crypto.price_change_7d >= 0 ? '▲' : '▼'} ${Math.abs(crypto.price_change_7d)}%</span>
                    </div>
                </div>
                
                <div class="mt-3 pt-3 border-t border-gray-700/50">
                    <div class="flex justify-between items-center">
                        <span class="market-cap">💰 مارکت کپ</span>
                        <span class="market-cap-value">${formatMarketCap(crypto.market_cap)}</span>
                    </div>
                    <div class="flex justify-between items-center mt-1">
                        <span class="market-cap">📊 حجم 24h</span>
                        <span class="market-cap-value">${formatMarketCap(crypto.volume_24h)}</span>
                    </div>
                    <div class="flex justify-between items-center mt-1">
                        <span class="market-cap">🔄 عرضه در گردش</span>
                        <span class="market-cap-value">${formatSupply(crypto.circulating_supply)}</span>
                    </div>
                </div>
            </div>
        `).join('');
    }
    
    function searchCrypto() {
        const query = document.getElementById('searchInput').value.toLowerCase();
        if (!query) {
            renderCryptos(allCryptos);
            return;
        }
        
        const filtered = allCryptos.filter(crypto => 
            crypto.symbol.toLowerCase().includes(query) || 
            crypto.name.toLowerCase().includes(query)
        );
        renderCryptos(filtered);
    }
    
    function formatPrice(price) {
        if (price < 0.01) return price.toFixed(6);
        if (price < 1) return price.toFixed(4);
        if (price < 1000) return price.toFixed(2);
        return price.toLocaleString();
    }
    
    function formatMarketCap(value) {
        if (!value) return 'N/A';
        if (value >= 1e12) return (value / 1e12).toFixed(2) + 'T';
        if (value >= 1e9) return (value / 1e9).toFixed(2) + 'B';
        if (value >= 1e6) return (value / 1e6).toFixed(2) + 'M';
        return value.toLocaleString();
    }
    
    function formatSupply(supply) {
        if (!supply) return 'N/A';
        if (supply >= 1e9) return (supply / 1e9).toFixed(2) + 'B';
        if (supply >= 1e6) return (supply / 1e6).toFixed(2) + 'M';
        return supply.toLocaleString();
    }
    
    function showCryptoDetail(symbol) {
        window.open(`https://coinmarketcap.com/currencies/${symbol.toLowerCase()}/`, '_blank');
    }
    
    loadCryptos();
    setInterval(loadCryptos, 60000);
</script>
{% endblock %}