{% extends "base.html" %}
{% block title %}چارت حرفه‌ای TradingView{% endblock %}
{% block page_title %}چارت تحلیلی پیشرفته{% endblock %}
{% block subtitle %}نمودار حرفه‌ای با داده‌های لحظه‌ای{% endblock %}

{% block content %}
<style>
    .tv-container {
        background: #131722;
        border-radius: 20px;
        overflow: hidden;
        border: 1px solid rgba(0, 212, 255, 0.3);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    }
    .tv-chart-frame {
        width: 100%;
        height: 550px;
        border: none;
    }
    .control-bar {
        background: rgba(20, 25, 50, 0.95);
        border-radius: 16px;
        padding: 16px;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 15px;
    }
    .symbol-badge {
        background: linear-gradient(135deg, #00d4ff, #0066ff);
        padding: 8px 20px;
        border-radius: 30px;
        font-weight: bold;
        font-size: 1.2rem;
    }
    .info-panel {
        background: rgba(20, 25, 50, 0.95);
        border-radius: 16px;
        padding: 16px;
        margin-top: 20px;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 15px;
    }
    .info-card {
        text-align: center;
        padding: 12px;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 12px;
        transition: all 0.3s;
    }
    .info-card:hover {
        transform: translateY(-3px);
        background: rgba(0, 212, 255, 0.1);
    }
    .info-label {
        color: #94a3b8;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 8px;
    }
    .info-value {
        font-size: 1.3rem;
        font-weight: 700;
        color: #00d4ff;
    }
    .positive { color: #00ff88; }
    .negative { color: #ff6666; }
    .loading-chart {
        background: #131722;
        height: 550px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #94a3b8;
        border-radius: 16px;
    }
</style>

<div class="control-bar">
    <div class="symbol-badge" id="currentSymbolDisplay">BTC-USD</div>
    <div class="flex gap-3">
        <button onclick="refreshChart()" class="btn-primary">
            <i class="fas fa-sync-alt ml-2"></i> بروزرسانی چارت
        </button>
    </div>
</div>

<div class="tv-container">
    <div id="tv-chart-container" class="loading-chart">
        <div><div class="loading-spinner"></div><p class="mt-3">در حال بارگذاری چارت...</p></div>
    </div>
</div>

<div class="info-panel" id="marketInfo">
    <div class="info-card"><div class="info-label">💰 قیمت لحظه‌ای</div><div class="info-value" id="infoPrice">---</div></div>
    <div class="info-card"><div class="info-label">📈 تغییرات 24h</div><div class="info-value" id="infoChange">---</div></div>
    <div class="info-card"><div class="info-label">📊 بالاترین 24h</div><div class="info-value" id="infoHigh">---</div></div>
    <div class="info-card"><div class="info-label">📉 پایین‌ترین 24h</div><div class="info-value" id="infoLow">---</div></div>
    <div class="info-card"><div class="info-label">📊 حجم 24h</div><div class="info-value" id="infoVolume">---</div></div>
</div>

<script>
    let currentSymbol = 'BTC-USD';
    let currentFrame = null;
    
    function getTradingViewSymbol(symbol) {
        const mapping = {
            'BTC-USD': 'BINANCE:BTCUSDT',
            'ETH-USD': 'BINANCE:ETHUSDT',
            'SOL-USD': 'BINANCE:SOLUSDT',
            'BNB-USD': 'BINANCE:BNBUSDT',
            'XRP-USD': 'BINANCE:XRPUSDT',
            'GC=F': 'TVC:GOLD',
            '^GSPC': 'SPX',
            '^IXIC': 'NASDAQ',
            'EURUSD=X': 'FX_IDC:EURUSD',
            'GBPUSD=X': 'FX_IDC:GBPUSD',
            'USDJPY=X': 'FX_IDC:USDJPY'
        };
        return mapping[symbol] || `BINANCE:${symbol.replace('-USD', 'USDT')}`;
    }
    
    function getChartUrl(symbol) {
        const tvSymbol = getTradingViewSymbol(symbol);
        return `https://s.tradingview.com/widgetembed/?frame_id=tradingview_${Date.now()}&symbol=${encodeURIComponent(tvSymbol)}&interval=60&hidetoptoolbar=0&symboledit=0&saveimage=0&toolbarbg=131722&studies=MASimple@tv-basicstudies,Volume@tv-basicstudies,RSI@tv-basicstudies&theme=dark&style=1&timezone=exchange&locale=en`;
    }
    
    function loadChart() {
        const container = document.getElementById('tv-chart-container');
        const symbol = getCurrentSymbol();
        currentSymbol = symbol;
        
        container.innerHTML = `<div class="loading-chart" style="display: flex; flex-direction: column; align-items: center; justify-content: center;"><div class="loading-spinner"></div><p class="mt-3 text-gray-400">در حال بارگذاری چارت ${symbol}...</p></div>`;
        
        if (currentFrame) currentFrame.remove();
        
        currentFrame = document.createElement('iframe');
        currentFrame.className = 'tv-chart-frame';
        currentFrame.id = `tv_chart_${Date.now()}`;
        currentFrame.src = getChartUrl(symbol);
        currentFrame.style.width = '100%';
        currentFrame.style.height = '550px';
        currentFrame.style.border = 'none';
        
        container.innerHTML = '';
        container.appendChild(currentFrame);
        document.getElementById('currentSymbolDisplay').innerHTML = symbol;
    }
    
    function getCurrentSymbol() {
        const select = document.getElementById('globalSymbolSelect');
        return select ? select.value : 'BTC-USD';
    }
    
    async function updateMarketInfo() {
        const symbol = getCurrentSymbol();
        
        try {
            const response = await fetch(`/api/market/snapshot?symbol=${symbol}`);
            const data = await response.json();
            
            document.getElementById('infoPrice').innerHTML = `$${data.price?.toLocaleString() || '---'}`;
            const isPositive = data.change_24h >= 0;
            document.getElementById('infoChange').innerHTML = `<span class="${isPositive ? 'positive' : 'negative'}">${isPositive ? '▲' : '▼'} ${Math.abs(data.change_24h).toFixed(2)}%</span>`;
            document.getElementById('infoHigh').innerHTML = `$${data.high_24h?.toLocaleString() || '---'}`;
            document.getElementById('infoLow').innerHTML = `$${data.low_24h?.toLocaleString() || '---'}`;
            document.getElementById('infoVolume').innerHTML = formatNumber(data.volume);
            
        } catch(e) {
            console.error('Error:', e);
        }
    }
    
    function refreshChart() {
        loadChart();
        updateMarketInfo();
    }
    
    function formatNumber(num) {
        if (!num) return '---';
        if (num >= 1e9) return (num/1e9).toFixed(1) + 'B';
        if (num >= 1e6) return (num/1e6).toFixed(1) + 'M';
        if (num >= 1e3) return (num/1e3).toFixed(1) + 'K';
        return num.toLocaleString();
    }
    
    const symbolSelect = document.getElementById('globalSymbolSelect');
    if (symbolSelect) symbolSelect.addEventListener('change', () => { loadChart(); updateMarketInfo(); });
    
    loadChart();
    updateMarketInfo();
    setInterval(updateMarketInfo, 30000);
</script>
{% endblock %}