{% extends "base.html" %}
{% block title %}بورس ایران{% endblock %}
{% block page_title %}🇮🇷 بورس ایران{% endblock %}
{% block subtitle %}تحلیل لحظه‌ای نمادهای بورس تهران و آپلود فایل CSV{% endblock %}

{% block content %}
<style>
    .upload-area {
        border: 2px dashed rgba(0, 212, 255, 0.5);
        border-radius: 20px;
        padding: 30px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s;
        background: rgba(20, 25, 50, 0.8);
        margin-bottom: 24px;
    }
    .upload-area:hover {
        border-color: #00d4ff;
        background: rgba(0, 212, 255, 0.1);
    }
    .result-card {
        background: rgba(20, 25, 50, 0.95);
        border-radius: 20px;
        padding: 20px;
        margin-bottom: 20px;
        border: 1px solid rgba(0, 212, 255, 0.2);
    }
    .recommendation-box {
        text-align: center;
        padding: 20px;
        border-radius: 16px;
        margin-bottom: 20px;
    }
    .rec-strong-buy { background: linear-gradient(135deg, #00cc66, #009944); }
    .rec-buy { background: linear-gradient(135deg, #00ff88, #00cc66); color: #0a0e27; }
    .rec-hold { background: linear-gradient(135deg, #ffc107, #cc9900); color: #0a0e27; }
    .rec-sell { background: linear-gradient(135deg, #ff4444, #cc0000); }
    .indicator-value { font-size: 1.8rem; font-weight: 700; color: #00d4ff; }
    .stock-symbol { font-size: 1.1rem; font-weight: 700; color: #00d4ff; }
</style>

<div class="upload-area" id="uploadArea">
    <i class="fas fa-cloud-upload-alt fa-3x text-cyan-400 mb-3"></i>
    <p class="text-lg">📂 برای تحلیل کلیک کنید یا فایل CSV را بکشید</p>
    <p class="text-sm text-gray-400 mt-2">فایل CSV نمادهای بورس تهران</p>
    <input type="file" id="csvFile" accept=".csv" style="display: none;">
    <button id="uploadBtn" class="btn-primary mt-3">انتخاب فایل</button>
</div>

<div id="loadingDiv" class="text-center py-8" style="display: none;">
    <div class="loading-spinner"></div>
    <p class="mt-2">در حال تحلیل فایل...</p>
</div>

<div id="resultDiv" style="display: none;"></div>

<div class="flex justify-between items-center mb-6 mt-6">
    <h2 class="text-xl font-semibold">📋 لیست نمادهای بورس تهران</h2>
    <button id="refreshBtn" class="btn-primary"><i class="fas fa-sync-alt ml-2"></i>بروزرسانی</button>
</div>

<div id="stocksList" class="grid grid-cols-1 lg:grid-cols-2 gap-4">
    <div class="text-center py-8"><div class="loading-spinner"></div><p>در حال بارگذاری...</p></div>
</div>

<script>
    // آپلود و تحلیل CSV
    const uploadArea = document.getElementById('uploadArea');
    const csvFile = document.getElementById('csvFile');
    const uploadBtn = document.getElementById('uploadBtn');
    const loadingDiv = document.getElementById('loadingDiv');
    const resultDiv = document.getElementById('resultDiv');
    
    uploadBtn.onclick = () => csvFile.click();
    
    uploadArea.ondragover = (e) => { e.preventDefault(); uploadArea.style.borderColor = '#00d4ff'; };
    uploadArea.ondragleave = () => { uploadArea.style.borderColor = 'rgba(0,212,255,0.5)'; };
    
    uploadArea.ondrop = async (e) => {
        e.preventDefault();
        uploadArea.style.borderColor = 'rgba(0,212,255,0.5)';
        const file = e.dataTransfer.files[0];
        if (file && file.name.endsWith('.csv')) await analyzeFile(file);
        else alert('لطفا فایل CSV معتبر انتخاب کنید');
    };
    
    csvFile.onchange = async (e) => { if (e.target.files[0]) await analyzeFile(e.target.files[0]); };
    
    async function analyzeFile(file) {
        uploadArea.style.display = 'none';
        loadingDiv.style.display = 'block';
        resultDiv.style.display = 'none';
        
        const formData = new FormData();
        formData.append('file', file);
        
        try {
            const response = await fetch('/api/iran/csv/analyze', { method: 'POST', body: formData });
            const data = await response.json();
            if (data.error) showError(data.error);
            else displayResult(data);
        } catch(e) { showError('خطا در ارتباط با سرور'); }
    }
    
    function showError(msg) {
        loadingDiv.style.display = 'none';
        resultDiv.style.display = 'block';
        resultDiv.innerHTML = `<div class="result-card text-red-400 text-center p-4">❌ ${msg}</div><button onclick="resetUpload()" class="btn-secondary w-full">تلاش مجدد</button>`;
    }
    
    function resetUpload() {
        resultDiv.style.display = 'none';
        uploadArea.style.display = 'block';
        loadingDiv.style.display = 'none';
        csvFile.value = '';
    }
    
    function displayResult(data) {
        const info = data.basic_info;
        const ind = data.indicators;
        const rec = data.investment_recommendation;
        const history = data.price_history;
        
        let recClass = 'rec-hold';
        let recText = rec?.recommendation_text || '⚪ انتظار';
        if (rec?.recommendation === 'STRONG_BUY') recClass = 'rec-strong-buy';
        else if (rec?.recommendation === 'BUY') recClass = 'rec-buy';
        else if (rec?.recommendation === 'SELL') recClass = 'rec-sell';
        
        let html = `<div class="recommendation-box ${recClass}"><div class="text-2xl font-bold">${recText}</div><div class="text-sm mt-1">${rec?.summary || ''}</div></div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="result-card"><h3 class="text-lg font-semibold mb-3 text-cyan-400"><i class="fas fa-chart-line"></i> اطلاعات پایه</h3>
                    <div class="space-y-2"><div class="flex justify-between"><span>نماد:</span><span class="font-bold">${info?.symbol || '---'}</span></div>
                    <div class="flex justify-between"><span>آخرین قیمت:</span><span class="font-bold text-cyan-400">${(info?.last_price || 0).toLocaleString()} ریال</span></div>
                    <div class="flex justify-between"><span>بازده کل:</span><span class="${info?.total_return >= 0 ? 'text-green-400' : 'text-red-400'}">${info?.total_return || 0}%</span></div></div></div>
                <div class="result-card"><h3 class="text-lg font-semibold mb-3 text-cyan-400"><i class="fas fa-chart-line"></i> اندیکاتورها</h3>
                    <div class="grid grid-cols-2 gap-3 text-center"><div><div class="indicator-value">${ind?.rsi || 50}</div><div class="text-xs">RSI</div></div>
                    <div><div class="indicator-value">${ind?.volume_ratio || 1}x</div><div class="text-xs">نسبت حجم</div></div>
                    <div><div class="indicator-value">${ind?.volatility || 0}%</div><div class="text-xs">نوسان‌پذیری</div></div>
                    <div><div class="indicator-value">${ind?.trend_strength || 0}%</div><div class="text-xs">قدرت روند</div></div></div>
                    <div class="mt-3 text-sm"><div>میانگین 20 روزه: ${(ind?.ma20 || 0).toLocaleString()}</div><div>روند: <span class="text-cyan-400">${ind?.trend || '---'}</span></div></div></div>
            </div>
            <div class="result-card"><h3 class="text-lg font-semibold mb-3 text-cyan-400"><i class="fas fa-chart-line"></i> سطوح کلیدی</h3>
                <div class="flex justify-between items-center"><div>حمایت: <span class="text-green-400">${(ind?.support || 0).toLocaleString()}</span></div>
                <div>مقاومت: <span class="text-red-400">${(ind?.resistance || 0).toLocaleString()}</span></div>
                <div>تغییر روزانه: <span class="${ind?.daily_change >= 0 ? 'text-green-400' : 'text-red-400'}">${ind?.daily_change >= 0 ? '▲' : '▼'} ${Math.abs(ind?.daily_change || 0)}%</span></div></div></div>
            <div class="result-card"><h3 class="text-lg font-semibold mb-3 text-cyan-400"><i class="fas fa-list"></i> دلایل تحلیل</h3>
                <div class="space-y-1">${rec?.reasons?.map(r => `<div class="py-1 border-b border-gray-700/50">• ${r}</div>`).join('') || '<div>داده کافی برای تحلیل دقیق وجود ندارد</div>'}</div></div>`;
        
        if (history && history.length > 0) html += `<div class="result-card"><h3 class="text-lg font-semibold mb-3 text-cyan-400"><i class="fas fa-chart-line"></i> نمودار قیمت</h3><canvas id="priceChart" height="250"></canvas></div>`;
        html += `<button onclick="resetUpload()" class="btn-secondary w-full mt-2">بستن و آپلود مجدد</button>`;
        
        resultDiv.innerHTML = html;
        resultDiv.style.display = 'block';
        loadingDiv.style.display = 'none';
        
        if (history && history.length > 0) drawChart(history);
    }
    
    function drawChart(history) {
        const canvas = document.getElementById('priceChart');
        if (!canvas) return;
        new Chart(canvas.getContext('2d'), {
            type: 'line',
            data: { labels: history.map(h => h.date), datasets: [{ label: 'قیمت بسته شدن', data: history.map(h => h.close), borderColor: '#00d4ff', backgroundColor: 'rgba(0,212,255,0.1)', fill: true, tension: 0.3 }] },
            options: { responsive: true, maintainAspectRatio: true, plugins: { legend: { labels: { color: '#e2e8f0' } } }, scales: { x: { ticks: { color: '#94a3b8', maxRotation: 45 } }, y: { ticks: { color: '#94a3b8' } } } }
        });
    }
    
    // لیست نمادها
    async function loadStocks() {
        const container = document.getElementById('stocksList');
        container.innerHTML = '<div class="text-center py-8"><div class="loading-spinner"></div><p>در حال بارگذاری...</p></div>';
        try {
            const response = await fetch('/api/iran/stocks');
            const data = await response.json();
            if (data.error) { container.innerHTML = `<div class="text-red-400 text-center p-8">❌ ${data.error}</div>`; return; }
            container.innerHTML = data.stocks.map(stock => `
                <div class="result-card cursor-pointer hover:border-cyan-400">
                    <div class="flex justify-between items-start"><div><div class="stock-symbol">${stock.symbol}</div><div class="text-xs text-gray-400">${stock.name}</div></div>
                    <div class="text-right"><div class="text-xl font-bold">${stock.price.toLocaleString()} ریال</div><div class="${stock.change >= 0 ? 'text-green-400' : 'text-red-400'}">${stock.change >= 0 ? '▲' : '▼'} ${Math.abs(stock.change)}%</div></div></div>
                    <div class="grid grid-cols-2 gap-2 mt-3 text-sm"><div class="flex justify-between"><span class="text-gray-400">حجم:</span><span>${(stock.volume/1e6).toFixed(1)}M</span></div>
                    <div class="flex justify-between"><span class="text-gray-400">P/E:</span><span>${stock.pe_ratio}</span></div>
                    <div class="flex justify-between"><span class="text-gray-400">EPS:</span><span>${stock.eps.toLocaleString()}</span></div>
                    <div class="flex justify-between"><span class="text-gray-400">دامنه:</span><span>${stock.low.toLocaleString()} - ${stock.high.toLocaleString()}</span></div></div>
                </div>
            `).join('');
        } catch(e) { container.innerHTML = '<div class="text-red-400 text-center p-8">❌ خطا در دریافت داده</div>'; }
    }
    
    document.getElementById('refreshBtn')?.addEventListener('click', loadStocks);
    loadStocks();
</script>
{% endblock %}