{% extends 'base.html' %}


{% block title %}Result View{% endblock %}
{% block style %}
<style>
    .llm-advice-content {
        font-size: 1rem;
        color: #2d3748;
        line-height: 1.7;
        font-family: 'Segoe UI', 'Microsoft JhengHei', 'PingFang TC', sans-serif;
        background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
        padding: 24px;
        border-radius: 12px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        border: 1px solid #e2e8f0;
    }

    .llm-advice-content h5, .llm-advice-content h6 {
        color: #1a365d;
        background: linear-gradient(135deg, #3182ce 0%, #2c5282 100%);
        color: white;
        padding: 12px 16px;
        margin: 20px 0 16px 0;
        border-radius: 8px;
        font-weight: 600;
        font-size: 1.1rem;
        box-shadow: 0 2px 4px rgba(49, 130, 206, 0.2);
        position: relative;
    }

    .llm-advice-content h5::before, .llm-advice-content h6::before {
        content: "📊";
        margin-right: 8px;
        font-size: 1.2rem;
    }

    .llm-advice-content p {
        margin-bottom: 16px;
        text-align: left;
        color: #4a5568;
        font-weight: 400;
    }

    .llm-advice-content ul {
        margin: 16px 0;
        padding-left: 0;
    }

    .llm-advice-content li {
        margin-bottom: 8px;
        padding: 8px 12px;
        background: #f7fafc;
        border-left: 3px solid #3182ce;
        border-radius: 4px;
        list-style: none;
        color: #2d3748;
        transition: all 0.2s ease;
    }

    .llm-advice-content li:hover {
        background: #edf2f7;
        transform: translateX(2px);
    }

    .llm-advice-content strong {
        color: #e53e3e;
        font-weight: 600;
        background: linear-gradient(135deg, #fed7d7 0%, #feb2b2 100%);
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 0.95em;
    }

    .llm-advice-content em {
        color: #805ad5;
        font-style: italic;
        font-weight: 500;
    }

    #llm-advice-container .alert {
        border-radius: 12px;
        margin-bottom: 0;
        border: none;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    /* 響應式設計 */
    @media (max-width: 768px) {
        .llm-advice-content {
            padding: 16px;
            font-size: 0.95rem;
        }
        
        .llm-advice-content h5, .llm-advice-content h6 {
            font-size: 1rem;
            padding: 10px 12px;
        }
    }

    /* 載入動畫 */
    .llm-advice-content.loading {
        opacity: 0.7;
        transition: opacity 0.3s ease;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid" style="background-color: #eee;min-height:92%;position:relative;">
  <div class="container-fluid py-4">
    <div class="row d-flex justify-content-center align-items-center h-100">
      <div class="col-lg-12 col-xl-11">

        <div class="alert alert-light text-dark" role="alert">
          <div class="container">
            <div class="row">
              <div class="col-4">
                <strong>策略編號</strong>
              </div>
              <div class="col-6">
                {{ data.id|safe }}
              </div>
            </div>
            <hr>
            <div class="row">
              <div class="col-4">
                <strong>策略名稱</strong>
              </div>
              <div class="col-6">
                {{ data.name|safe }}
              </div>
            </div>
            <hr>
            <div class="row">
              <div class="col-4">
                <strong>建立者</strong>
              </div>
              <div class="col-6">
                {{ data.username|safe }}
              </div>
            </div>
            <hr>
            <div class="row">
              <div class="col-4">
                <strong>建立時間</strong>
              </div>
              <div class="col-6">
                {{ data.date|safe }}
              </div>
            </div>
            <hr>
            <div class="row">
              <div class="col-4">
                <strong>策略目標</strong>
              </div>
              <div class="col-6">
                {{ data.role|safe }}
              </div>
            </div>
            <hr>
            <div class="row">
              <div class="col-4">
                <strong>資產</strong>
              </div>
              <div class="col-6">
                {% for a in data.assets %}
                <span class="badge text-bg-warning asset" name="stock" value="{{ a|safe }}">{{ a|safe }}</span>
                {% endfor %}
                <a class="btn btn-outline-primary btn-sm" href="{{ url_for('copy_portfolio') }}">
                  複製投資組合
                </a>
              </div>
            </div>
            <div class="row">
              <button class="btn btn-secondary mt-3" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="false" aria-controls="collapseExample">
                  詳細資訊
              </button>
              <div class="collapse" id="collapse1">
                <div card="card card-body m-3">
                  <div class="p-1 table-responsive-sm table-responsive-md table-responsive-xl">
                      <table class="table caption-top">
                          <thead>
                              <tr>
                                  <th scope="col">年化報酬率</th>
                                  <th scope="col">年化夏普率</th>
                                  <th scope="col">年化波動率</th>
                                  <th scope="col">最大回落</th>
                                  <th scope="col">Alpha</th>
                                  <th scope="col">Beta</th>
                                  <th scope="col">VaR10</th>
                                  <th scope="col">R2</th>
                                  {% if data.role == '最大化效用函數' %}
                                  <th scope="col">Gamma</th>
                                  {% endif %}
                              </tr>
                          </thead>
                          <thead style="font-size: 1vmin'">
                              <tr>
                                  <td>{{ data.annual_ret }}</td>
                                  <td>{{ data.annual_sr }}</td>
                                  <td>{{ data.vol }}</td>
                                  <td>{{ data.mdd }}</td>
                                  <td>{{ data.alpha }}</td>
                                  <td>{{ data.beta }}</td>
                                  <td>{{ data.var10 }}</td>
                                  <td>{{ data.r2 }}</td>
                                  {% if data.role == '最大化效用函數' %}
                                  <td>{{ data.gamma }}</td>
                                  {% endif %}
                              </tr>
                          </thead>
                      </table>
                  </div>
              </div>
              </div>
            </div>
          </div>
        </div>
        <div class="card mt-3 py-2" style="border-radius: 10px;">
          <div class="card-body p-0" style="border-radius: 10px;">
            <div class="row justify-content-center font-bold text-xl">
                資產權重變化
            </div>
            <div class="mb-4" id="weight" style="max-height:50vh"></div>
            <div class="row justify-content-center font-bold text-xl">
                投組價值走勢
            </div>
            <div class="mb-4" id="price" style="max-height:60vh"></div>
            <div class="row justify-content-center font-bold text-xl">
                投組季報酬率
            </div>
            <div class="mb-4" id="bar" style="max-height:60vh"></div>
            <div class="row justify-content-center font-bold text-xl">
                🤖 AI 投資建議
            </div>
            <div class="card mb-4" style="border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
              <div class="card-body">
                <div id="llm-advice-container">
                  <div class="text-center text-muted">
                    <div class="spinner-border spinner-border-sm" role="status">
                      <span class="visually-hidden">Loading...</span>
                    </div>
                    <p class="mt-2">正在生成AI投資建議...</p>
                  </div>
                </div>
                <button id="refresh-advice" class="btn btn-outline-primary btn-sm mt-2" onclick="refreshLLMAdvice()">
                  🔄 重新生成建議
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    {# <div class="container mt-4">
      <form id="comment-form">
        <div class="form-group">
          <label for="username">輸入名稱:</label>
          <input type="text" class="form-control" id="username" placeholder="Anonymous" value="Anonymous">
        </div>
        <div class="form-group">
          <label for="comment">評論</label>
          <textarea class="form-control" id="comment" rows="3"></textarea>
        </div>
        <button type="submit" class="btn btn-primary">Add Comment</button>
      </form>
      <div id="comments" class="mt-4"></div>
    </div> #}
  </div>
</div>

{% endblock %}

{% block script %}
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script type="text/javascript">
    const wlayout = {
    'autosize': true,
    'barmode': 'relative',
    'title': {'text': ''}, 
    'xaxis': {'anchor': 'y', 'domain': [0.0, 1.0], 'title':''}, 
    'yaxis': {'anchor': 'x', 'domain': [0.0, 1.0], 'title':''},
    'margin': {'l': 50, 'r': 50, 't': 10, 'b': 50},
    'legend': {'yanchor': 'bottom', 'y': 1.3, 'xanchor': 'left', 'x': 0, 'orientation':'h',
                'font': {'size':8}
  }
  };
    const rlayout = {
      'autosize': true,
      'title': {'text': ''}, 
      'xaxis': {'anchor': 'y', 'domain': [0.0, 1.0], 'title':'', 'rangeslider': {'visible': true}
      }, 
      'yaxis': {'anchor': 'x', 'domain': [0.0, 1.0], 'title':''},
      'margin': {'l': 40, 'r': 20, 't': 30, 'b': 50},
      'legend': {'yanchor': 'top', 'y': 1.3, 'xanchor': 'left', 'x': 0.01, 'orientation':'h'}
    };
    const blayout = {
      'autosize': true,
      'title': {'text': ''}, 
      'xaxis': {'anchor': 'y', 'domain': [0.0, 1.0], 'title':''}, 
      'yaxis': {'anchor': 'x', 'domain': [0.0, 1.0], 'title':''},
      'margin': {'l': 40, 'r': 20, 't': 50, 'b': 70},
      'legend': {'yanchor': 'top', 'y': 1.3, 'xanchor': 'left', 'x': 0.01, 'orientation':'h'}
    };
    var w = {{ data.weight|safe }};
    var r = {{ data.ret|safe }};
    var b = {{ data.bar|safe }};
    Plotly.newPlot("weight", w.data, wlayout, {responsive: true});
    Plotly.newPlot("price", r.data, rlayout, {responsive: true});
    Plotly.newPlot("bar", b.data, blayout, {responsive: true});

    // LLM投資建議功能
    const strategyId = {{ data.id }};

    // 頁面載入時自動生成投資建議
    document.addEventListener('DOMContentLoaded', function() {
        refreshLLMAdvice();
    });

    async function refreshLLMAdvice() {
        const container = document.getElementById('llm-advice-container');
        const button = document.getElementById('refresh-advice');

        try {
            // 禁用按鈕
            button.disabled = true;
            button.innerHTML = '<span class="spinner-border spinner-border-sm"></span> 正在生成...';

            // 顯示loading狀態
            container.innerHTML = `
                <div class="text-center text-muted">
                    <div class="spinner-border spinner-border-sm" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p class="mt-2">正在生成AI投資建議...</p>
                </div>
            `;

            // 調用API
            const response = await fetch(`/api/llm_advice/${strategyId}`);
            const result = await response.json();

            if (result.success) {
                // 格式化並顯示建議
                const formattedAdvice = formatLLMAdvice(result.advice);
                container.innerHTML = formattedAdvice;
            } else {
                container.innerHTML = `
                    <div class="alert alert-warning">
                        <h6>⚠️ 無法生成投資建議</h6>
                        <p>${result.error}</p>
                        ${result.details ? `<small class="text-muted">${result.details}</small>` : ''}
                    </div>
                `;
            }
        } catch (error) {
            container.innerHTML = `
                <div class="alert alert-danger">
                    <h6>❌ 發生錯誤</h6>
                    <p>無法連接到投資建議服務，請稍後再試。</p>
                    <small class="text-muted">錯誤詳情：${error.message}</small>
                </div>
            `;
        } finally {
            // 恢復按鈕
            button.disabled = false;
            button.innerHTML = '🔄 重新生成建議';
        }
    }

    function formatLLMAdvice(advice) {
        // 將LLM回應格式化為HTML
        const lines = advice.split('\n');
        let html = '';

        for (let line of lines) {
            line = line.trim();
            if (!line) {
                html += '<br>';
                continue;
            }

            // 標題處理
            if (line.match(/^#{1,3}\s+/)) {
                const level = line.match(/^#+/)[0].length;
                const text = line.replace(/^#+\s+/, '');
                html += `<h${level + 4} class="mt-3 mb-2">${text}</h${level + 4}>`;
            }
            // 列表項目
            else if (line.startsWith('-') || line.startsWith('•')) {
                html += `<li>${line.substring(1).trim()}</li>`;
            }
            // 數字列表
            else if (line.match(/^\d+\./)) {
                html += `<li>${line}</li>`;
            }
            // 粗體文本
            else if (line.includes('**') && line.split('**').length >= 3) {
                const parts = line.split('**');
                html += `<p>${parts[0]}<strong>${parts[1]}</strong>${parts[2]}</p>`;
            }
            // 普通段落
            else {
                html += `<p>${line}</p>`;
            }
        }

        return `
            <div class="llm-advice-content" style="line-height: 1.6;">
                ${html}
            </div>
        `;
    }
</script>
{% endblock script %}