{% extends "base.html" %}

{% block title_key %}ai_mentor.session_detail_title{% endblock %}
{% block title %}📈 Detail Sesi {{ session_date }} - AI Mentor{% endblock %}

{% block head_extra %}
<style>
.mentor-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.session-card {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.emotion-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
}

.emotion-tenang { background-color: #10b981; color: white; }
.emotion-serakah { background-color: #f59e0b; color: white; }
.emotion-takut { background-color: #8b5cf6; color: white; }
.emotion-frustasi { background-color: #ef4444; color: white; }
.emotion-netral { background-color: #6b7280; color: white; }

.profit-positive { color: #10b981; font-weight: bold; }
.profit-negative { color: #ef4444; font-weight: bold; }

.ai-insight {
    background: #f8fafc;
    border-left: 4px solid #3b82f6;
    padding: 1rem;
    border-radius: 0 8px 8px 0;
    margin: 1rem 0;
}

.ai-section {
    background: #fef7ff;
    border: 1px solid #e879f9;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.ai-section h3 {
    color: #a21caf;
    margin-bottom: 1rem;
}

.trade-item {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 0.5rem;
}

.trade-profit { border-left: 4px solid #10b981; }
.trade-loss { border-left: 4px solid #ef4444; }

.section-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 1rem;
    transition: color 0.2s;
}

.back-btn:hover {
    color: #2563eb;
}

.performance-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.perf-stat {
    text-align: center;
    padding: 1rem;
    background: white;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.recommendation-list {
    list-style: none;
    padding: 0;
}

.recommendation-list li {
    background: #f0f9ff;
    border-left: 3px solid #0ea5e9;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: 0 6px 6px 0;
}

.emotion-analysis {
    background: linear-gradient(135deg, #fef3c7 0%, #fbbf24 100%);
    color: #92400e;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.market-context {
    background: linear-gradient(135deg, #e0e7ff 0%, #6366f1 100%);
    color: white;
    padding: 1rem;
    border-radius: 8px;
}
</style>
{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <!-- Back Navigation -->
    <a href="/ai-mentor/history" class="back-btn">
        <i class="fas fa-arrow-left"></i>
        <span data-i18n="ai_mentor.back_to_history">Kembali ke Riwayat</span>
    </a>

    <!-- Header -->
    <div class="mentor-card">
        <h1 class="text-3xl font-bold mb-2" data-i18n="ai_mentor.session_trading_detail">📈 Detail Sesi Trading</h1>
        <p class="text-blue-100 text-lg">{{ session_date }} - <span data-i18n="ai_mentor.full_analysis">Analisis lengkap dari AI Mentor Indonesia</span></p>
        <div class="mt-4 flex items-center space-x-4">
            <span class="text-blue-200" data-i18n="ai_mentor.ai_analysis">🇮🇩 AI Analysis</span>
            <span class="text-blue-200" data-i18n="ai_mentor.personal_insights">• 🧠 Personal Insights</span>
            <span class="text-blue-200" data-i18n="ai_mentor.performance_review">• 📊 Performance Review</span>
        </div>
    </div>

    <!-- Performance Overview -->
    <div class="performance-overview">
        <div class="perf-stat">
            <div class="text-2xl font-bold {{ 'profit-positive' if session_data.total_profit_loss > 0 else 'profit-negative' if session_data.total_profit_loss < 0 else 'text-gray-600' }}">
                ${{ "%.2f"|format(session_data.total_profit_loss or 0) }}
            </div>
            <div class="text-sm text-gray-500 mt-1" data-i18n="ai_mentor.total_pnl">Total P&L</div>
        </div>
        
        <div class="perf-stat">
            <div class="text-2xl font-bold text-blue-600">{{ session_data.trades|length if session_data.trades else 0 }}</div>
            <div class="text-sm text-gray-500 mt-1" data-i18n="ai_mentor.total_trades">Total Trades</div>
        </div>
        
        <div class="perf-stat">
            {% set winning_trades = session_data.trades|selectattr('profit_loss', '>', 0)|list|length if session_data.trades else 0 %}
            {% set total_trades = session_data.trades|length if session_data.trades else 0 %}
            {% set win_rate = (winning_trades / total_trades * 100) if total_trades > 0 else 0 %}
            <div class="text-2xl font-bold {{ 'text-green-600' if win_rate >= 60 else 'text-red-600' if win_rate < 40 else 'text-yellow-600' }}">
                {{ "%.1f"|format(win_rate) }}%
            </div>
            <div class="text-sm text-gray-500 mt-1" data-i18n="ai_mentor.win_rate">Win Rate</div>
        </div>
        
        <div class="perf-stat">
            {% if session_data.emotions %}
                <span class="emotion-badge emotion-{{ session_data.emotions }}">{{ session_data.emotions|title }}</span>
            {% else %}
                <div class="text-2xl font-bold text-gray-400">-</div>
            {% endif %}
            <div class="text-sm text-gray-500 mt-1" data-i18n="ai_mentor.emotional_state">Emotional State</div>
        </div>
    </div>

    <!-- Main Content Grid -->
    <div class="section-grid">
        <!-- Trading Summary -->
        <div class="session-card">
            <h3 class="text-xl font-semibold text-gray-800 mb-4" data-i18n="ai_mentor.trading_summary">📊 Ringkasan Trading</h3>
            
            {% if session_data.trades %}
                <div class="space-y-2">
                    {% for trade in session_data.trades %}
                    <div class="trade-item {{ 'trade-profit' if trade.profit_loss > 0 else 'trade-loss' if trade.profit_loss < 0 else '' }}">
                        <div class="flex justify-between items-center">
                            <div>
                                <span class="font-medium">{{ trade.symbol }}</span>
                                <span class="text-sm text-gray-500 ml-2">{{ trade.type|upper }}</span>
                            </div>
                            <div class="text-right">
                                <div class="font-bold {{ 'profit-positive' if trade.profit_loss > 0 else 'profit-negative' if trade.profit_loss < 0 else 'text-gray-600' }}">
                                    ${{ "%.2f"|format(trade.profit_loss) }}
                                </div>
                                <div class="text-sm text-gray-500">
                                    {{ trade.open_time.strftime('%H:%M') if trade.open_time else 'N/A' }}
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            {% else %}
                <div class="text-center text-gray-500 py-8">
                    <i class="fas fa-chart-line text-4xl mb-4 opacity-50"></i>
                    <p data-i18n="ai_mentor.no_trades_recorded">Tidak ada trade yang tercatat untuk sesi ini</p>
                </div>
            {% endif %}
        </div>

        <!-- Market Context -->
        <div class="session-card">
            <h3 class="text-xl font-semibold text-gray-800 mb-4" data-i18n="ai_mentor.market_context">🌐 Konteks Pasar</h3>
            
            <div class="market-context">
                <h4 class="font-semibold mb-2" data-i18n="ai_mentor.market_conditions">Kondisi Pasar</h4>
                <p>{{ session_data.market_conditions|title if session_data.market_conditions else 'Normal' }}</p>
            </div>
            
            {% if session_data.personal_notes %}
            <div class="mt-4">
                <h4 class="font-semibold text-gray-700 mb-2" data-i18n="ai_mentor.personal_notes">📝 Catatan Personal</h4>
                <div class="bg-gray-50 p-3 rounded-lg">
                    <p class="text-gray-700">{{ session_data.personal_notes }}</p>
                </div>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- AI Analysis Sections -->
    {% if ai_report %}
    <div class="ai-section">
        <h3 class="text-xl font-semibold mb-4" data-i18n="ai_mentor.ai_mentor_report">🤖 Laporan AI Mentor</h3>
        <div class="prose max-w-none">
            {{ ai_report|safe }}
        </div>
    </div>
    {% endif %}

    {% if analysis %}
    <!-- Emotional Analysis -->
    {% if analysis.emosi_vs_performa %}
    <div class="ai-section">
        <h3 class="text-xl font-semibold mb-4" data-i18n="ai_mentor.emotional_analysis_vs_performance">💭 Analisis Emosi vs Performa</h3>
        <div class="emotion-analysis">
            <h4 class="font-semibold mb-2" data-i18n="ai_mentor.emotional_status">Status Emosi: {{ session_data.emotions|title if session_data.emotions else 'Tidak Tercatat' }}</h4>
            <p>{{ analysis.emosi_vs_performa.feedback if analysis.emosi_vs_performa.feedback else 'Analisis emosi tidak tersedia.' }}</p>
        </div>
        
        {% if analysis.emosi_vs_performa.saran %}
        <div class="mt-4">
            <h4 class="font-semibold text-gray-700 mb-2" data-i18n="ai_mentor.emotional_advice">💡 Saran Emosional</h4>
            <ul class="recommendation-list">
                {% if analysis.emosi_vs_performa.saran is string %}
                    <li>{{ analysis.emosi_vs_performa.saran }}</li>
                {% else %}
                    {% for saran in analysis.emosi_vs_performa.saran %}
                    <li>{{ saran }}</li>
                    {% endfor %}
                {% endif %}
            </ul>
        </div>
        {% endif %}
    </div>
    {% endif %}

    <!-- Recommendations -->
    {% if analysis.rekomendasi %}
    <div class="ai-section">
        <h3 class="text-xl font-semibold mb-4" data-i18n="ai_mentor.ai_recommendations">🎯 Rekomendasi AI</h3>
        <ul class="recommendation-list">
            {% if analysis.rekomendasi is string %}
                <li>{{ analysis.rekomendasi }}</li>
            {% else %}
                {% for rekomendasi in analysis.rekomendasi %}
                <li>{{ rekomendasi }}</li>
                {% endfor %}
            {% endif %}
        </ul>
    </div>
    {% endif %}

    <!-- Motivation -->
    {% if analysis.motivasi %}
    <div class="ai-section">
        <h3 class="text-xl font-semibold mb-4" data-i18n="ai_mentor.motivation_inspiration">🚀 Motivasi & Inspirasi</h3>
        <div class="ai-insight">
            <p class="text-lg font-medium text-blue-800">{{ analysis.motivasi }}</p>
        </div>
    </div>
    {% endif %}

    <!-- Learning Points -->
    {% if analysis.pembelajaran %}
    <div class="ai-section">
        <h3 class="text-xl font-semibold mb-4" data-i18n="ai_mentor.learning_points">📚 Poin Pembelajaran</h3>
        <div class="bg-green-50 border border-green-200 rounded-lg p-4">
            {% if analysis.pembelajaran is string %}
                <p class="text-green-800">{{ analysis.pembelajaran }}</p>
            {% else %}
                <ul class="list-disc list-inside text-green-800 space-y-1">
                    {% for poin in analysis.pembelajaran %}
                    <li>{{ poin }}</li>
                    {% endfor %}
                </ul>
            {% endif %}
        </div>
    </div>
    {% endif %}
    {% endif %}

    <!-- Action Buttons -->
    <div class="flex justify-center space-x-4 mt-8">
        <a href="/ai-mentor/history" class="bg-gray-600 text-white px-6 py-3 rounded-lg hover:bg-gray-700 transition-colors">
            <span data-i18n="ai_mentor.back_to_history_button">← Kembali ke Riwayat</span>
        </a>
        <a href="/ai-mentor" class="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors">
            <span data-i18n="ai_mentor.ai_mentor_dashboard">Dashboard AI Mentor</span>
        </a>
        <button onclick="generateNewAnalysis()" class="bg-purple-600 text-white px-6 py-3 rounded-lg hover:bg-purple-700 transition-colors">
            <span data-i18n="ai_mentor.reanalyze">🔄 Analisis Ulang</span>
        </button>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function generateNewAnalysis() {
    if (confirm('Yakin ingin membuat analisis AI baru untuk sesi ini?')) {
        // TODO: Implement re-analysis functionality
        fetch(`/ai-mentor/api/reanalyze-session`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                session_date: '{{ session_date }}'
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Gagal membuat analisis baru: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Terjadi kesalahan saat membuat analisis baru');
        });
    }
}

// Share functionality
function shareSession() {
    const url = window.location.href;
    if (navigator.share) {
        navigator.share({
            title: 'Trading Session {{ session_date }}',
            text: 'Lihat analisis AI Mentor untuk sesi trading ini',
            url: url
        });
    } else {
        // Fallback: copy to clipboard
        navigator.clipboard.writeText(url).then(() => {
            alert('Link berhasil disalin ke clipboard!');
        });
    }
}
</script>
{% endblock %}