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

{% block content %}
<style>
    .portfolio-card {
        background: rgba(20, 25, 50, 0.95);
        border-radius: 20px;
        padding: 24px;
        margin-bottom: 24px;
        border: 1px solid rgba(0, 212, 255, 0.2);
    }
    .asset-item {
        background: rgba(30, 35, 60, 0.95);
        border-radius: 16px;
        padding: 16px;
        margin-bottom: 12px;
        transition: all 0.3s;
        border: 1px solid rgba(0, 212, 255, 0.1);
    }
    .asset-item:hover {
        border-color: rgba(0, 212, 255, 0.4);
        transform: translateX(-5px);
    }
    .correlation-item {
        background: rgba(0, 212, 255, 0.05);
        border-radius: 12px;
        padding: 12px;
        margin-bottom: 8px;
        border-left: 3px solid;
    }
    .correlation-high { border-left-color: #ff4444; }
    .correlation-medium { border-left-color: #ffc107; }
    .correlation-low { border-left-color: #00ff88; }
    .suggestion-badge {
        background: rgba(0, 212, 255, 0.15);
        border: 1px solid rgba(0, 212, 255, 0.3);
        padding: 6px 14px;
        border-radius: 20px;
        font-size: 0.85rem;
        cursor: pointer;
        transition: all 0.3s;
    }
    .suggestion-badge:hover {
        background: rgba(0, 212, 255, 0.3);
        transform: scale(1.02);
    }
    .remove-btn {
        background: rgba(255, 68, 68, 0.2);
        border: 1px solid rgba(255, 68, 68, 0.3);
        padding: 6px 12px;
        border-radius: 10px;
        color: #ff8888;
        cursor: pointer;
        transition: all 0.3s;
    }
    .remove-btn:hover {
        background: rgba(255, 68, 68, 0.4);
        color: #ffffff;
    }
    .score-circle {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        font-weight: 700;
        margin: 0 auto;
    }
</style>

<div class="portfolio-card">
    <h3 class="section-title mb-4"><i class="fas fa-plus-circle text-cyan-400"></i> افزودن دارایی جدید</h3>
    <div class="flex gap-3 flex-wrap">
        <input type="text" id="newAsset" placeholder="مثال: ETH-USD, SOL-USD, GC=F" class="flex-1 min-w-[200px]">
        <button onclick="addAsset()" class="btn-primary"><i class="fas fa-plus ml-2"></i>افزودن</button>
    </div>
    <div class="flex gap-2 flex-wrap mt-3">
        <span class="suggestion-badge" onclick="addSuggestedAsset('BTC-USD')">₿ BTC-USD</span>
        <span class="suggestion-badge" onclick="addSuggestedAsset('ETH-USD')">Ξ ETH-USD</span>
        <span class="suggestion-badge" onclick="addSuggestedAsset('SOL-USD')">◎ SOL-USD</span>
        <span class="suggestion-badge" onclick="addSuggestedAsset('GC=F')">🥇 Gold</span>
        <span class="suggestion-badge" onclick="addSuggestedAsset('^GSPC')">📊 S&P 500</span>
        <span class="suggestion-badge" onclick="addSuggestedAsset('EURUSD=X')">💱 EUR/USD</span>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <div class="portfolio-card">
        <h3 class="section-title mb-4"><i class="fas fa-chart-pie text-cyan-400"></i> پورتفوی من <span id="portfolioCount" class="text-sm text-gray-400 mr-2"></span></h3>
        <div id="portfolioList"><div class="text-center py-8 text-gray-400"><i class="fas fa-folder-open text-4xl mb-2 opacity-50"></i><p>هیچ دارایی در پورتفوی شما وجود ندارد</p></div></div>
    </div>
    
    <div class="portfolio-card">
        <h3 class="section-title mb-4"><i class="fas fa-chart-line text-cyan-400"></i> تحلیل همبستگی دارایی‌ها</h3>
        <div id="correlationPanel"><div class="text-center py-8 text-gray-400"><i class="fas fa-chart-line text-4xl mb-2 opacity-50"></i><p>برای مشاهده تحلیل همبستگی حداقل 2 دارایی به پورتفوی اضافه کنید</p></div></div>
    </div>
</div>

<script>
    let portfolio = [];
    
    function loadPortfolio() {
        const saved = localStorage.getItem('wfis_portfolio_v2');
        if (saved) {
            portfolio = JSON.parse(saved);
        } else {
            portfolio = [{ symbol: 'BTC-USD', added: new Date().toISOString() }, { symbol: 'ETH-USD', added: new Date().toISOString() }];
            savePortfolio();
        }
        renderPortfolio();
        loadCorrelationAnalysis();
    }
    
    function savePortfolio() {
        localStorage.setItem('wfis_portfolio_v2', JSON.stringify(portfolio));
        document.getElementById('portfolioCount').innerHTML = `(${portfolio.length} دارایی)`;
    }
    
    async function addAsset() {
        const input = document.getElementById('newAsset');
        const symbol = input.value.trim().toUpperCase();
        if (!symbol) { alert('لطفا نماد دارایی را وارد کنید'); return; }
        if (portfolio.find(a => a.symbol === symbol)) { alert('این دارایی قبلا در پورتفوی شما وجود دارد'); return; }
        
        try {
            const response = await fetch(`/api/market/snapshot?symbol=${symbol}`);
            const data = await response.json();
            if (data.error || !data.price) {
                alert(`نماد "${symbol}" معتبر نیست`);
                return;
            }
            portfolio.push({ symbol, added: new Date().toISOString() });
            savePortfolio();
            renderPortfolio();
            loadCorrelationAnalysis();
            input.value = '';
        } catch(e) {
            alert('خطا در بررسی نماد');
        }
    }
    
    function addSuggestedAsset(symbol) {
        if (portfolio.find(a => a.symbol === symbol)) {
            alert('این دارایی قبلا در پورتفوی شما وجود دارد');
            return;
        }
        portfolio.push({ symbol, added: new Date().toISOString() });
        savePortfolio();
        renderPortfolio();
        loadCorrelationAnalysis();
    }
    
    function removeAsset(index) {
        if (confirm(`آیا از حذف ${portfolio[index].symbol} از پورتفوی خود اطمینان دارید؟`)) {
            portfolio.splice(index, 1);
            savePortfolio();
            renderPortfolio();
            loadCorrelationAnalysis();
        }
    }
    
    async function renderPortfolio() {
        const container = document.getElementById('portfolioList');
        if (portfolio.length === 0) {
            container.innerHTML = `<div class="text-center py-8 text-gray-400"><i class="fas fa-folder-open text-4xl mb-2 opacity-50"></i><p>هیچ دارایی در پورتفوی شما وجود ندارد</p></div>`;
            return;
        }
        container.innerHTML = '<div class="text-center py-4"><div class="loading-spinner"></div><p class="mt-2 text-gray-400">در حال بروزرسانی قیمت‌ها...</p></div>';
        
        const assetsWithPrices = [];
        for (const asset of portfolio) {
            try {
                const response = await fetch(`/api/market/snapshot?symbol=${asset.symbol}`);
                const data = await response.json();
                assetsWithPrices.push({ ...asset, price: data.price || null, change: data.change_24h || null, error: data.error });
            } catch(e) {
                assetsWithPrices.push({ ...asset, price: null, error: true });
            }
        }
        
        container.innerHTML = assetsWithPrices.map((asset, idx) => `
            <div class="asset-item">
                <div class="flex justify-between items-center flex-wrap gap-3">
                    <div class="flex-1"><div class="asset-symbol font-bold text-cyan-400">${getSymbolIcon(asset.symbol)} ${asset.symbol}</div><div class="text-xs text-gray-400 mt-1">افزوده شده: ${new Date(asset.added).toLocaleDateString('fa-IR')}</div></div>
                    <div class="text-center"><div class="asset-price text-xl font-bold text-white">${asset.price ? `$${asset.price.toLocaleString()}` : '<span class="text-gray-500">---</span>'}</div><div class="text-sm ${asset.change >= 0 ? 'text-green-400' : 'text-red-400'}">${asset.change ? `${asset.change >= 0 ? '▲' : '▼'} ${Math.abs(asset.change).toFixed(2)}%` : '---'}</div></div>
                    <div><button onclick="removeAsset(${idx})" class="remove-btn"><i class="fas fa-trash"></i> حذف</button></div>
                </div>
            </div>
        `).join('');
    }
    
    async function loadCorrelationAnalysis() {
        const container = document.getElementById('correlationPanel');
        if (portfolio.length < 2) {
            container.innerHTML = `<div class="text-center py-8 text-gray-400"><i class="fas fa-chart-line text-4xl mb-2 opacity-50"></i><p>برای مشاهده تحلیل همبستگی حداقل 2 دارایی به پورتفوی اضافه کنید</p></div>`;
            return;
        }
        
        container.innerHTML = '<div class="text-center py-4"><div class="loading-spinner"></div><p class="mt-2 text-gray-400">در حال تحلیل همبستگی...</p></div>';
        
        const symbols = portfolio.map(a => a.symbol);
        const params = new URLSearchParams();
        symbols.forEach(s => params.append('symbols', s));
        
        try {
            const response = await fetch(`/api/market/correlation?${params.toString()}&period=60d`);
            const data = await response.json();
            
            if (data.error) {
                container.innerHTML = `<div class="text-red-400 p-4">❌ ${data.error}</div>`;
                return;
            }
            
            const getCorrelationClass = (corr) => { if (corr > 0.5) return 'correlation-high'; if (corr > 0.2) return 'correlation-medium'; return 'correlation-low'; };
            const getCorrelationText = (corr) => { if (corr > 0.7) return 'همبستگی بسیار بالا 🔴'; if (corr > 0.5) return 'همبستگی بالا 🟠'; if (corr > 0.3) return 'همبستگی متوسط 🟡'; if (corr > 0) return 'همبستگی ضعیف 🟢'; return 'همبستگی منفی 🔵'; };
            
            const scoreColor = data.diversification_score > 70 ? 'text-green-400' : (data.diversification_score > 40 ? 'text-yellow-400' : 'text-red-400');
            const scoreBg = data.diversification_score > 70 ? '#00ff8820' : (data.diversification_score > 40 ? '#ffc10720' : '#ff444420');
            
            container.innerHTML = `
                <div class="text-center mb-4"><div class="score-circle" style="background: ${scoreBg}; border: 2px solid ${scoreBg.replace('20', '50')}"><span class="${scoreColor}">${data.diversification_score}</span></div><div class="text-sm text-gray-400 mt-2">امتیاز تنوع‌بخشی پورتفوی</div><div class="text-xs text-gray-500">${data.diversification_score > 70 ? 'عالی - ریسک پخش شده' : data.diversification_score > 40 ? 'متوسط - نیاز به بهینه‌سازی' : 'ضعیف - ریسک متمرکز'}</div></div>
                <div class="space-y-2">${data.correlations.map(c => `<div class="correlation-item ${getCorrelationClass(c.correlation)} p-3 rounded-lg bg-gray-800/30"><div class="flex justify-between items-center flex-wrap"><div><span class="font-bold">${c.asset1}</span> ⇄ <span class="font-bold">${c.asset2}</span></div><div class="font-bold ${Math.abs(c.correlation) > 0.5 ? 'text-red-400' : Math.abs(c.correlation) > 0.3 ? 'text-yellow-400' : 'text-green-400'}">${c.correlation}</div></div><div class="text-xs text-gray-400 mt-1">${getCorrelationText(c.correlation)}</div><div class="text-xs text-gray-500 mt-1">📝 ${c.interpretation}</div></div>`).join('')}</div>
                <div class="mt-4 p-3 bg-cyan-500/10 rounded-lg text-xs text-gray-300"><i class="fas fa-lightbulb text-cyan-400"></i> <strong>نکته:</strong> دارایی‌هایی با همبستگی پایین (زیر 0.3) برای تنوع‌بخشی پورتفوی مناسب‌تر هستند. همبستگی منفی یعنی دارایی‌ها معمولا خلاف جهت هم حرکت می‌کنند که برای پوشش ریسک عالی است.</div>
            `;
        } catch(e) {
            console.error(e);
            container.innerHTML = '<div class="text-red-400 p-4">❌ خطا در دریافت تحلیل همبستگی</div>';
        }
    }
    
    function getSymbolIcon(symbol) {
        const icons = { 'BTC-USD': '₿', 'ETH-USD': 'Ξ', 'SOL-USD': '◎', 'BNB-USD': '🔶', 'XRP-USD': '✖', 'GC=F': '🥇', '^GSPC': '📊', '^IXIC': '📈', 'EURUSD=X': '💱' };
        return icons[symbol] || '📉';
    }
    
    loadPortfolio();
    setInterval(() => { renderPortfolio(); loadCorrelationAnalysis(); }, 60000);
</script>
{% endblock %}