{% extends "layout.html" %}

{% block title %}首页 - 智能分析系统{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row mb-5">
        <div class="col-md-8 mx-auto text-center">
            <h1 class="display-4 mb-4">智能分析系统</h1>
            <p class="lead mb-4">基于人工智能的多维度股票分析平台，为您提供专业的投资决策支持</p>
            <div class="d-grid gap-2 d-md-flex justify-content-md-center">
                <a href="/dashboard" class="btn btn-primary btn-lg px-4 me-md-2">
                    <i class="fas fa-chart-line"></i> 开始分析
                </a>
                <button type="button" class="btn btn-outline-secondary btn-lg px-4" data-bs-toggle="modal" data-bs-target="#quickAnalysisModal">
                    <i class="fas fa-search"></i> 快速分析
                </button>
            </div>
        </div>
    </div>

    <div class="row mb-5">
        <div class="col-md-4 mb-4">
            <div class="card h-100">
                <div class="card-body text-center py-5">
                    <i class="fas fa-chart-pie fa-3x text-primary mb-3"></i>
                    <h4>多维度分析</h4>
                    <p class="text-muted">技术面、基本面、资金面多角度评估，全方位解读股票价值</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-4">
            <div class="card h-100">
                <div class="card-body text-center py-5">
                    <i class="fas fa-robot fa-3x text-primary mb-3"></i>
                    <h4>AI智能辅助</h4>
                    <p class="text-muted">基于先进算法的智能分析，提供专业级投资建议和趋势预测</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-4">
            <div class="card h-100">
                <div class="card-body text-center py-5">
                    <i class="fas fa-briefcase fa-3x text-primary mb-3"></i>
                    <h4>投资组合管理</h4>
                    <p class="text-muted">智能构建和评估投资组合，优化资产配置，控制风险</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 替换index.html中的功能列表部分 -->
    <div class="row mb-5">
        <div class="col-md-10 mx-auto">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">主要功能</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item d-flex align-items-center">
                                    <i class="fas fa-chart-line text-primary me-3"></i>
                                    <div>
                                        <strong>单股智能分析</strong>
                                        <p class="text-muted mb-0">多维度评估股票表现，提供精准分析</p>
                                    </div>
                                </li>
                                <li class="list-group-item d-flex align-items-center">
                                    <i class="fas fa-search text-primary me-3"></i>
                                    <div>
                                        <strong>市场扫描</strong>
                                        <p class="text-muted mb-0">筛选高评分股票，发现潜在投资机会</p>
                                    </div>
                                </li>
                                <li class="list-group-item d-flex align-items-center">
                                    <i class="fas fa-robot text-primary me-3"></i>
                                    <div>
                                        <strong>AI智能问答</strong>
                                        <p class="text-muted mb-0">提供智能分析解读，解答投资疑问</p>
                                    </div>
                                </li>
                                <li class="list-group-item d-flex align-items-center">
                                    <i class="fas fa-file-invoice-dollar text-success me-3"></i>
                                    <div>
                                        <strong>基本面分析</strong>
                                        <p class="text-muted mb-0">透视公司财务健康和增长潜力</p>
                                    </div>
                                </li>
                                <li class="list-group-item d-flex align-items-center">
                                    <i class="fas fa-money-bill-wave text-info me-3"></i>
                                    <div>
                                        <strong>资金流向分析</strong>
                                        <p class="text-muted mb-0">跟踪主力资金、北向资金和机构持仓</p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item d-flex align-items-center">
                                    <i class="fas fa-briefcase text-primary me-3"></i>
                                    <div>
                                        <strong>投资组合分析</strong>
                                        <p class="text-muted mb-0">评估组合表现，提供优化建议</p>
                                    </div>
                                </li>
                                <li class="list-group-item d-flex align-items-center">
                                    <i class="fas fa-exclamation-triangle text-danger me-3"></i>
                                    <div>
                                        <strong>风险预警</strong>
                                        <p class="text-muted mb-0">监控技术指标，及时预警潜在风险</p>
                                    </div>
                                </li>
                                <li class="list-group-item d-flex align-items-center">
                                    <i class="fas fa-lightbulb text-warning me-3"></i>
                                    <div>
                                        <strong>情景预测</strong>
                                        <p class="text-muted mb-0">分析多种市场情景，提前布局应对</p>
                                    </div>
                                </li>
                                <li class="list-group-item d-flex align-items-center">
                                    <i class="fas fa-industry text-secondary me-3"></i>
                                    <div>
                                        <strong>行业指数分析</strong>
                                        <p class="text-muted mb-0">洞察行业格局和板块轮动机会</p>
                                    </div>
                                </li>
                                <li class="list-group-item d-flex align-items-center">
                                    <i class="fas fa-chart-area text-primary me-3"></i>
                                    <div>
                                        <strong>可视化图表</strong>
                                        <p class="text-muted mb-0">直观展示分析结果，辅助决策</p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 在index.html的功能卡片部分（现有的卡片之后）添加新卡片 -->
    <div class="row mb-5">
        <!-- 保留原有的三个卡片 -->
        <div class="col-md-4 mb-4">
            <div class="card h-100">
                <div class="card-body text-center py-5">
                    <i class="fas fa-chart-pie fa-3x text-primary mb-3"></i>
                    <h4>多维度分析</h4>
                    <p class="text-muted">技术面、基本面、资金面多角度评估，全方位解读股票价值</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-4">
            <div class="card h-100">
                <div class="card-body text-center py-5">
                    <i class="fas fa-robot fa-3x text-primary mb-3"></i>
                    <h4>AI智能辅助</h4>
                    <p class="text-muted">基于先进算法的智能分析，提供专业级投资建议和趋势预测</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-4">
            <div class="card h-100">
                <div class="card-body text-center py-5">
                    <i class="fas fa-briefcase fa-3x text-primary mb-3"></i>
                    <h4>投资组合管理</h4>
                    <p class="text-muted">智能构建和评估投资组合，优化资产配置，控制风险</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加新的功能卡片行 -->
    <div class="row mb-5">
        <div class="col-md-4 mb-4">
            <div class="card h-100">
                <div class="card-body text-center py-5">
                    <i class="fas fa-file-invoice-dollar fa-3x text-success mb-3"></i>
                    <h4>基本面透视</h4>
                    <p class="text-muted">财务指标分析、估值评估、成长性预测，揭示公司内在价值</p>
                    <a href="/fundamental" class="btn btn-outline-success mt-2">开始分析</a>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-4">
            <div class="card h-100">
                <div class="card-body text-center py-5">
                    <i class="fas fa-money-bill-wave fa-3x text-info mb-3"></i>
                    <h4>资金流向分析</h4>
                    <p class="text-muted">主力资金、北向资金、机构持仓变化，把握资金动向</p>
                    <a href="/capital_flow" class="btn btn-outline-info mt-2">查看资金</a>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-4">
            <div class="card h-100">
                <div class="card-body text-center py-5">
                    <i class="fas fa-crystal-ball fa-3x text-warning mb-3"></i>
                    <h4>多情景预测</h4>
                    <p class="text-muted">乐观、中性、悲观三种市场情景，助您提前布局应对不同市场环境</p>
                    <a href="/scenario_predict" class="btn btn-outline-warning mt-2">查看预测</a>
                </div>
            </div>
        </div>
    </div>

    <div class="row mb-5">
        <div class="col-md-4 mb-4">
            <div class="card h-100">
                <div class="card-body text-center py-5">
                    <i class="fas fa-exclamation-triangle fa-3x text-danger mb-3"></i>
                    <h4>风险监控</h4>
                    <p class="text-muted">多维度风险预警，帮助您及时发现潜在风险，保护投资安全</p>
                    <a href="/risk_monitor" class="btn btn-outline-danger mt-2">查看风险</a>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-4">
            <div class="card h-100">
                <div class="card-body text-center py-5">
                    <i class="fas fa-question-circle fa-3x text-purple mb-3"></i>
                    <h4>智能问答</h4>
                    <p class="text-muted">AI助手随时回答您关于股票的各种问题，专业知识触手可及</p>
                    <a href="/qa" class="btn btn-outline-primary mt-2">开始提问</a>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-4">
            <div class="card h-100">
                <div class="card-body text-center py-5">
                    <i class="fas fa-industry fa-3x text-secondary mb-3"></i>
                    <h4>行业指数分析</h4>
                    <p class="text-muted">行业整体分析与板块轮动把握，发现行业机会，洞察市场格局</p>
                    <a href="/industry_analysis" class="btn btn-outline-secondary mt-2">查看行业</a>
                </div>
            </div>
        </div>
    </div>

    <!-- 替换index.html底部的导航按钮区域 -->
    <div class="row">
        <div class="col-md-10 mx-auto text-center">
            <h4 class="mb-4">开始使用智能分析系统</h4>
            <div class="d-grid gap-2 d-md-flex justify-content-md-center flex-wrap">
                <a href="/dashboard" class="btn btn-primary btn-lg px-4 me-md-2 mb-2">
                    <i class="fas fa-chart-line"></i> 智能仪表盘
                </a>
                <a href="/fundamental" class="btn btn-success btn-lg px-4 me-md-2 mb-2">
                    <i class="fas fa-file-invoice-dollar"></i> 基本面分析
                </a>
                <a href="/capital_flow" class="btn btn-info btn-lg px-4 me-md-2 mb-2">
                    <i class="fas fa-money-bill-wave"></i> 资金流向
                </a>
                <a href="/market_scan" class="btn btn-secondary btn-lg px-4 me-md-2 mb-2">
                    <i class="fas fa-search"></i> 市场扫描
                </a>
                <a href="/scenario_predict" class="btn btn-warning btn-lg px-4 me-md-2 mb-2">
                    <i class="fas fa-crystal-ball"></i> 情景预测
                </a>
                <a href="/portfolio" class="btn btn-dark btn-lg px-4 me-md-2 mb-2">
                    <i class="fas fa-briefcase"></i> 投资组合
                </a>
                <a href="/qa" class="btn btn-primary btn-lg px-4 me-md-2 mb-2">
                    <i class="fas fa-question-circle"></i> 智能问答
                </a>
                <a href="/risk_monitor" class="btn btn-danger btn-lg px-4 me-md-2 mb-2">
                    <i class="fas fa-exclamation-triangle"></i> 风险监控
                </a>
            </div>
        </div>
    </div>
</div>

<!-- 快速分析模态框 -->
<div class="modal fade" id="quickAnalysisModal" tabindex="-1" aria-labelledby="quickAnalysisModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="quickAnalysisModalLabel">快速股票分析</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="quick-analysis-form">
                    <div class="mb-3">
                        <label for="quick-stock-code" class="form-label">股票代码</label>
                        <input type="text" class="form-control" id="quick-stock-code" placeholder="例如: 600519" required>
                    </div>
                    <div class="mb-3">
                        <label for="quick-market-type" class="form-label">市场类型</label>
                        <select class="form-select" id="quick-market-type">
                            <option value="A" selected>A股</option>
                            <option value="HK">港股</option>
                            <option value="US">美股</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="quick-analysis-btn">开始分析</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    $(document).ready(function() {
        // 快速分析按钮点击事件
        $('#quick-analysis-btn').click(function() {
            const stockCode = $('#quick-stock-code').val().trim();
            const marketType = $('#quick-market-type').val();

            if (!stockCode) {
                alert('请输入股票代码');
                return;
            }

            // 跳转到股票详情页
            window.location.href = `/stock_detail/${stockCode}?market_type=${marketType}`;
        });

        // 回车键提交表单
        $('#quick-stock-code').keypress(function(e) {
            if (e.which === 13) {
                $('#quick-analysis-btn').click();
                return false;
            }
        });
    });
</script>
{% endblock %}