{% extends "base.html" %}
{% load static %}

{% block title %}舆情情感分析 - AgomTradePro{% endblock %}

{% block extra_css %}
<style>
.sentiment-dashboard {
    padding: var(--spacing-xl, 24px);
}

.sentiment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xl, 24px);
}

.sentiment-header h1 {
    margin: 0;
    font-size: 1.75rem;
    color: var(--color-text-primary);
}

.sentiment-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg, 16px);
    margin-bottom: var(--spacing-xl, 24px);
}

.sentiment-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg, 12px);
    padding: var(--spacing-lg, 16px);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
}

.sentiment-card.positive {
    border-left: 4px solid var(--color-success, #10b981);
}

.sentiment-card.negative {
    border-left: 4px solid var(--color-error, #ef4444);
}

.sentiment-card.neutral {
    border-left: 4px solid var(--color-warning, #f59e0b);
}

.sentiment-card-title {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm, 8px);
}

.sentiment-card-value {
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.sentiment-card-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: var(--spacing-xs, 4px);
}

.sentiment-chart-container {
    background: var(--color-surface);
    border-radius: var(--radius-lg, 12px);
    padding: var(--spacing-lg, 16px);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    margin-bottom: var(--spacing-xl, 24px);
}

.sentiment-chart-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: var(--spacing-md, 12px);
    color: var(--color-text-primary);
}

#sentimentChart {
    width: 100%;
    height: 300px;
}

.sentiment-status {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 8px);
    padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);
    border-radius: var(--radius-md, 8px);
    font-size: 0.875rem;
}

.sentiment-status.healthy {
    background: rgba(16, 185, 129, 0.1);
    color: var(--color-success, #10b981);
}

.sentiment-status.degraded {
    background: rgba(245, 158, 11, 0.1);
    color: var(--color-warning, #f59e0b);
}

.sentiment-status.unavailable {
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-error, #ef4444);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.error-message {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--color-error, #ef4444);
    color: var(--color-error, #ef4444);
    padding: var(--spacing-md, 12px);
    border-radius: var(--radius-md, 8px);
    margin-bottom: var(--spacing-lg, 16px);
}

.empty-state {
    text-align: center;
    padding: var(--spacing-xxl, 48px);
    color: var(--color-text-secondary);
}

.empty-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-md, 12px);
}

.btn-analyze {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm, 8px);
    padding: var(--spacing-sm, 8px) var(--spacing-lg, 16px);
    background: var(--color-primary);
    color: white;
    border-radius: var(--radius-md, 8px);
    text-decoration: none;
    transition: background-color 0.2s;
}

.btn-analyze:hover {
    background: var(--color-primary-dark);
}
</style>
{% endblock %}

{% block content %}
<div class="sentiment-dashboard">
    <div class="sentiment-header">
        <h1>舆情情感分析</h1>
        <div>
            {% if ai_available %}
            <span class="sentiment-status healthy">
                <span class="status-dot"></span>
                AI 服务可用
            </span>
            {% else %}
            <span class="sentiment-status degraded">
                <span class="status-dot"></span>
                AI 服务不可用
            </span>
            {% endif %}
            <a href="{% url 'sentiment:analyze' %}" class="btn-analyze">
                <i class="bi bi-cpu"></i> 情感分析
            </a>
        </div>
    </div>

    {% if error %}
    <div class="error-message">
        <i class="bi bi-exclamation-triangle"></i> {{ error }}
    </div>
    {% endif %}

    <!-- 最新情绪指数 -->
    {% if latest_index %}
    <div class="sentiment-cards">
        <div class="sentiment-card {% if latest_index.composite_index > 0.5 %}positive{% elif latest_index.composite_index < -0.5 %}negative{% else %}neutral{% endif %}">
            <div class="sentiment-card-title">综合情绪指数</div>
            <div class="sentiment-card-value">{{ latest_index.composite_index|floatformat:2 }}</div>
            <div class="sentiment-card-label">{{ latest_index.date }}</div>
        </div>
        <div class="sentiment-card {% if latest_index.news_sentiment > 0 %}positive{% elif latest_index.news_sentiment < 0 %}negative{% else %}neutral{% endif %}">
            <div class="sentiment-card-title">新闻情绪</div>
            <div class="sentiment-card-value">{{ latest_index.news_sentiment|floatformat:2 }}</div>
            <div class="sentiment-card-label">基于 {{ latest_index.news_count|default:0 }} 条新闻</div>
        </div>
        <div class="sentiment-card {% if latest_index.policy_sentiment > 0 %}positive{% elif latest_index.policy_sentiment < 0 %}negative{% else %}neutral{% endif %}">
            <div class="sentiment-card-title">政策情绪</div>
            <div class="sentiment-card-value">{{ latest_index.policy_sentiment|floatformat:2 }}</div>
            <div class="sentiment-card-label">基于 {{ latest_index.policy_events_count|default:0 }} 条政策事件</div>
        </div>
        <div class="sentiment-card neutral">
            <div class="sentiment-card-title">置信度</div>
            <div class="sentiment-card-value">{{ latest_index.confidence_level|floatformat:2 }}</div>
            <div class="sentiment-card-label">分析可信程度</div>
        </div>
    </div>

    <!-- 情绪趋势图 -->
    <div class="sentiment-chart-container">
        <div class="sentiment-chart-title">情绪趋势 (最近30天)</div>
        <div id="sentimentChart"></div>
    </div>

    {% else %}
    <div class="empty-state">
        <div class="empty-icon">📊</div>
        <p>暂无情绪指数数据</p>
        <p class="text-muted">请先进行情感分析以生成情绪指数</p>
    </div>
    {% endif %}
</div>

{% if recent_indices %}
<script src="{% static 'vendor/js/echarts.min.js' %}"></script>
<script>
(function() {
    const chartDom = document.getElementById('sentimentChart');
    if (!chartDom || typeof echarts === 'undefined') return;

    const chart = echarts.init(chartDom);

    const dates = [{% for idx in recent_indices %}'{{ idx.date }}'{% if not forloop.last %}, {% endif %}{% endfor %}];
    const compositeData = [{% for idx in recent_indices %}{{ idx.composite_index }}{% if not forloop.last %}, {% endif %}{% endfor %}];
    const newsData = [{% for idx in recent_indices %}{{ idx.news_sentiment }}{% if not forloop.last %}, {% endif %}{% endfor %}];
    const policyData = [{% for idx in recent_indices %}{{ idx.policy_sentiment }}{% if not forloop.last %}, {% endif %}{% endfor %}];

    const option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['综合指数', '新闻情绪', '政策情绪']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: dates.reverse()
        },
        yAxis: {
            type: 'value',
            min: -3,
            max: 3
        },
        series: [
            {
                name: '综合指数',
                type: 'line',
                data: compositeData.reverse(),
                smooth: true,
                lineStyle: { width: 3 }
            },
            {
                name: '新闻情绪',
                type: 'line',
                data: newsData.reverse(),
                smooth: true,
                lineStyle: { width: 2 }
            },
            {
                name: '政策情绪',
                type: 'line',
                data: policyData.reverse(),
                smooth: true,
                lineStyle: { width: 2 }
            }
        ]
    };

    chart.setOption(option);

    window.addEventListener('resize', function() {
        chart.resize();
    });
})();
</script>
{% endif %}
{% endblock %}