{% extends "base.html" %}
{% block title %}گزارش‌ها{% endblock %}
{% block page_title %}گزارش‌های WFIS{% endblock %}
{% block subtitle %}تولید گزارش‌های حرفه‌ای - سریع، کامل و تکنیکال{% endblock %}

{% block content %}
<style>
    .report-card {
        background: linear-gradient(135deg, rgba(30, 40, 70, 0.95), rgba(20, 25, 50, 0.95));
        border: 1px solid rgba(0, 212, 255, 0.2);
        border-radius: 20px;
        padding: 24px;
        transition: all 0.3s;
        cursor: pointer;
    }
    .report-card:hover {
        transform: translateY(-5px);
        border-color: #00d4ff;
        box-shadow: 0 10px 30px rgba(0, 212, 255, 0.2);
    }
    .report-icon { font-size: 2.5rem; margin-bottom: 16px; }
    .report-title { font-size: 1.25rem; font-weight: 700; color: #00d4ff; margin-bottom: 8px; }
    .report-desc { color: #94a3b8; font-size: 0.85rem; margin-bottom: 16px; }
    .report-features { list-style: none; padding: 0; }
    .report-features li { color: #cbd5e1; font-size: 0.8rem; padding: 4px 0; display: flex; align-items: center; gap: 8px; }
    .report-features li i { color: #00ff88; font-size: 0.7rem; }
    .generate-btn {
        width: 100%;
        margin-top: 16px;
        padding: 10px;
        background: linear-gradient(135deg, #00d4ff, #0066ff);
        border: none;
        border-radius: 12px;
        color: white;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s;
    }
    .generate-btn:hover { transform: scale(1.02); box-shadow: 0 0 15px rgba(0, 212, 255, 0.5); }
    .history-item {
        background: rgba(30, 35, 60, 0.95);
        border-radius: 12px;
        padding: 12px 16px;
        margin-bottom: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: all 0.3s;
    }
    .history-item:hover { background: rgba(0, 212, 255, 0.1); }
</style>

<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
    <div class="report-card" onclick="generateReport('quick')">
        <div class="report-icon">⚡</div>
        <div class="report-title">گزارش سریع</div>
        <div class="report-desc">خلاصه وضعیت بازار در یک نگاه</div>
        <ul class="report-features">
            <li><i class="fas fa-check-circle"></i> قیمت لحظه‌ای و تغییرات</li>
            <li><i class="fas fa-check-circle"></i> خلاصه نوسان‌پذیری</li>
            <li><i class="fas fa-check-circle"></i> سناریوی غالب</li>
        </ul>
        <button class="generate-btn" onclick="event.stopPropagation(); generateReport('quick')"><i class="fas fa-download ml-2"></i>تولید گزارش سریع</button>
    </div>

    <div class="report-card" onclick="generateReport('full')">
        <div class="report-icon">📊</div>
        <div class="report-title">گزارش کامل</div>
        <div class="report-desc">تحلیل جامع و کامل بازار</div>
        <ul class="report-features">
            <li><i class="fas fa-check-circle"></i> تحلیل کامل تکنیکال</li>
            <li><i class="fas fa-check-circle"></i> مناطق نقدینگی</li>
            <li><i class="fas fa-check-circle"></i> سناریوهای مونت کارلو</li>
            <li><i class="fas fa-check-circle"></i> تحلیل هوشمند AI</li>
        </ul>
        <button class="generate-btn" onclick="event.stopPropagation(); generateReport('full')"><i class="fas fa-download ml-2"></i>تولید گزارش کامل</button>
    </div>

    <div class="report-card" onclick="generateReport('technical')">
        <div class="report-icon">📈</div>
        <div class="report-title">گزارش تکنیکال</div>
        <div class="report-desc">تحلیل تکنیکال حرفه‌ای</div>
        <ul class="report-features">
            <li><i class="fas fa-check-circle"></i> سطوح حمایت و مقاومت</li>
            <li><i class="fas fa-check-circle"></i> شاخص‌های تکنیکال (RSI, MACD)</li>
            <li><i class="fas fa-check-circle"></i> پیش‌بینی حرکتی</li>
        </ul>
        <button class="generate-btn" onclick="event.stopPropagation(); generateReport('technical')"><i class="fas fa-download ml-2"></i>تولید گزارش تکنیکال</button>
    </div>
</div>

<div class="glass-card p-6">
    <h3 class="section-title mb-4"><i class="fas fa-history text-cyan-400"></i> تاریخچه گزارش‌های تولید شده</h3>
    <div id="reportsHistory">
        <div class="text-center py-8 text-gray-400"><i class="fas fa-folder-open text-4xl mb-2 opacity-50"></i><p>هیچ گزارشی تولید نشده است</p><p class="text-sm">روی یکی از کارت‌های بالا کلیک کنید</p></div>
    </div>
</div>

<script>
    let currentSymbol = 'BTC-USD';
    
    const symbolSelect = document.getElementById('globalSymbolSelect');
    if (symbolSelect) symbolSelect.addEventListener('change', (e) => { currentSymbol = e.target.value; });
    
    async function generateReport(type) {
        const btn = event.target.closest('button');
        const originalText = btn.innerHTML;
        btn.innerHTML = '<span class="loading-spinner"></span> در حال تولید...';
        btn.disabled = true;
        
        try {
            const response = await fetch(`/api/reports/generate?symbol=${currentSymbol}&type=${type}`);
            if (!response.ok) throw new Error('خطا در تولید گزارش');
            
            const blob = await response.blob();
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            const typeNames = { quick: 'Quick', full: 'Full', technical: 'Technical' };
            a.download = `WFIS_${typeNames[type]}_${currentSymbol}_${new Date().toISOString().slice(0,19)}.pdf`;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            window.URL.revokeObjectURL(url);
            
            saveToHistory(type);
            
        } catch(e) {
            alert('خطا در تولید گزارش: ' + e.message);
        } finally {
            btn.innerHTML = originalText;
            btn.disabled = false;
        }
    }
    
    function saveToHistory(type) {
        let history = JSON.parse(localStorage.getItem('wfis_reports_history') || '[]');
        const typeNames = { quick: 'سریع', full: 'کامل', technical: 'تکنیکال' };
        history.unshift({ id: Date.now(), type: type, typeName: typeNames[type], symbol: currentSymbol, date: new Date().toISOString() });
        history = history.slice(0, 20);
        localStorage.setItem('wfis_reports_history', JSON.stringify(history));
        displayHistory();
    }
    
    function displayHistory() {
        const history = JSON.parse(localStorage.getItem('wfis_reports_history') || '[]');
        const container = document.getElementById('reportsHistory');
        
        if (history.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><p class="text-sm">روی یکی از کارت‌های بالا کلیک کنید</p></div>`;
            return;
        }
        
        container.innerHTML = history.map(report => `
            <div class="history-item">
                <div><span class="font-bold text-cyan-400">${report.typeName}</span><span class="text-gray-400 mx-2">•</span><span>${report.symbol}</span><div class="text-xs text-gray-500 mt-1">${new Date(report.date).toLocaleString('fa-IR')}</div></div>
                <button onclick="downloadAgain('${report.id}')" class="text-cyan-400 hover:text-cyan-300"><i class="fas fa-download"></i> دانلود مجدد</button>
            </div>
        `).join('');
    }
    
    function downloadAgain(id) {
        const history = JSON.parse(localStorage.getItem('wfis_reports_history') || '[]');
        const report = history.find(r => r.id == id);
        if (report) { currentSymbol = report.symbol; generateReport(report.type); }
    }
    
    displayHistory();
</script>
{% endblock %}