{% set metrics = report.metrics_json | from_json_object %}
{% set typical = report.typical_comments_json | from_json_object %}
{% set sentiment = metrics.get("sentiment", {}) %}
{% set top_labels = metrics.get("top_labels", []) %}
{% set sample_count = metrics.get("sample_count", 0) %}
{% set item_count = metrics.get("item_count") %}
{% set positive = sentiment.get("positive", {"count": 0, "pct": 0}) %}
{% set neutral = sentiment.get("neutral", {"count": 0, "pct": 0}) %}
{% set negative = sentiment.get("negative", {"count": 0, "pct": 0}) %}

{% if task.analysis_status == "insufficient" %}
  <div class="alert alert-warning">当前有效评论样本不足，AI 总结暂不可用。建议增加评论抓取数量后重新分析。</div>
{% endif %}

<div class="report-reading-layout">
  <section class="report-main-column">
    <section class="insight-card">
      <h2>核心结论</h2>
      <div class="insight-list">
        <p><span></span>{{ report.summary or "总结生成失败，请优先查看情绪分布、Top 标签和典型评论。" }}</p>
        <p><span></span>评论样本 {{ sample_count }} 条{% if item_count is not none %}，关联内容 {{ item_count }} 条{% endif %}，AI 成功率 {{ rate_percent(task.analysis_success_rate) }}%。</p>
        {% if top_labels %}
          <p><span></span>当前高频讨论方向集中在{% for label in top_labels[:3] %}{{ "、" if not loop.first }}{{ label.get("name") }}{% endfor %}。</p>
        {% else %}
          <p><span></span>暂无高频标签数据，建议结合评论明细人工复核。</p>
        {% endif %}
      </div>
    </section>

    <section class="representative-comments">
      <div class="panel-title-row">
        <div>
          <p class="section-kicker">COMMENTS</p>
          <h2>代表评论 · 典型评论</h2>
        </div>
        <span class="panel-note">按情绪和点赞综合筛选</span>
      </div>
      {% for key in ["positive", "neutral", "negative"] %}
        <article class="quote-card">
          <span class="soft-badge">{{ sentiment_label(key) }}</span>
          {% for comment in typical.get(key, []) %}
            <p>{{ comment.get("content") }}</p>
            <small>点赞 {{ comment.get("like_count", 0) }}</small>
          {% else %}
            <p>暂无{{ sentiment_label(key) }}代表评论</p>
          {% endfor %}
        </article>
      {% endfor %}
    </section>

    <section class="content-performance-card">
      <h2>内容表现</h2>
      <div class="performance-row">
        <div>
          <strong>评论样本</strong>
          <span>用于本次报告统计的有效评论</span>
        </div>
        <em>{{ sample_count }} 条</em>
      </div>
      {% if item_count is not none %}
        <div class="performance-row">
          <div>
            <strong>关联内容</strong>
            <span>参与热点级聚合的内容条目</span>
          </div>
          <em>{{ item_count }} 条</em>
        </div>
      {% endif %}
      <div class="performance-row">
        <div>
          <strong>高频标签</strong>
          <span>用于定位主要讨论方向</span>
        </div>
        <em>{{ top_labels | length }} 个</em>
      </div>
    </section>
  </section>

  <aside class="report-side-column">
    <section class="sentiment-sidepanel">
      <h2>情绪分布</h2>
      {% for key, item, class_name in [("positive", positive, "sentiment-positive"), ("neutral", neutral, "sentiment-neutral"), ("negative", negative, "sentiment-negative")] %}
        <div class="sentiment-row">
          <div class="progress-label-row">
            <span>{{ sentiment_label(key) }}</span>
            <span>{{ item.get("count", 0) }} 条（{{ item.get("pct", 0) }}%）</span>
          </div>
          <div class="progress report-progress" role="progressbar" aria-label="{{ sentiment_label(key) }}情绪占比" aria-valuenow="{{ item.get("pct", 0) }}" aria-valuemin="0" aria-valuemax="100">
            <div class="progress-bar {{ class_name }}" style="width: {{ item.get("pct", 0) }}%"></div>
          </div>
        </div>
      {% endfor %}
    </section>

    <section class="keyword-sidepanel">
      <h2>Top 标签 / 关键词</h2>
      {% if top_labels %}
        <div class="keyword-cloud">
          {% for label in top_labels %}
            <span>{{ label.get("name") }} ({{ label.get("count", 0) }})</span>
          {% endfor %}
        </div>
      {% else %}
        <p class="text-muted mb-0">暂无标签数据</p>
      {% endif %}
    </section>

    <section class="report-data-note">
      <h2>同一份报告数据</h2>
      <p>页面展示、Markdown 和 CSV 导出都应读取预生成报告，避免页面和文件结果不一致。</p>
      <div class="ghost-actions" aria-label="报告数据说明">
        <span>预生成报告</span>
        <span>结构化统计</span>
      </div>
    </section>
  </aside>
</div>